Проблеми з розташуванням CSS позиції

Ей, хлопці, я намагаюся створити систему навігації, подібну до тієї, яку ви можете знайти на 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;
}

якщо це допомагає, це те, що я намагаюся досягти

this is an example of the off hover(on) and then active when the section is clicked if i could get the <a href=CSS working the functionality would be easy... just can't seem to get these accomplished.">

 0
додано Змінено
Перегляди: 4
джерело
ro ru fr es pt de zh hi bn ar tr
Вам завжди краще зробити тест і розмістити код/​​розмітку у запиті.
додано Автор Jared Farrish, джерело

3 Відповіді

Дайте це спробуйте. Змініть позицію з абсолютної на відносну і видаліть верхню межу 30px. Ви маєте змогу отримати такий же ефект, як і три приклади вище ваших.

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

[EDIT]

По-перше, видаліть "межі-дно: немає;" так що ваш 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 клас, скажімо "вкладками"

  • Ex. 1

    І, напевно, використовуйте деякі негативи для вашого CSS.

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

    Дайте цій спробі.

    • 2
    додано
    джерело
    Дав свою відповідь трохи редагувати. Спробувати.
    додано Автор Mike Sanchez, джерело
    Просто побачила наведений вами приклад. Не потрібно видаляти "border-bottom: none;" якщо це так. @Brodie
    додано Автор Mike Sanchez, джерело
    @Brodie Просто вкажіть "#nav ul li ul li" у вашому CSS відповідному нижньому краю поля. :)
    додано Автор Mike Sanchez, джерело
    Проблема з цим полягає в тому, що вона ідеально підходить до нижньої частини верхньої вкладки. Мені потрібно h1 для покриття вмісту div трохи, щоб створити ілюзію вкладки річ.
    додано Автор Brodie, джерело
    це працює, але це створює нову проблему. dl.dropbox.com/u/73992/ js_tests/test.htm <�вони все ще перекриваються. Чи буде це працювати, якщо я змінювався навколо початкової структури li на всіх?
    додано Автор Brodie, джерело

    float : left can solve your positioning problem. You have to add just two lines in your css

    #nav ul li {
    float: left;
    margin: 0 15px;
    position: relative;
}
    0
    додано
    джерело

    Put display:inline; on li

    And float:left; on ul

    Я думаю, що це ваша велика проблема, якщо я добре зрозумів вашу проблему.

    0
    додано
    джерело
    це лінії їх, я маю більше проблеми ж/H1 взаємодіючих ж/зміст DIV. Мені потрібно, щоб h1 перекривали вміст divs на кілька пікселів, щоб створити ілюзію вкладки.
    додано Автор Brodie, джерело