Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Cum v-a apucat dragostea pentru p...

Intrebare hdmi laptop lenovo

Fezabilitate - Adaugare microinve...

inmatriculare autoturism reprezen...
 2 aere conditionate pe un singur ...

Intarzietor de priza zahar

Oprire update Asus ZenFone 10

Concediu Canada - Gestiunea banil...
 Folii faruri - plastic sau sticla...

Alternative, reducere costuri, pa...

SUMMER HITS!

Conducta pluviala sparta la bloc....
 Medii admitere 2023 UPB - Faculta...

Cum pot crea o iluzie de tipul Fa...

Cand crezi ca le-ai vazut pe toat...

Damsel (2024)
 

problema aliniere DIV pe verticala

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

#1
Alta_

Alta_

    Active Member

  • Grup: Members
  • Posts: 1,197
  • Înscris: 22.05.2007
Am 2 DIV-uri, unul Left si unul Right. Vreau ca in cel din dreapta sa pun o caseta de text, pe care sa o aliniez BOTTOM, iar deasupra sa ramana spatiu alb. Nu stiu cat este inaltimea acestei casete de text (poate doar s-o aproximez; textul este variabil ca lungime). Am incercat cu vertical-align: bottom si cu height procentual, dar nu iese. Am facut si un desen sa se inteleaga mai bine:
Attached File  problema_div.jpg   9.51K   72 downloads

#2
neobluenet

neobluenet

    Member

  • Grup: Members
  • Posts: 489
  • Înscris: 13.08.2004

View PostAlta_, on May 12 2008, 17:52, said:

Am 2 DIV-uri, unul Left si unul Right. Vreau ca in cel din dreapta sa pun o caseta de text, pe care sa o aliniez BOTTOM, iar deasupra sa ramana spatiu alb. Nu stiu cat este inaltimea acestei casete de text (poate doar s-o aproximez; textul este variabil ca lungime). Am incercat cu vertical-align: bottom si cu height procentual, dar nu iese. Am facut si un desen sa se inteleaga mai bine:
Attachment problema_div.jpg
#right {
float: right;
position abolute;
bottom: 0;
}
Dar sa nu uiti sa pui la div-ul care le contine min-height: 100%.

Edited by neobluenet, 12 May 2008 - 20:45.


#3
Alta_

Alta_

    Active Member

  • Grup: Members
  • Posts: 1,197
  • Înscris: 22.05.2007

View Postneobluenet, on May 12 2008, 20:44, said:

#right {
float: right;
position abolute;
bottom: 0;
}
Dar sa nu uiti sa pui la div-ul care le contine min-height: 100%.

Am incercat, tot nu merge...poate mai trebuie sa completez cu ceva, nu stiu...iata pe scurt cum am scris pana acum:

fisier.htm said:

<div id="fundal">
<div id="divLeft">
text left
</div>
<div id="divRight">
         text right
</div>
</div>

fisier.css said:

* {margin:0;padding:0;}
#fundal {margin:0 auto; width:600px; height:500px;}
#divLeft {float:left; width:350px; border: solid; height:100%;}
#divRight {float:right; width:220px; border: solid; }

Asa le deseneaza una langa alta, dar divRight il aliniaza la marginea de sus.

Daca pun #divRight {position: absolute; bottom:0}, #fundal {min-height:100%}, divRight se duce sub divLeft.

#4
xnoise

xnoise

    Active Member

  • Grup: Members
  • Posts: 1,310
  • Înscris: 08.02.2007
@neo: poate ne explici ce cauta float si position:absolute in aceeasi declaratie? position:absolute invalideaza float pt simplul motiv ca position:absolute scoate din flow elementul.

@alta: solutia care poate merge este de fapt un mic trick ce foloseste tot pozitia absoluta:

<div class="container">
	some text here
	<div class="to-align">testing</div>
</div>

div-ul cu clasa to-align il pui cu pozitie absoluta si in afara div-ului container astfel incat sa para ca e aliniat bottom. Div-ul cu clasa container trebuie sa aiba pozitie relativa neaparat.

Iti fac un demo acum. si il atasez cand e gata.

Am atasat si demo-ul.

@neo: inainte sa scrii ceva sau sa dai un sfat eronat, te-as ruga sa te documentezi. nu de alta dar pui oamenii pe cai gresite.
@alta: ce am oferit eu nu e neaparat o solutie, ci mai degraba o pacaleala [nu am aplicat-o niciodata pana acum]. e cumva la fel ca equal-height-columns din imagini de background. Pana la urma conteaza ce vede userul nu?

@alta PS: vezi ca dimensiunile procentuale utilizate in div-ul outside sunt relative la div-ul container. Adica 105% din div-ul container = 105% din 30% din pagina ta normala. sper ca am explicat pe inteles. Daca folosesti dimensiuni absolute (pixeli) nu o sa mai ai problema asta.

Attached Files


Edited by xnoise, 12 May 2008 - 22:56.


#5
Alta_

Alta_

    Active Member

  • Grup: Members
  • Posts: 1,197
  • Înscris: 22.05.2007

View Postxnoise, on May 12 2008, 22:47, said:

Multumesc frumos!  :coolspeak: Cu siguranta nu-mi dadea prin cap asa ceva. Incerc sa trec de la TABLES la DIVS si vad ca nu e chiar simplu.
Tot ce am putut eu sa fac, a fost sa pun in DivRight, doua div-uri suprapuse (divRightUp, divRightDwn) si sa le dau height procentual. Dar nu era o solutie buna atat timp cat nu stiam, cat de mult se poate inalta div-ul de jos (datorita textului inclus).

#6
xnoise

xnoise

    Active Member

  • Grup: Members
  • Posts: 1,310
  • Înscris: 08.02.2007
toate trick-urile astea vin cu experienta. Nu cred ca o sa le gasesti in vreun manual sau ceva. CSS-ul iti impune niste limite vagi, dar de cele mai multe ori cunoasterea teoriei duce la solutii neasteptate la probleme ciudate [asta pt ca problema ta nu este una obisnuita].

Cu placere.

#7
dwhite

dwhite

    Junior Member

  • Grup: Members
  • Posts: 50
  • Înscris: 21.10.2007
salut,
mi-am permis sa continui acest topic intrucat problema peste care am dat eu este asemanatoare oarecum.Am acel #content in interiorul caruia am in .inner-comntent , un left_bar_2 si un .main-content .
As vrea ca acea poza din left_bar_2 sa fie lipita de bottom pentru ca acesta se continua,acel div este in design oarecum lipit de bottom.Daca .main-content impinge in jos bottom-ul,bara din stanga ramane la dimensiunea ei si poza ramane cumva in are ca si cand ar fi rupta din bottom.as vrea sa stea cumva lipita de bottom si sa se lungeasca la fel cu .main-content-ul, asa cum se vede in poza.Daca aveti vreo idee sau un sfat...astept.va multumesc

Attached Files



#8
denverash

denverash

    Member

  • Grup: Banned
  • Posts: 694
  • Înscris: 19.04.2004

View Postdwhite, on Jan 19 2009, 00:07, said:

salut,
mi-am permis sa continui acest topic intrucat problema peste care am dat eu este asemanatoare oarecum.Am acel #content in interiorul caruia am in .inner-comntent , un left_bar_2 si un .main-content .
As vrea ca acea poza din left_bar_2 sa fie lipita de bottom pentru ca acesta se continua,acel div este in design oarecum lipit de bottom.Daca .main-content impinge in jos bottom-ul,bara din stanga ramane la dimensiunea ei si poza ramane cumva in are ca si cand ar fi rupta din bottom.as vrea sa stea cumva lipita de bottom si sa se lungeasca la fel cu .main-content-ul, asa cum se vede in poza.Daca aveti vreo idee sau un sfat...astept.va multumesc

din pacate divurile nu stiu de 100% dupa cum ai observat... uite incearca urmatoarea varianta:

1 div mare latime cat contentul cu background aliniat la stanga repetitiv pe verticala care sa contina poza de la left_bar_2
in interiorul lui pui un div aliniat stanga cu contact si news si un div aliniat dreapta cu continutul propriuzis

astfel marind continutul oricarui dintre cele 2 divuri interioare va creste inaltimea divului si aceasta va creste implicit si divul mare care contine fundalul din stanga

sper ca m-am facut inteles, mi-e lene sa fac un exemplu :)

#9
dwhite

dwhite

    Junior Member

  • Grup: Members
  • Posts: 50
  • Înscris: 21.10.2007
Nu am prea inteles ce vrei sa spui ;))) am incercat in cateva feluri dar nu se potrivea nicicum,poate si pentru ca am folosit margin: 0px auto; iar in interior am pus div-uri cu float: left...am incercat sa pun sub afara din .inner-content un div tot cu margin : 0px auto; si in el sa aliniez coloana stanga exact poza intr-un div pentru ca .inner-content-ul sa il impinga in jos si mergea dar ramanea un spatiu pe toata linia orizontala a inner-contentului si arata urat...(spatiu nefolosit.)am schimbat din design si merge si asa,totusi daca aveti o alta rezolvare as fi curios ca m`am gandit mult si m`am chinuit ;))
multumesc

#10
denverash

denverash

    Member

  • Grup: Banned
  • Posts: 694
  • Înscris: 19.04.2004
<html>
<head>
<style>
#page {margin:auto;width:980px}
#header {border:1px solid #000;background-color:#abc;float:left;width:980px}
#content_left {border:1px solid #000;background-color:#eee;float: left;width:980px}
#left {border:1px solid #000;float:left;width:170px}
#content {border:1px solid #000;background-color:#aaf;float:right;width:800px}
</style>
</head>
<body>
<div id="page">
	<div id="header">header</div>
	<div id="content_left">
		<div id="left">left</div>
		<div id="content">content<br>content<br>content<br>content<br>content<br></div>
	</div>
</div>
</body>
</html>

pe #content_left pune-ti poza de fundal aliniata la stanga cu repetitie pe y

#11
dwhite

dwhite

    Junior Member

  • Grup: Members
  • Posts: 50
  • Înscris: 21.10.2007
multumesc mult denverash.chiar nu m-am gandit rezolvarea asta  :coolspeak: m-am cam chinuit sa caut tot felul de rezolvari,dar la asta nu...am mai prins o idee,10x inca o data.  :peacefingers:

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