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

shamahn · June 9, 2008

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

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

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

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

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

Vladiger · June 9, 2008

Да, да, да!!!

Присоединяюсь к головоломке, ибо сам уже давно забил на блочную верстку, но "прогрессивность" покоя не дает.

Хотелось бы, что бы весь этот макет был еще и "резиновым", то есть при изменении размеров окна браузера (от минимума до максимума), ни один из блоков не улетал куда нибудь "в зону недосягаемости".

shamahn · June 9, 2008

Ставлю 5 баксов, что ожидаются костыли

Emm · June 9, 2008

вам показать, или сохраните п'ять баксов)

shamahn · June 9, 2008

Зависит от красоты решения. Обязательно чтобы пропускалось валидатором, и не длинне чем таблицами (с учетом css). А так и не прочь подарить 5 баксов

homm · June 9, 2008

Я бы еще добавил, что без явы.

shamahn · June 9, 2008

homm, само собой. Чистый html+css, красивый, и валидный!!!

Vladiger · June 9, 2008

5 баксов - это чуть меньше 150 рублей.

Со всей ответственностью заявляю, с легкостью расстался бы с 5-тью баксами за эффектную реализацию того, что я пока могу сделать только таблицами.

Не "сэмулировать" с кучей недочетов и багов, а именно четко сверстать так, как я сверстал не без помощи таблиц.

PS Скрин могу приложить, если уж на то пошло.

shamahn · June 9, 2008

Vladiger, уже 10 баксов на кону. За 5 строчек

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

ну не 5 строчек)

<!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, #right, #main { height:100%;}
#main { margin: 0 auto; width:1024px;}
#left { width: 200px; background: #face00; float:left; position:absolute;}
#right { width: 824px; background: #cefa00; float:right; position:absolute; margin-left: 200px;}


</style>
 </head>
 <body>





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

 </div>


 </body>

</html>

дальше модифицировать по0желанию, думаю идея ясна

shamahn · June 9, 2008

jhhsdjfhaskjhfalksdhjflaskdjhflaksjhdfasdjhflkasjhfkljahfklajhfkashfklashfkalsjhflkashfkashkljlkjlj

Попробуйте это вставить вместо первого дива

не замечаю чтобы ширина его изменилась

:)

Конкурс продолжается

Vladiger · June 9, 2008

Ну здрасти, приехали!

Эт че такое?

#main { margin: 0 auto; width:1024px;}

Не-е-е-е!!! Давайте не халтурить. У меня видеорежим стоит 800x600 и вообще речь идет о "резиновой верстке" валидном HTML+CSS не зависимой от браузера и видеорежима.

homm · June 9, 2008

ну не 5 строчек)

Что-то это никак не тянет на решение задачи, озученной в #1

shamahn · June 9, 2008

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

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

ой черт.. не так прочитал)

shamahn · June 9, 2008

Девятилап, да ладно. Червнец хотел на халяву срубить Ждем еще гуру

Иван Шумов · June 9, 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, #right, #main { height:100%;}
#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">2
2
2
2
2
</div>
</div>



 </body>

</html>

просто не так прочитал задачу что - давать номер кошелька?)

Vladiger · June 9, 2008

Девятилап - Вставил в

<div id="left">1dddddddd11111111111111111111111111111dddddddd11111111111111111111111111111dddddddd11111111111111111111111111111dddddddd11111111111111111111111111111dddddddd1111111111111111111111111111</div>

и почему то

улетел куда-то (я его еле нашел) вниз...

shamahn · June 9, 2008

Девятилап, слушай, шикарно! не думал, что это ваабще возможно

2 проблемки: владигер которую озвучил, и 2-я в ИЕ белая полосочка разделяющая слои.

И деньги твои

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

overflow: hidden

мог бы и сам подумать вместо того чтобы придираться

shamahn · June 9, 2008

Девятилап, я не придераюсь. Я совершенно серьезно. А куда вставить оверфлов?

Vladiger · June 9, 2008

Ну В общем согласен... Это не придирки.

Действительно, хотелось бы получить "четкий" и "стабильный" макет такой простой задачи. Ведь пока мы не обсуждаем что будет в этих слоях далее (в процессе верстки).

Кстати правда: - А куда overflow: hidden воткнуть... Я чет пробую, а полоска все равно не убирается.

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

с полоской поразбираюсь завтра ....спать пора, завтра работать %) обязательно решу проблему)

Vladiger · June 10, 2008

Мне вот интересно стало: - А вот такую вот простенькую табличку, можно вообще блоками забацать со всей "стабильностью" и "резиновостью" и насколько блочный код будет оптимален и красив?

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

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

денег заплатишь?)))

Victor Ananiev · June 10, 2008

<html> 
<head>
<title></title>
<style> 
BODY
{
padding:0;
margin:0;
} 
#l1, #l2, #l3, #l4, #l5, #l6, #l7, #l8
{ 
display:block;
margin:0;
padding:0;
overflow:hidden; 
}
#l1
{
background-color:#6699FF;
width:80%;
height:20%; 
float:left;
} 
#l2
{ 
width:20%;
height:80%;
background-color:#FF0099;
float:right;
}
#l3
{ 
width:20%;
height:80%;
background-color:#663399;
float:left;
}
#l4
{ 
width:80%;
height:20%;
background-color:#0000CC;
float:right;
} 
#l5
{ 
background-color:#FF6633;
width:80%;
height:20%; 
float:left;
}
#l6
{ 
background-color:#FF9966;
width:20%;
height:80%; 
float:right;
}
#l7
{ 
background-color:#FF3366;
width:20%;
height:80%; 
float:left;
}
#l8
{ 
background-color:#FFCC99;
width:80%;
height:20%; 
float:right;
}
</style>
</head>
<body>
<div style="height:100%; width:100%; position:absolute;">
<div id="l1"> </div>
<div id="l2"> </div>
<div id="l3"> </div>
<div id="l4"> </div>
</div>
<div style="left:20%;top:20%;width:60%; height:60%;background-color:#FFFFCC;position:absolute;">
<div id="l5"> </div>
<div id="l6"> </div>
<div id="l7"> </div>
<div id="l8"> </div>
</div>
</body>
</html>

ГЫ) вышло, не ожидал от себя такких познаний) Вот только проблемка с линиями в опере(постоянно) мозилле(местами) осел схавал(парадокс))) Тлько правда пока без отступов))

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