SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Placing elements at the middle of their ancestor

    Hi everyone
    The following code contains a "body" ancestor element and two child elements: "Startpage" and "main".
    I wanted to place "Start Page" which is a brown image excactly at the middle of "body" so i made it an "Absolute"
    position with "margin:auto", assuming "auto" centers an element.
    I wanted "main" to be horizontally centered on "Body" and on top of "Startpage" so I made it an "Absolute" position with
    margin top: 40 px and left/right: "Auto".
    Attched is the code and a screenshot.
    Would anyone please tell me why the brown "startpage" element and the "main" as well are not centered ?!
    What do I have to do to center it?
    Thanks a lot !

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>to_sitepoint</title>
    <style type="text/css">
    html, body, div, ul {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
    }
    body
    	{
    		background-image:url('background.gif'); 
    		background-repeat:no-repeat;
    		background-attachment:fixed;
    		background-position:center; 
    		text-align:center;
    		position:relative;
    	}
    #startpage
    	{
    		position:absolute;
    		margin:auto;
    		width:960px;
    		height:498px;
    		background-image:url('startpage.png'); 
    		background-repeat:no-repeat;
    		background-position:center; 
        }
    #main {
    	position:absolute;
    	width:950px;
    	height:30px;
    	margin:40px auto 0;
    	border:2px solid #8c8b4b;
    }
    #main li {
    	width:92px;
    	height:30px;
    	float:left;
    	list-style-type:none;
    	border:2px solid red;
    }
    li.menu1 { background-image:url('images/men1.png'); }
    li.menu2 { background-image:url('images/men1.png'); }
    }
    </style>
    </head>
    <body>
    <div id="startpage"></div>
    <ul id="main">
    		<li><a href="#">menu item1</a></li>
    		<li>menu item2>menu item1</li>
    </ul>
    </body>
    </html>
    Attached Images Attached Images

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Margin:auto does work to center elements witih a width. Though they must be static blocks. You have position:absolute on it. However you can just do this to center it . Basically move it over 50% and drag it back over left to center.
    Code:
    #startpage{
    
    • [*=-12]margin-left: -480px;
    • left: 50%;}
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    This article shows you how to vertically centre a fixed width and height element without using absolute positioning.

    However fixed height and width sites are seldom of any use apart from displaying a static image, a small sire with little content or (god-forbid) a splash page.

    Are you sure that you really want a fixed height to your design?

  4. #4
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ryan and Paul,
    I haven't yet implemented your suggestions but to Paul's question, my answer is: If you mean whether I can get rid of "width/height" (if that is what you mean "static image") answer is yes, in particular if it helps centers elements with less headaches.
    Thanks

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Yes that's what Paul meant. Defining widths on elements isn't bad to do, most of the time. However, heights are really frowned upon. They restrict elements (what if you text re-size and it overflows the container?). It's just not a good design practice. Vertical centering can still be done (via Pauls link) . If you have difficulty implementing what he suggests in his link, just shout .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul and Ryan,
    What I gathered from that article is: I should work with floating left element.
    Thanks a lot (unless i'm wrong !)

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Er, generally speaking, and structurally speaking, you should try to avoid absolute positioning to lay your site out. Which often means, instead, floating. So yes, you could say that was a major point of the article .

    We can just go with that notion for now .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Ryan,
    I'll proceed by "floating" and see if I get anywhere :-)
    Thanks a lot


Tags for this Thread

Bookmarks

Posting Permissions

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