Как сделать такую верстку?

Статус
В этой теме нельзя размещать новые ответы.
A

Artu

Постоялец
Регистрация
3 Мар 2009
Сообщения
75
Реакции
2
Вопрос начинается от "Бренда".
"Бренд" и и "Возраст от" выводится в маленькой таблице по определению задачи.

Если я вначале описываю картинку,а потом эту таблицу,то таблица переносится ниже картинки.

Если все верстать в одной большой таблице то,как сделать перенос описания,ведь клетки таблицы так не объединяются?
 

Вложения

  • Расположение элементов на странице отображения товароа.jpg
    Расположение элементов на странице отображения товароа.jpg
    39,5 KB · Просмотры: 48
ne0zx написал(а):
пропиши у картинки float:left
Нажмите для раскрытия...
Не помогает. А где прописывать?Прям в теге?
Она и так слева.Если писать текст то он справа от карртинки по нижнему краю.Если таблицу,то она переносится под картинку.
 
у картинки float:left;margin:0 10px 10x 0; (а вообще было бы лучше если бы показал весь код, который ты написал)
 
  • Нравится
Реакции: Artu
примерно так, незадумываясь,
HTML: 
<div style="">Наименование товара</div>
<div style=" width:200px; margin-left:200px;">Артикул</div>
<div style=" width:180px; height:180px; float:left; margin-right:10px; margin-bottom:10px;">картинка</div>
<div style=" margin-left:200px; width:200px; ">Бренд</div>
<div style=" margin-left:200px; width:200px; ">Возраст от</div>
<p align="left"> Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товараОписание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара Описание товара </p>
<div style="clear:both">
<div style="float:left; margin-left:100px;">1</div>
<div style="float:left; margin-left:100px;">2</div>
<div style="float:left; margin-left:100px;">3</div>
</div>
 
  • Нравится
Реакции: Artu
мой изврат:
HTML: 
<html>
<head>
<style>

.all
{
width: 800px;
margin 20% auto;
}

img
{
float:left;
margin-right:15px;
}

h2
{
border: black dotted 1px;
}
</style>
</head>
<body>

<div class="all">

<center>
<h1>Наименование товара</h1>
</center>


<img src="postimage.jpg" />

<h2>Артикул:</h2>
<h2>Бренд:</h2>
<h2>Возраст:</h2>

<p>Вопрос начинается от "Бренда".
"Бренд" и и "Возраст от" выводится в маленькой таблице по определению задачи.

Если я вначале описываю картинку,а потом эту таблицу,то таблица переносится ниже картинки.

Если все верстать в одной большой таблице то,как сделать перенос описания,ведь клетки таблицы так не объединяются?</p>

<p>Не помогает. А где прописывать?Прям в теге? 
Она и так слева.Если писать текст то он справа от карртинки по нижнему краю.Если таблицу,то она переносится под картинку.</p>

</div>
</body>
</html>
 
  • Нравится
Реакции: Artu
а я вот примерно так бы сделал:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
.container div{ clear:both; text-align:center; }
.container img{ float:left; width:200px; height:200px; }
</style>
</head>

<body>

<div class="container">
	<div>some name</div>
	<div>some artikul</div>
    <img src="image" alt="" />
    <p>бренд</p>
    <p>возраст от</p>
    <p>текст<br />текст<br />текст<br />текст<br />текст<br />текст<br />текст<br />текст</p>
    <div>
    	<input type="button" value="для печати" />
    	<span>цена</span>
    	<input type="button" value="в корзину" />
    </div>
</div>

</body></html>
 
  • Нравится
Реакции: Artu
Возьми firefox установи в него firebug и эксперементируй... 2 минуты и у тебя будет 10 решений твоей проблемы :)

а вобще к картинке примерить display:inline и вроде как все :) единственно что тебе немного "задрать" нужно "Артикул" если margin не поможет юзай position:relative и top:-20px; (если у тебя lineheight: 20px). :ay:
 
  • Нравится
Реакции: Artu
Семантически вернее сделать артикул и завание вот так
dt{width:20%;}
dl{width:auto;}
это чтоб в строчку, а не друг под другом не отображались

HTML: 
<dl>
   <dt>Название</dt><dd>Товар 1</dd>
   <dt>Бренд</dt><dd>Вася999</dd>
   <dt>Артикул:</dt><dd>777</dd>
</dl
>
 
  • Нравится
Реакции: Artu
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху