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

Статус
В этой теме нельзя размещать новые ответы.
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 KB · Просмотры: 12
Я и сам могу это сверстать, просто спрашиваю как лучше сделать, что бы добится максимального результата по схожости.
 
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>
примерно так
 
Код: 
<div class="wrapper">
    <div id="left"></div>
    <div id="right"></div>
</div>
wrapper - это для черного кружка "vs." и черной линии - делается через бекграундом по чентру. и нет проблем.
 
MrScruff написал(а):
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>
примерно так
Нажмите для раскрытия...
Вот именно что примерно. Просто на слой линии вертикальной и кружочка налаживается контент, я сделал вот так:
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 KB · Просмотры: 3
Код: 
<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 KB · Просмотры: 1
это класс, который можно присваивать почти любому элементу: br, div, a, i,..

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

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

почему именно тэг <i></i>? - просто так, можно было бы и <div> b <br> для этого использовать.
 
А что происходит с бекграундом когда мы убираем этот класс? Куда он уходит? Бекграунд у главного дива, а в нем два вложеных дива с флоатом, вроде бы нечего необычного нет. Так что же все таки с ним происходит?
 
-)))

ну как тебе обьяснить. Так и не обьясниш.. просто это одно из свойств float; вот здесь можно почитать:
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

особенно в пункте "Баги связанные с float"

лучше я ничего не нашел что б обьяснить тебе
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху