Опять про резиновый слой

Razor2k · August 28, 2009

Может не все перерыл, но не смог найти решения под свою задачу, а задача такова, отображение имени файла, потом куча точек, потом размер файла, выровненный по правому краю:

1. file1.doc........................................19 Кб

2. file1 long name.doc........................19 Кб

3. file1 very very long name.doc..........19 Кб

Самое близкое решение - в слое контейнере с фоном-точкой разместить два слоя с float:left и float: right, но получается криво, т.к. точки налазят на текст имени файла и размер. А засунуть слой с точками между двумя слоями (left и right) так, чтобы он растянулся по краями соседних слоев мне не удалось, подскажите как же сделать красиво???

mishka · August 28, 2009

Попробуйте тоже решение, только добавте бекграунд этим двум плавающим блокам. Бекграунд - цвет фона. И если что то паддингами еще и подровнять

Edited August 28, 2009 by mishka2

Razor2k · August 28, 2009

Попробуйте тоже решение, только добавте бекграунд этим двум плавающим блокам. Бекграунд - цвет фона. И если что то паддингами еще и подровнять

Можно в принципе, только не совсем универсально решение. А нет ли способа "вписать" слой по-ширине между плавающими?

mishka · August 28, 2009

А чем то что вы предлагаете будет универсальнее?

Понял - возможность использования под этим всем делом неоднородного бекграунда...

Edited August 28, 2009 by mishka2

mishka · August 28, 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>Test</title>
	<style type="text/css">
		body{
			margin:0;
			font:14px/18px Verdana,Tahoma,sans-serif;
		}
		.box{
			width:100%;
			overflow:hidden;
		}
		.name-hold{
			height:1%;
			overflow:hidden;
		}
		.size{
			float:right;
		}
		.name{
			float:left;
		}
		.dotted-line{
			display:block;
			overflow:hidden;
			height:1%;
			background:url(dotted-line.gif) repeat-x;
		}
	</style>
</head>
<body>
<!-- wrapper -->
<div id="wrapper">
	<div class="box">
		<span class="size">19K</span>
		<span class="name-hold">
			<span class="name">Size</span>
			<span class="dotted-line"> </span>
		</span>
	</div>
</div>
<!-- end wrapper -->
</body>
</html>

Спаны использовал чтобы без стилей это все становилось в линию... чтобы можно было понять что к чему

Edited August 28, 2009 by mishka2

Great Rash · August 28, 2009

Этот элемент лишний <span class="name-hold">

mishka · August 28, 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>Test</title>
	<style type="text/css">
		body{
			margin:0;
			font:14px/18px Verdana,Tahoma,sans-serif;
		}
		.box{
			width:100%;
			overflow:hidden;
		}
		.name{
			float:left;
		}
		.size{
			float:right;
		}
		.dotted-line{
			display:block;
			overflow:hidden;
			height:1%;
			background:#ff0 url(dotted-line.gif) repeat-x;
		}
	</style>
</head>
<body>
<!-- wrapper -->
<div id="wrapper">
	<div class="box">
		<span class="name">Size</span>
		<span class="size">19K</span>
		<span class="dotted-line"> </span>
	</div>
</div>
<!-- end wrapper -->
</body>
</html>

Edited August 28, 2009 by mishka2

psywalker · August 28, 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;}
	body { font: bold .625em Tahoma, Geneva, sans-serif; margin: 2em;}

	   ul{
		 width: 30em;
		 background: #eff2df; 
		 list-style: none; 
		 padding: 2em;
		 position: relative;
		 left: -.3em;
		 top: -.3em;
	}
		 li { zoom: 1; position: relative; border-bottom: .1em dotted #F00; padding-right: 10em;}
		   li b { padding-right: .5em; position: relative; bottom: -.5em; left: 0; background: #eff2df;}
		   li span { 
				 position: absolute; 
				 right: 0; 
				 bottom: -.5em;
				 background: #eff2df;
				 padding-left: .5em;
		}

		div { background: #809900; width: 34em;}
 </style>
</head>

<body>
<div>
 <ul>
	<li>

	   <span>Цена длинная</span>
	   <b>Хм, Хм, посмотрел, покрутил в голове идеи и решил написать своё. Получилось, конечно, похоже, но без л и ш н их посмотрел, покрутил в голове идеи и решил написать своё. Получилось, конечно, похоже, но без л и ш н их </b>
	</li>
	<li>
	   <span>Цена длинная</span>
	   <b>Хм, ХмХм, посмотрел, покрутил в голове идеи и решил написать своё. Получилось, конечно, похоже, но без л и ш н их , посмотрел, покрутил в голове идеи и решил написать своё. Получилось, конечно, похоже, но без л и ш н их посмотрел, покрутил в голове идеи и решил написать своё. Получилось, конечно, похоже, но без лишних </b>
	</li>

		<li>
	   <span>Цена длинная</span>
	   <b>Хм, посмотрел, покрутил в голове идеи и решил написать своё. Получилось, конечно, похоже, но без лишних </b>
	</li>
	<li>
	   <span>Цена длинная</span>
	   <b>Хм, посмотрел, покрутил в голове идеи и решил написать своё. Получилось, конечно, похоже, но без лишних </b>

	</li>
		<li>
	   <span>Цена  длинная</span>
	   <b>Хм, посмотрел, покрутил в голове идеи и решил написать своё. Получилось, конечно, похоже, но без лишних </b>
	</li>
	<li>
	   <span>Цена длинная</span>

	   <b>Хм, посмотрел, покрутил в голове идеи и решил написать своё. Получилось, конечно, похоже, но без лишних </b>
	</li>
 </ul>
</div>
</body>
</html>

mishka · August 28, 2009

Достойное решение, сохранил для примера на будующее

psywalker · August 28, 2009

Достойное решение, сохранил для примера на будующее smile.gif

Кстати на самом деле достойное, я просто на тот момент помойму всё перепробовал, а это оказалось самое идеальное, так что такие вот дела

Razor2k · August 29, 2009

Спасибо большое, display:block и overflow:hidden это то, что мне не хватало

Andry48 · September 13, 2009

Добрый день! Хочу сказать по поводу вышеизложенного меню. Все хорошо в этом варианте, но вот блок тени при увеличении текста в IE7 (по Ctrl+) выползает из под верхнего вниз. У меня на сайте тоже такая же проблема. Вот здесь: Турфирма Континент-тур в левом меню. правда оно сделано немного по другому, но суть описанной проблемы не меняет. Как это исправить?

Edited September 13, 2009 by Andry48

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