Цвет фона на абсолютно позиционирован <ul>не отображается - PullRequest
Новая
       25

Цвет фона на абсолютно позиционирован <ul>не отображается

0 голосов
/ 11 апреля 2011

У меня странная проблема со списком, который я пытаюсь обернуть по вертикали.Выравнивание, кажется, работает, но у меня есть несколько абсолютно позиционированных li внутри относительно позиционированного div.Проблема в том, что "li", кажется, отображаются за пределами "div".Когда я устанавливаю цвет фона для div, ничего не отображается.Когда я явно устанавливаю высоту и ширину div, он перекрывает li.Вот мой HTML: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Team 422 | Mech Tech Dragons</title>
        <link rel="stylesheet" type="text/css" href="/home/william/Documents/Team422Site/template/css/standardLayout.css" />
    </head>
    <body>
            <div class="main">
                <div class="content">
                    <div class="mainContent">
                    <div class="footer">
                        <div class="socialBadges">
                        </div>
                        <div class="contactInfo">
                        </div>
                        <div class="sponsors">
                        </div>
                        <div class="siteMap">
                            <ul class="siteMapLevel1">
                                <li class="siteMapLevel1 siteMapCol1">About</li>
                                <li class="siteMapLevel1 siteMapCol2">Team 
                                    <br />
                                    <ul class="siteMapLevel2">
                                        <li class="siteMapLevel2">Organization</li>
                                        <li class="siteMapLevel2">Members</li>
                                        <li class="siteMapLevel2">Documents</li>
                                    </ul>
                                </li>
                                <li class="siteMapLevel1 siteMapCol3">Competition
                                    <br />
                                    <ul class="siteMapLevel2">
                                        <li class="siteMapLevel2">Awards</li>
                                        <li class="siteMapLevel2">Robots
                                            <br />
                                            <ul class="siteMapLevel3">
                                                <li class="siteMapLevel3">Current</li>
                                                <li class="siteMapLevel3">History</li>
                                                <li class="siteMapLevel3">Manual</li>
                                            </ul>
                                        </li>
                                        <li class="siteMapLevel2">The Game
                                            <br />
                                            <ul class="siteMapLevel3">
                                                <li class="siteMapLevel3">Overview</li>
                                                <li class="siteMapLevel3">Rules</li>
                                            </ul>
                                        </li>
                                        <li class="siteMapLevel2">Scouting</li>
                                        <li class="siteMapLevel2">Safety</li>
                                    </ul>
                                </li>
                                <li class="siteMapLevel1 siteMapCol4">Outreach 
                                    <br />
                                    <ul class="siteMapLevel2">
                                        <li class="siteMapLevel2">FLL</li>
                                        <li class="siteMapLevel2">Service</li>
                                    </ul>
                                </li>
                                <li class="siteMapLevel1 siteMapCol5">Members</li> 
                            </ul>
                        </div>
                    </div>              
                </div>
            </div>
        </div>
    </body>
</html>

и мой CSS: 

body {
    background:#ffffff url('../../template/images/background.png') scroll no-repeat right top;
    font-family:ariel;
    background-color:#ffffff;
    -moz-background-size: 650px 100%;
    border-left:15px solid #007200;
    border-right:15px solid #007200;
    margin:0px;
    padding:0px;
    padding-top:5px;
    min-width:925px;
}

.main {
    height:100%;
}

.content {
    margin-left:30px;
    margin-right:30px;
}

.footer{
    position:relative;
}

.siteMap {
    position:relative;
    background-color:#ff0000;
}

.siteMapCol1 {
    position:absolute;
    left:0px;
}

.siteMapCol2 {
    position:absolute;
    left:150px;
}

.siteMapCol3 {
    position:absolute;
    left:300px;
}

.siteMapCol4 {
    position:absolute;
    left:450px;
}

.siteMapCol5 {
    position:absolute;
    left:600px;
}

.siteMapLevel1 {
    font-weight:bold;
    list-style-type:none;
    color:#333333;
    text-indent:none;
}

.siteMapLevel2 {
    font-weight:normal;
    list-style-type:none;
    color:#555555;
    padding-left:0px;
}

.siteMapLevel3 {
    list-style-type:none;
    color:#555555;
    padding-left:10px;
}

Я отображаю на экране 1024x768 с использованием Firefox 3.6.15

Ответы [ 3 ]

4 голосов
/ 11 апреля 2011

Абсолютно позиционированные элементы не собираются расширять свои содержащие элементы, только позиционированные realtive и static будут. Поэтому, если вы не установите высоту / ширину, размеры div.sitemap и ul равны 0.

Поскольку вы все равно жестко программируете позиционирование, вы можете просто переключиться на плавающие и жестко закодировать ширину и поля / отступы. Таким образом, пока вы очищаете свои поплавки, они будут расширять содержащиеся элементы.

Пример здесь: http://jsfiddle.net/kMudG/

1 голос
/ 11 апреля 2011

, а не абсолютное позиционирование списков, которое полностью удаляет списки из потока, что является причиной, по которой нет фона ... как сказал @ prodigitalson в своем ответе (+1)

другое альтернативное решение;

вы можете использовать inline-block s с шириной 150px, сохраняя их в заданных вами позициях ... таким образом, возможно, есть небольшое преимущество перед плавающими, потому что они не будут переноситься, и вам не придется очищать их

Пример JSFiddle: здесь

0 голосов
/ 11 апреля 2011

Я не совсем уверен, что вы спрашиваете, но вы упомянули, что ваши предметы переполняют div. В css установлен оверлей: скрытый; и это могло бы решить это. (Если это ваша проблема)

...