SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Evangelist Scott.Botkins's Avatar
    Join Date
    Dec 2004
    Posts
    598
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How Would I Center This List?

    I'm stuck on trying to figure out how to center this - or maybe I'm just really tired and forgot. Below is the code...

    HTML Code:
    #topnav {
    	background: url('images/nsplit.jpg') repeat-y;
    	height: 38px;
    	list-style-type: none;
    	margin: 0px;
    	padding: 0px;
    	}
    	
    	
    	#topnav li {
    	float: left;
    	background: url('images/nsplit.jpg') right repeat-y;
    padding: 0px 2px 0px 0px;
    	list-style-type: none;
    	margin: 0px;
    	font-weight: bold;
    	font-size: 1.2em;
    	}
    	
    	#topnav li a{
    	padding: 12px 10px;
    	display: block;
    color: #334932;
    text-decoration: none;
    height: 14px;
    	}
    	
    	#topnav li a:hover{
    background: url('images/navbg_hover.jpg') repeat-x;
    text-decoration: none;
    color: #FFFFFF;
    	}

  2. #2
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    625
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    post your html also. otherwise nothing can be said

    vineet

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Location
    Essex, UK
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In the #topnav change the margin to

    margin: 0px auto;
    This will center it, but you would also need a width on hte css eg width 960px (for 1024 resolution) for it wo center otherwise it wont work.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    You have widthless floats so I don't recommend setting a width. Assuming your HTML from previous threads have stayed the same.

    I'm going to assume your HTML is something like th is.
    <div id="topnav">
    <ul>
    <li><a href="#">TExt</a></li>
    <li><a href="#">TExt</a></li>
    <li><a href="#">TExt</a></li>
    <li><a href="#">TExt</a></li>
    </ul>
    </div>

    Assuming it is that, just add this CSS
    Code:
    #topnav{position:relative;float:left;left:50&#37;;}
    #topnav ul{float:left;position:relative;left:-50%;}
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Zealot ArtphotoasiA's Avatar
    Join Date
    Dec 2009
    Location
    Italy
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    You have widthless floats so I don't recommend setting a width. Assuming your HTML from previous threads have stayed the same.

    I'm going to assume your HTML is something like th is.
    <div id="topnav">
    <ul>
    <li><a href="#">TExt</a></li>
    <li><a href="#">TExt</a></li>
    <li><a href="#">TExt</a></li>
    <li><a href="#">TExt</a></li>
    </ul>
    </div>

    Assuming it is that, just add this CSS
    Code:
    #topnav{position:relative;float:left;left:50%;}
    #topnav ul{float:left;position:relative;left:-50%;}

    This is good!

    congrats

    I was thinking to ......
    margin left: auto
    margin right: auto
    More by Corrado Prever... visit www.corradoprever.com
    Porfolio... visit www.500px.com

  6. #6
    SitePoint Evangelist Scott.Botkins's Avatar
    Join Date
    Dec 2004
    Posts
    598
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    You have widthless floats so I don't recommend setting a width. Assuming your HTML from previous threads have stayed the same.

    I'm going to assume your HTML is something like th is.
    <div id="topnav">
    <ul>
    <li><a href="#">TExt</a></li>
    <li><a href="#">TExt</a></li>
    <li><a href="#">TExt</a></li>
    <li><a href="#">TExt</a></li>
    </ul>
    </div>

    Assuming it is that, just add this CSS
    Code:
    #topnav{position:relative;float:left;left:50%;}
    #topnav ul{float:left;position:relative;left:-50%;}
    Thanks this is exactly how I had mine setup and it works!

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ArtphotoasiA View Post
    This is good!

    congrats

    I was thinking to ......
    margin left: auto
    margin right: auto
    That would work with a width ste on the parent, however since yours are widthless floats there's a possibility if you set a width then the list items could be a longer width (total) and thus it would break.

    Quote Originally Posted by shockbotkins View Post
    Thanks this is exactly how I had mine setup and it works!
    My solution shrink wraps the <ul> and the <div> and places the <div> 50% over and then the <ul> 50% back over left. The second 50% will movei t back over to pixel perfect centering
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi shockbotkins,

    Paul's Centered Widthless Floats method that Ryan mentioned is a very effective indeed. Just be aware that you will need to use overflow:hidden; on your main wrapping div to hide the relative positioning. You will get a horizontal scrollbar equal to the offset width if you don't hide it.

    There is an alternative method at the bottom of that link if using overflow:hidden; causes problems. It is usually not a problem unless you have something that intentionally hangs out of your wrapping div.

    Here is an example that shows what is going on.

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Centered Widthless Floats</title>
     
    <style type="text/css">
    #wrap {
        width:950px;
        min-height:100px;/* for demo only*/
        margin:30px auto;
        padding:10px 0;
        /*overflow:hidden; is needed for RP centered floats*/
        background:#BBB;
    }
    #nav {
        float:left;
        position:relative;
        left:50%;
        background:red;/* for demo only*/
        padding-bottom:10px;/* for demo only*/
    }
    #nav ul {
        float:left;
        position:relative;
        left:-50%;
        list-style:none;
        margin:0;
        padding:0;
    }
    #nav li {
        float:left;
    }
    #nav li a {
        float:left;
        padding:2px 20px;
        text-decoration:none;
        background:#FFF;
        font-weight:bold;
    }
    #nav li a:hover {
        color:#FFF;
        background:#000;
    }
    </style>
     
    </head>
    <body>
    <div id="wrap">
        <div id="nav">
            <ul>
                <li><a href="#">Link One</a></li>
                <li><a href="#">Link Two</a></li>
                <li><a href="#">Link Three</a></li>
                <li><a href="#">Link Four</a></li>
                <li><a href="#">Link Five</a></li>
                <li><a href="#">Link Six</a></li>
                <li><a href="#">Link Seven</a></li>
            </ul>
        </div>
    </div>
     
    </body>
    </html>

  9. #9
    SitePoint Evangelist Scott.Botkins's Avatar
    Join Date
    Dec 2004
    Posts
    598
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay I just noticed the overflow problem, here is my code:

    HTML Code:
    #topnav{overflow:hidden; position:relative;float:left;left:50%;}
    	
    	#topnav ul{
    	
    	float:left;
    	position:relative;
    	left:-50%;
    	background: url('images/nsplit.jpg') repeat-y;
    	height: 38px;
    	list-style-type: none;
    	margin: 0px;
    	padding: 0px 2px 0px 2px;
    	}
    	
    	
    	#topnav li {
    	float: left;
    	background: url('images/nsplit.jpg') right repeat-y;
    padding: 0px 2px 0px 0px;
    	list-style-type: none;
    	margin: 0px;
    	font-weight: bold;
    	font-size: 1.2em;
    	}
    	
    	#topnav li a{
    	padding: 12px 10px;
    	display: block;
    color: #334932;
    text-decoration: none;
    height: 14px;
    	}
    	
    	#topnav li a:hover{
    background: url('images/navbg_hover.jpg') repeat-x;
    text-decoration: none;
    color: #FFFFFF;
    	}
    HTML Code:
    <div style="width: 745px; height: 38px; background: url('images/navbg.jpg') no-repeat"><div id="topnav"><ul><li><a href="#">HOME</a></li><li><a href="#">ATTORNEY PROFILE</a></li><li><a href="#">LOCATION</a></li><li><a href="#">BLOG</a></li><li><a href="#">CLIENTS</a></li><li><a href="#">TESTIMONIALS</a></li><li><a href="#">CONTACT</a></li></ul></div></div>
    Where would I place overflow:hidden to get rid of the scroll bars?

  10. #10
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by shockbotkins View Post
    Okay I just noticed the overflow problem, here is my code:
    Where would I place overflow:hidden to get rid of the scroll bars?
    The overflow:hidden would go on that generic div that you set the inline styles on. Not the #topnav as you have it now.

    That generic div is the main parent here just as the #wrap div is in my example.

  11. #11
    SitePoint Evangelist Scott.Botkins's Avatar
    Join Date
    Dec 2004
    Posts
    598
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    The overflow:hidden would go on that generic div that you set the inline styles on. Not the #topnav as you have it now.

    That generic div is the main parent here just as the #wrap div is in my example.
    This issue fixed in firefox but not ie.

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    You could remove that extra div and apply those inline styles directly to #topnav

    The poitn of the technique is that the <div> and the <ul> are widthless. So remove the width

    But are you sure it doesn't work? Rays code shoudl work. Can you provide a link?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  13. #13
    SitePoint Evangelist Scott.Botkins's Avatar
    Join Date
    Dec 2004
    Posts
    598
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    You could remove that extra div and apply those inline styles directly to #topnav

    The poitn of the technique is that the <div> and the <ul> are widthless. So remove the width

    But are you sure it doesn't work? Rays code shoudl work. Can you provide a link?
    I PM'd you the link.

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by shotbotkins in PM
    Thanks for helping me out my problem. The page is <snip /> and it's the top navigation. I only get a scroll bar in ie.

    Thanks,
    Scott
    It's be best to ask the community this (I don't accept help via PM anyway. I get too many) and plus my work station doesn't have the ability to do local testing at all so I'd be at a loss to help you

    I do notice you are using 2 extra containers for putting a background/width on.

    Get rrid of thsoe extra containers and palce the styles on the #topnav and the <ul>
    Edit:

    Do you want the link posted in public?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  15. #15
    SitePoint Evangelist Scott.Botkins's Avatar
    Join Date
    Dec 2004
    Posts
    598
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    It's be best to ask the community this (I don't accept help via PM anyway. I get too many) and plus my work station doesn't have the ability to do local testing at all so I'd be at a loss to help you

    I do notice you are using 2 extra containers for putting a background/width on.

    Get rrid of thsoe extra containers and palce the styles on the #topnav and the <ul>
    Edit:

    Do you want the link posted in public?
    I can't have that link live for seo reasons because it's a duplicate of the homepage, if you could please remove it.

    I'll try your method though with the styles. Thanks for all the help on this.

  16. #16
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by shockbotkins View Post
    I can't have that link live for seo reasons because it's a duplicate of the homepage, if you could please remove it.

    I'll try your method though with the styles. Thanks for all the help on this.
    You're welcome . I have to leave now to go to a class but if you have any otehr questions you'd be best to try and PM Ray because he already is involved in this thread.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  17. #17
    SitePoint Evangelist Scott.Botkins's Avatar
    Join Date
    Dec 2004
    Posts
    598
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I finally got it to where I want it to be http://invisionblue.com/lab/centerlist/ however there is small space between the header image and nav, any ideas on what's causing this?

  18. #18
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    It's probably just the space left under images for text nodes . Add display:block (or) vertical-align:bottom; to the image
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  19. #19
    SitePoint Evangelist Scott.Botkins's Avatar
    Join Date
    Dec 2004
    Posts
    598
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    It's probably just the space left under images for text nodes . Add display:block (or) vertical-align:bottom; to the image
    Thanks a lot for the help and you too Ray for looking over my code.

  20. #20
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    We are glad to help . You're welcome.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •