The Layout of a page - Webmaster Forum - Web Design, Programming and SEO forums

10-15-2005, 11:00 PM

b3six

Status: I'm new around here
Join date: Oct 2005
Location:
Expertise:
Software:

Posts: 8

iTrader: 0 / 0%

b3six is on a distinguished road

The Layout of a page

Hello

I'm pretty new to CSS but I just read a long tutorial I understand it alot more than I did before. What I still don't know is what seperates a page into sections.

in this little screenshot u can see the right column for a menu a top for a header and the right column for the content of the site. What seperates these 3? I want to learn how to do a layout with rows (header,menu,content) but I think it would be easier for me to learn this 1 first since the row layout would just be the same thing over and over but different sizes. Is there a tutorial on this because I want to start coding my site soon

thx all

edit: Also I've been looking at different css sites that are tableless and was wondering what is this #container for?

10-15-2005, 11:08 PM

xZaft

Status: Member
Join date: Jul 2005
Location: Massachusetts, US
Expertise:
Software:

Posts: 428

iTrader: 0 / 0%

xZaft is on a distinguished road

#container usually is used to center layouts, and for that, you use 3 divs, all at different parts, like different margins, or floats.

10-15-2005, 11:14 PM

Jonny

Status: Member
Join date: Feb 2005
Location: UK
Expertise:
Software:

Posts: 335

iTrader: 0 / 0%

Jonny is on a distinguished road

Google says

10-15-2005, 11:48 PM

Dray

Status: Request a custom title
Join date: Sep 2005
Location: Texas
Expertise:
Software:

Posts: 1,139

iTrader: 0 / 0%

Dray is on a distinguished road

Make 1 big <div> In that add 2 smaller ones. First one is the header second one is the bottom 2 columns. In that bottom Div add 2 more divs with id <div id=right> and <div id=left> then when you set the styles for it from the <style></style> tags make it like this:

div#right {
float:right;
width:60%;/*or watever*/
}
div#left {
float:left;
width:40%;
}

10-16-2005, 02:43 AM

b3six

Status: I'm new around here
Join date: Oct 2005
Location:
Expertise:
Software:

Posts: 8

iTrader: 0 / 0%

b3six is on a distinguished road

hello agn

seems I have a new problem now and not sure what went wrong.
For some reason I cant get the full header size to show.. its suppose to be 642 by 319 and I have columns in the way of it. Another problem I have is what I'm doing looks lined up and fine in homesite http://img404.imageshack.us/img404/8738/11yx.jpg but when I check it in IE/Firefox it looks like this..http://img404.imageshack.us/img404/4006/27gt.jpg

Is there something Im missing?

heres my xhtml:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="Dave Shea" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta name="robots" content="all" />
	<title>vacooter</title>
	<link href="css/main.css" type="text/css" rel="stylesheet" />
	</style>
	<link rel="Shortcut Icon" type="image/x-icon" href="" />	
</head>

<body>
<div id="container">
    <div id="header"><h1>Header blah blah blah</h1></div>
    <div id="nav">
            <a href="#">home</a>&nbsp;&nbsp;|&nbsp;&nbsp;
            <a href="#">portfolio</a>&nbsp;&nbsp;|&nbsp;&nbsp;
			<a href="#">services</a>&nbsp;&nbsp;|&nbsp;&nbsp;
			<a href="#">about</a>&nbsp;&nbsp;|&nbsp;&nbsp;
			<a href="#">contact</a>
    </div>
    <div id="main">
        <h2>Column 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
    </div>
    <div id="sidebar">
        <h4>Latest Projects</h4>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
     
    </div>
    <div id="footer">
        <p>Footer</p>
    </div>
</div>

</body>
</html>

CSS:

Code:

body{
	margin: 0;
	padding: 0;
	background-color:#242424;
	background-image:url(gfx/bg.gif);
	background-repeat:repeat;
	background-position:top;
	color:#ffffff;
	font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
	font-size:10px;
}

#container{
	background:red;
	width:642px;
	height:875px;
	margin:0 auto;
	padding:0;

#header{
	position:top center;
	background:green;
	background-repeat:no-repeat;
	background-position:top center;
	width:642px;
	height:319px;
	margin:0;
	padding:0;
	
	
#nav{
	text-align:right;
	}
#main{
	text-align:left;
    background:blue;
	float:right;
	width:475px;
	height:556px;
    }
#sidebar{
	text-align:center;
    background:purple;
	float:left;
	width:167px;
	height:556px;
    }
#footer{
	text-align:right;
    background:yellow;
	width:642px;
	height:3px;
	clear:both;
    }

a:link {
	color:#ffffff;
	text-decoration:none;
}
a:hover{
	color:#8fc9e4;
	text-decoration:none;
}
a:visited {
 	color:#509ecc;  
}
a:active { 
	color:#8fc9e4;
}
acronym{
	font-style:italic;
	border-bottom: 1px dotted #8fc9e4;
}

thx for the help so far

10-16-2005, 02:49 AM

xZaft

Status: Member
Join date: Jul 2005
Location: Massachusetts, US
Expertise:
Software:

Posts: 428

iTrader: 0 / 0%

xZaft is on a distinguished road

Hey, for backgrounds, instead of

Code:

	background-color:#242424;
	background-image:url(gfx/bg.gif);
	background-repeat:repeat;
	background-position:top;

try

Code:

	background:#242424 url(gfx/bg.gif) repeat top;

All in 1.

10-16-2005, 03:14 AM

b3six

Status: I'm new around here
Join date: Oct 2005
Location:
Expertise:
Software:

Posts: 8

iTrader: 0 / 0%

b3six is on a distinguished road

still doesnt work.. what could it be? it seems like something went wrong somewhere in the css but im just not sure where..

10-16-2005, 03:15 AM

xZaft

Status: Member
Join date: Jul 2005
Location: Massachusetts, US
Expertise:
Software:

Posts: 428

iTrader: 0 / 0%

xZaft is on a distinguished road

Oh, mine wasn't for solving, just to minimize the overall CSS. I don't know what it could be.

10-16-2005, 04:20 AM

Dray

Status: Request a custom title
Join date: Sep 2005
Location: Texas
Expertise:
Software:

Posts: 1,139

iTrader: 0 / 0%

Dray is on a distinguished road

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="Dave Shea" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta name="robots" content="all" />
	<title>vacooter</title>
	<link href="css/main.css" type="text/css" rel="stylesheet" />
	</style>
	<link rel="Shortcut Icon" type="image/x-icon" href="" />	
</head>

<body>
<div id="container">
    <div id="header"><h1>Header blah blah blah</h1></div>
    <div id="nav">
            <a href="#">home</a>&nbsp;&nbsp;|&nbsp;&nbsp;
            <a href="#">portfolio</a>&nbsp;&nbsp;|&nbsp;&nbsp;
			<a href="#">services</a>&nbsp;&nbsp;|&nbsp;&nbsp;
			<a href="#">about</a>&nbsp;&nbsp;|&nbsp;&nbsp;
			<a href="#">contact</a>
    </div>
<div>
    <div id="main">
        <h2>Column 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
    </div>
    <div id="sidebar">
        <h4>Latest Projects</h4>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
     
    </div>
</div>
    <div id="footer">
        <p>Footer</p>
    </div>
</div>

</body>
</html>

Code:

body{
	margin: 0;
	padding: 0;
background:#242424 url("gfx/bg.gif") repeat top;
	color:#ffffff;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:10px;
}

#container{
	background-color:red;
	width:642px;
	height:875px;
	margin:0;
	padding:0;
}
#header{
	background-color:green;
	width:642px;
	height:319px;
	margin:0;
	padding:0;
clear:both;
}
	
#nav{
	text-align:right;
	}
#main{
	text-align:left;
    background-color:blue;
	float:right;
	width:475px;
	height:556px;
    }
#sidebar{
	text-align:center;
        background-color:purple;
	float:left;
	width:167px;
	height:556px;
    }
#footer{
	text-align:right;
    background-color:yellow;
	width:642px;
	height:3px;
	clear:both;
    }

a:link {
	color:#ffffff;
	text-decoration:none;
}
a:hover{
	color:#8fc9e4;
	text-decoration:none;
}
a:visited {
 	color:#509ecc;  
}
a:active { 
	color:#8fc9e4;
}
acronym{
	font-style:italic;
	border-bottom: 1px dotted #8fc9e4;
}

I hope i didn't miss anything. Check that and reply...

10-16-2005, 09:51 AM

#10

b3six

Status: I'm new around here
Join date: Oct 2005
Location:
Expertise:
Software:

Posts: 8

iTrader: 0 / 0%

b3six is on a distinguished road

thx all

seems to be working fine in IE/Firefox now

Now all I need is to get the menu in the bottom right corner of the header section kinda like here http://img404.imageshack.us/img404/8738/11yx.jpg
what I tried was placing the text-align to right in the #header then in html i used the break tag to lower it but when I do this i get 1 pixel to extra

the white is the bottom-border of the #header and all I want is to line the text up like this without having to use

Code:

<br />