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

Question

Проблеми з розташуванням 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

додано 28 Жовтень 2011 при 02:08 Автор Brodie Змінено 20 Травень 2014 при 05:22

Перегляди: 7

джерело

ro ru fr es pt de hi bn ar tr

Вам завжди краще зробити тест і розмістити код/розмітку у запиті.

додано 28 Жовтень 2011 при 02:15, Автор Jared Farrish, джерело

3 Відповіді

Автор Mike Sanchez · Answer 1 · 2011-10-28T02:20Z

Дайте це спробуйте. Змініть позицію з абсолютної на відносну і видаліть верхню межу 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;   
}

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

Автор Rohan Patil · Answer 2 · 2011-10-28T06:49Z

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

Автор GregM · Answer 3 · 2011-10-28T02:15Z

Put display:inline; on li

And float:left; on ul

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

0

додано 28 Жовтень 2011 при 02:15 Автор GregM

джерело

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

додано 28 Жовтень 2011 при 02:26, Автор Brodie, джерело