CSS Layout Coding ???

j4mes_bond25 · 04-01-2006, 06:18 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>

JohnnyPotseed · 04-03-2006, 10:56 PM

Your code, as presented, is rather confusing. I don't understand why you have the css enclosed in an html document. Is all of the code a single file, or two seperate files?

Here is a link that should help get you started. Max Design

j4mes_bond25 · 04-04-2006, 04:47 AM

Quote:

Originally posted by JohnnyPotseed
Your code, as presented, is rather confusing. I don't understand why you have the css enclosed in an html document. Is all of the code a single file, or two seperate files?

Here is a link that should help get you started. Max Design

Hi, these two CSS & HTML codes are in 2 DIFFERENT files, but for the sake of readers here to be able to see the codes of these BOTH files, I simply copied & pasted the codes of these BOTH files here.

Thanks for the link. It's rather helpful.

Member Login