Ad:

HTML and CSS Discussion Thread
Marked Solved
Views: 3648

Apr 1st, 2006

CSS Layout Coding ???

Expand Post »

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 Files

CSS Layout.doc (24.0 KB, 30 views)

Similar Threads

10 CSS Layout Templates For You To Practice in Site Layout and Usability
ASP display data in 3 col & rows using CSS layout in ASP
Layout in CSS in HTML and CSS

j4mes_bond25

Reputation Points: 10

Solved Threads: 0

Junior Poster in Training

Offline

90 posts
since Jan 2006

Permalink

Apr 2nd, 2006

Re: CSS Layout Coding ???

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

HTML and CSS Syntax (Toggle Plain Text)
 
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>
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>

Last edited by tgreer; Apr 2nd, 2006 at 10:38 am.

Sailor_Jerry

Reputation Points: 13

Solved Threads: 2

Junior Poster in Training

Offline

88 posts
since Aug 2005

Permalink

Apr 2nd, 2006

Re: CSS Layout Coding ???

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 ???

j4mes_bond25

Reputation Points: 10

Solved Threads: 0

Junior Poster in Training

Offline

90 posts
since Jan 2006

Permalink

Apr 2nd, 2006

Re: CSS Layout Coding ???

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.

j4mes_bond25

Reputation Points: 10

Solved Threads: 0

Junior Poster in Training

Offline

90 posts
since Jan 2006

Permalink

Apr 5th, 2006

Re: CSS Layout Coding ???

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...

DaveSW

Reputation Points: 54

Solved Threads: 20

Master Poster

Offline

765 posts
since Jul 2004

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: is BB Code html?

Next Thread in HTML and CSS Forum Timeline: CSS Horizontal Drop-down Menu ???

DaniWeb Message

Cancel Changes

User Name
Password