Как сделать такой каркас...

alexander.parphenuyk · October 19, 2009

Надо сделать такой каркас: (показан в двух примерах, чтобы было понятнее в чём суть)

есть блоки одного типа... (красненькие) надо чтобы ССЫЛКА>> ездила вправо.. в зависимости от их количества...

и есть блоки другого типа (зелёненькие) они на ссылку никак не действуют... но они должны добавляться в общий поток квадратиков....

div.container - резиновый... расширяется в зависимости от ширины окна броузера... соответственно должно увеличиваться(уменьшаться) количество блоков в одной строке....

не могу придумать как это реализовать (((

может поможете... :lol:

Justnewone · October 19, 2009

Надо сделать такой каркас: (показан в двух примерах, чтобы было понятнее в чём суть)
есть блоки одного типа... (красненькие) надо чтобы ССЫЛКА>> ездила вправо.. в зависимости от их количества...
и есть блоки другого типа (зелёненькие) они на ссылку никак не действуют... но они должны добавляться в общий поток квадратиков....
div.container - резиновый... расширяется в зависимости от ширины окна броузера... соответственно должно увеличиваться(уменьшаться) количество блоков в одной строке....
не могу придумать как это реализовать (((
может поможете...

Попробуйте, не уверен что получится (и если вам не надо белый фон), блоку с белым фоном не давайть оверфлоу или zoom, короче, чтобы он не чувствовал высоты. И всем блокам ширины, высоты и флоат. Скорей всего не ссылки будут залазить и вставать на место.

P.S: Белый фон эмулировать бекраундом ссылочного блока.

Edited October 19, 2009 by Justnewone

alexander.parphenuyk · October 19, 2009

фон блоков не нужен, я его для наглядности показал... на самом деле фон везде одинаковый... просто как бы так сделать чтобы ссылка выравнивалась по правому краю в зависимости от красных блоков... Ещё такой момент что когда в div.sub_container вставляешь ссылку, тогда красные блоки опускаются под ней на чучуть... а зелёный флоатятся влево неправильно... (упираются в этот чучуть) =(

убрал, флоат и оверфлоу....

получилось что ссылка едет до конца вправо (

Justnewone · October 19, 2009

фон блоков не нужен, я его для наглядности показал... на самом деле фон везде одинаковый... просто как бы так сделать чтобы ссылка выравнивалась по правому краю в зависимости от красных блоков... Ещё такой момент что когда в div.sub_container вставляешь ссылку, тогда красные блоки опускаются под ней на чучуть... а зелёный флоатятся влево неправильно... (упираются в этот чучуть) =(

Главному сепупермейн блоку этой конструкции, сделать общий паддинг сверху, а div.sub_container такой же отриц. верхний маргин. Ну и Флоат, чтобы он сокращался по ширине красных блоков и выравнивание по правому краю (в красных блоках переназначить на лево, если надо, а то будет наследоваться). Хотя, вот тут IE7 может показать что он гнида похлеще IE6, то есть, ссылка направо не пойдет, будет создаваться ощущение, что div.sub_container по ширине не растянулся, хотя, если ему дать бекграунд, реально будет отображаться что растянут. С чем связано - еще не понял, срабатывает не всегда, но в большинстве случаев.

psywalker · October 19, 2009

Не прокатит дружище?

<!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=utf-8" />
<title>Ссылки</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
		div.wrap {  overflow: hidden; background: blue; padding: 10px;}
			div.wrap li { 
				list-style: none;
				float: left;
				width: 100px;
				height: 200px;
				background: green;
				margin-right: 10px;
				margin-bottom: 10px;
			}


				div.wrap  ul.red { position: relative; float: left;}
				div.wrap  ul.red li { background: red; margin: 0; margin-right: 10px;}
					div.wrap ul.red a { position: absolute; top: 0; left: 0px; right: 0; bottom: 0; border: 3px dashed #000;}



</style>
</head>

<body>
	<div class="wrap">
			<ul class="red">
				<li>1<a href="#">RED SSILKA</a></li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			</ul>
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
	</div>
</body>
</html>

Justnewone · October 19, 2009

Не прокатит дружище?

"... div.container - резиновый... расширяется в зависимости от ширины окна броузера... соответственно должно увеличиваться(уменьшаться) количество блоков в одной строке..."

psywalker · October 19, 2009

"... div.container - резиновый... расширяется в зависимости от ширины окна броузера... соответственно должно увеличиваться(уменьшаться) количество блоков в одной строке..."

слушай, ну раз такое дело, то я пока ещё не дорос до того, что-бы такие штуки делать :lol:

Searcher · October 19, 2009

общий блок сделать плавающим, а ссылку в нем прижимать к правому краю.

Justnewone · October 19, 2009

общий блок сделать плавающим, а ссылку в нем прижимать к правому краю.

Да, я тож так предложил. Траблы будут с IE7.

psywalker · October 19, 2009

Да, я тож так предложил. Траблы будут с IE7.

а в смысле, как именно ваш план реализуется, можно посмотреть пример? :lol:

Justnewone · October 19, 2009

<!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=utf-8" />
<title>Ссылки</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
	div.wrap {  overflow: hidden; background: blue; padding: 10px 5px;}
	div.link {  float: left; margin-top: -10px; font-size: 10px; text-align:right}
	div.block {  float: left; width:100px; height:200px; margin: 10px 5px; text-align:left}
</style>
</head>

<body>
	<div class="wrap">
		<ul class="link">
			 <a href="#">Сцылко >>></a>
			 <div class="block"><a href="#">красное</a></div>
			 <div class="block"><a href="#">красное</a></div>
			 <div class="block"><a href="#">красное</a></div>
			 <div class="block"><a href="#">красное</a></div>
		</div>
		<div class="block"><a href="#">зеленое</a></div>
		<div class="block"><a href="#">зеленое</a></div>
		<div class="block"><a href="#">зеленое</a></div>
		<div class="block"><a href="#">зеленое</a></div>
		<div class="block"><a href="#">зеленое</a></div>
	</div>
</body>
</html>

Примерно так, если заработает, необходимые измерения добейте "на глаз".

Edited October 19, 2009 by Justnewone

Игорь Ермаков · October 21, 2009

А использовать таблицы, когда это намного более целесообразно уже "не по пацански" да?

Таблицы, ну или списки, но никак не блоки.

Sign In

Как сделать такой каркас...

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information