ЦСС

Привет.

Имам следния проблем. Искам даден елемент да седи строхо определено в ляво с дължина 125пиксела. ОК. В дясно от него обаче в оставащото пространство искам да разположа два дива съответно заемащи 75 и 25% от оставащото пространство, като втория е залепен за дясната страна.
Приложил съм скица
[линк]

Но не знам какво да въведя за id дясна75 и дясна25 за да заемат по 75 и 25% от дива в който са разположени.

Съвсем примерно, нещо такова:

CSS:

#left { 

  float: left;

  width: 60px;

  margin: 0px;

  background-color: #DAA520;

  height: 100%;

}

#center {

   float: left;

   width: 75%;

   height: 100%;

   margin-left: 5px;

   background-color: #6495ED;

}

#right {

   float: left;

   margin-left: 5px; 

   width: 15%;

   height: 100%;

   background-color: #708090;

}

XHTML:

<div id="left">content here</div>

<div id="center">content here</div>

<div id="right">content here</div>

Това става лесно с таблица в таблица, но почитателите на CSS/DIV ще ме наплюят на момента...

<table width="100%">

	<tr>

		<td width="125">

			left element 125px

		</td>

		<td>

			<table width="100%">

				<tr>

					<td width="75%">

						right content 75%

					</td>

					<td width="25%">

						right content 25%

					</td>

				</tr>

			</table>

		</td>

	</tr>

</table>

Има три вида хора. Част от проблема, част от решението и част от пейзажа.

mr. vain - целата е да не ползувам таблици :) иначе си прав - опитвам се да се отдаличавам от тях, колкото и полезни да са ми.

Volkano v.5 - смаля ли прозореца малко и #right пада долу :(

За това предположих че дясната част е удобно да се вложи в един общ див ама резултата не е задоволителен все още.

Така няма да стане, защото размерите на двата div-а отдясно са проценти от родителския елемент, който в случая е body. Трябва още един div за контейнер.

за spacer-ите - слагат се, за да не стават разни бакии под float-ващите елементи. (ЕДИТ: за повече инфо: [линк] )

Само не ми е ясно как да се направи така, че най-десният div да не ходи нагоре-надолу при resize-ване и ще се радвам някой да ме осветли по тоя въпрос :)

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 

"[линк]">



<html lang="bg" xml:lang="bg" xmlns="[линк]">

<head>

<title>Zaglavie</title>

<style type="text/css">

<!--

#left125{

float: left;

width: 125px;

background-color: #ccc;

}

#container{

float: left;

}

#right75{

float: left;

width: 75%;

background-color: #fff;

}

#right25{

float: left;

width: 25%;

background-color: #ccc;

}

.spacer{

clear: both;

visibility: hidden;

margin: 0;

padding: 0;

}

-->

</style>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

</head>



<body>

<div id="left125"><p>left125</p><p>left125</p><p>left125</p></div>

<div id="container">

<div id="right75"><p>right75</p><p>right75</p><p>right75</p></div>

<div id="right25"><p>right25</p><p>right25</p><p>right25</p></div>

<hr class="spacer" />

</div> <!-- container -->

<hr class="spacer" />

</body>

</html>

[линк]

Хмм, я добави към #right и това: clear: right; мислим оправя проблема (освен ако ептен не свиеш прозореца до нулата)...

Като гледам темата за таблици и дивове е на път да се превърне в нещо като спора микрософт вс. линух (и също толкова смислена)

Хм, ако наредиш един до друг дивовете, никога няма да стане, защото 125 пиксела не са равни на 25 процента, ще ги докараш да стоят добре на една резолюция и толкова.
Виж това, дали ще ти свърши работа, сигурно може и по-умно, но това се сещам на прима виста.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "[линк]">

<html xmlns="[линк]">

<head>

<title>zaglavie</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

/*<![CDATA[*/

html,body {

margin: 0;

padding: 0;

text-align: center;

font: bold 14px Verdana, sans-serf;

height: 100%;

}

#left {

position: absolute;

left: 0;

top: 0;

width: 125px;

min-height: 100%;

background-color: red;

*height: 100%;

}

#main {

position: relative;

min-height: 100%;

width: 100%;

background-color: yellow;

*height: 100%;

}

#right {

position: absolute;

right: 0;

top: 0;

width: 25%;

min-height: 100%;

float: right;

background-color: blue;

*height: 100%;

}

/*]]>*/

</style>

</head>

<body>

<div id="main">Kolkoto ostane :-)

<div id="left">125px</div>

<div id="right">25%</div>

</div>

</body>

</html>

Scriptura pro scribente nihil probat...

хе хе
колко тормоз за нещо, което става елементарно с таблица

Когато боговете говорят, ония с фактите никакви ги няма.

Кой както го разбира:-) Човекът иска без таблица - ето вариант, а ако за тебе е тормоз - ами бачкай с таблици, няма лошо:-)

Scriptura pro scribente nihil probat...

мдам, освен че тормоз, също така и с доста неясен резултат - я стане, я не на браузъра Х, или на следващата му версия...

ама въпрос на личен избор де - дали ще си загубиш времето си е изцяло твоя работа

Just a genius

Мтака, оказа се, че съм се "обосрал немножко", понеже тоя код по-горе го писах на компютър без Firefox, ама сега ще се поправя.

Kодът горе върви както трябва само под IE, под Firefox десният container не ще да float-ва, защото се оказа, че му трябва задължително width. Понеже по условие не можем да му зададем ширина, нито в проценти, нито в единици, се прави следния трик: маха се float-ът на #container, в резултат на което левият му край отива под float-ващия #left125 и контентът се залепва за left125. За да се неутрализира тоя дефект, се слага на container ляв padding, (най-малко) колкото е широк float-ващият елемент - в случая 125px.

Сега по контента на #container не личи, че той се пъхва под left125, но ако #container стане по-дълъг от left125, почва да личи по background-а му (както е в примера тук). Съответно - слага се същият background, като на left125 и right25 и вече не личи.

Сега най-вероятно пак някой ще каже "По-лесно става с таблици" и ще е прав

И продължава да не ми е ясно защо най-десният div постоянно хвърчи нагоре-надолу при resize на прозореца. Само под IE го прави тоя номер. Някой pls да дообясни :)

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 

"[линк]">



<html lang="bg" xml:lang="bg" xmlns="[линк]">

<head>

<title>Заглавие</title>

<style type="text/css">

<!--

#left125{

float: left;

width: 125px;

background-color: #ccc;

}

#container{

width: auto;

padding-left: 125px;

background-color: #ffc;

}

#right75{

float: left;

width: 75%;

background-color: #fff;

}

#right25{

float: left;

width: 25%;

background-color: #ccc;

}

.spacer{

clear: both;

visibility: hidden;

margin: 0;

padding: 0;

}

-->

</style>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

</head>



<body>

<div id="left125"><p>left125</p><p>left125</p><p>left125</p></div>

<div id="container">

<div id="right75"><p>right75</p><p>right75</p><p>right75</p><p>right75</p><p>right75</p><p>right75</p><p>right75</p></div>

<div id="right25"><p>right25</p><p>right25</p><p>right25</p></div>

<hr class="spacer" />

</div> <!-- container -->

<hr class="spacer" />

</body>

</html>

[линк]

Определено тоз вариянт е най-дбория:)

Обаче поради факта се съм изтрил папка Internet Explorer от моя комп не мога да изтествам.

Блгодаря за оказаната помощ.

Мда сега го изтествах под ИЕ:(

Кой знае къв "хак" му трябва пак.

Открих защо така шава, нещо не му харесват процентите 75 и 25, много са му явно (?!). Намали 25 на 24 и готово


[линк]

Мдам ... сега пък се получава дупка в дясно, освен това ще трябва да му баеш още малко, че да върви и под ИЕ 5 и 5.5. .. изобщо ... ето как се пуска бяла перушина :-))
Не че съм за таблиците, но като стана дума за тях, някой да знае как да се покаже във Файърфокс празна таблица на 100% височина без да се вкарва браузера в quirks mode?

Scriptura pro scribente nihil probat...

Примерът:
[линк]

Статията:
[линк]




[линк]

Мерси:-)
Всъщност това е примерът с валидния код [линк].
Хитро е, талбица, позиционирана изцяло с цсс :-) Къде по-лесно е обаче да позиционираш някой див по същия начин...

Scriptura pro scribente nihil probat...

Мисля, че това бачка и на IE и на Firefox. В ИЕ най-дясната колона може да падне, но трябва да се свие много екрана, но мисля че може и това да се оправи.
По-малки проценти, както предлага Дими, не вършат особена работа, защото тва бърка видимостта в Лисицата. Решение намерих чрез много малка отрицателна стойност на margin на едната колона, в случая: -1px.
Пробвайте как е при вас, защото в момента разполагам само с Firefox и IE 6.0.
А като коментар - това е доста странна идея за лейаут, досега бях срещал идеи, в които малките колони са с фиксирана дължина, а само централната се променя, ноооо ето че и тук има какво да се каже.

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 

"[линк]">

<html xmlns="[линк]">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<head>

<title>Заглавие</title>

<style type="text/css">



html, body, div, p {margin: 0; padding: 0; border: none}



#left125 {float: left; position: absolute; left: 0; top: 0; width: 125px; background: PapayaWhip;}

#container {position: relative; margin: 0 0 0 125px;}

#right75 {float: left; width: 75%; margin: 0 -1px 0 0; background: moccasin;}

#right25 {float: left; width: 25%; background: BlanchedAlmond}



</style>

</head>







<body>



<div id="left125"><p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p></div>



<div id="container">



<div id="right75"><p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" </p></div>



<div id="right25"><p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat." </p></div>



</div>



</body>



</html>

ОК е на ИЕ 6, Файърфокс, Мозила, Нетскейп 8 :-) Опера 7.54.
Добави това

<!--[if lte IE 5.5]>

<style type="text/css" media="screen">

#container {width: 100%;}

</style>

<![endif]-->

преди </head> за ИЕ 5 и 5.5 и работата ще заспи и с тях.

Scriptura pro scribente nihil probat...