Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Problem with nav in Iphone

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #37538
    ylex1
    Participant

    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;
    }

    #100774
    Senff
    Participant

    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.

    #100782
    ylex1
    Participant

    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?

    #100763
    Senff
    Participant
    [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.

    #100784
    ylex1
    Participant

    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 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.