Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Sub mobila de bucatarie si sub fr...

Rezultat RMN

Numar circuite IPAT si prindere t...

Pareri brgimportchina.ro - teapa ...
 Lucruri inaintea vremurilor lor

Discuții despre TVR Sport HD

Cost abonament clinica privata

Tremura toata, dar nu de la ro...
 Renault Android

Recomandare bicicleta e-bike 20&#...

Bing-Content removal tool

Nu pot accesa monitorulsv.ro de l...
 Cum sa elimini urmele de acnee?

Wc Geberit

Routere detinute in trecut si in ...

Teii din fața casei
 

css

- - - - -
  • Please log in to reply
10 replies to this topic

#1
alex2300

alex2300

    Junior Member

  • Grup: Members
  • Posts: 226
  • Înscris: 16.04.2009
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:

Attached File  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.


#2
LensFlare

LensFlare

    Tin Foil Mask Society

  • Grup: Senior Members
  • Posts: 14,759
  • Înscris: 09.05.2005
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.


#3
alex2300

alex2300

    Junior Member

  • Grup: Members
  • Posts: 226
  • Înscris: 16.04.2009

View PostLensFlare, on 19th December 2010, 10:51, said:

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

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

#4
CuteGuy

CuteGuy

    Active Member

  • Grup: Members
  • Posts: 1,870
  • Înscris: 11.09.2005
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.


#5
danutz0501

danutz0501

    Member

  • Grup: Members
  • Posts: 437
  • Înscris: 22.04.2008
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/

#6
alex2300

alex2300

    Junior Member

  • Grup: Members
  • Posts: 226
  • Înscris: 16.04.2009

View PostCuteGuy, on 19th December 2010, 11:35, said:

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.


View Postdanutz0501, on 19th December 2010, 11:41, said:

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/

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

Attached File  screen.jpg   135.67K   17 downloads

#7
CuteGuy

CuteGuy

    Active Member

  • Grup: Members
  • Posts: 1,870
  • Înscris: 11.09.2005
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.

#8
danutz0501

danutz0501

    Member

  • Grup: Members
  • Posts: 437
  • Înscris: 22.04.2008
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

#9
alex2300

alex2300

    Junior Member

  • Grup: Members
  • Posts: 226
  • Înscris: 16.04.2009

View PostCuteGuy, on 19th December 2010, 12:07, said:

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.

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;
}


#10
danutz0501

danutz0501

    Member

  • Grup: Members
  • Posts: 437
  • Înscris: 22.04.2008
<!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.

#11
alex2300

alex2300

    Junior Member

  • Grup: Members
  • Posts: 226
  • Înscris: 16.04.2009
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!

Anunturi

Chirurgia cranio-cerebrală minim invazivă Chirurgia cranio-cerebrală minim invazivă

Tehnicile minim invazive impun utilizarea unei tehnologii ultramoderne.

Endoscoapele operatorii de diverse tipuri, microscopul operator dedicat, neuronavigația, neuroelectrofiziologia, tehnicile avansate de anestezie, chirurgia cu pacientul treaz reprezintă armamentarium fără de care neurochirurgia prin "gaura cheii" nu ar fi posibilă. Folosind tehnicile de mai sus, tratăm un spectru larg de patologii cranio-cerebrale.

www.neurohope.ro

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate