Girn

Спасибо огромное, то что нужно!

Здравствуйте, сверстайте мне пожалуйста табличку как показано на рисунке, без использования стандартных таблиц (<table>,<tr>,<td>). Таблица должна занимать 100% области в которой она будет находится. Левая и правая колонки по 45%, центральная 10%. В крайних колонках картинки и текст должны выравниватся по центру. В центральной колонке будут находится два слова, первое, а второе обязательно под ним - выравнивание вертикально и горизонтально по центру. Вся строка, тоесть все то что нарисовано должно быть как один блок (оно должно быть как одна ссылка). Почему я написал "строка" - потому что под низом будут еще подобные таблички. И еще при наведении миши должен менятся цвет всей строки (всего что нарисовано). Да и рамка не нужна, на рисунке лишь для правильного восприятия. Пытался это сделать сам, но не получилось. Вот мои наработки http://cssdeck.com/labs/collab/cjkwyao8

Сверстаю ваш шаблон за "спасибо". Хорошее качество, скорые сроки за "просто так". Связь: ICQ: 923один998 Jabber: fisher-net(песик)jabber.org E-mail: olehfisher(тот же песик)gmail.com

Решил проблему добавив в конце блока line1: <div style="clear: both;"></div> Работает, но правильно ли это? и можно ли сделать по другому?

Вот есть у меня уже сверстаный блок. Вот его код: <div id="line1"> <div class="block-line1"> <div class="block-header"> <h1>About WhiteSquare</h1> <span></span> </div> <div class="block-body"> <div class="block-image"><img src="images/img1.png" alt="" /></div> <div class="block-text"> <p>In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean augue arcu, convallis ac vulputate vitae, mollis non lectus. Donec hendrerit lacus ac massa ornare hendrerit sagittis lacus tempor. Vivamus et dui et neque accumsan varius et ut erat. Enean augue arcu, convallis ac ultrices.</p> </div> <div class="block-more"><a href="#">Read more</a></div> </div> </div> <div class="block-line1"> <div class="block-header"> <h1>a word from OUR ceo</h1> <span></span> </div> <div class="block-body"> <div class="block-image"><img src="images/img1.png" alt="" /></div> <div class="block-text"> <p>“In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean augue arcu, convallis ac vulputate vitae, mollis non lectus. Donec hendrerit lacus ac massa ornare hendrerit sagittis lacus tempor. Vivamus et dui et neque accumsan varius et ut erat. Enean augue arcu, convallis ac.”</p> </div> <div class="block-more">Yane Naumoski, CEO</div> </div> </div> </div><!-- end line1--> и css: /* <Блок> */ .block-line1, .block-line2, .block-line3, .block-header, .block-header span, .block-body, .block-text { overflow: hidden; } .block-line1 { float: left; width: 460px; margin-left: 10px; padding-right: 10px; } .block-line2{ float: left; width: 300px; margin-left: 10px; padding-right: 10px; } .block-line3 { float: left; width: 940px; margin-left: 10px; padding-right: 10px; } .block-header h1 { float: left; height: 15px; font-size: 13px; font-family: Oswald, Geneva, sans-serif; text-transform: uppercase; color: #7e7e7e; padding: 2px 9px 1px 20px; background: url(images/title-bg.png) no-repeat; } .block-header span { display: block; height: 15px; background: url(images/title-bg2.png) repeat-x; } .block-body { margin-top: 15px; } .block-image { float: left; width: 136px; height: 137px; padding: 1px; margin-right: 19px; border: 1px solid #cccccc; } .block-text { height: 125px; padding-top: 4px; font-size: 12px; font-family: Tahoma, Geneva, sans-serif; color: #8f8f8f; line-height: 1.3; } .block-more { font-size: 13px; font-family: Tahoma, Geneva, sans-serif; color: #525252; } .block-more a { font-size: 13px; font-family: Tahoma, Geneva, sans-serif; color: #525252; } .block-text p { margin: 0; } /* </Блок> */ Вроде бы все нормально, но вот мне понадобилось сделать отступ ниже этого блока, делаю так: #line1 { margin-bottom: 15px; } Но ничего не происходит. Разбираю в чем пролбема, делаю так: #line1 { margin-bottom: 15px; border: 1px solid black; } И вижу что рамки вокруг моего блока нет, она только сверху (потому и не работает правильно отступ): Соответственно вопрос: как сделать чтобы Блок line1 захвативал содержимое нормально?

Спасибо огромное, очень выручили!

Буду очень благодарен, а сейчас сам попробую о :after почитать...

Мне нужно сверстать вот такой блок: А именно вехнюю часть, где квадрат, надпись "ABOUT WHITESQUARE" и штриховка справа от надписи. В чем собственно проблема: нужно чтобы штриховка уменьшалась или увеличивалась в зависимости от текста. Тоесть чтобы не было так (когда я увеличу количество букв (фон наежал на буквы)): А фон сежал правее (вот так):