Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
  1. #1
    Junior Member
    Join Date
    Aug 2006
    Location
    Sheffield, UK
    Posts
    24
    Member #
    13792
    Hi,

    I'm creating a site that's centered on the screen and I'm having a problem with centering the navigation links at the top of the screen.

    Does anyone know a good way to get this done?

    The markup is below and is the usual bulleted list stuff...

    HTML Code:
    <div id="navLinks">
    <ul>
    <li class="first"><a href="about.html">about me</a></li>
    <li><a href="gallery.html">gallery</a></li>
    <li><a href="store.html">shop</a></li>
    <li class="last"><a href="contact.html">contact</a></li>
    </ul>
    </div>
    The CSS I have so far is below. Obviously, this isn't centered though.

    Code:
    #navLinks ul {
    
        display: block;
    
        margin: 0;
    
        padding: 0.5em 0;
    
    }
    
    #navLinks li {
    
        display: block;
    
        float: left;
    
        list-style: none;
    
        border-right: 2px solid #d0d0d0;
    
        padding-right: 0.75em;
    
        margin-left: 0.75em;
    
    }
    
    #navLinks li.last {
    
        border-right: none;
    
    }
    The site itself is here.

    Any help or ideas would be great.

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    I actually like it the way it is now.

    In my opinion, centering the navigation would not be very interesting.

    One other improvement you should make ...
    You'll notice in the banner, the large text looks "pixely".
    This is because text like that is aliased.
    http://en.wikipedia.org/wiki/Anti-aliasing

    You should use a good photo editor to create a .gif image with
    a transparent background and text that is "anti-aliased".

    Try some banners using this site:
    http://www.cooltext.com

    Pick a .gif image with a transparent background.
    Experiment with some various font types, sizes, colors, etc.


  4. #3
    Junior Member
    Join Date
    Aug 2006
    Location
    Sheffield, UK
    Posts
    24
    Member #
    13792
    Unfortunately, the person I'm designing the site for doesn't like it the way it is! And the site is still in it's early stages so there's plenty of changes due with respect the images etc. It's much easier for me to play with it as a simple header than it is as an image.

    Anyone have any ideas on centering it then?

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    I made changes to "main.css" as shown in red ...
    I commented-out the un-needed lines so you can see which one's those were...

    #mastHead {
    overflow: auto;
    margin-top: 2em;
    /* margin-bottom: 2em; */
    }
    #mastHead h1 {
    font-size: 2.25em;
    font-weight: normal;
    }
    #mastHead h1 a {
    color: #d0d0d0;
    text-decoration: none;
    }


    #navLinks ul {
    /* display: block; */
    margin: 0;
    padding: 0.5em 0;
    text-align:center;
    }
    #navLinks li {
    display: inline;
    /* float: left; */
    list-style: none;
    border-right: 2px solid #d0d0d0;
    padding-right: 0.75em;
    margin-left: 0.75em;
    }


  6. #5
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    you could also float the <li> elements left and center the whole <ul> with margin: 0 auto;

  7. #6
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    I always forget about .... margin: 0 auto;


  8. #7
    Junior Member
    Join Date
    Aug 2006
    Location
    Sheffield, UK
    Posts
    24
    Member #
    13792
    Amazing. Thanks a lot guys!

  9. #8
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    Ash ...

    If you use PHP, where your file extension is either .php or you use .htaccess
    to process your .html files as PHP ...

    You can do some dynamic things, like always display the correct year on your footer.

    Changing this line:
    Ash Kendall</a> &copy; 2008.

    To this:
    Ash Kendall</a> &copy; <?=date("Y");?>.

    PHP is a popular server-side language that makes your site dynamic.
    Your client (photographer) could upload and manage their own photos
    for example ... creating their own galleries.

    Something to think about anyhow, since you're a site designer.


  10. #9
    Junior Member
    Join Date
    Aug 2006
    Location
    Sheffield, UK
    Posts
    24
    Member #
    13792
    Thanks. I've familar with php, I just chose not to use it at this stage.

    I built a site for a company my dad works for a few years back with a backend for adding cars they had for sale.

    It's been a long while since I used it so I'm focusing on the CSS for the time being. It's something I'll probably add when I'm a bit more comfortable with the design...


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:01 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com