SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    centering an item on the webpage

    I am a newbie on CSS.

    How can I center an item horizontally on a web page? As in, even if I re size the browser window it should remain at the center.

    Please help.

  2. #2
    SitePoint Guru bronze trophy AndrewCooper's Avatar
    Join Date
    Sep 2008
    Location
    Manchester, UK
    Posts
    631
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    You can use the following for centering anything you like in a webpage, including images. This is the CSS:

    Code:
    div {
    text-align: center;
    }
    If you want to center your actual whole web page then you can use the following in the body tag or you wrapper or main container tag. This is the CSS:

    Code:
    body {
    margin-left: auto;
    margin-right: auto;
    width: 800px;
    }
    If you need anymore help with XHTML and CSS, message me and I'll be glad to help

    Goodluck!

    Andrew Cooper

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    div {
    text-align: center;
    }
    Actually its a navigation bar which I want at the center of the web page. When I position it tends to sit near the left age of the browser.

  4. #4
    SitePoint Guru bronze trophy AndrewCooper's Avatar
    Join Date
    Sep 2008
    Location
    Manchester, UK
    Posts
    631
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Hmmm ok, you could do this then for the XHTML:

    HTML Code:
    <div id="mainNavigation">
    
    	<ul>
        	
            <li><a href="#" title="Home">Home</a></li>
            <li><a href="#" title="Services">Services</a></li>
            <li><a href="#" title="About">About</a></li>
            
        </ul>
        
    </div>
    And then do this for the CSS:

    Code CSS:
    #mainNavigation {
    	text-align: center;
    }
     
    li {
    	display: inline;
    	list-style-type: none;
    	padding-right: 50px;
    }

    Does that work out for you?

    Andrew Cooper

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much. It has worked.

    One more question please...
    My navigation list has four list items with a repeat-x background image which appears well. I have set margin between the list items to 1px but the first two list items appear to have a margin of like 4px between them.

    Kindly help.

  6. #6
    SitePoint Guru bronze trophy AndrewCooper's Avatar
    Join Date
    Sep 2008
    Location
    Manchester, UK
    Posts
    631
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Hmmm could you copy and paste your code into a message here please? So I may fully understand whats going on. I couldn't re-enable the problem you were having unless some of your links have classes and some don't.

    Here is the XHTML:

    HTML Code:
    <div id="mainNavigation">
    
    	<ul>
        
        	<li><a href="#" title="Home">Home</a></li>
            <li><a href="#" title="Services">Services</a></li>
            <li><a href="#" title="Contact">Contact</a></li>
            <li><a href="#" title="About">About</a></li>
            
        </ul>
        
    </div>
    And here is the CSS:

    Code CSS:
    #mainNavigation {
    	text-align: center;
    }
     
    li {
    	list-style-type: none;
    	display: inline;
    	margin: 1px;
    }

    Hope that helps!

    Andrew Cooper

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the text...

    <div id="navbar">
    <ul>
    <li> <a href="#">about me</a> </li>
    <li> <a href="#">portfolio </a></li>
    <li> <a href="#">resume </a></li>
    <li> <a href="#">contacts </a></li>
    </ul>
    </div>



    Here is the CSS...

    #navbar {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 218px;
    }

    #navbar ul {
    list-style: none;
    text-align: center;
    }

    #navbar ul li {
    display: inline;
    font-family: "trebuchet ms", verdana, arial, helvetica, sanserif;
    font-size: 1.2em;
    text-transform: uppercase;
    margin-right: 1px;
    }

    #navbar ul li a:link, #navbar ul li a:visited {
    color: #dab526;
    text-decoration: none;
    background: url(images/button-bg.gif) repeat-x top right;
    padding: 20px 40px 20px 40px;
    }

    #navbar ul li a:hover {
    color: #ffffff;
    }

    My navigation list has four list items with a repeat-x background image which appears well. I have set margin between the list items to 1px but the first two list items appear to have a margin of like 4px between them.

    Kindly help.

  8. #8
    SitePoint Guru bronze trophy AndrewCooper's Avatar
    Join Date
    Sep 2008
    Location
    Manchester, UK
    Posts
    631
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    The reason why it had so much space in between each link was because you set padding on too. I think the way it currently is looks fine and is readable, however, it depends on what your background image is what you want it to look like. I've taken out the padding and used text-align to put all the text links in the center of it. Each link also now has 1px in between them of space. However, I think it should be more for easier readability.

    Below is the XHTML:

    HTML Code:
    <div id="navbar">
    <ul>
    <li><a href="#">about me</a></li>
    <li><a href="#">portfolio</a></li>
    <li><a href="#">resume</a></li>
    <li><a href="#">contacts</a></li>
    </ul>
    </div>
    And below is the CSS:

    Code CSS:
    #navbar {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 218px;
    }
     
    #navbar ul {
    text-align: center;
    }
     
    #navbar ul li {
    display: inline;
    font-family: "trebuchet ms", verdana, arial, helvetica, sanserif;
    font-size: 1.2em;
    text-transform: uppercase;
    margin-right: 1px;
    list-style-type: none;
    }
     
    #navbar ul li a:link, #navbar ul li a:visited {
    color: #dab526;
    text-decoration: none;
    background: url(images/button-bg.gif) repeat-x top right;
    }
     
    #navbar ul li a:hover {
    color: #ffffff;
    }

    I hope that's what you were looking for. If you still need help just message back .

    Andrew Cooper

  9. #9
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you

  10. #10
    SitePoint Guru bronze trophy AndrewCooper's Avatar
    Join Date
    Sep 2008
    Location
    Manchester, UK
    Posts
    631
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    You're welcome! I'm glad it finally worked and I managed to help out! Hehe I'm really proud of myself now!

    Andrew Cooper


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
  •