HTML and CSS RSS HTML and CSS RSS

CSS Layout Coding ???

Thread Solved

•
•
Join Date: Jan 2006
Posts: 89
Reputation: j4mes_bond25 is an unknown quantity at this point 
Solved Threads: 0
j4mes_bond25's Avatar
j4mes_bond25 j4mes_bond25 is offline Offline
Junior Poster in Training

CSS Layout Coding ???

 
0
  #1
Apr 1st, 2006
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
File Type: doc CSS Layout.doc (24.0 KB, 11 views)
Nope, I'm NOT God, but I'm British (which is the next best thing ;)
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2005
Posts: 75
Reputation: Sailor_Jerry is an unknown quantity at this point 
Solved Threads: 2
Sailor_Jerry's Avatar
Sailor_Jerry Sailor_Jerry is offline Offline
Junior Poster in Training

Re: CSS Layout Coding ???

 
0
  #2
Apr 2nd, 2006
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) 
  1.  
  2. div{text-align:center; }
  3. div.logo{width:20%; height:5em; background-color:yellow; float:left;}
  4. div.topMenu{width:80%; height:5em; background-color:green; float:right;}
  5. div.leftMenu{width:20%; background-color:black; float:left; height:20em;}
  6. div.content{width:80%; background-color:yellow; float:right; height:15em;}
  7. div.bottomMenu{width:80%; height:5em; background-color:green; float:right;}
  8.  
  9. <div class="logo">
  10. LOGO
  11. </div>
  12. <div class="topMenu">
  13. Top Menu
  14. </div>
  15. <div class="leftMenu">
  16. Left Menu
  17. </div>
  18. <div>
  19. <div class="content">
  20. Content
  21. </div>
  22. <div class="bottomMenu">
  23. Bottom Menu
  24. </div>
  25. <div>
Last edited by tgreer; Apr 2nd, 2006 at 10:38 am.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2006
Posts: 89
Reputation: j4mes_bond25 is an unknown quantity at this point 
Solved Threads: 0
j4mes_bond25's Avatar
j4mes_bond25 j4mes_bond25 is offline Offline
Junior Poster in Training

Re: CSS Layout Coding ???

 
0
  #3
Apr 2nd, 2006
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 ???
Nope, I'm NOT God, but I'm British (which is the next best thing ;)
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2006
Posts: 89
Reputation: j4mes_bond25 is an unknown quantity at this point 
Solved Threads: 0
j4mes_bond25's Avatar
j4mes_bond25 j4mes_bond25 is offline Offline
Junior Poster in Training

Re: CSS Layout Coding ???

 
0
  #4
Apr 2nd, 2006
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.
Nope, I'm NOT God, but I'm British (which is the next best thing ;)
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2004
Posts: 764
Reputation: DaveSW is on a distinguished road 
Solved Threads: 17
DaveSW's Avatar
DaveSW DaveSW is offline Offline
Master Poster

Re: CSS Layout Coding ???

 
0
  #5
Apr 5th, 2006
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...
emdevelopments - accessible web design | HiJackThis

Portfolio: Fire Equipment, Conveyors, Tools | Whitworth Spanner | Alarm Installers Bath | Physical Security Solutions | Surveyor | Pine Range | Unique Air Charter | Apollo Tiling in Bridgend
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread has been marked solved.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC