Member Avatar for j4mes_bond25

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>
CSS_Layout.doc (24 KB)
Edited by TrustyTony because: fixed formatting
  • 3 Contributors
  • 4 Replies
  • 134 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by DaveSW
Member Avatar for Sailor_Jerry

There are many other ways to achieve the desired format. The code below should be close to what you are trying to do.

div{text-align:center; }
div.logo{width:20%; height:5em; background-color:yellow; float:left;}
div.topMenu{width:80%; height:5em; background-color:green; float:right;}
div.leftMenu{width:20%; background-color:black; float:left; height:20em;}
div.content{width:80%; background-color:yellow; float:right; height:15em;}
div.bottomMenu{width:80%; height:5em; background-color:green; float:right;}

<div class="logo">
LOGO
</div>
<div class="topMenu">
Top Menu
</div>
<div class="leftMenu">
Left Menu
</div>
<div>
<div class="content">
Content
</div>
<div class="bottomMenu">
Bottom Menu
</div>
<div>
Member Avatar for j4mes_bond25

Hi,

Thanks for your reply & is indeed greatly appreciated.

It worked perfectly well after a little more pain in the neck but the reward was enormous bearing in mind that web designing has always been my addiction.

In the mean time, since you're around & are quite comfy with CSS, I wonder where exactly do I place the "background image" i.e. whether in .CSS file or in the .HTML file, since I would like to share this particular background in ALL the .HTML pages.

Could I also ask about any difference between "%" use (in setting height & width, as I had been doing in my codes) & "em" as you were using in the codes you'd provided.

Lastly, in order to see any particular page's "content" view, I simply choose "View Source" in my Internet Explorer. However, to see "layout" view i.e. it's "css" file, I check the link within "index.html" page, for example & then once I get to know which particular "css" file it's linked with say, "main.css", I simply save it by typing "www.rewboss.com/main.css".

I wonder if I like the layout of other websites over the Internet, is the above way the only way to check their content & css file OR would you have any better recommendation for me ???

Member Avatar for j4mes_bond25

I would also like to mention that why is that simply by NOT putting this tiny little "text" code:

div{text-align:center;}

makes a huge difference (by making the logo's background colour disappear but then again why does missing the "text" code make difference in "background colour", I wonder), since I never considered looking into "text" aspect as yet, as I was merely focusing more towards the "design" bit.

Member Avatar for DaveSW

There's a lot of questions in there...
% is related to the size of it's container, em relates to the font size.
To apply a background to all html files you need this in your stylesheet:
body { background: #fff url("image.gif") 0% 0% repeat-y;

There are innumerable variations of this - you can leave out the color, leave out the repeat to have it tile both ways, switch the 0% 0% to center, left, right, top, bottom...

I'm afraid the question in your second post has quite lost me...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.