html
  • css
  • 2012-03-14 2 views 0 likes 
    0

    Так у меня есть нав и суб нав ....навигация и субтропическая навигация имеют разные позиции на разных экранах

    <div class="headerNav"> 
    <ul> 
    <li><a href="index.php">Home</a></li> 
    <li><a href="#" class='galleryNavToggle'>Gallery</a></li> 
    <li><a href="#" class='galleryNavInfoToggle'>Info</a></li> 
    </ul> 
    </div><!--headerNav--> 
    
    <div class="headerNavGallery" id="headerNavGallery" style="display:none;"> 
    <ul> 
    <li><a href="Categories.php?action=view">Categoies</a></li> 
    <li><a href="Products.php?action=view">Products</a></li> 
    </ul> 
    </div><!--headerNavGallery--> 
    
    <div class="headerNavInfo" id="headerNavInfo" style="display:none;"> 
    <ul> 
    <li><a href="willRuppel.php?action=view">William Ruppel</a></li> 
    <li><a href="CV.php?action=view">CV</a></li> 
    <li><a href="artistBio.php?action=view">Artist Bio</a></li> 
    <li><a href="Video.php?action=view">Video</a></li> 
    <li><a href="contact.php?action=view">Contact</a></li> 
    </ul> 
    </div><!--headerNavInfo--> 
    

    и их CSS

    .headerNav { 
        color: #FFFFFF; 
        padding-left: 150px; 
        padding-top: 148px; 
    } 
    
    .headerNavGallery { 
        color: #000000; 
        padding-left: 25px; 
        padding-top: 0; 
    } 
    
    .headerNavInfo { 
        color: #000000; 
        padding-left: 177px; 
        padding-top: 0; 
    } 
    

    мой вопрос, как я могу получить чтобы они оставались в одном и том же положении на каждом экране, независимо от ширины?

    ответ

    0

    Вы используете оберточный элемент? Вы можете использовать родительский элемент в качестве первого дочернего элемента body и включать туда весь ваш html.

    Затем вы можете дать этому обертка элемент а spesific wifth (960px) является очень распространенным явлением, а также центрировать его на экране, как что:

    <html> 
    <head> 
    <style type="text/css"> 
    
    #wrapper{ 
    margin:0 auto; 
    width: 960px; 
    } 
    
    </style> 
    </head> 
    <body> 
    <div id="wrapper"> 
    <!-- ALL YOUR HTML HERE --> 
    </div> 
    </body> 
    </html> 
    
    +0

    Тестирование на это сейчас – user1269625

    +0

    Благодаря Kimonas это работает :) – user1269625

    Смежные вопросы