_axl

там цмс генерит контент, на некоторых страницах есть наполнение для второго блока, а на других нет первым идет блок который должен растягиваться, а вторым - с фиксированной шириной

Здравствуйте, подскажите пожайлуста, мне нужно сверстаь два блока стоящих рядом, но один из них может иногда не показываться на странице, тогда первый должен заполнять всю ширину родителя, т.е. у первого ширина динамическая, у другого фиксированная, если просто задать им float:left, то второй блок будет перескакивать на другую строку, т.к. контеет в первом будет растягивать его на всю ширину, которая не ограничена. Как это сделать?

Здравствуйте! Недавно пришлось верстать макет, где блоки были обернуты в специфическую рамку, которую пришлось порезать на картинки с уголками и четырмя сторонами. В итоге получился примерно такой код: <div id="wrapper"> <div class="left-top-corner"></div> <div class="left-vertical"></div> <div class="right-vertical"></div> <div class="right-top-corner"></div> <div class="right-bottom-corner"></div> <div class="left-bottom-corner"></div> <div id="content"> <div class="top-gorisontal"></div> <div class="right-top-corner"></div> <div class="right-vertical"></div> <div class="left-bottom-corner"></div> <div class="bottom-gorisontal"></div> <div class="right-bottom-corner"></div> <div id="right"> <div class="left-top-corner"></div> <div class="top-gorisontal"></div> <div class="left-vertical"></div> <div class="left-bottom-corner"></div> <div class="bottom-gorisontal"></div> </div> </div> </div> <div class="clear"></div> <div id="bottom"> <div class="left-top-corner"></div> <div class="top-gorisontal"></div> <div class="right-top-corner"></div> <div class="left-vertical"></div> <div class="left-bottom-corner"></div> <div class="bottom-gorisontal"></div> <div class="left-vertical"></div> <div class="right-vertical"></div> </div> Я вот и подумал, а что если изначально в коде будут только <div id="wrapper"> <div id="content"> <div id="right"> </div> </div> </div> <div class="clear"></div> <div id="bottom"> </div> А остальную размету, предназначенную для оформления добавит js? Поисковые машины довольны, семантика несравненно улучшилась, количество людей сидящих без js сейчас очень мало. Что думаете?

Доделал я таки сайт Написал php скрипт, который подогнал картинку под большинство разрешений, js на сайте подставляю нужный. Правда не совесем точно иногда получается, всмысле, бывает края у фона чуть-чуть не видно, но здесь ничего не поделаешь, т.к. слишком уж разные пропорции экрана, например, у широкоформатников и у обычных офисных 17" сайт - cp.vl.ru . Буду рад адекватной критике

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

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

ну так все равно ведь придется использывать js и подставлять нужну картинку под разное разрешение.. иначе картинка, например, для 1280*1024 страшно потянется на широкоформатках

Дизайнер прислал макет для сайта, фоном к которому - большое цельное изображение, которое никак не потянешь, не зациклишь. Давно уже не верстал такие макеты. Я знаю два способа: js подставлять картинки под разные разрешения или сделать одну большую картинку, которая бы была заведомо больше люблого используемого сейчас разрешения. Можно их скомпоновать. Но как-то оба кажутся не очень корректными, можно что-нибудь еще придумать?

ну это html аналог css Anami body { margin: 0; padding: 0; }

не, надо в процентах, чтобы при смене разрешения отступ изменялся пропорционально вообще, страницу я доверстал, посмотреть можно здесь: http://defolt-12.narod.ru/examples/nescafe/ к сожалению от фиксированного фона пришлось уйти, т.к. качество надписи NESC сохраненной в gif( чтоб была прозрачность ) не устроило, пришлось делать топорно, через картинку высотой 2000пкс, а жаль - было очень удобно(( сейчас пытаюсб решить последнюю проблему - min-width у страницы 1100 пикселей, если меньше то контент наползает на черный фон, но с такой шириной на разрешении 1024 появляется полоса прокрутки а есть, где посмотреть, я смотрел в яндексе, ничо не нашел похожего

да на самом деле, я заверстал, здорово помог совет с фиксированным фоном, сейчас фон ведет себя как нельзя лучше еще добавил js который меняет картинку в зависимости от разрешения, т.к. была проблема еще и шириной на маленьких разрешениях он вообще занимает пол страницы( текст распологается справа от черной полосы ), как залью, выложу ссылку, покритикуете заодно спрашу о другой проблемке, у меня текс, который справа от черной полосы помещен в div, отступ( margin-left ) задаю в процентах. в большинстве браузеров работает нормально, а вот в ie6 отступ получается меньше, в чем может быть причина?

вот это прости не понял. это как? а все, понял, bgproperties="fixed" типа

а по существу? уже ничо не сделаешь, надо верстать((

Народ, помогите, пожайлуста, советом. Макет предусматривает вот такой фон: Никак не могу понять как сделать, проблема в масштабировании, мало того, что надо делать под любые разрешения, что еще можно решить сделав заведомо большую картинку и/или юзать js. Но ведь еще может быть ситуация, что на страницу выведется очень длинный текс и картинка кончится. Может есть у кого мысли?

а вот это не аморально: http://www.htmlbook.ru/content/?id=109 ? использовать границу в 200 пикселей в качестве блока под данные? я поэтому и перехожу на блоки, т.к. портфолио на таблицах постаит на тебе крест, как на верстльщике. Клерик, я читал по поводу этого и везде достоинства блочной верстки представляются уж больно призрачными у меня вообще, появилась мысль, что блоки ввели, что бы хоть как-то дифференцировать умения верстальщиков, ибо версть на таблицах можно научиться за месяц практики, поэтому и возникла проблема, когда человеку реально съевшему собаку в веб индустрии может составить конкуренцию малец пол года назад начавший изучать css

отойду от темы своего же топика, но уж больно давно меня мучает вопрос. Вот вы, знающие люди, объясните зачем устраивать такой изврат? Ведь заверстать такую вещь на таблицах в разы проще и быстрее, и все там сразу будет и растягивание и обтекание, картинку запозициониривать это всего лишь align и valign, и не надо вставть на голову, чтобы содержимое вело себя так, как надо. ЗАЧЕМ??? п.с. речь не о конкретном случае, а вообще, о блочной верстке, будь моя воля, я бы с радостью продолжал верстать таблицами, но больное геморно тогда сейчас работу искать

в том-то и беда, что нет:

Спасибо! А можно сделать так, чтобы блока растягивался в зависимости от размера вставленного текста?

а так?

Здравствуйте! Подскажите, пожайлуста, как сверстать вот такой макет: красная это рамка вокруг блока, рисунок по середине блока. Спасибо!

Здравствуйте! Подскажите, пожайлуста, как можно сверстать вот такой расположение блоков на странице: Сайт будет колончатым, прижатым к левому краю, поэтому расстояние от края до блока можно брать только от левого, расстояние от правого будет зависеть от разрешения монитора. Я было почти сверстал вот так: <style> #content{ float: left; width: 275px; } #container{ float: left; margin-right: -90px; padding-left: 40px; } #menu{ margin-right: 200px; border: 1px solid red; text-align: right; } #clearing {height: 0; clear: both; } </style> <div style="margin-left: 400px; padding-top: 65px;"> <div id="container"> <div id="menu"> <a href="#" >Ссылка1</a><br /> <a href="#" >Ссылка1</a><br /> <a href="#" >aaaaaawwwwwwwСсылка1</a><br /> <a href="#" >Ссылка1</a><br /> <a href="#" >Ссылка1</a><br /> </div> </div> <div id="content" > <h1>Заголовок</h1> Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </div> <div id="clearing"> </div> </div> но так блок с меню ведет себя не так как надо, если ссылка длинная и она делает блок шире, то текст как бы отталкивается от левого края, который остается неподвижным, а двигает правую границу, заодно двигая и блок с контентом., вот так: Что можете посоветовать, как победить трабл?

Здравствуйте, подскажите пожайлуста по трем вопросам: 1. Есть вот такой код: <table> <tr> <td style="" valign="bottom"><a href="index.php?register=yes" class="reg">Зарегестрироваться</a></td> <td><input value="Войти" type="submit" /></td> </tr> </table> Как все это сделать не таблицей, а блоком? Причем, естественно, нужно, чтобы надпись и кнопка находились на одном уровне. Это я к тому, что просто рядом можно разместить и так: <a href="index.php?register=yes" class="reg">Зарегестрироваться</a><input value="Войти" type="submit" /> но в Опере и ФФ надпись подымается к верху, а в ИЕ6 норм. 2. По оформлению кнопки: <input style="background-color: #DD0000; vertical-align: middle; border: 0; color: #FFFFFF; font-size: 12px; width: 66px; height: 21px; line-height: 21px; margin-top: 12px; " value="Войти" type="submit" /> здесь тоже проблема кроссбраузерности, в разных браузерах надпись отбражется на разном уровне в кнопке, в идеале хотелось бы разместить ее по строго центру. еще наблюдается, что надпись немного различается по высоте в разных браузерах, можно с этим что-то сделать? 3. Как через css формление оформление для input ов, различая их по типам, вот это: input[type=text] {border: 1px solid #A9C0CE;} input[type=submit], input[type=button]{background-color: #DD0000; border: 0; color: #FFFFFF; vertical-align: middle; } не работает в IE6 ( 4. Более общий вопрос по CSS. Как в нем определить новый класс, как копию уже существующего класса, т.е. к примеру у меня на странице есть много ссылок различающихся по цвету, но у всех одинаковая высота и поведение при наведении: .links{ text-decoration: none; font-size: 12px; } .links:hover{ text-decoration: underline; } так вот, каждый раз определяя новый класс для ссылки приходиться прописывать и эти общие для всех свойства, а можно сделать какое-то наследование, типа .navigate extends .links , и navigate потом имел все свойства класса links, нужные из которых я пререопределю? Спасибо!