Как изменить мои вкладки, чтобы сделать содержание ниже отступа? - PullRequest
Новая
       21

Как изменить мои вкладки, чтобы сделать содержание ниже отступа?

0 голосов
/ 04 августа 2011

Мой HTML-код для вкладок: 

<ul id = "tabs">
    <li id = "home" onclick = "document.location.href = \'/\'">Home</a></li>
    <li id = "games" onclick = "document.location.href = \'/games/\'">Games</li>
    <li id = "tutorials" onclick = "document.location.href = \'/tutorials/\'">Tutorials</li>
    <li id = "snippets" onclick = "document.location.href = \'/snippets/\'">Snippets</li>
    <li id = "people" onclick = "document.location.href = \'/people.php\'">People</li>
    </ul>

И CSS для них: 

#tabs {
     margin: 0;
     padding: 0;
 }
 #tabs li { 
     display:inline; 
     float:left;
     position:relative;
     left:0px;
     top:-30px;
     padding: 9px;
     padding-top: 2px;
     padding-bottom: 2px;
     margin-left: 5px;
     border-top: 2px solid #03c;
     border-left: 2px solid #03c;
     border-right: 2px solid #03c;
     border-top-right-radius: 3px;
     -moz-border-top-right-radius: 3px;
     border-top-left-radius: 3px;
     -moz-border-top-left-radius: 3px;
     background-color: #dddddd;
     height: 24px;
     font-family: trebuchet ms;
     font-size: 20px;
     font-weight: bold;
 }

И по какой-то причине на моих страницах вкладки занимают место под тем, что внизу. Посмотрите, что я имею в виду здесь . И да, я знаю, что некоторые ссылки ведут в никуда. Это все еще настраивается.

1 Ответ

1 голос
/ 05 августа 2011

Элементы <li> в вашем списке #tabs имеют позицию top: -30px. Однако #tabs отображается в соответствии с .content. Похоже, это решает вашу проблему: 

#tabs {
     margin: 0;
     padding: 0;
     margin-bottom: -35px;
     display: inline-block;
 }
...