Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › HTML5/CSS - Linking pages?
New Posts  All Forums:Forum Nav:

HTML5/CSS - Linking pages?

post #1 of 8
Thread Starter 
Hi,

I am creating a website as a task given to me but I am stuck with a couple of things. I have created an index page for my website and also some other pages which are on the index page, when I click on the links it just brings me to a page saying "not available" or something like that.

I am not sure what I am doing wrong any help would be appreciated. smile.gif

also I need to make a website that looks like the following, It needs to include use one and three elements with id’s. also
a container layer to create a liquid layout. I am not sure where I can find tutorials on this etc, any help would be great !













Thanks and please feel free too PM if you think you could help by looking at my code or folder structure, etc.

Thanks again!
post #2 of 8
You could post your code, and names of the subpages. That would help us diagnose the issue.
post #3 of 8
Thread Starter 
Thanks for your attempt to help!

But I have seemed to of figured it out.

Thanks again.

PS: still having trouble with the crabs one though
post #4 of 8
As herkalurk said above. If you could post your code, and directory structure that would be great
Psylem Seeker
(23 items)
 
  
CPUMotherboardGraphicsRAM
i5-760 @ 4.0 Ghz / 1.28v Asus P7P55D-E Premium Powercolor HD7870 Corsair Vengeance LP 1600Mhz (4x4GB) 
Hard DriveHard DriveHard DriveHard Drive
Seagate Barracuda 500GB Toshiba 2.5in External 500GB Toshiba 1TB StorE Alu2 External Western Digital WD Blue 1TB 
Hard DriveOptical DriveCoolingOS
Western Digital WD Blue 1TB External DVD Writer Thermalright Silver Arrow OpenSUSE Leap 42.1 
OSMonitorKeyboardPower
Windows 7 Ultimate x64 SyncMaster P2350 @ 1920x1080 (Dead: Using 15in ... Microsoft All-In-One + Cheapie Logitech kb Seasonic M12II 750 
CaseMouseAudioAudio
Coolermaster 690-II Advanced Cheapie Logitech Ozaki WoW WR580 2.2ch Beyerdynamic DT770 Pro 
OtherOtherOther
UMVC3 Hori Fight Stick Launchpad S + Launch Control Focusrite Scarlett 2i4 (incoming) 
  hide details  
Reply
Psylem Seeker
(23 items)
 
  
CPUMotherboardGraphicsRAM
i5-760 @ 4.0 Ghz / 1.28v Asus P7P55D-E Premium Powercolor HD7870 Corsair Vengeance LP 1600Mhz (4x4GB) 
Hard DriveHard DriveHard DriveHard Drive
Seagate Barracuda 500GB Toshiba 2.5in External 500GB Toshiba 1TB StorE Alu2 External Western Digital WD Blue 1TB 
Hard DriveOptical DriveCoolingOS
Western Digital WD Blue 1TB External DVD Writer Thermalright Silver Arrow OpenSUSE Leap 42.1 
OSMonitorKeyboardPower
Windows 7 Ultimate x64 SyncMaster P2350 @ 1920x1080 (Dead: Using 15in ... Microsoft All-In-One + Cheapie Logitech kb Seasonic M12II 750 
CaseMouseAudioAudio
Coolermaster 690-II Advanced Cheapie Logitech Ozaki WoW WR580 2.2ch Beyerdynamic DT770 Pro 
OtherOtherOther
UMVC3 Hori Fight Stick Launchpad S + Launch Control Focusrite Scarlett 2i4 (incoming) 
  hide details  
Reply
post #5 of 8
How liquid does your liquid layout need to be? You can do a simple one using a percentage width on the container element.
The Clunker
(11 items)
 
Lenovo Y40
(6 items)
 
 
CPUMotherboardGraphicsRAM
Core 2 Quad Q8400 Asus P5P43TD Powercolor 7950 4GB Patriot Viper 
Hard DriveHard DriveCoolingOS
80GB WD Caviar Blue 500GB WD Caviar Black Coolermaster Hyper TX Windows 7 Home Premium 64-bit 
MonitorPowerCase
20" Samsung Corsair CX600M Antec 300 
CPUGraphicsRAMHard Drive
i7-4510U R9 M275 2GB 8GB @ 1600MHz 500+8GB 5400rpm SSHD 
OSMonitor
Windows 8.1 14" 1080p 
  hide details  
Reply
The Clunker
(11 items)
 
Lenovo Y40
(6 items)
 
 
CPUMotherboardGraphicsRAM
Core 2 Quad Q8400 Asus P5P43TD Powercolor 7950 4GB Patriot Viper 
Hard DriveHard DriveCoolingOS
80GB WD Caviar Blue 500GB WD Caviar Black Coolermaster Hyper TX Windows 7 Home Premium 64-bit 
MonitorPowerCase
20" Samsung Corsair CX600M Antec 300 
CPUGraphicsRAMHard Drive
i7-4510U R9 M275 2GB 8GB @ 1600MHz 500+8GB 5400rpm SSHD 
OSMonitor
Windows 8.1 14" 1080p 
  hide details  
Reply
post #6 of 8
Thread Starter 
Sorry guys, been away.

My code is the following: I am not sure if this is correct at all..
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="./css/practest.css"/>
<title>Computer</title>
</head>
<body>

<div class="container">
<header>
<br/>
<h1>Computer</h1>
</header>
<nav>
</nav>
<section>
<br/>
<br/>
<br/>
<img src="./images/smiley.jpg" alt = "smiley"/>
<div class="tester"></div>
</section>
<aside>
</aside>
<footer>
</footer>
</div>



</body>
</html>
Code:
.container {width:80%;max-width:1260px;min-width:780px;margin:0 auto;}
header{background-color:blue;height:100px;width:100%;text-align:center;}
nav{float:left;background-color:red;height:548px;width:10%;}
section{float:left;background-color:yellow;height:548px;width:80%;text-align:center;position:relative;}
aside{float:left;background-color:red;height:548px;width:10%;}
footer{float:left;background-color:blue;height:100px;width:100%;}
h1{color:white;}
td {text-align:center;}
td {height:50px;vertical-align:middle;}
td{padding:50px;}
th{padding:50px;}
th{background-color:white;color:white;}
That is what I got basically. just got smiley images, not sure how to have to sections next to each other?

Thanks
post #7 of 8
http://jsfiddle.net/NeM2Z/1/

Here's a quick demo. Basically you just need to change the display property of the elements you want next to each other to "inline-block."

EDIT: Also note the "font-size: 0" on the container element. This is because inline block will insert spaces based on font size, so you will need to change the font size for any child elements.
Edited by Tnt6200 - 4/4/14 at 3:38pm
The Clunker
(11 items)
 
Lenovo Y40
(6 items)
 
 
CPUMotherboardGraphicsRAM
Core 2 Quad Q8400 Asus P5P43TD Powercolor 7950 4GB Patriot Viper 
Hard DriveHard DriveCoolingOS
80GB WD Caviar Blue 500GB WD Caviar Black Coolermaster Hyper TX Windows 7 Home Premium 64-bit 
MonitorPowerCase
20" Samsung Corsair CX600M Antec 300 
CPUGraphicsRAMHard Drive
i7-4510U R9 M275 2GB 8GB @ 1600MHz 500+8GB 5400rpm SSHD 
OSMonitor
Windows 8.1 14" 1080p 
  hide details  
Reply
The Clunker
(11 items)
 
Lenovo Y40
(6 items)
 
 
CPUMotherboardGraphicsRAM
Core 2 Quad Q8400 Asus P5P43TD Powercolor 7950 4GB Patriot Viper 
Hard DriveHard DriveCoolingOS
80GB WD Caviar Blue 500GB WD Caviar Black Coolermaster Hyper TX Windows 7 Home Premium 64-bit 
MonitorPowerCase
20" Samsung Corsair CX600M Antec 300 
CPUGraphicsRAMHard Drive
i7-4510U R9 M275 2GB 8GB @ 1600MHz 500+8GB 5400rpm SSHD 
OSMonitor
Windows 8.1 14" 1080p 
  hide details  
Reply
post #8 of 8
May be a tad late, but whenever i hear people new to HTML and links with "page does not exist" , 90% of the time its them using a Static path and when they switch computers it breaks, and the other 10% its overlooking the little things in relative paths.
Zev's Comp
(15 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i5-2500K Sandy Bridge 3.3GHz GIGABYTE GA-Z68X-UD3H-B3 LGA 1155 Intel Z68 HDM... GeForce GTX 750 Ti G.SKILL Ripjaws X Series 8GB 
Hard DriveHard DriveHard DrivePower
1TB HDD 64GB SSD (Used for SRT) 500 GB. Antec BP550 Plus 550W Continuous Power ATX12V V... 
Case
COOLER MASTER ELITE 335 RC-335-KKN1-GP Black S... 
  hide details  
Reply
Zev's Comp
(15 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i5-2500K Sandy Bridge 3.3GHz GIGABYTE GA-Z68X-UD3H-B3 LGA 1155 Intel Z68 HDM... GeForce GTX 750 Ti G.SKILL Ripjaws X Series 8GB 
Hard DriveHard DriveHard DrivePower
1TB HDD 64GB SSD (Used for SRT) 500 GB. Antec BP550 Plus 550W Continuous Power ATX12V V... 
Case
COOLER MASTER ELITE 335 RC-335-KKN1-GP Black S... 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › HTML5/CSS - Linking pages?