Позиционирование содержимого подзаголовка без влияния на другой список HTML - PullRequest
Новая
       13

Позиционирование содержимого подзаголовка без влияния на другой список HTML

0 голосов
/ 04 февраля 2009

Я делаю список с заголовком и подзаголовками. Мой основной список, Home1, сопровождается подзаголовком. Как точно разместить содержимое подзаголовка, не затрагивая другой список? 

<div id="wrapper">
    <ul id="testnav">
        <li>
            <a href="#">Home</a>
            <ul id="subnav">
                <div style=" float : left; width :70%;" >
                    <li><a href="#">Sub Heading</a></li>
                    <li><a href="#">Sub Heading</a></li>
                    <li><a href="#">Sub Heading</a></li>
                </div>
                <div STYLE="float : left; width :30%; height:900px;">
                    Sub Heading Content
                </div>
            </ul>
        </li>
        <li><a href="#">Home2</a></li>
        <li><a href="#">Home3</a></li>
        <li><a href="#">Home4</a></li>
        <li><a href="#">Home5</a></li>
    </ul>
</div>

#testnav {
    list-style: none;
    padding: 0;
    marigin: 10px 10px 10px 0;
    width: 900px;
}
#subnav {
    list-style: none;
    padding: 0;
    marigin: 10px 10px 10px 0;
    width: 300px;
}

Ответы [ 3 ]

1 голос
/ 04 февраля 2009

Мне трудно понять вопрос, но, глядя на вашу разметку, я вижу, что у вас есть DIV как прямой потомок UL. Только элементы LI могут быть дочерними элементами UL. 

<ul id="subnav">
  <div style=" float : left; width :70%;" > <!-- THIS DIV CANNOT BE HERE -->
    <li><a href="#">Sub Heading</a></li>
    <li><a href="#">Sub Heading</a></li>
    <li><a href="#">Sub Heading</a></li>
  </div> <!-- THIS DIV CANNOT BE HERE -->
  <div STYLE="float : left; width :30%; height:900px;"> <!-- THIS DIV CANNOT BE HERE -->
    Sub Heading Content
  </div> <!-- THIS DIV CANNOT BE HERE -->
</ul>
1 голос
/ 04 февраля 2009

Первым шагом к решению вашей проблемы является проверка правильности разметки, как предложил Энди Форд. Во-вторых, может помочь правильное написание CSS в коде.

Из того, что я могу понять из вашего вопроса, вы пытаетесь убедиться, что #subnav абсолютно позиционирован относительно #testnav. 

<ul id="testnav">
    <li>
        <a href="#">Home</a>
        <ul id="subnav">
            <li><a href="#">Sub Heading</a></li>
            <li><a href="#">Sub Heading</a></li>
            <li><a href="#">Sub Heading</a></li>
        </ul>
    </li>
    <li><a href="#">Home2</a></li>
    <li><a href="#">Home3</a></li>
    <li><a href="#">Home4</a></li>
    <li><a href="#">Home5</a></li>
</ul>
#testnav, #subnav { list-style:none; padding:0; }
#subnav {
    position: absolute;
    width: 300px;
}

Я не уверен, что это то, что вам нужно, но, как правило, первый шаг к выяснению того, что не так с CSS, - это удалить все посторонние дополнения, которые вы можете.

1 голос
/ 04 февраля 2009

Кроме того, ul> div не является допустимым HTML.

...