•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 391,873 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,389 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 2378 | Replies: 4 | Solved
 |
•
•
Join Date: Jan 2006
Location: Land of Hope & Glory
Posts: 88
Reputation: 
Rep Power: 3
Solved Threads: 0
Junior Poster in Training
CSS Layout Coding ??? 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>
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>
Nope, I'm NOT God, but I'm British (which is the next best thing ;)
•
•
Join Date: Aug 2005
Location: Carmel, IN
Posts: 67
Reputation:
Rep Power: 4
Solved Threads: 2
Junior Poster in Training
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> Last edited by tgreer : Apr 2nd, 2006 at 9:38 am.
•
•
Join Date: Jan 2006
Location: Land of Hope & Glory
Posts: 88
Reputation:
Rep Power: 3
Solved Threads: 0
Junior Poster in Training
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 ???
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 ;)
•
•
Join Date: Jan 2006
Location: Land of Hope & Glory
Posts: 88
Reputation:
Rep Power: 3
Solved Threads: 0
Junior Poster in Training
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.
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 ;)
•
•
Join Date: Jul 2004
Location: Wales
Posts: 735
Reputation:
Rep Power: 6
Solved Threads: 17
Master Poster
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...
% 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
Portfolio: Fire Equipment, Conveyors, Tools | Whitworth Spanner | Alarm Installers Bath | Physical Security Solutions | Surveyor | Pine Range | Unique Air Charter | Apollo Tiling in Bridgend
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
Linear Mode
- 10 CSS Layout Templates For You To Practice (Site Layout and Usability)
- ASP display data in 3 col & rows using CSS layout (ASP)
- Layout in CSS (HTML and CSS)
Other Threads in the HTML and CSS Forum
- Previous Thread: is BB Code html?
- Next Thread: CSS Horizontal Drop-down Menu ???
