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

Тема в разделе "Веб-дизайн", создана пользователем Artu, 5 май 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. Artu

    Artu Постоялец

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

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

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

    Вложения:

  2. ne0zx

    ne0zx

    Регистр.:
    1 ноя 2008
    Сообщения:
    212
    Симпатии:
    74
    пропиши у картинки float:left
     
    Artu нравится это.
  3. Artu

    Artu Постоялец

    Регистр.:
    3 мар 2009
    Сообщения:
    75
    Симпатии:
    3
    Не помогает. А где прописывать?Прям в теге?
    Она и так слева.Если писать текст то он справа от карртинки по нижнему краю.Если таблицу,то она переносится под картинку.
     
  4. HalliK

    HalliK Постоялец

    Регистр.:
    4 фев 2007
    Сообщения:
    117
    Симпатии:
    166
    у картинки float:left;margin:0 10px 10x 0; (а вообще было бы лучше если бы показал весь код, который ты написал)
     
    Artu нравится это.
  5. vovkama

    vovkama Писатель

    Регистр.:
    11 фев 2008
    Сообщения:
    8
    Симпатии:
    1
    примерно так, незадумываясь,
    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 нравится это.
  6. Compressor

    Compressor

    Регистр.:
    31 янв 2009
    Сообщения:
    314
    Симпатии:
    200
    мой изврат:
    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 нравится это.
  7. BDSG

    BDSG

    Регистр.:
    28 фев 2009
    Сообщения:
    203
    Симпатии:
    109
    а я вот примерно так бы сделал:
    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 нравится это.
  8. Atec

    Atec

    Регистр.:
    28 апр 2007
    Сообщения:
    296
    Симпатии:
    31
    Возьми firefox установи в него firebug и эксперементируй... 2 минуты и у тебя будет 10 решений твоей проблемы :)

    а вобще к картинке примерить display:inline и вроде как все :) единственно что тебе немного "задрать" нужно "Артикул" если margin не поможет юзай position:relative и top:-20px; (если у тебя lineheight: 20px). :ay:
     
    Artu нравится это.
  9. vasya999

    vasya999

    Регистр.:
    14 дек 2006
    Сообщения:
    310
    Симпатии:
    45
    Семантически вернее сделать артикул и завание вот так
    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 нравится это.
Статус темы:
Закрыта.