CSS Layout Help ???

j4mes_bond25 · 04-01-2006, 11:07 PM

I'm building my very first CSS page & wonder if anyone around into it could possibly help me get the layout as seen in the attached file.

Following are the codes that I've worked on for the whole Saturday afternoon & evening but still failed to achieve the EXACT result I want.

CSS CODE

/* CSS Document */

<html>
<head>
<style type="text/css">

/* Div */

div.screen
{
width:100%;
border:thin solid none;
}

div.topMenu
{
background-color:red;
margin-left:0%;
width:83%;
padding:1%;
position:absolute;
top:5%;
}

div.bottomMenu
{
background-color:blue;
margin-left:0%;
width:83%;
padding:1%;
position:absolute;
bottom:5%;
}

div.content
{
background-color:white;
border:dotted;
padding:1%;
margin:7% 0% 0% 16%;
}

div.leftMenu
{
background-color:#CCCCCC;
width:5%;
padding:5%;
margin-top:5%;
float:left;
}
</style>
</head>

<body>

/* Background */

{background-color:#000000}

/* Anchor */

a:link {color:#FF0000; text-decoration:none}
a:visited {color:#FF00FF}
a:hover {color:#FFFF00; font-size: monospace}
a:active {color:#00FFFF}

/* Paragraph */

p
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:medium;
font-weight:normal;
color:#0000FF;
}

/* Headings */

h1
{
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:bold;
color:#FF0000;
text-decoration:underline
}

/* Pseudo elements */

p.firstLetter:first-letter {color:#33CC00; font-size:150%}
p.firstLine:first-line {color:#00FF00}

</body>
</html>

HOME.HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Alcohol - Main Page</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>

<div class="topMenu">
Top Menu
</div>

<div class="bottomMenu">
Bottom Menu
</div>

<div class="leftMenu">
Left Menu
</div>

<div class="content">
Content
</div>

</body>
</html>

sweetcheeks69 · 04-01-2006, 11:13 PM

Hiya mate,

I personally wouldn't want to try and interpret your CSS issue, cos at present I am a HTML bod more than anything else. However, I have found the following site very useful and user friendly...

http://www.webdesignfromscratch.com/css.cfm

Give it a shot and let me know how you get on...

04-01-2006, 11:07 PM	#1 (permalink)
j4mes_bond25 Bronze Member Join Date: Jun 2005 Location: Non-exotic city of Leicester from the Land of Hope & Glory Age: 27 Posts: 48	CSS Layout Help ??? I'm building my very first CSS page & wonder if anyone around into it could possibly help me get the layout as seen in the attached file. Following are the codes that I've worked on for the whole Saturday afternoon & evening but still failed to achieve the EXACT result I want. CSS CODE /* CSS Document / <html> <head> <style type="text/css"> / Div / div.screen { width:100%; border:thin solid none; } div.topMenu { background-color:red; margin-left:0%; width:83%; padding:1%; position:absolute; top:5%; } div.bottomMenu { background-color:blue; margin-left:0%; width:83%; padding:1%; position:absolute; bottom:5%; } div.content { background-color:white; border:dotted; padding:1%; margin:7% 0% 0% 16%; } div.leftMenu { background-color:#CCCCCC; width:5%; padding:5%; margin-top:5%; float:left; } </style> </head> <body> / Background / {background-color:#000000} / Anchor / a:link {color:#FF0000; text-decoration:none} a:visited {color:#FF00FF} a:hover {color:#FFFF00; font-size: monospace} a:active {color:#00FFFF} / Paragraph / p { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:medium; font-weight:normal; color:#0000FF; } / Headings / h1 { font-family:Georgia, "Times New Roman", Times, serif; font-weight:bold; color:#FF0000; text-decoration:underline } / Pseudo elements / p.firstLetter:first-letter {color:#33CC00; font-size:150%} p.firstLine:first-line {color:#00FF00} </body> </html> HOME.HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <title>Alcohol - Main Page</title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <div class="topMenu"> Top Menu </div> <div class="bottomMenu"> Bottom Menu </div> <div class="leftMenu"> Left Menu </div> <div class="content"> Content </div> </body> </html> Attached Images Last edited by j4mes_bond25; 04-01-2006 at 11:14 PM.*

04-01-2006, 11:13 PM	#2 (permalink)
sweetcheeks69 Bronze Member Join Date: Feb 2005 Location: Southampton, UK Age: 25 Posts: 48	Hiya mate, I personally wouldn't want to try and interpret your CSS issue, cos at present I am a HTML bod more than anything else. However, I have found the following site very useful and user friendly... http://www.webdesignfromscratch.com/css.cfm Give it a shot and let me know how you get on... __________________ If pro is opposite to con, does that make congress opposite to progress? CPU - 2.67GHz P4 / 1.25Gb DDR RAM 80GB SATA HD + 320GB Seagate External LG CD/DVD +/- R/RW/RAM Lightscribe + CD/DVD +/- R/RW ATI Sapphire 256MB Graphics / 19" WXGA Advent LCD 5.1 Sound / Logitech MX3000 Wireless Laser Desktop

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode