[HELP] Помогите идеей

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

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

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    Есть кусок сайта, и я не знаю как его лучше сверстать. Что бы было как можно ближе к картинке. Там нужно сделать три поля как бы:
    HTML:
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
    Картинка в реальном размере, так что размеры можно снимать и писать в стили.
     

    Вложения:

    • hhh.jpg
      hhh.jpg
      Размер файла:
      73,7 КБ
      Просмотров:
      12
  2. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    Я и сам могу это сверстать, просто спрашиваю как лучше сделать, что бы добится максимального результата по схожости.
     
  3. MrScruff

    MrScruff

    Регистр.:
    9 сен 2008
    Сообщения:
    279
    Симпатии:
    66
    HTML:
    <div style="width:твое значение px; float:left">СЛЕВА</div>
    <div style="width:твое значение px; float:left">ЦЕНТР</div>
    <div style="width:твое значение px; float:left">СПРАВА</div>
    <div style="clear:all"></div>
    примерно так
     
  4. капрал

    капрал

    Регистр.:
    2 окт 2008
    Сообщения:
    336
    Симпатии:
    45
    Код:
    <div class="wrapper">
        <div id="left"></div>
        <div id="right"></div>
    </div>
    
    wrapper - это для черного кружка "vs." и черной линии - делается через бекграундом по чентру. и нет проблем.
     
  5. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    Вот именно что примерно. Просто на слой линии вертикальной и кружочка налаживается контент, я сделал вот так:
    HTML:
    			<div class="bk-center">
    				<div class="konkurs-vs"></div>
    				<div class="konkurs-line"></div>
    			</div>
    			<div class="bk-left">eevw</div>
    			<div class="bk-right">werv</div>
    
    Код:
    			.bk-center{
    				background:none;
    				width:36px;
    				position:absolute;
    				margin-left: 266px;
    			}
    			.bk-left{
    				background:#ff0000;
    				width:283px;
    				float:left;
    				position:relative;
    			}
    			.bk-right{
    				background:#ff0000;
    				width:283px;
    				float:right;
    				position:relative;
    			}
    			.konkurs-vs{
    				background:url(../images/konkurs-vs.jpg) no-repeat  center;
    				width:36px;
    				height:39px;
    			}
    			.konkurs-line{
    				background:url(../images/konkurs-line.jpg) repeat-y center;
    				width:36px;
    				height:220px;
    			}
    У меня вышло то, что в миниатюре. Слой с линией и кружочком абсолютный, а сверху уже два слоя с контентом, и я могу его позиционировать его как угодно.

    капрал, напиши плиз стили к своему способу. А то как то не сильно понятно, что да как. У меня просто кружочек и линия это два разных слоя.
     

    Вложения:

    • hhh.jpg
      hhh.jpg
      Размер файла:
      46,4 КБ
      Просмотров:
      3
  6. капрал

    капрал

    Регистр.:
    2 окт 2008
    Сообщения:
    336
    Симпатии:
    45
    Код:
    <html>
    <style>
    	body {background:url('./bg.jpg');}
    	.clear {clear:both; display:block; height:0; overflow:hidden;}
    	.wrapper {background:url('./middle.png') 50% 0 no-repeat;}
    	#left {width:50%; float:left; /* float left/right */}
    	#right {width:50%; float:right; /* float left/right */}
    </style>
    <body>
    <div class="wrapper">
        <div id="left"><br /><br /><br />Круглая прикольная штука, Круглая прикольная штука, Круглая прикольная штука, Круглая прикольная штука, Круглая прикольная штука, </div>
        <div id="right"><br /><br /><br />Музыкальный стиль, в котором за счет Музыкальный стиль, в котором за счет Музыкальный стиль, в котором за счет </div>
    	<i class="clear"></i>
    </div>
    </body>
    </html>
    
    файлы тоже приложил. закинь их в туже папку что и файл с кодом и увидиш наглядный результат

    Заметь, что этот круг с черточкой намного длинее чем на макете - это для того что б если блоки #left или #right будут болше чем обычно чертокча автоматом дорисовывалась.
     

    Вложения:

    • bg.jpg
      bg.jpg
      Размер файла:
      682 байт
      Просмотров:
      22
    • middle.png
      middle.png
      Размер файла:
      2 КБ
      Просмотров:
      1
    rafic нравится это.
  7. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    Хм... а что делает вот эта часть?
    ??
     
  8. капрал

    капрал

    Регистр.:
    2 окт 2008
    Сообщения:
    336
    Симпатии:
    45
    это класс, который можно присваивать почти любому элементу: br, div, a, i,..

    так как надо что бы у wrapper'a бекграунд отображался, а в этом блоке два элемента с float'ом, то перед самым закрытием блока wrapper вставляем <i class="clear"></i> что б этот wrapper отрисовался бы полностью.

    убери <i class="clear"></i> - и увидишь что бекграунд wraper'а не отображается.

    почему именно тэг <i></i>? - просто так, можно было бы и <div> b <br> для этого использовать.
     
  9. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    А что происходит с бекграундом когда мы убираем этот класс? Куда он уходит? Бекграунд у главного дива, а в нем два вложеных дива с флоатом, вроде бы нечего необычного нет. Так что же все таки с ним происходит?
     
  10. капрал

    капрал

    Регистр.:
    2 окт 2008
    Сообщения:
    336
    Симпатии:
    45
    -)))

    ну как тебе обьяснить. Так и не обьясниш.. просто это одно из свойств float; вот здесь можно почитать:
    http://designformasters.info/posts/css-float-theory-and-practice/
    особенно в пункте "Баги связанные с float"

    лучше я ничего не нашел что б обьяснить тебе
     
Статус темы:
Закрыта.