CSS Positioning Help

Discussion in 'Scripts, 3rd Party Apps, and Programming' started by Ainokea, Nov 4, 2008.

  1. Ainokea

    Ainokea New Member

    Messages:
    127
    Likes Received:
    0
    Trophy 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: Nov 4, 2008
  2. xmakina

    xmakina New Member

    Messages:
    264
    Likes Received:
    0
    Trophy 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>
     
  3. Ainokea

    Ainokea New Member

    Messages:
    127
    Likes Received:
    0
    Trophy 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?
     
  4. diabolo

    diabolo Community Advocate Community Support

    Messages:
    1,682
    Likes Received:
    32
    Trophy 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: Nov 4, 2008
  5. xmakina

    xmakina New Member

    Messages:
    264
    Likes Received:
    0
    Trophy Points:
    0
    And of course you can always <br /> between divs.
     
  6. Ainokea

    Ainokea New Member

    Messages:
    127
    Likes Received:
    0
    Trophy Points:
    0
    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?
     
  7. diabolo

    diabolo Community Advocate Community Support

    Messages:
    1,682
    Likes Received:
    32
    Trophy Points:
    48
    if this how you want it?

    attach
     

    Attached Files:

    • lyfe.bmp
      File size:
      366.5 KB
      Views:
      28
  8. Ainokea

    Ainokea New Member

    Messages:
    127
    Likes Received:
    0
    Trophy Points:
    0
    yes with some padding on the top of the page, except I want a border surrounding the whole thing including the footer...
     
  9. epoclaen

    epoclaen Member

    Messages:
    79
    Likes Received:
    0
    Trophy 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.
     
  10. Ainokea

    Ainokea New Member

    Messages:
    127
    Likes Received:
    0
    Trophy Points:
    0
    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?
     
  11. mephis

    mephis New Member

    Messages:
    39
    Likes Received:
    0
    Trophy Points:
    0
    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
     

Share This Page