css

Salutare! Am o pagina web si are la html ceva gen:

...

<div id="main">
	<div id="right">
			<h4>Titlu 1</h4>
			<img src="o_imagine.jpg" title="" alt="" style="float:right; padding-left:20px; padding-right:20px;"/>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem mi, venenatis faucibus mattis quis, sodales nec augue.</p>

			<h4>Titlu 2</h4>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem mi, venenatis faucibus mattis quis, sodales nec augue.</p>
	</div>

	<div id="left">
		<h3>Categorie</h3>
		<ul>
			<li><a href="#">Subcategorie 1</a></li>
			<li><a href="#">Subcategorie 2</a></li>
		</ul>
	</div>
</div>
...

si css:

#main{
	width: 999px;
	margin: 0 auto;
	clear:both;
}

...

#left{
	width: 259px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top:90px;
}

#left H3{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size:18px;
	width: 204px;
	height: 36px;
	font-weight: normal;
	padding-left: 55px;
	padding-top: 12px;
	color: #ffffff;
	background: url(images/left_title.jpg) no-repeat;
}

#left ul {
	list-style: none;
	margin-bottom: 15px;
	margin-left: 10px;
	padding-top: 15px;
}

#left li {
	background: url(images/ls.png) no-repeat left top;
	padding-left: 20px;
	margin-bottom: 8px;
}


...


#right{
	float: right;
	width: 670px;
	background: url(images/rightbg.png);
	margin-right:5px;
	margin-bottom:10px;
	padding-left: 25px;
	padding-right: 25px;
}

#right H4{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size:18px;
	width: 441px;
	height: 30px;
	font-weight: normal;
	padding-top: 18px;
	color: #ffffff;
}


#right p {
	margin: 0;
	padding: 0;
	padding-bottom: 10px;
}


...

Sunt mai mari fisierele, insa am scos esentialul.
Pe pagina, impreuna cu alt cod, iese ceva de genul:

 screen.jpg   142.49K   33 downloads


Dupa cum se vede, div-ul cu #right este mai mic pe vertical decat div-ul cu #left si restul pana se termina pagina e acoperit cu fundal (o  nuanta de maro).
Cum as putea face sa se continue #right pana se termina si #left? (asta in cazul in care e mai mic #right, ca atunci cand #right are mai mult continut se vede bine)

Edited by alex2300, 19 December 2010 - 10:39.

h3 trebuie luat separat, in nici un caz "left H3"... acelasi lucru si pentru h4 (pentru toate heading-urile de fapt).

Edited by LensFlare, 19 December 2010 - 10:52.

LensFlare, on 19th December 2010, 10:51, said:

Nu chiar, ca folosesc h3 doar in left si h4 doar in right (am folosit heading ca sa bag stil pentru titluri). Si oricum ... nu prea ar rezolva problema

Ca sa le uniformizezi, pui si left si right intr-un div (#content, #wrapper, #inside sau cum vrei tu) si ii dai height:auto. In felul acesta, cand left o sa coboare, trage dupa el si #right, pe care il pui tot cu height auto. Ca sa ai left h3 mai jos, te poti folosi de margin(-top) sau padding.
Asta mi se pare cea mai simpla si rapida solutie.
LE: Deocamdata.

Edited by CuteGuy, 19 December 2010 - 11:36.

Ai putea sa fortezi divv-urile sa arate ca un tabel.Display:table la div-ul mare si display:table-cell la cele 2 divuri dreapt si stanga.Asta ar fi cea mai usoara solutie si nici nu ai mai avea nevoie de floturi.Sau poti incerca cu height:auto la toate 3 div-uri.Sau incepi cu hack-uri http://www.alphapapa...00-percent/css/

CuteGuy, on 19th December 2010, 11:35, said:

danutz0501, on 19th December 2010, 11:41, said:

cu height:auto e acelasi rezultat, iar cu tabel arata cam asa:

 screen.jpg   135.67K   17 downloads

Le-ai pus pe-amandoua intr-un div ?
<div id="content">
<div id="left **" style="float:left">continutul respectiv</div>
<div id="right">content</div>
<!-- end content --></div>

Trebuie sa declari id #content in css cu dimensiunile necesare jongland cu min(max)-width in cazul in care site-ul nu o sa fie fixed width sau strict cu dimensiunile tale.
Astea sunt hints; @local ti le poti prelucra dupa bunul plac.

Cand ai folosit tabele ai scos si floturile nu?
Mai jos e tehnica din link-ul care ti la-am dat.

#main{
	width: 999px;
	margin: 0 auto;
	clear:both;
	overflow:hidden;
}
#left{
	width: 259px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top:90px;
	margin-bottom: -1000px;
	padding-bottom: 1000px;
}
#left H3{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size:18px;
	width: 204px;
	height: 36px;
	font-weight: normal;
	padding-left: 55px;
	padding-top: 12px;
	color: #ffffff;
	background: url(images/left_title.jpg) no-repeat;
}
#left ul {
	list-style: none;
	margin-bottom: 15px;
	margin-left: 10px;
	padding-top: 15px;
}
#left li {
	background: url(images/ls.png) no-repeat left top;
	padding-left: 20px;
	margin-bottom: 8px;
}
#right{
	float: right;
	width: 670px;
	background: url(images/rightbg.png);
	margin-right:5px;
	margin-bottom:10px;
	padding-left: 25px;
	padding-right: 25px;
	margin-bottom: -1000px;
	padding-bottom: 1000px;
}

#right H4{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size:18px;
	width: 441px;
	height: 30px;
	font-weight: normal;
	padding-top: 18px;
	color: #ffffff;
}
#right p {
	margin: 0;
	padding: 0;
	padding-bottom: 10px;
}

Nu se adauga decat overflow de div-ul main si margin-bottom: -1000px padding-bottom: 1000px la fiecare div care vrei sa il folosesti pe post de coloana

CuteGuy, on 19th December 2010, 12:07, said:

Da, am adaugat. Sunt deja amandoua in div-ul main. si am adaugat la stil height:auto si nu merge

#main {
	width: 999px;
		height: auto; /* am bagat acum asta */
	margin: 0 auto;
	clear:both;
}

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
*{
	margin:0px;
	padding:0px;
}
header, nav, section, article, aside, footer{
	display:block;
}
header, nav, section, footer{
	margin:0px auto;
}
header{
	width:1000px;
	height:250px;
	background-color:#093;
}
nav{
	width:1000px;
	height:50px;
	background-color:#006;
}
section{
	width:1000px;
	overflow:hidden;
	background-color:#00F;
}
#left{
	width:259px;
	background-color:#0F0;
	overflow:hidden;
	padding-left: 5px;
	padding-right: 5px;
	padding-top:90px;
	float:left;
	margin-bottom: -1000px;
	padding-bottom: 1000px;
}
#right{
	width:670px;
	background-color:#F00;
	overflow:hidden;
	padding-left: 25px;
	padding-right: 25px;
	padding-top:5px;
	margin-bottom: -1000px;
	padding-bottom: 1000px;
	float:right;
}
footer{
	clear:both;
	width:1000px;
	background-color:#390;
	height:150px;
}
</style>
</head>

<body>
<header></header>
<nav></nav>
<section id="main">
<div id="left">
	<p>
		
	</p>
</div>
<div id="right">
<p>
	
	</p>
</div>
</section>
<footer></footer>
</body>
</html>

Poti sa pui numai simplu text pentru un test , ca sa vezi ca merge.

Am reusit in final cu display:table si display:table-cell
Nu iesea deoarece aveam intai div-ul right si apoi cel left
am inversat ordinea div-urilor si merge

Multumesc tuturor!