|
|
|
| Переучиваюсь верстать на дивах. Но кое-что все равно делаю пока таблицами. Вот переверстал сайт один свой - выложу - спрошу кое-что по нему.
А пока вопрос такой: как задать дивами две колонки? Я знаю, что это прописной пример, но обычно в таких примерах делают так:
<div style="width: 30%; float: right;>
</div>
<div style="width: 70%; float: left;">
</div>
|
А мне нужно что-то вроде этого:
<div style="width: 70%; float: left;">
</div>
<div style="width: 190px; float: right;>
</div>
|
Основные отличия: у правого блока должна быть фиксированная ширина. Больший блок должен идти первее в коде, чтобы не нарушалась семантика (в болшом блоке основной текст, в маленьком - заметки) и улучшалась индексируемость.
Сейчас я заменяю это кодом:
<table>
<tr>
<td width="70%">
</td><td width="190px">
</td>
</tr>
</table>
|
| |
|
|
|
|
|
|
|
для: SHAman
(14.01.2007 в 21:04)
| | не стесняйся эксперементировать.
относительно этого случая:
<div style="width: 70%; float: left;">
</div>
<div style="width: 190px; float: left;>
</div>
|
| |
|
|
|
|
|
|
|
для: AlexSol
(14.01.2007 в 21:31)
| | Ой! Извините! В задачке ошибся. Надо чтобы див с процентами занимал полностью весь экран по горизонтали, но мелкий див не сваливался вниз.
На width=100% не выйдет... Как бы посчитать что-то вроде 100%-190px? Понимаю, что глупость написал, но все же. Жесткая верстка - не хочу. Полностью процентная - не устраивает в данном случае. Правая колонка должна быть жесткой по ширине, причем ширина заранее известна (вверху стоит картинка, по ее ширине и задается ширина столбца).
AlexSol, тебя я ждал в первую очередь в этой теме:) | |
|
|
|
|
|
|
|
для: SHAman
(14.01.2007 в 21:41)
| | таки дождался =)
использовать вложенность и отрицательные поля.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style>
#all{
border:1px solid red;
}
#left{
float:left;
border:1px dotted red;
width:100%;
margin-left:-410px;
}
#right{
border:1px solid silver;
float:left;
width:400px
}
#inn{
padding-left:410px;
}
.clear{ clear:both}
</style>
</head>
<body>
</div>
<div id="all">
<div id="left">
<div id="inn">
astext<br />astext<br />astext<br />astext<br />astext<br />astext<br />
</div>
</div>
<div id="right">
121212121212121212121212121<br />121212121212121212121212121<br />
121212121212121212121212121<br />121212121212121212121212121<br />
121212121212121212121212121<br />
</div>
<div class="clear"></div>
</div>
</body>
</html>
|
собственно нужно только ограничение на минимальную ширину всего окна.
вот еще посмотри http://softtime.ru/forum/read.php?id_forum=4&id_theme=29549&page=1 - пример Fear.86 | |
|
|
|
|
|
|
|
для: AlexSol
(14.01.2007 в 22:00)
| | Спасибо. Забавно... Изучу. Вот еще интересно как избавиться от сползания дивов... Этот вопрос давно меня волнует... ну, если опера и ФФ еще поддерживают minwidth, то в IE вообще без вариантов... | |
|
|
|
|
|
|
|
для: SHAman
(14.01.2007 в 22:05)
| | имитировать этот minwidth. тоже с отрицательными полями. посмотри у того же fear.86 или поиском - я раз пять пример приводил. | |
|
|
|