Grow your CSS skills. Land your dream job.

CSS nav position problem?

  • # June 20, 2009 at 2:24 pm

    I tried many ways but I cant my nav exactly where I want. I didnt space between Navs. When I try width properties on CSS my last 2 navs jump to line. I add text-indent property thats helped me. But this time come up to Browser problem on PC. Im using iMac. Safari and Firefox( for Mac) good preview but PC IE8 and Firefox terrible. How can I fixed that problem. I attached my all files I need your help?

    HTML

    Code:

    HAKKIMIZDA

    Özel Çocuk Dan??manl?k, Rehberlik ve Uygulama Merkezi 1993 y?l?nda pedagog Ülker Ya?in
    taraf?ndan kuruldu. Kurulu?un amac?; uzun y?llar?n deneyiminin aktar?l?p payla??lmas?,
    mesleki çal??malar?n uygun ortamda yap?lmas?, geli?en dünyan?n alan?m?za katk?lar?n?n
    izlenmesi ve uygulanmas?n?n sa?lanmas? idi. Erken e?itimin, e?itim koordinasyonunun ve
    planlamas?n?n, bireysel yakla??m?n öneminin y?llard?r yap?lan çal??malarla görülmesi
    kurulu?umuzun çal??ma alanlar?n? belirledi. Bugüne kadar yapt???m?z çal??malar?n
    sonuçlar?n? halen izlemeye devam etti?imiz pek çok çocu?un geli?imiyle görmekteyiz.

    Kadromuzu, alanlar?nda deneyimli uzman arkada?lar?m?z olu?turmaktad?r. Kurumumuzda ekip
    çal??mas?na çok önem verilmekte, ebeveyn e?itimi, bireysel ve grup e?itimleri, e?itici
    seminerler yap?lmaktad?r.

    CSS

    Code:
    *{
    margin: 0;
    padding: 0;
    }

    body {
    font: 62.5% Helvetica, Arial, san-serif;
    background: url(images/bg.jpg);
    }

    #container {
    width: 780px;
    margin: 0 auto;
    }

    #logo {
    margin-top: 50px;
    }

    ul#nav {
    height: 125px;
    background: url(images/header.jpg) no-repeat;
    list-style: none;
    padding-left:259px;
    }

    p, li {
    font-size: 11px;
    line-height: 1.3em;
    margin-bottom: 0.8em;
    font-weight: bold;
    color: #003300;
    text-align: justify;
    }

    h2{
    font-size: 13px;
    margin-bottom: 0.8em;
    color: #003300;
    }

    ul#nav li a {
    display: block;
    float: left;
    margin-top: 73px;
    color: #003300;
    font-weight: bold;
    text-decoration: none;
    text-indent: 11px;

    }

    ul#nav li a:hover, ul#nav li a:active {
    color: #cc0033;
    }

    #main-content{
    background: url(images/bgpuzzle.jpg);
    padding: 50px 50px 250px 50px;

    }

    #footer {
    background: url(images/footerbg.jpg);
    height: 16px;
    padding: 4px 6px 4px 0;
    text-align: right;

    }

    Safari
    [img]http://i39.tinypic.com/wwgsw7.png[/img]
    Firefox (on Mac)
    [img]http://i44.tinypic.com/10xa7gw.png[/img]
    IE 8
    [img]http://i43.tinypic.com/2dkwxg4.jpg[/img]
    Firefox (on PC)
    [img]http://i44.tinypic.com/161c0fq.jpg[/img]
    This is the adding width 70px(ul#nav li a) and padding left 275px(ul#nav).

    # June 20, 2009 at 3:44 pm

    What are you trying to do?

    # June 20, 2009 at 4:17 pm

    Did you see safari and firefox(Mac preview) all navigation links right place between borders. But IE and Firefox (PC preview) not. Why did happend How can I fix that?

    # June 20, 2009 at 5:06 pm

    Ooooohhhh, I see it now.

    Posting a link to the site would be a much better help. You’re simply going to want to do something like this, in its most basic form:

    ul {
    width: width of nav;
    }

    ul li {
    width: width of tab;
    text-align: center;
    }

    # June 20, 2009 at 9:55 pm

    I dint publish yet this only one page. I will try your way but could you please check this page I attached files bottom my first message. By the way thank you for attention.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".