Grow your CSS skills. Land your dream job.

Problem with nav in Iphone

  • # April 7, 2012 at 11:22 am

    Hey guys
    I’m making this website La Casa de los Recuerdos and everything looks nice in the navigation on a monitor, but when I see it in an Iphone all the nav elements get messed up here’s the code hope you can help





    and the css:


    #header{
    position: relative;
    }

    #header_back_1{
    position: relative;
    height: 60px;
    background: url(../img/header_back_1.png) repeat-x;
    }

    #header_back_2{
    position: relative;
    height: 230px;
    background: url(../img/header_back_2.png);
    }

    #nav{
    position: relative;
    height: 158px;
    font-size: 18px;
    font-weight: normal;
    width: 802px;
    }

    #nav ul{
    position: relative;
    height: 62px;
    left: 58px;
    border-left: 1px solid #422b03;
    border-right: 1px solid #422b03;
    }

    #nav ul li a.nav_col_1{
    float: left;
    height: 62px;
    line-height: 62px;
    padding: 0px 23px 0px 23px;
    border-right: 1px solid #422b03;

    text-shadow: 0px 1px 0px #f3daaf;
    filter: dropshadow(color=#f3daaf, offx=0, offy=1);
    }

    #nav ul li a.nav_col_2{
    float: left;
    height: 62px;
    line-height: 62px;
    padding: 0px 23px 0px 23px;
    border-left: 1px solid #422b03;

    text-shadow: 0px 1px 0px #f3daaf;
    filter: dropshadow(color=#f3daaf, offx=0, offy=1);
    }

    #nav ul li a:hover{
    background: url(../img/nav_hover.png) repeat-x 0px 35px;
    }

    #nav ul li a.logo{
    position: relative;
    float: left;
    width: 331px; height: 158px;
    background: url(../img/logo.png) no-repeat 14px 0px;
    text-indent: -9999px;
    border: none;
    padding: 0px 12px 0px 12px;
    }

    #nav ul.nav_2{
    position: relative;
    float: left;
    top:15px;
    border:none;
    font-size: 12px;
    left: -350px;
    }

    #nav ul.nav_2 li{
    position: relative;
    float: left;
    }

    #nav ul.nav_2 li a{
    float: left;
    width: 90px; height: 29px;
    text-transform: uppercase;
    border: 1px solid #422b03;
    text-align: center;
    line-height: 29px;

    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;

    text-shadow: 0px 1px 0px #f3daaf;
    filter: dropshadow(color=#f3daaf, offx=0, offy=1);

    -webkit-box-shadow: inset 0px 1px 0px 0px #f3daaf;
    -moz-box-shadow: inset 0px 1px 0px 0px #f3daaf;
    box-shadow: inset 0px 1px 0px 0px #f3daaf;
    }

    #nav ul.nav_2 li.nav_2_right a{
    position: relative;
    float: left;
    left: 275px;
    }

    #nav ul.nav_2 li a:hover{
    background: url(../img/nav_2_back.gif) repeat-x;
    color: #fff7ac;

    text-shadow: 0px 1px 0px #514227;
    filter: dropshadow(color=#514227, offx=0, offy=1);

    -webkit-box-shadow: inset 0px 1px 3px 0px #4f4127;
    -moz-box-shadow: inset 0px 1px 3px 0px #4f4127;
    box-shadow: inset 0px 1px 3px 0px #4f4127;
    }

    #nav ul.nav_2 li a img{
    position: relative;
    right:8px; top:4px;
    }

    #nav ul.nav_2 li a img.flag{
    position: relative;
    right:8px; top:2px;
    }

    # April 7, 2012 at 11:40 am

    Your header has a width of 802 pixels (the div with id “nav”), but the UL within it is positioned 58 pixels from the left side, which means the CONTENTS of the nav are at least 860 pixels, so that doesn’t really match.

    Also, the div with the id “banner_back_1″ has a width of some 1350 pixels, so that is the width that iPhone will adapt to (what you see within the 320 pixel screen width, actually represents 1350 pixels of web site). Since the header is still spaced at 802 pixels wide, it won’t fill the whole width of the screen.

    I think you’re using a little too much position:relative; everywhere, you may want to rethink that approach.

    # April 7, 2012 at 11:42 am

    Best to use either media queries or maybe this by Chris.

    # April 7, 2012 at 1:06 pm

    I don’t understand, my nav div is 802px width, but that’s less than the parent div that is 960px so why it’s affected by a margin of 58px?

    # April 7, 2012 at 2:28 pm
    [header_back_1]          (this one is full width because there is no width assigned)
    [header_back_2] (this one you gave a width of 960 px)
    [nav] (this one you gave a width of 802 px)
    [ul] (this one you gave a width of 802 AND moved 58px to the right)

    So the UL takes up 802 + 58px = 860, but it’s within a NAV that’s set to 802.

    # April 7, 2012 at 2:48 pm

    OH! you’re right, I thought the element would be treated as a floated element with the margin

    And my problem with the backgrounds is that I don’t know how to give the different divs background images without giving them a with and keep them centered, if I don’t specify a width the whole thing collapses according to the content. :(

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

You must be logged in to reply to this topic.

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