Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
Программирование. Ступени успешной карьеры. Авторы: Кузнецов М.В., Симдянов И.В. PHP 5. На примерах. Авторы: Кузнецов М.В., Симдянов И.В., Голышев С.В. MySQL на примерах. Авторы: Кузнецов М.В., Симдянов И.В. C++. Мастер-класс в задачах и примерах. Авторы: Кузнецов М.В., Симдянов И.В. PHP. Практика создания Web-сайтов (второе издание). Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Позиционирование дива CSS
 
 автор: SHAman   (14.01.2007 в 21:04)   письмо автору
 
 

Переучиваюсь верстать на дивах. Но кое-что все равно делаю пока таблицами. Вот переверстал сайт один свой - выложу - спрошу кое-что по нему.

А пока вопрос такой: как задать дивами две колонки? Я знаю, что это прописной пример, но обычно в таких примерах делают так:


<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>

   
 
 автор: AlexSol   (14.01.2007 в 21:31)   письмо автору
 
   для: SHAman   (14.01.2007 в 21:04)
 

не стесняйся эксперементировать.

относительно этого случая:

<div style="width: 70%; float: left;"> 

</div> 
<div style="width: 190px; float: left;

</div> 

   
 
 автор: SHAman   (14.01.2007 в 21:41)   письмо автору
 
   для: AlexSol   (14.01.2007 в 21:31)
 

Ой! Извините! В задачке ошибся. Надо чтобы див с процентами занимал полностью весь экран по горизонтали, но мелкий див не сваливался вниз.

На width=100% не выйдет... Как бы посчитать что-то вроде 100%-190px? Понимаю, что глупость написал, но все же. Жесткая верстка - не хочу. Полностью процентная - не устраивает в данном случае. Правая колонка должна быть жесткой по ширине, причем ширина заранее известна (вверху стоит картинка, по ее ширине и задается ширина столбца).

AlexSol, тебя я ждал в первую очередь в этой теме:)

   
 
 автор: AlexSol   (14.01.2007 в 22:00)   письмо автору
 
   для: 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

   
 
 автор: SHAman   (14.01.2007 в 22:05)   письмо автору
 
   для: AlexSol   (14.01.2007 в 22:00)
 

Спасибо. Забавно... Изучу. Вот еще интересно как избавиться от сползания дивов... Этот вопрос давно меня волнует... ну, если опера и ФФ еще поддерживают minwidth, то в IE вообще без вариантов...

   
 
 автор: AlexSol   (14.01.2007 в 22:08)   письмо автору
 
   для: SHAman   (14.01.2007 в 22:05)
 

имитировать этот minwidth. тоже с отрицательными полями. посмотри у того же fear.86 или поиском - я раз пять пример приводил.

   
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования