+ Reply to Thread
Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: CSS Positioning Help

  1. 11-04-2008 02:43 AM #1
    Ainokea
    Ainokea is offline     x10 Sophmore Ainokea is an unknown quantity at this point
    Join Date
    Jul 2008
    Posts
    127

    CSS Positioning Help

    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 by Ainokea; 11-04-2008 at 02:44 AM.

    Reply With Quote Reply With Quote
  2. 11-04-2008 03:46 AM #2
    xmakina's Avatar
    xmakina
    xmakina is offline     x10 Lieutenant xmakina is an unknown quantity at this point
    Send a message via MSN to xmakina
    Join Date
    May 2008
    Location
    England
    Posts
    265

    Re: CSS Positioning Help

    I cannot recommend this page enough http://www.devarticles.com/c/a/Web-S...yout-with-CSS/

    And a basic CSS template for you:
    HTML Code:
    <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>
    IF($this->$post.content() == "SEE SIG"){
    w3Schools and Google
    }
    Reply With Quote Reply With Quote
  3. 11-04-2008 01:22 PM #3
    Ainokea
    Ainokea is offline     x10 Sophmore Ainokea is an unknown quantity at this point
    Join Date
    Jul 2008
    Posts
    127

    Re: CSS Positioning Help

    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?

    Reply With Quote Reply With Quote
  4. 11-04-2008 02:30 PM #4
    diabolo's Avatar
    diabolo
    diabolo is offline     Community Advocate diabolo is on a distinguished road
    Join Date
    Nov 2007
    Location
    Jersey Shore
    Posts
    1,683

    Re: CSS Positioning Help

    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 by diabolo; 11-04-2008 at 02:32 PM.
    Reply With Quote Reply With Quote
  5. 11-04-2008 04:48 PM #5
    xmakina's Avatar
    xmakina
    xmakina is offline     x10 Lieutenant xmakina is an unknown quantity at this point
    Send a message via MSN to xmakina
    Join Date
    May 2008
    Location
    England
    Posts
    265

    Re: CSS Positioning Help

    And of course you can always <br /> between divs.
    IF($this->$post.content() == "SEE SIG"){
    w3Schools and Google
    }
    Reply With Quote Reply With Quote
  6. 11-05-2008 08:13 PM #6
    Ainokea
    Ainokea is offline     x10 Sophmore Ainokea is an unknown quantity at this point
    Join Date
    Jul 2008
    Posts
    127

    Re: CSS Positioning Help

    Quote Originally Posted by diabolo View Post
    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
    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?

    Reply With Quote Reply With Quote
  7. 11-05-2008 08:35 PM #7
    diabolo's Avatar
    diabolo
    diabolo is offline     Community Advocate diabolo is on a distinguished road
    Join Date
    Nov 2007
    Location
    Jersey Shore
    Posts
    1,683

    Re: CSS Positioning Help

    if this how you want it?

    attach
    Attached Images
    Reply With Quote Reply With Quote
  8. 11-05-2008 08:43 PM #8
    Ainokea
    Ainokea is offline     x10 Sophmore Ainokea is an unknown quantity at this point
    Join Date
    Jul 2008
    Posts
    127

    Re: CSS Positioning Help

    yes with some padding on the top of the page, except I want a border surrounding the whole thing including the footer...

    Reply With Quote Reply With Quote
  9. 11-05-2008 08:45 PM #9
    epoclaen
    epoclaen is offline     x10Hosting Member epoclaen is an unknown quantity at this point
    Join Date
    Nov 2007
    Posts
    64

    Re: CSS Positioning Help

    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.
    Reply With Quote Reply With Quote
  10. 11-05-2008 09:01 PM #10
    Ainokea
    Ainokea is offline     x10 Sophmore Ainokea is an unknown quantity at this point
    Join Date
    Jul 2008
    Posts
    127

    Re: CSS Positioning Help

    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?

    Reply With Quote Reply With Quote
+ Reply to Thread
Page 1 of 2 12 LastLast
« Previous Thread | Next Thread »

Similar Threads

  1. CSS positioning woes.
    By Farenvin in forum Programming Help
    Replies: 9
    Last Post: 04-19-2008, 09:16 PM
  2. positioning ads in Coppermine
    By dylan in forum Free Hosting
    Replies: 6
    Last Post: 11-03-2005, 12:43 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Forum Rules

x10hosting free hosting for the masses
dedicated servers