VPF::Верстка блоков. - Форум программистов

Melo

Дата 11.3.2009, 15:31 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 8
Регистрация: 11.3.2009

Репутация: нет
Всего: нет

Вобщем, есть страница, на ней надо сделать блоки.
Вот как делаю:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body {
    margin: 0px;
}

ul {
    margin: -20px 0 0 -20px;
    padding: 0;
}

ul li {
    list-style: none;
    width: 616px;
    margin: 20px 0 0 20px;
    border:1px solid red;
}

ul li:hover {
    background: #EFEFEF;
}
</style>
</head>
<body>
<ul>
  <li>
    <div style="float:right;width:464px;">
      asdas<br/>
      asdas<br/>
      asdas<br/>
      asdas<br/>
      asdas<br/>
      asdas<br/>
      asdas<br/>
      asdas
    </div>
    <div style="width:140px;margin-right:10px;">
      <img width="140" height="105" src="0.jpg"/>
    </div>
  </li>
  <li>
    <div style="float:right;width:464px;">
      asdas<br/>
      asdas<br/>
      asdas<br/>
      asdas<br/>
      asdas<br/>
      asdas<br/>
      asdas<br/>
      asdas
    </div>
    <div style="width:140px;margin-right:10px;">
      <img width="140" height="105" src="0.jpg"/>
    </div>
  </li>
</ul>
</body>
</html>

В ие нормально показывает, в мозилле все блоки с текстом вылазят за границу <li>, как сделать чтоб не вылазили?

bars80080

Дата 11.3.2009, 15:34 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

Код


ul li { display: block; }

не поможет?

Melo

Дата 11.3.2009, 17:26 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 8
Регистрация: 11.3.2009

Репутация: нет
Всего: нет

нет :(

помогает если задать

Код


ul li { height: 180px; }

но это не выход

bars80080

Дата 11.3.2009, 18:12 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

так помогает:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body {
    margin: 0px;
}

ul {
    margin: -20px 0 0 -20px;
    padding: 0;
}

ul li {
    display: block;
    list-style: none;
    width: 616px;
    margin: 20px 0 0 20px;
    border:1px solid red;
}

ul li:hover {
    background: #EFEFEF;
}
div.clear { clear: both; }
</style>
</head>
<body>
<ul>
  <li>
    <div style="float:right;width:464px;">
      asdas<br/>
      asdas<br/>
      asdas<br/>
      asdas<br/>
      asdas<br/>
      asdas<br/>
      asdas<br/>
      asdas
    </div>
    <div style="width:140px;margin-right:10px;">
      <img width="140" height="105" src="0.jpg"/>
    </div>
    <div class="clear"></div>
  </li>
  <li>
    <div style="float:right;width:464px;">
      asdas<br/>
      asdas<br/>
      asdas<br/>
      asdas<br/>
      asdas<br/>
      asdas<br/>
      asdas<br/>
      asdas
    </div>
    <div style="width:140px;margin-right:10px;">
      <img width="140" height="105" src="0.jpg"/>
    </div>
    <div class="clear"></div>
  </li>
</ul>
</body>
</html>

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »