Помогите решить вопрос с версткой

S
На сайте с 29.06.2009
Offline
33
453

Есть такой код

<div class="sideLeft-box">
<span>Своя информация</span>
<div class="sb-box-content">
<div class="site-word">
<div class="site"><a href="#">Москава</a> </div>
<div class="site"><a href="#">Екатеренбург</a> </div>
<div class="site"><a href="#">Москава</a> </div>
<div class="site"><a href="#">Москава</a> </div>
</div>
</div>
</div>

и стили

* {
margin: 0;
padding: 0;
}
.site-word {
float: left;
display: inline-table;
}
.site {
float: left;
width: 120px;
display: inline-table;
}
html {
height: 100%;
}
body {
height: 100%;
background-color: #F3F3E7;
font-family: "Myriad Pro";
font-size: 12px;
line-height: 18px;
}
#page {
max-width:1000px;
margin-right: auto;
margin-left: auto;
}
a {
color: #429FDD;
outline: none;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
p {
margin: 0 0 18px
}

.sideLeft-box {
width: 253px;
margin-top: 10px;
margin-bottom: 10px;
}

.sideLeft-box-fon {
background-image: url(images/sitebar/bg-left-top.png);
background-repeat: no-repeat;
background-position: left top;
position: relative;
z-index: 5;
top: -20px;
}

.sideLeft-box span {
line-height: 30px;
color: #FFFFFF;
background-image: url(images/sitebar/span.png);
height: 30px;
width: 223px;
display: block;
font-size: 18px;
padding-left: 30px;
}
.sb-box-content {
background-image: url(images/sitebar/bg.png);
background-repeat: no-repeat;
background-position: left bottom;
width: 253px;
position: relative;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}

вообщем когда флоатишь <li>

он же становится плавующими как бы в не блока с фоном

как убрать этот эффект?

задать высоту блока с фоном не выход

Нужно кросбраузерное решение

zip 67246.zip
1. самый стабильный хостинг рунета (http://mchost.ru/?referer=3875015244) 2. Деньги каждую минут(ТИЗЕРЫ) (http://teasernet.ru/?owner_id=355)
crab
На сайте с 02.09.2006
Offline
34
#1

Попробуйте так


<div class="sideLeft-box">
<span>Своя информация</span>
<div class="sb-box-content">
<div class="site-word">
<div class="site"><a href="#">Москава</a> </div>
<div class="site"><a href="#">Екатеренбург</a> </div>
<div class="site"><a href="#">Москава</a> </div>
<div class="site"><a href="#">Москава</a> </div>
<div style="float:none;clear:both"><!-- --></div>
</div>
<div style="float:none;clear:both"><!-- --></div>
</div>
</div>

тогда блоки .site-word и .sb-box-content будут иметь высоту плавающего содержимого

Пишу (/ru/forum/128360). ICQ 151648810, e-mail:crab12@rambler.ru
Биржа статей - уникальный контент недорого! (http://texchange.ru/)
JTRTA
На сайте с 06.07.2008
Offline
25
#2

в конце всех блоков с флоатами добавляете пустой div для которого надо прописать clear:both

Дизайн /ru/forum/493415 (/ru/forum/493415) Верстка от 15$ /ru/forum/509339 (/ru/forum/509339) Сайты под ключ aiogino.studio@gmail.com icq: 460146806
Olldman
На сайте с 21.04.2010
Offline
79
#3

Насколько я понял, строится меню, так? Если так, то какие div, зачем div? Что есть меню? Список ссылок на страницы ресурса. Так и оформлять его нужно списком, ведь это логичней.

Набросал примерчик. У вас там не указан размер шрифта для пунктов меню - лучше всетаки указать, потому как указанный для body шрифт есть не на каждом компьютере, поэтому браузеры отображают текст тем шрифтом, который у них по умолчанию. Ну а у каждого браузера свой. Это к вопросу о кроссбраузерности.

zip primer.zip

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий