Новая тема   Ответить

 Блогер
подскажите плз как сделать вот такую табличку только дивами?

вся таблица шириной 600px
картинка 150*150 - align top, center
тайтл H2 - align top left, font size 18px
текст - align top left

заранее благодарен

 rexes
чтото типа этого:

<div class="cont">
<div class="left"><a href="##"><img src="img.jpg" width=150px height="150px"></a></div>
<div class="right"><strong>Title</strong> <p>Tvoy tekst</div>
</div>

в стилях пишешь это:

<style type="text/css">

.cont { width:600px;}
.left {float: left; padding: 2px; width: 150px;}
.right {float: right; padding: 2px; width: 435px;}

</style>

 FXIX
<div class="wrap">
<img src="картинка.png" />
<div>
<h2>заголовок</h2>
<p>пост</p>
</div>
</div>

div.wrap {overflow:hidden; zoom:1; width:600px;}
div.wrap img {float:left; width:150px; height:150px;}
div.wrap div {padding-left:160px;}

 SAV
бордер еще остался

 Блогер
обоим спасибо, помогло

 Parfumer
Код:

У меня только один див .box

 hardy
Parfumer писал:

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

 Parfumer
hardy писал:

Задача была сделать проще html код, избежать семантически излишних блоков на дивах. То что я написал конешно несовершенный код. Но и для случая когда нужно, чтобы текст продолжался заполняться, не обтекая картинку, наверное можно что-то поколдовать со стилями, в частности для тега <p>

 hardy
Parfumer писал:

Ну спорить не будем, в каждом конкретном случае нужно смотреть на дизайн и руководствоваться здравым смыслом. Если человек делает для себя и точно знает что будет именно картинка, заголовок и текст - то без дива действительно код меньше и красивее. Но если не уверен что клиент ничего позже не добавит/не изменит лучше вариант с блоком, т.к. "а вдруг нужно будет справа еще добавить <ul>" к примеру?

 Skat
hardy писал:

ТС просил аналог таблицы, так что по идее такой вариант как ты сказал и должен быть, хотя можно и без дива, но не всегда удобно это потом для редактирования