Блог

эй, ребята, я пытаюсь создать навигационную систему, подобную той, которую вы можете найти на starbucks.com . Вот ссылка на мой образец: http://dl.dropbox.com/u/73992/js_tests/test.htm Я добиваюсь эффекта с помощью навигационного образца внизу, но, как вы можете видеть, есть проблемы с позиционированием. Вы можете найти CSS в исходном коде. Я решил, что это лучший способ его протестировать. Заранее благодарю вас за любую помощь, которую я могу получить.

согласно предложению, вот css

 *
{
    margin:0;
    padding:0;
}

#nav
{
    position:relative;
    margin-top:3em;
    margin-left:3em;
}   

#nav ul
{
    list-style-type:none;
}

#nav ul li
{
    position:relative;
    margin-top:10px;
}    

#nav ul li ul li
{
    margin-top:0px;
}

#nav ul li h1
{
    font-size:15px;
    font-weight:bold;
    text-align:center;
    color:#000000;
    background-color:#F7FF88;
    border:solid 5px black;
    width:100px;
    height:30px;
    border-bottom:none;
    z-index:20;
}

.content
{
    position:relative;
    width:300px;
    background-color:#F7FF88;
    border:solid 5px black;
}

.content form
{
    display:block;
    margin:10px 10px 10px 10px;
} 

.content p
{
    text-align:left;
    display:block;
    margin:10px 10px 10px 10px;
}   

.gallery
{
    margin:10px 10px 10px 10px;
    background-color:#ffffff;
    border:solid 1px black;
} 

.gallery img
{
    display:inline-block;
    margin:10px 5px 10px 0px;
    float:left;
} 

/*
This next section is identical but represents what happens w/ the absolute positioning.
*/

.content2
{
    position:absolute;
    width:300px;
    background-color:#F7FF88;
    border:solid 5px black;
    top:30px;
    z-index:-5;
} 

.content2 form
{
    display:block;
    margin:10px 10px 10px 10px;
} 

.content2 p
{
    text-align:left;
    display:block;
    margin:10px 10px 10px 10px;
}

.clear
{
    clear:both;
}
 

если это поможет, это то, чего я пытаюсь достичь

Попробуйте. Измените позицию с абсолютной на относительную и удалите верхний предел в 30 пикселей. Вы должны быть в состоянии получить тот же эффект, что и 3 примера выше вашего.

 .content2
{
    position: relative;
    width:300px;
    background-color:#F7FF88;
    border:solid 5px black;
    z-index:-5;
}
 

[ПРАВИТЬ / ПРАВИТЬ код]

Прежде всего, удалите «border-bottom: none;», чтобы у вашего h1 все еще были нижние границы для этого эффекта с вкладками.

 #nav ul li h1
{
    font-size:15px;
    font-weight:bold;
    text-align:center;
    color:#000000;
    background-color:#F7FF88;
    border:solid 5px black;
    width:100px;
    height:30px;
    z-index:20;
}
 

Дайте вашему h1 класс, скажем, «с вкладками»

 <li><h1 class="tabbed">Ex. 1</h1>
 

И, вероятно, используйте некоторые недостатки для вашего CSS.

 h1.tabbed {
    position:absolute;
    top:-28px;   
}
 

Попробуйте это.

Наденьте display:inline; li

И float:left; на ul

Я думаю, что это ваша большая проблема, если бы я хорошо понял вашу проблему.

float: left может решить вашу проблему с позиционированием. Вам нужно добавить всего две строки в ваш css

 #nav ul li {
    float: left;
    margin: 0 15px;
    position: relative;
}