Любителям блочной верстки на засыпку!

shamahn · June 9, 2008

Ну, во первых, здравствуйте!

Начал я совсем недавно пытаться верстать дивами. Не скажу, что получаю удовольствие, что были моменты, которых я бы не сделал таблицами, но тем не менее стремлюсь к прогрессивному. А теперь, уважаемые знатоки, вопрос:

2столбцовый макет. Ширина левого меняется произвольно (в зависимости от содержимого). Правый - от конца левого и до конца экрана.

С помощью таблиц - решается очень прозрачно. Хотелось бы увидеть, что существует такое же прозрачное решение и для дивов

Спасибо за внимание

Vladiger · June 10, 2008

Бу-га-га-а-а-а!!! Жжоте товарисчи!!!

Vindex10 - И в правду прикольно получилось. Кривовато, с какими-то полосками, но все же прикольно!!! Вот жалко только что в IE этим примером даже и не пахнет.

Но может вернемся все-таки к более простой задаче из первого сообщения темы?

Victor Ananiev · June 10, 2008

Ээээ постойте, почти доделал !!!!!!!!!))))))))))))) ВОТ здался тебе этот селлспейсинг!!!!!!!!!!!!}:>

Victor Ananiev · June 10, 2008

Нет, сдаюсь, не побороть мне селлспейсинг(((

Vladiger · June 10, 2008

Нет, сдаюсь, не побороть мне селлспейсинг(((

Да дело даже не в cellspacing... Ты попробуй эту таблицу в IE, ее там вообще нет, какие-то фрагменты кусками на экране.

Victor Ananiev · June 10, 2008

Убрал доктайп и все ОК

Vladiger · June 10, 2008

Фигасе!!!

Молодец! Супер получилось, неожидал такого результата. Жалко что с cellspacing не получилось, но все же я в восторге. Действительно эффектно тем, что это все на дивах.

Неплохая заявка на решение проблемы озвученной в сообщении #1:cool:

Elendor · June 10, 2008

<!DOCTYPE html PUBLIC "-
//W3C//DTD XHTML 
1.1//EN" "http://www.w3
.org/TR/xhtml11
/DTD/xhtml11.dtd">
<html>
<head>
<style type="text/css">
.cellsBlock { width: 100%; 
display: table; 
}.cellLeft,.cellMiddle,.cell
Right { display: table-cell 
!important; display: inline; 
/* для IE */ 
}.cellLeft,.cellRight { 
width:35%; }.cellMiddle { 
width:30%;}
<style>
</head>
<body>
<div class="cellsBlock"> 
<div class="cellLeft"> <h2
>Ячейка 1</h2> <p>текст 
первой ячейки</p> 
</div> <div 
class="cellMiddle"> <h2
>Ячейка 2</h2> <p>текст 
второй ячейки</p> </div> 
<div class="cellRight"> <h2
>Ячейка 3</h2> <p>текст 
третьей ячейки</p> 
</div> </div> 
</body>
</html>

Vladiger · June 10, 2008

Не-е-е-е... Это совсем не то, повнимательней первое сообщение почитай.

Более менее наглядный пример привел Девятилап в сообщении #17, но там есть недочеты, которые не удовлетворяют требованиям задачи.

ARA · June 10, 2008

за 10 баксов такие вопросы не решаются, разве что из-за спотривного интереса

а верстать все что угодно можно дивами, это ещ? не самые сложные примеры, лишь бы руки откуда надо росли, да и не традиционное мышление порой неплохо помогает

Иван Шумов · June 10, 2008

ничо - разберемся) а потом ZenGarden покажем))) пость им поплохеет.

PS пока не добил первый пример, работа мешает %)

ARA · June 10, 2008

2Девятилап не торопись)).. тоже заказы делать надо, освобожусь, то же прикалюсь, попробую верстану

Victor Ananiev · June 10, 2008

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<style type="text/css">
body
{
margin:0;
padding:0;
height:100%;
} 
#left, #right, #main
{
height:100%;
margin:0;
padding:0;
overflow:hidden;
}
#left
{ 
float:left; 
background-color:black;
color:white;
} 
#right
{ 
background-color:green;
color:yellow;
} 
#main
{ 
position:absolute;
width:100%; 
background-color:green;
}
</style>
</head>
<body> 
<div id="main"> 
<div id="left">WWW</div>
<div id="right">EEE</div>
</div>
</body>
</html>

Просто перекрыл линию бэком, в опере не видно в лисе вроде тож не должно, а в ие будет небольшой отступ)

Fu-tai · June 10, 2008

Вот вы тут холивар то развели.

То Vladiger and shamahn

Девятилап - Вставил в
<div id="left">1dddddddd11111111111111111111111111111dddddddd11111111111111111111111111111dddddddd11111111111111111111111111111dddddddd11111111111111111111111111111dddddddd1111111111111111111111111111</div>
и почему то
улетел куда-то (я его еле нашел) вниз...
Давно у нас контент стал неразрывным?
Раставь пробулы в том бреде что ты запихнул в блок и удивишня насколько все туда влезает!
overflow: hidden
мог бы и сам подумать вместо того чтобы придираться
В данном случае это крайность!!!
Ну здрасти, приехали!
Эт че такое?
#main { margin: 0 auto; width:1024px;}
Не-е-е-е!!! Давайте не халтурить. У меня видеорежим стоит 800x600 и вообще речь идет о "резиновой верстке" валидном HTML+CSS не зависимой от браузера и видеорежима.
Убери эту строчку из CSS и получишь резиновый макет на всю ширину экрана.
И незабудь здать ширину в процентах!
Мне вот интересно стало: - А вот такую вот простенькую табличку, можно вообще блоками забацать со всей "стабильностью" и "резиновостью" и насколько блочный код будет оптимален и красив?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Разноцветная таблица</title>
<style type="text/css" media="screen">
td {
 border: 1px solid #000;
}
</style>
</head>
<body>
<table width="100%" height="100%" cellpadding="0" cellspacing="5" align="center" border="0">
 <tr>
 <td colspan="4" bgcolor="#6699FF"> </td>
 <td rowspan="4" bgcolor="#FF0099"> </td>
 </tr>
 <tr>
 <td rowspan="4" bgcolor="#663399"> </td>
 <td colspan="2" bgcolor="#FF9966"> </td>
 <td rowspan="2" bgcolor="#FFCC99"> </td>
 </tr>
 <tr>
 <td rowspan="2" bgcolor="#FF6633"> </td>
 <td bgcolor="#FFFFCC"> </td>
 </tr>
 <tr>
 <td colspan="2" bgcolor="#FF3366"> </td>
 </tr>
 <tr>
 <td colspan="4" bgcolor="#0000CC"> </td>
 </tr>
</table>
</body>
</html>
Можно все! Главное как!
для этого пользуй либо абсолютное позиционирование, либо поменяй тип блока на табличный. Либо извратись связкой нескольких принципов построения трехколоночного и двухколоночного макета!
Ребят тема что лучше или хуже не актуальна уже года два!!!

Victor Ananiev · June 10, 2008

Ребят тема что лучше или хуже не актуальна уже года два!!

Эта тема перешла в простой спор: сможешь такое на блоках или нет, если да, то дам денег. Но это все делаестья не ради денег, а ради удовольствия и практики.

Можно все! Главное как!
для этого пользуй либо абсолютное позиционирование, либо поменяй тип блока на табличный. Либо извратись связкой нескольких принципов построения трехколоночного и двухколоночного макета!

Вот и попользуй, за одно покажешь насколько умно глаголишь))

maddogrts · June 10, 2008

<style type="text/css" media="screen">
#q1, #q2 {float: left; }
#q1 {background: red; width:100%;}
#q2 {background: blue;}
* {height:100%}
</style>
</head>
<body>
<div id="q1">

 <div id="q2">
 Привfffffffffffffffggddddddffffffffffffffffffffffffffffffffffffffffffggggggggggggggggggggggffffет
 </div>
 Трехчастная фактурная форма, несмотря на внешние воздействия, символизирует голос, и здесь в качестве модуса конструктивных элементов используется ряд каких-либо единых длительностей. Кластерное вибрато, на первый взгляд, варьирует октавер, о чем писали такие авторы, как Н. Луман и П. Вирилио. Механизм власти, на первый взгляд, полифигурно приводит серийный ревер, об этом прямо сказано в ст. 2 Конституции РФ. Совершенно неверно полагать, что политическое учение Платона регрессийно вызывает миксолидийский христианско-демократический национализм, исчерпывающее исследование чего дал М. Кастельс в труде "Информационная эпоха". П. Бурдье понимал тот факт, что теологическая парадигма категорически трансформирует системный политический процесс в современной России, однако сами песни забываются очень быстро. 
</div>
</body>

я не очень задачу понимаю ((( то или не то ?

Иван Шумов · June 10, 2008

у меня лучше, с запасом!)

только осталось решить проблему с длинными строками

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title></title>

 <meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<style type="text/css" media="screen">
body { margin:0; padding:0; height:100%;}
#left, #main { height:100%; margin:0; padding:0; }
#main { position: absolute; width:100%; }
#left { background: #face00; float:left;}
#right { background: #cefa00;}


</style>
 </head>
 <body>





<div id="main">
 <div id="left">1dddddddd1111111111111111111111111111</div>
 <div id="right">

 sasa
 </div>
</div>



 </body>

</html>

вся хитрость в том что у нас стоит задача сделать чтобы был левый слой необтекаемым как ячейка таблицы. высоту же второго слоя здает контент))

Victor Ananiev · June 10, 2008

to maddogrts

Вроде бы так, но в осле расползается)

to Девятилап

2столбцовый макет. Ширина левого меняется произвольно (в зависимости от содержимого). Правый - от конца левого и до конца экрана.

Тут сказано просто двухстолбцовый макет, значит высоты одинаковые. ИМХО

Вот код для столбцов не растянутых на всю высоту:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<style type="text/css">
body
{
margin:0;
padding:0;
height:100%;
} 
#left, #right
{
height:100%;
margin:0;
padding:0;
overflow:hidden;
}
#left
{ 
float:left; 
background-color:black;
color:white;
} 
#right
{ 
background-color:green;
color:yellow;
} 
#main
{ 
position:absolute;
width:100%; 
background-color:green;
}
</style>
</head>
<body> 
<div id="main"> 
<div id="left">WWW wwwwwwwwwwwwwwwwww wwwwww wwwwwwwwwwwwwwww wwwwwwww wwwwwwwwwwwwww wwwww<br/>w huoehfhse agfi aef</div>
<div id="right">EEE</div>
</div>
</body>
</html>

Иван Шумов · June 10, 2008

Vindex - может ты и прав - помозгуем

Черт, в моей верстке куча проблем:

1) ресайз окна - съезжает второй столбец

2) футер не подцепить. вернее с трудом.

Ищем дальше народ

PS а спортивный интерес берет свое даже на работе)))

UPD ребята, если сделаем кроссбраузерно - нам респект - даже A List Apart не знает кроссбраузерного решения %)

Victor Ananiev · June 10, 2008

))Эт точно. Хотя я и не на работе, но смотрю фильм. А когда я смотрю фильм меня сложно отодрать от экрана))

Иван Шумов · June 10, 2008

Так, давайте правильно поставим задачу.

Нужен резиновый двухколоночный макет, с футером и хедером

левый столбец ширины контента, а правый - все оставшееся место

оптимизация верстки под 1024

при условии если контент правой части шире чем его ширина - верстка не должна ехать

давайте под такие условия подгонять.

конечно кросбраузерность в первую очередь, валидность - по возможности

Ребят, мы мазохисты?

Victor Ananiev · June 10, 2008

Кто сказал что оптимизация под 1024, и про хедер с футером никто не заикался) Или это уже новое задание? Кстати, а что означает по вашему не расползаться?

Иван Шумов · June 10, 2008

Да не заикался, но есть НО:

найди нормальный сайт без шапки и подвала. Вот - таких нет. А мы делаем шаблон для сайта.

Victor Ananiev · June 10, 2008

Я думаю что хедер и футер вставлять не нужно, а просто сделать так что бы добавляя в ваш код хедер и футер, не "ползли" колонки.

Иван Шумов · June 10, 2008

это одно и тоже)

shamahn · June 10, 2008

Девятилап, Вы еще с первой задачкой не справились Я держу деньги на готове

Sign In

Любителям блочной верстки на засыпку!

Question

Link to comment

Share on other sites

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

141 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information