CSS Positioning Help

Ainokea

Ainokea

New Member
Messages
127
Reaction score
0
Points
0
My site:
http://www.lyfe.pcriot.com/

I want it so it looks like
Code: 
 -----------------
|                       |
|                       |
 -----------------
|menu|content |ads|
--------------------
| foooter               |
-------------------

I'm kind of new to php, so I dont exactly understand how to position things on the same row. Can someone explain please thanks
 
Last edited:
xmakina

xmakina

New Member
Messages
264
Reaction score
0
Points
0
I cannot recommend this page enough http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/

And a basic CSS template for you:
HTML: 
<html>
	<head>
		<style type="text/css">
			body{
				background-color:lightblue;
			}
			div#container{
				/*The whole page is held in this div*/
				width: 90%;
				margin:auto;
				background-color:red;
			}
			div#header{
				float:top;
				text-align:center;
				background-color:green;
			}
			div#navigation{
				background-color:black;
				text-align:center;
			}
			div#content{
				height: 90%;
				color:white;
				font-weight:bold;
			}
			div#footer{
				background-color:yellow;
				text-align:center;
				clear:both;
			}
			a:link {color: #FF0000}
			a:visited {color: #00FF00}
			a:hover {color: #FF00FF}
			a:active {color: #0000FF}
			
		</style>
	</head>
	<body>
		<div id="container">
			<div id="header">
				Header image and such lives here
			</div>
			<div id="navigation">
				|<a href="#">menu</a>|<a href="somepage">content</a>|<a href="#">ads</a>|
			</div>
			<div id="content">
				Your page content lives here
			</div>
			<div id="footer">
				footer lives here
			</div>
		</div>
	</body>
</html>
 
Ainokea

Ainokea

New Member
Messages
127
Reaction score
0
Points
0
thanks I got that now... but now I need some help with spacing between contents divs

http://www.lyfe.pcriot.com/

I need space between the green box and nav and ads. How do I do this? Also is there a way to center all my content easily?
 
diabolo

diabolo

Community Advocate
Community Support
Messages
1,682
Reaction score
32
Points
48
to center divs:
margin: 0 auto;

for text:
text-align: center;

and for the spacing you might wanna try:
margin: 5px;

also these can work:

margin-top
margin-bottom
margin-left
margin-right
 
Last edited:
Ainokea

Ainokea

New Member
Messages
127
Reaction score
0
Points
0
diabolo said:
to center divs:
margin: 0 auto;

for text:
text-align: center;

and for the spacing you might wanna try:
margin: 5px;

also these can work:

margin-top
margin-bottom
margin-left
margin-right
Click to expand...

I tried margins it doesn't seem to do anything...

one more thing I tried to add a wrapper with a border and it doesn't hold everything why is this? Is this my codding closing a div tag?
 
diabolo

diabolo

Community Advocate
Community Support
Messages
1,682
Reaction score
32
Points
48
if this how you want it?

attach
 

Attachments

  • lyfe.bmp
    366.5 KB · Views: 28
Ainokea

Ainokea

New Member
Messages
127
Reaction score
0
Points
0
yes with some padding on the top of the page, except I want a border surrounding the whole thing including the footer...
 
E

epoclaen

Member
Messages
79
Reaction score
0
Points
6
It's the //margin-top margin-right margin-bottom margin-left comment before the margin settings in the #content tag that causes it to not see the margins.

Try changing it to /* margin-top margin-right margin-bottom margin-left */ and it should work.
 
mephis

mephis

New Member
Messages
39
Reaction score
0
Points
0
Ainokea said:
http://www.lyfe.pcriot.com/

Thanks I finally fixed the positioning, but why cant I get the border around everything? I see a small little box up by the header... any one have any ideas?
Click to expand...

you'll probably want a <div> that encompasses every other element in the page (start it right after <body> and close it just before </body>). set style="border: 1px solid #000000;" or set it in the CSS and you'll probably also need "display: block; float: left;" on every other <div> inside
 
You must log in or register to reply here.
Top