Sign in to follow this  
shamahn

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

Recommended Posts

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

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

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

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

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

Share this post


Link to post
Share on other sites

Да, да, да!!!

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

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

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

Share this post


Link to post
Share on other sites

ну не 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желанию, думаю идея ясна

Share this post


Link to post
Share on other sites
jhhsdjfhaskjhfalksdhjflaskdjhflaksjhdfasdjhflkasjhfkljahfklajhfkashfklashfkalsjhflkashfkashkljlkjlj

Попробуйте это вставить вместо первого дива ;) не замечаю чтобы ширина его изменилась :):)

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

Share this post


Link to post
Share on other sites

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

Эт че такое?

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

и почему то

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

Share this post


Link to post
Share on other sites

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

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

И деньги твои :)

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Member Statistics

    46,457
    Total Members
    3,128
    Most Online
    Nip
    Newest Member
    Nip
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.