[Помогите] Верстка из psd как правильно сверстать лого и текст вокруг него?

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем Kwen, 22 июл 2016.

  1. Kwen

    Kwen

    Регистрация:
    22 июл 2016
    Сообщения:
    1
    Симпатии:
    0
    http://pixs.ru/showimage/primerjpg_4486683_22681031.jpg

    Всем привет! Помогите новичку в этом не легком деле :Smile:
    Вобщем шапка сайта. Как правильно реализовать так, чтобы логотип был слево, а текст обтекал его с правой стороны, но также у него float был left.
    Притом, что текст должен быть разного стиля.

    Как единым изображением вставить флоат лево, это я знаю. Но мне хочется, чтобы можно было редактировать после текст, через html, а не через фотошоп.
     
  2. YoYo

    YoYo

    Регистрация:
    20 июл 2016
    Сообщения:
    120
    Симпатии:
    27
    <div id="shapka">
    <div id="logo"><a href=""><img src=""></a></div>
    <div id="text"><span style="">text_1</span><br /><br /><span style="">text_2</span></div>
    </div>
    Или таблицей.
     
  3. Rudaki29rus

    Rudaki29rus

    Регистрация:
    8 авг 2016
    Сообщения:
    12
    Симпатии:
    1
    <div id="shapka"> - Не надо так делать для шапки сайта, для этого есть header и присваивать id тоже не есть гуд, если есть необходимость, то лучше воспользоваться классами.
     
  4. xKEEPERx

    xKEEPERx

    Регистрация:
    7 сен 2016
    Сообщения:
    2
    Симпатии:
    0
    HTML:
    <div class="futures">
    <a href="#" title="Logotype"><img src="/img/logo.png"></a>
    <span class="futures_text1">Text1</span><br>
    <span class="futures_text2">Text2</span>
    </div>
     
  5. wh1tegray

    wh1tegray

    Регистрация:
    19 сен 2016
    Сообщения:
    5
    Симпатии:
    1
    HTML:
    <style>
        .logo{float:left;}
        .logo_text{float:left;}
    </style>
    <div class="logo">
        <a href="#" title="logo_link"><img src="http://wmasteru.org/styles/baisik/xenforo/log.png"></a>
    </div>
    <div class="logo_text">
        <span class="top_text">Logotip-logotip</span><br>
        креатив креатив креатив
    </div>
    если правильно всё понял