Pozitionare div-uri

#1
golazo

Posted 15 October 2013 - 15:29

Junior Member

Grup: Members
Posts: 216
Înscris: 29.08.2007

Cum pot sa pozitionez mai multe div-uri in modul de mai jos?
-nu reusesc sa infasor div-urile din interior cu cel 100% si nu reusesc sa aliniez divurile din interior pe mijloc-verticala.

Attached Files

div.png 12.15K 32 downloads

Edited by golazo, 15 October 2013 - 15:32.

Back to top

#2
potae

Posted 15 October 2013 - 15:46

Sorosist frumos si liber

Grup: Senior Members
Posts: 3,429
Înscris: 20.08.2013

Faci un div mare il care le bagi pe alea mici. Apoi pe fiecare d-ala mic ii pui position: relative; si float: left; si va merge. eventual umbli la margin-left etc ca sa iti creezi distanta custom intre ele. Pt. vertical pui margin-top in %. Totusi ca sa nu se faca praf la resize ar trebui sa inveti cum sa le faci 'responsive'.

Back to top

#3
DarkAngelBv

Posted 15 October 2013 - 16:56

=== Proud owner of === ++++ Audi & Opel ++++

Grup: Senior Members
Posts: 12,747
Înscris: 24.03.2006

e simplu.
Ai divul mare de 100%;
3 divuri in interior de 40, 20 respectiv 40%.

Toate 3 display inline-block si vertical-align:middle.
Apoi in coloana din stanga ai div si imagine cu float right (imaginea prima in dom sa se duca in dreapta).
In coloana din dreapta ai tot 2 elemente, dar cu float left.
Coloanele din stanga si dreapta au nevoie de clear.

Back to top

#4
poadol

Posted 16 October 2013 - 16:29

Guru Member

Grup: Senior Members
Posts: 14,104
Înscris: 13.12.2010

Aproape bun Posted Image

:

<!DOCTYPE html>
<html>
<head>
<title></title>
		<link rel="stylesheet"; type="text/css"; href="stylA.css" />
		<link rel="stylesheet"; type="text/css"; href="stylB.css" />
</head>
<body>
<div id="container">
<div id="left">
<div id="left1">
<p>Aceasta era cândva, înainte de Revolutia socialista, perla Caraibelor, aici era cândva atâta lux si atâta opulenta,
încât Havana, preferata si de un comunist atât de consecvent ca Hemingway Parisului, ajunsese obscena.
Dar acum, cladirile stau sa se prabuseasca, sunt sumbre, înspaimântatoare, desi par cochete si la ceasul acesta
din seara când s-au drapat într-o lumina aproape mediteraneeana. Oamenii însa sunt drepti.</p>
</div>
<div id="left2">
<p>img</p>
</div>
</div>

<div id="middle">
<p>E dimineata pe strada Animas. Ma uit, prin fereastra prafuita, la un barbier. Clientul are gâtul lung, acoperit de o spuma care se vede ca
e mai degraba sapun îndoit cu apa. Barbierul îl parcurge de jos în sus, dintr-o singura miscare, cumva din încheietura.
Astept sa vad o picatura de sânge, dar nu curge niciuna, briciul e clatit cu o apa oarecum murdara, însa reuseste sa straluceasca – imaculat.
Barbierul se ocupa acum de perciunii omului. Se râde mult înauntru. Se asteapta la coada,
dar se râde de se cutremura capetele pamatufurilor de proasta calitate, prematur atinse de calvitie.</p>
</div>

<div id="right">
<div id="right1">
<p>img</p>
</div>
<div id="right2">
<p>Cubanezilor le place sa întretina contacte cu strainii.
Evita, doar daca simt ca se impune, subiectele delicate din politica, spun, la început, jumatati de adevar, cu privirea periferica exersata,
în cautarea turnatorilor, ca în orice dictatura, dar daca strabati Havana la pas, si bei rom cu ei, si le dai sa fumeze din trabucurile tale,
si dormi în casele lor, si îi asculti, si esti sincer, si chiar îti deschizi toti nasturii inimii, vei afla. E ca în Evanghelii, daca bati, ti se va deschide. </p>
</div>
</div>
</div>

<div id="containera">
<div id="lefta">
<div id="left1a">
<p>Aceasta era cândva, înainte de Revolutia socialista, perla Caraibelor, aici era cândva atâta lux si atâta opulenta,
încât Havana, preferata si de un comunist atât de consecvent ca Hemingway Parisului, ajunsese obscena.
Dar acum, cladirile stau sa se prabuseasca, sunt sumbre, înspaimântatoare, desi par cochete si la ceasul acesta
din seara când s-au drapat într-o lumina aproape mediteraneeana. Oamenii însa sunt drepti.</p>
</div>
<div id="left2a">
<p>img</p>
</div>
</div>

<div id="middlea">
<p>E dimineata pe strada Animas. Ma uit, prin fereastra prafuita, la un barbier. Clientul are gâtul lung, acoperit de o spuma care se vede ca
e mai degraba sapun îndoit cu apa. Barbierul îl parcurge de jos în sus, dintr-o singura miscare, cumva din încheietura.
Astept sa vad o picatura de sânge, dar nu curge niciuna, briciul e clatit cu o apa oarecum murdara, însa reuseste sa straluceasca – imaculat.
Barbierul se ocupa acum de perciunii omului. Se râde mult înauntru. Se asteapta la coada,
dar se râde de se cutremura capetele pamatufurilor de proasta calitate, prematur atinse de calvitie.</p>
</div>

<div id="righta">
<div id="right1a">
<p>img</p>
</div>
<div id="right2a">
<p>Cubanezilor le place sa întretina contacte cu strainii.
Evita, doar daca simt ca se impune, subiectele delicate din politica, spun, la început, jumatati de adevar, cu privirea periferica exersata,
în cautarea turnatorilor, ca în orice dictatura, dar daca strabati Havana la pas, si bei rom cu ei, si le dai sa fumeze din trabucurile tale,
si dormi în casele lor, si îi asculti, si esti sincer, si chiar îti deschizi toti nasturii inimii, vei afla. E ca în Evanghelii, daca bati, ti se va deschide. </p>
</div>
</div>
</div>

</body>
</html>

stylA.css

body {
	text-align: center;
	color: white;
}

#container {
	display: block;
	top: 20px;
	margin: 0 auto;
	max-width: 1200px;
	height: 250px;
	border: 1px solid black;  
}

#left {
	display: inline-block;
	background-color: red;
	float: left;
	margin: 0.83% 0.83%;  // 7 / 250 = 0,028 and 10 / 1200 = 0,0083
	border: 1px solid black;
	height: 230px;
	width: 37.5%;   // 450 / 1200 = 0,375
	clear: both;
}

#left1 {
	display: inline-block;
	background-color: green;
	overflow: auto;
	float: left;
	margin: 12.73% 2.22% 12.73% 2.22%;  // 30 / 230 = 0,1273 and 10 / 450 = 0,0222
	border: 1px solid black;
	height: 110px;
	width: 44.66%;   // 201 / 450 = 0,4466

}

#left2 {
	display: inline-block;
	background-color: blue;
	float: right;
	margin: 3.47% 2.22%;  // 8 / 230 = 0,0347 and 10 / 450 = 0,0222
	border: 1px solid black;
	height: 200px;
	width: 44.66%;   // 201 / 450 = 0,4466
	clear: both;
}

#middle {
	display: inline-block;
	background-color: green;
	overflow: auto;
	float: left;
	margin: 2.2% 1.25%; // 5,5 / 250 = 0,022 and 15 / 1200 = 0.0125
	border: 1px solid black;
	height: 200px;
	width: 18.93%;   // 220 / 1200 = 0,2
}

#right {
	display: inline-block;
	background-color: red;
	float: right;
	margin: 0.83% 0.83%;  // 7 / 250 = 0,028 and 10 / 1200 = 0,0083
	border: 1px solid black;
	height: 230px;
	width: 37.5%;   // 450 / 1200 = 0,375
}

#right1 {
	display: inline-block;
	background-color: blue;
	float: left;
	margin: 3.47% 2.22%;  // 8 / 230 = 0,0347 and 10 / 450 = 0,0222
	border: 1px solid black;
	height: 200px;
	width: 44.66%;   // 201 / 450 = 0,4466
}

#right2 {
	display: inline-block;
	background-color: green;
	overflow: auto;
	float: right;
	margin: 12.73% 2.22% 12.73% 2.22%;  // 30 / 230 = 0,1273 and 10 / 450 = 0,0222
	border: 1px solid black;
	height: 110px;
	width: 44.66%;   // 201 / 450 = 0,4466
}

stylB.css

#containera {
	display: block;
	top: 20px;
	margin: 20px auto;
	max-width: 800px;
	height: 166px;
	border: 1px solid black;  
}

#lefta {
	display: inline-block;
	background-color: red;
	float: left;
	margin: 0.73% 0.83%;
	border: 1px solid black;
	height: 152px;
	width: 36.5%;
	clear: both;
}

#left1a {
	display: inline-block;
	background-color: green;
	overflow: auto;
	float: left;
	margin: 12.73% 2.22% 12.73% 2.22%;
	border: 1px solid black;
	height: 74px;
	width: 44.06%;
}

#left2a {
	display: inline-block;
	background-color: blue;
	float: right;
	margin: 3.47% 2.22%;
	border: 1px solid black;
	height: 132px;
	width: 43.06%;
}

#middlea {
	display: inline-block;
	background-color: green;
	overflow: auto;
	float: left;
	margin: 2.2% 1.25%;
	border: 1px solid black;
	height: 132px;
	width: 18.93%;
}

#righta {
	display: inline-block;
	background-color: red;
	float: right;
	margin: 0.73% 0.83%;
	border: 1px solid black;
	height: 152px;
	width: 36.5%;
}

#right1a {
	display: inline-block;
	background-color: blue;
	float: left;
	margin: 3.47% 2.22%;
	border: 1px solid black;
	height: 132px;
	width: 43.06%;
}

#right2a {
	display: inline-block;
	background-color: green;
	overflow: auto;
	float: right;
	margin: 12.73% 2.22% 12.73% 2.22%;
	border: 1px solid black;
	height: 74px;
	width: 44.06%;
}

Edited by poadol, 16 October 2013 - 16:33.

Back to top

#5
golazo

Posted 17 October 2013 - 14:34

Junior Member

Grup: Members
Posts: 216
Înscris: 29.08.2007

Multumesc pentru raspunsuri. In cele din urma am ajuns la varianta asta:
Problema e ca div-urile text-dreapta si text-stanga nu se aseaza pe mijloc vertical.

.chenar{border: 1px solid #000;width:100%;overflow:hidden;}
.stanga{width: 39.35%;vertical-align:middle;display:inline-block;}
.dreapta{width: 39.35%;vertical-align:middle;display:inline-block;}
.centru{width:20%;vertical-align:middle;text-align:center;display:inline-block;}
.text-stanga{float:right;}
.text-dreapta{float:left;}
.img-stanga{float:right;height:50px;width:50px;padding:15px;}
.img-dreapta{float:left;clear:both;height:50px;width:50px;padding:15px;}

Back to top

#6
poadol

Posted 17 October 2013 - 17:01

Guru Member

Grup: Senior Members
Posts: 14,104
Înscris: 13.12.2010

Aseaza-le din "css". Ai incercat sa vezi cum se comporta cand micsorezi fereastra ca mai jos (a doua imagine)?

Attached Files

Poz div 1.jpg 83.05K 9 downloads
Poz div 2.jpg 43.24K 10 downloads

Edited by poadol, 17 October 2013 - 17:13.

Back to top

#7
DarkAngelBv

Posted 17 October 2013 - 17:04

=== Proud owner of === ++++ Audi & Opel ++++

Grup: Senior Members
Posts: 12,747
Înscris: 24.03.2006

din moment ce ai float la divurile respective ele devin de tip block, deci se pierde acel vertical-align.

Back to top

#8
golazo

Posted 17 October 2013 - 17:15

Junior Member

Grup: Members
Posts: 216
Înscris: 29.08.2007

poadol, on 17 octombrie 2013 - 17:01, said:

Aseaza-le din "css". Ai incercat sa vezi cum se comporta cand micsorezi fereastra ca mai jos (a doua imagine)?

Cum le asez?..cu marginile cum ai facut in exemplul de mai sus?.. daca da, cum aleg valorile exacte sa fie la mijloc.

DarkAngelBv, on 17 octombrie 2013 - 17:04, said:

din moment ce ai float la divurile respective ele devin de tip block, deci se pierde acel vertical-align.

Si ce e de facut?... daca scot float-ul tot in top ramane.

Back to top

#9
poadol

Posted 17 October 2013 - 17:50

Guru Member

Grup: Senior Members
Posts: 14,104
Înscris: 13.12.2010

La "margin" te referi?

Back to top

#10
golazo

Posted 17 October 2013 - 18:13

Junior Member

Grup: Members
Posts: 216
Înscris: 29.08.2007

poadol, on 17 octombrie 2013 - 17:50, said:

La "margin" te referi?

Da, la margin. Sau cum sa le asez in css?

Back to top

#11
poadol

Posted 17 October 2013 - 18:21

Guru Member

Grup: Senior Members
Posts: 14,104
Înscris: 13.12.2010

golazo, on 17 octombrie 2013 - 18:13, said:

Da, la margin. Sau cum sa le asez in css?

Conform codului tau actual rezultatul arata asa:

Attached Files

Poz div 3.jpg 101.12K 4 downloads

Back to top

#12
golazo

Posted 17 October 2013 - 18:28

Junior Member

Grup: Members
Posts: 216
Înscris: 29.08.2007

poadol, on 17 octombrie 2013 - 18:21, said:

Conform codului tau actual rezultatul arata asa:

Da, deci din cate imi dau eu seama problema e la div-urile interioare din stanga si dreapta unde e textul si imaginea. Cum le asez calumea?
Ce ar trebui sa modific in codul postat, ce nu e bine si de ce?

Back to top

#13
poadol

Posted 17 October 2013 - 18:50

Guru Member

Grup: Senior Members
Posts: 14,104
Înscris: 13.12.2010

La codul tau sunt multe de modificat si adaugat.
Pentru ce am prezentat in imaginile din postul #6 ai codul complet in postul #4 joaca-te cu el, fura de acolo ce este folositor.
Ceea ce in CSS este exemplu:

#container

in HTML se refera la:

id="container"

Edited by poadol, 17 October 2013 - 18:55.

Back to top

#14
golazo

Posted 17 October 2013 - 19:51

Junior Member

Grup: Members
Posts: 216
Înscris: 29.08.2007

poadol, on 17 octombrie 2013 - 18:50, said:

La codul tau sunt multe de modificat si adaugat.
Pentru ce am prezentat in imaginile din postul #6 ai codul complet in postul #4 joaca-te cu el, fura de acolo ce este folositor.
Ceea ce in CSS este exemplu:

#container

in HTML se refera la:

id="container"

Da, stiu. Problema e ca e posibil sa folosesc aceste chenare de mai multe ori intr-un articol si din cate stiu eu, id-ul trebuie sa fie unic.
Ce vreau eu sa fac e ceva de genul ca aici www.digisport.ro/UCL/.

O sa scriu cam ce am facut pana acum si daca se poate sa imi spuneti unde gresesc si de ce.

.chenar{border: 1px solid #000;width:100%;overflow:hidden;}

//pentru inceput am creat un chenar care sa infasoare div-urile, i-am dat width:100% ca sa se adapteze in functie de tema, am pus overflow:hidden pentru ca altfel nu imi inconjoara div-urile, ramane deasupra lor (nu vreau inaltimea si latimea fixa).

.stanga{width: 39.35%;vertical-align:middle;display:inline-block;}
.dreapta{width: 39.35%;vertical-align:middle;display:inline-block;}
.centru{width:20%;vertical-align:middle;display:inline-block;}

//cele 3 div-uri sunt asemanatoare, width vad ca nu pot sa pun 40% 20% 40% (nu stiu daca nu influenteaza cu ceva borderul de la chenar), display:inline-block; am inteles ca pune div-urile pe aceiasi linie (totusi de ce inline-block si nu inline?), iar vertical-align ca sa centreze pe verticala continutul, adica div-urile din interior (care vad ca nu se centreaza).

.text-stanga{float:right;}
.text-dreapta{float:left;}
.img-stanga{float:right;height:50px;width:50px;padding:15px;}
.img-dreapta{float:left;clear:both;height:50px;width:50px;padding:15px;}

//am aliniat textul si pozele, iar clear:both l-am pus, dar nu stiu exact ce face.

Edited by golazo, 17 October 2013 - 19:53.

Back to top

#15
poadol

Posted 17 October 2013 - 20:21

Guru Member

Grup: Senior Members
Posts: 14,104
Înscris: 13.12.2010

Poti linistit sa transformi id-urile in clase (vezi mai jos).
Poti modifica denumirea claselor cum doresti, stylA.css cu clase in loc de id-uri (si am adaugat un clear:both; unde era necesar

):

body {
text-align: center;
color: white;
}

.chenar {
display: block;
top: 20px;
margin: 0 auto;
max-width: 1200px;
height: 250px;
border: 1px solid black;
clear:both;
}

.stanga {
display: inline-block;
background-color: red;
float: left;
margin: 0.83% 0.83%; // 7 / 250 = 0,028 and 10 / 1200 = 0,0083
border: 1px solid black;
height: 230px;
width: 37.5%; // 450 / 1200 = 0,375
clear: both;
}

.stanga1 {
display: inline-block;
background-color: green;
overflow: auto;
float: left;
margin: 12.73% 2.22% 12.73% 2.22%; // 30 / 230 = 0,1273 and 10 / 450 = 0,0222
border: 1px solid black;
height: 110px;
width: 44.66%; // 201 / 450 = 0,4466

}

.stanga2 {
display: inline-block;
background-color: blue;
float: right;
margin: 3.47% 2.22%; // 8 / 230 = 0,0347 and 10 / 450 = 0,0222
border: 1px solid black;
height: 200px;
width: 44.66%; // 201 / 450 = 0,4466
clear: both;
}

.centru {
display: inline-block;
background-color: green;
overflow: auto;
float: left;
margin: 2.2% 1.25%; // 5,5 / 250 = 0,022 and 15 / 1200 = 0.0125
border: 1px solid black;
height: 200px;
width: 18.93%; // 220 / 1200 = 0,2
}

.dreapta {
display: inline-block;
background-color: red;
float: right;
margin: 0.83% 0.83%; // 7 / 250 = 0,028 and 10 / 1200 = 0,0083
border: 1px solid black;
height: 230px;
width: 37.5%; // 450 / 1200 = 0,375
}

.dreapta1 {
display: inline-block;
background-color: blue;
float: left;
margin: 3.47% 2.22%; // 8 / 230 = 0,0347 and 10 / 450 = 0,0222
border: 1px solid black;
height: 200px;
width: 44.66%; // 201 / 450 = 0,4466
}

.dreapta2 {
display: inline-block;
background-color: green;
overflow: auto;
float: right;
margin: 12.73% 2.22% 12.73% 2.22%; // 30 / 230 = 0,1273 and 10 / 450 = 0,0222
border: 1px solid black;
height: 110px;
width: 44.66%; // 201 / 450 = 0,4466
}

si imagine mai jos Posted Image

Attached Files

Poz div 4.jpg 113.21K 4 downloads

Edited by poadol, 17 October 2013 - 20:38.

Back to top

#16
golazo

Posted 17 October 2013 - 20:37

Junior Member

Grup: Members
Posts: 216
Înscris: 29.08.2007

Problema e ca toate div-urile au inaltimea fixa si eu nu vreau asta, iar imaginile si textul din div-urile interioare nu sunt centrate si nu le pot centra. vreau sa iasa ceva ca aici: www.digisport.ro/UCL/

Edited by golazo, 17 October 2013 - 20:38.

Back to top

#17
poadol

Posted 17 October 2013 - 21:22

Guru Member

Grup: Senior Members
Posts: 14,104
Înscris: 13.12.2010

Ca sa le centrezi perfect este mult mai usor daca au dimensiuni fixe dar tu doresti altceva, atunci:
Le faci cum iti doreste sau pofteste inimioara. Posted Image

golazo, on 17 octombrie 2013 - 19:51, said:

1. Ce vreau eu sa fac e ceva de genul ca aici www.digisport.ro/UCL/.

O sa scriu cam ce am facut pana acum si daca se poate sa imi spuneti unde gresesc si de ce.
2.

.chenar{border: 1px solid #000;width:100%;overflow:hidden;}

1. Care parte de acolo? Posted Image

2. Macar la chenar da-i dimensiuni, altfel ce sa stie browser-ul sa-ti afiseze? Posted Image

width:100%; - inseamna cat latimea ecranului

Edited by poadol, 17 October 2013 - 21:43.

Back to top

#18
golazo

Posted 17 October 2013 - 21:42

Junior Member

Grup: Members
Posts: 216
Înscris: 29.08.2007

poadol, on 17 octombrie 2013 - 21:22, said:

Ca sa le centrezi perfect este mult mai usor daca au dimensiuni fixe dar tu doresti altceva, atunci:
Le faci cum iti doreste sau pofteste inimioara. Posted Image

1. Care parte de acolo? Posted Image

2. Macar la chenar da-i dimensiuni, altfel ce sa stie browser-ul sa-ti afiseze? Posted Image

1.Partea cu chenarele. Echipa gazda - imagine - ora - imagine -echipa oaspete.

2.Pai daca latimea e 100%, se lateste cat ii permite tema, in unele locuri e 600 si ceva, in altele 900 si ceva. Inaltimea iar, vreau sa fie exact cat ii cere textul din interior, uneori mai mare, alteori mai mica.

Edited by golazo, 17 October 2013 - 21:45.

Back to top

Anunturi

Second Opinion

Folosind serviciul second opinion ne puteți trimite RMN-uri, CT -uri, angiografii, fișiere .pdf, documente medicale.

Astfel vă vom putea da o opinie neurochirurgicală, fără ca aceasta să poată înlocui un consult de specialitate. Răspunsurile vor fi date prin e-mail în cel mai scurt timp posibil (de obicei în mai putin de 24 de ore, dar nu mai mult de 48 de ore). Second opinion – Neurohope este un serviciu gratuit.

www.neurohope.ro

Pozitionare div-uri

#1 golazo Posted 15 October 2013 - 15:29

Attached Files

#2 potae Posted 15 October 2013 - 15:46

#3 DarkAngelBv Posted 15 October 2013 - 16:56

#4 poadol Posted 16 October 2013 - 16:29

#5 golazo Posted 17 October 2013 - 14:34

#6 poadol Posted 17 October 2013 - 17:01

Attached Files

#7 DarkAngelBv Posted 17 October 2013 - 17:04

#8 golazo Posted 17 October 2013 - 17:15

#9 poadol Posted 17 October 2013 - 17:50

#10 golazo Posted 17 October 2013 - 18:13

#11 poadol Posted 17 October 2013 - 18:21

Attached Files

#12 golazo Posted 17 October 2013 - 18:28

#13 poadol Posted 17 October 2013 - 18:50

#14 golazo Posted 17 October 2013 - 19:51

#15 poadol Posted 17 October 2013 - 20:21

Attached Files

#16 golazo Posted 17 October 2013 - 20:37

#17 poadol Posted 17 October 2013 - 21:22

#18 golazo Posted 17 October 2013 - 21:42

Anunturi

▶ 0 user(s) are reading this topic

Sign In

#1
golazo

Posted 15 October 2013 - 15:29

#2
potae

Posted 15 October 2013 - 15:46

#3
DarkAngelBv

Posted 15 October 2013 - 16:56

#4
poadol

Posted 16 October 2013 - 16:29

#5
golazo

Posted 17 October 2013 - 14:34

#6
poadol

Posted 17 October 2013 - 17:01

#7
DarkAngelBv

Posted 17 October 2013 - 17:04

#8
golazo

Posted 17 October 2013 - 17:15

#9
poadol

Posted 17 October 2013 - 17:50

#10
golazo

Posted 17 October 2013 - 18:13

#11
poadol

Posted 17 October 2013 - 18:21

#12
golazo

Posted 17 October 2013 - 18:28

#13
poadol

Posted 17 October 2013 - 18:50

#14
golazo

Posted 17 October 2013 - 19:51

#15
poadol

Posted 17 October 2013 - 20:21

#16
golazo

Posted 17 October 2013 - 20:37

#17
poadol

Posted 17 October 2013 - 21:22

#18
golazo

Posted 17 October 2013 - 21:42