[html] Все вопросы по вёрстке задавайте здесь

Есть код вида

<div class="anons">

          <div class="mbody">

            <h1>Заголовок статьи</h1>

            <span class="date">17 августа 2012, 16:48</span>

             <p><img src="image/img.jpg" alt="" title="" />

             длинное описание товапа</p>

            <p>Дополнительная инфо по товару</p>

          </div>

          <div class="clear"></div>

 </div>

Стили прописаны. Меня интересует - он в корне правильный этот код? Просто я (в верстке нифига не понимаю) сам его правил и в результате он получился таким. Мне не нравится <p> перед img, но если его поставить после img то текст вниз сползает. На текущий момент текст слева от фото идет.

Проблема - в опере контент начинается в замом низу слева от картинки.

Файл стилей

.anons {

	position: relative;

	margin: 0 0 15px 0;

}

.mbody {

	overflow: hidden;

/*	padding: 0 0 0 8px;*/

	font-size: 13px;

}

.mbody h1 {

	font-size: 22px;

	font-family: 'Trebuchet MS';

	font-weight: none;

	margin:0;

	padding:0;

}

.mbody .date {

	color:#8e8e8e;

	font-size: 12px;

	margin: -4px 0 5px 0;

	display: inline-block;

}

.mbody IMG { float: left; position: relative; padding: 5px 8px 4px 1px;} /*сверху справа снизу слева*/

.mbody P { text-indent:9px; padding: 1px 0 8px 0;}

postavkin, вы не написали какой результат нужен =)

<img .. лучше вынести из параграфа, дописав в него (img) что-то вроде style="float:left; margin-right:10px; margin-bottom:10px;" чтобы картинка была слева, а поля под картинкой и справа от неё были по 10 пикселей

В принципе нормальный код. По крайней мере без явных таких критических вещей )))

В опере нужно знать конкретную версию в которой что-то не канает. И исходя из этого применять CSS-хак конкретно под данную версию оперы.

Сборник хаков можно найти здесь.

дык там и так float:left

---------- Добавлено 16.10.2012 в 22:54 ----------

А разве есть хаки конкретно под оперу?

Такой немного глобальный вопрос:

Какой тип верстки лучше использовать? Табличную или блочную?

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

TaediumVitae,

Да, есть. И под оперу и под Google Chrome.

DavyJohnes,

Как вам сказать... да, табличная вёрстка устарела. Но если вам надо нарисовать таблицу на страничке, пользуйтесь тегом table )))) это не есть табличная вёрстка, вы просто рисуете табличку. А блочная вёрстка она тем и хороша, что развязывает руки верстальщику, т.е. можно блоки хоть как располагать на странице. Табличной вёрсткой такого не сделаешь. Ну и плюс из-за обилия таблиц значительно утяжеляется код страницы. Он делается тяжело читаемым и просто больше весит - из-за этого документ дольше грузится.

Спасибо Ragnarok. <p> переставил за img. Правда я вернул код к тому что у меня изначально был, но проблема - тогда текст "17 августа 2012, 16:48" тоже идет слева от картинки. Подскажете, как его сделать под h1 и потом перенос строки и уже картинка...Спасибо.

код

<div class="anons">
          <div class="mbody">
            <h1>Заголовок статьи</h1>
			<span class="hkroshki">1213 / 2131243</span>
            <div class="mimage"><img src="img/image-big.jpg" alt="" title="" /></div> 
           <div class="text">
          <p>текст <a href="">свободное</a> от работы время  текст </p> <p> текст</p>
           <span class="date">12 августа 2012, 16:48</span>
		   </div>
         </div>
          <div class="clear"></div>
        </div>

стили

.anons {
	position: relative;
	margin: 0 0 15px 0;
}
.mimage {
	float: left;
	position: relative;
	padding: 4px 8px 4px 1px;;
}
.mbody {
	overflow: hidden;
/*	padding: 0 0 0 8px;*/
	font-size: 13px;
}
.mbody h1 {
	font-size: 22px;
	font-family: 'Trebuchet MS';
	font-weight: none;
	margin:0;
	padding:0;
}
.mbody .date {
	color:#8e8e8e;
	font-size: 12px;
	margin: -4px 0 5px 0;
	display: inline-block;
}
/*.mbody IMG { float: left; position: relative; padding: 5px 8px 4px 1px;} /*сверху справа снизу слева*/ 
.mbody P { text-indent:9px; padding: 1px 0 8px 0;}
.mbody .hkroshki {
	color:#8e8e8e;
	font-size: 12px;
	margin: -4px 0 5px 0;
	display: inline-block;
}

ps пришлось код "вернуть к исходному" - так как в опере коряво отображается если не оборачивать картинку в отдельный див.

ps2. после строки с классом hkroshki поставил <div class="clear"></div> в итоге картинка с текстом поставились на новую строку. Так можно делать?

.mbody .date {

	color:#8e8e8e;

	font-size: 12px;

	margin: -4px 0 5px 0;

	display: inline-block;

}

/*.mbody IMG { float: left; position: relative; padding: 5px 8px 4px 1px;} /*сверху справа снизу слева*/ 

.mbody P { text-indent:9px; padding: 1px 0 8px 0;}

.mbody .hkroshki {

	color:#8e8e8e;

	font-size: 12px;

	margin: -4px 0 5px 0;

	display: inline-block;

}

.mbody .date {

color:#8e8e8e;

font-size: 12px;

margin: -4px 0 5px 0;

display: block;

}

Серьезно? И хак для оперы будет работать только для оперы, а хак для хрома - только для хрома?

TaediumVitae,

А попробовать слабо?