4 replies [Last post]
sejf83
Offline
Enthusiast
London
Last seen: 13 years 6 weeks ago
London
Joined: 2006-01-01
Posts: 56
Points: 0

Hi All,

Can anyone help me figure out how to center the (red) nav bar on the top of this page?

http://www.homefront.tv/silent-epidemic/summit/index.html

I've tried margins on every element and haven't had much luck. I'm drawing a blank!

Thanks.

The Silent Epidemic :: May 9, 2007 Summit

@import "../css/styles.css";
@import "../css/downstream.css";

Ending


High school graduates
Headline

Subhead

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.


High school student studying

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit this is a link delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


rem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.



MTV Think logo National Governors Association logo Civic Enterprises logo America's Promise logo Time Magazine logo Bill and Melinda Gates Foundation logo

  • © 2007 |
  • Privacy Policy |
  • About Us |

  • Press Room |

  • Contact Us




  • /****************************************************
    * DOM Image rollover v3.0: By Chris Poole http://chrispoole.com
    * Script featured on http://www.dynamicdrive.com
    * Keep this notice intact to use it :-)
    ****************************************************/

    CSS #content #nav { width: 746px; overflow:auto; background-color: #fff; }

    #content #nav img {
    border: none;
    }

    #content #nav, #nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    }

    #content #nav ul li a {
    background: url(../images/red-arrow.gif) no-repeat;
    background-position: 0 10%;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    }

    #content #nav ul li a:hover {
    background: url(../images/blue-arrow.gif) no-repeat;
    background-position: 0 10%;
    }
    #content #nav a {
    display: block;
    }

    #content #nav li {
    float: left;
    margin-top: 5px;
    }

    #content #nav li a {
    color: #eb1c24;
    text-decoration:none;
    padding-bottom: 2px;
    }

    #content #nav li a:hover {
    color: #4893ca;
    text-decoration:none;
    }

    #content #nav li ul {
    position: absolute;
    left: -999em;
    background-color: transparent;
    background-image: url(../images/menu-bg.png);
    background-repeat: repeat;
    }

    #content #nav li:hover ul {
    left: auto;
    }

    #content #nav li ul li {
    width: 100%;
    font: 12px Arial, Helvetica, sans-serif;
    padding: 2px 0 2px 3px;
    }

    #content #nav li:hover ul, #nav li.sfhover ul {
    left: auto;
    }

    /*
    #nav {
    width: 746px;
    margin: 0 auto;
    overflow:auto;
    }

    #nav li {
    float: left;
    }

    #nav li a {
    float: left;
    }

    #nav img {
    border: none;
    }

    #nav ul {
    list-style:none;
    }

    #nav ul li {
    display: inline;
    }

    #nav ul li a {
    background: url(../images/red-arrow.gif) no-repeat;
    background-position: 0 20%;
    padding-left: 20px;
    }

    #nav ul li a:hover {
    background: url(../images/blue-arrow.gif) no-repeat;
    background-position: 0 20%;
    }

    #nav li ul {
    position: absolute;
    left: -999em;
    }

    #nav li:hover ul {
    left: auto;
    }

    #nav li ul li {
    color: #eb1c24;
    font: 9pt Arial, Helvetica, sans-serif;
    }

    #nav li:hover ul, #nav li.sfhover ul {
    left: auto;
    }

    */
    #content {
    width: 743px;
    margin: 25px auto;
    background-color: #ededed;
    font-family: Arial, Helvetica, sans-serif;
    padding-bottom: 20px;
    }

    #content h1 {
    margin: 12px 0 6px 25px;
    font-size: 24px;
    }

    #content h2 {
    margin-left: 25px;
    font-size: 16px;
    }

    #content p {
    margin: 10px 25px;
    font-size: 13px;
    line-height: 20px;
    }

    img.right {
    margin-right: 25px;
    float: right;
    margin-top: 5px;
    margin-left: 10px;
    border: 1px solid #444;
    }

    #fine-print {
    padding-top: 5px;
    }

    #blackBar {
    background-color: #000;
    height: 25px;
    width: 100%;
    }

    #blueBar {
    background-color: #2148a3;
    width: 100%;
    height: 40px;
    }

    Tyssen
    Tyssen's picture
    Offline
    Moderator
    Brisbane
    Last seen: 5 years 49 weeks ago
    Brisbane
    Timezone: GMT+10
    Joined: 2004-05-01
    Posts: 8201
    Points: 1386

    http://www.tyssendesign.com.a

    How to get help
    Post a link. If you can't post a link, jsFiddle it.
    My blog | My older articles | CSS Reference

    adipalaz
    adipalaz's picture
    Offline
    Regular
    Last seen: 9 years 16 weeks ago
    Timezone: GMT+2
    Joined: 2007-05-03
    Posts: 19
    Points: 0

    you can try something like

    you can try something like this, but you have to adjust the margins and paddings:

    #nav ul {
    text-align:center;
    padding: 0;
    margin: 0;
    list-style: none;
    }

    #nav ul li {
    display:inline;
    }

    #nav ul li a {
    text-decoration:none;
    }

    #nav ul li a:hover {
    background: url(../images/blue-arrow.gif) no-repeat;
    background-position: 0 10%;
    }

    #nav li ul li {
    display:block;
    }

    sejf83
    Offline
    Enthusiast
    London
    Last seen: 13 years 6 weeks ago
    London
    Joined: 2006-01-01
    Posts: 56
    Points: 0

    Thank you!

    Thank you!

    3rigena
    Offline
    newbie
    UK
    Last seen: 13 years 20 weeks ago
    UK
    Timezone: GMT+1
    Joined: 2007-05-06
    Posts: 3
    Points: 0

    Tyssen


    Have spotted your site a few times on my travels on the `net mr Tyssen. superb stuff & beautiful designs.. keep it up.