Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Incalzire in pardoseala etapizata

Suprataxa card energie?!

Cum era nivelul de trai cam din a...

probleme cu ochelarii
 Impozite pe proprietati de anul v...

teava rezistenta panou apa calda

Acces in Curte din Drum National

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
 

Pozitionare elementele <div> in pagina

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

#1
fuucktheclowns

fuucktheclowns

    Junior Member

  • Grup: Members
  • Posts: 45
  • Înscris: 14.03.2013
Salut !

Am o intrebare de incepator, de curand am inceput sa studiez HTML&CSS si am o nelamurire cu pozitionarea elementelor <div> in pagina.Mai exact vreau ca elementul <div> din centru sa poata umple spatiul ramas dintre <div> Left si <div> Right. Cum fac asta? sa zicem ca vreau sa pun o poza in mijloc, cum
fac ca poza sa incadreze exact in spatiul ramas ? Va rog frumos sa ma corectati pe unde am gresit :P. Multumesc anticipat !!


[IMG]https://i.imgur.com/LkKavqe.png[/img]


Cod HTML:
http://pastebin.com/2v7LrWCY

Cod CSS:
http://pastebin.com/RwvhEDs4

#2
MooF2010

MooF2010

    Senior Member

  • Grup: Senior Members
  • Posts: 5,306
  • Înscris: 24.05.2010
1. Iti recomanda tabele.

2. Revenind la ideea ta ar arata ceva de genul:

<div id=content >
<div id=header>
</div>
<div id=left>
</div>
</div id=body>
</div>
<div id=right>
</div>
<div id=footer>
</div>
</div>

si apoi faci in css

#content {margins:0; height=100%; width=100%;}
#header (margin-left:0; margin-top:0; height:50px; width:100%;)
#left {margin-left:0; margin-top:50px; width:10%;height:500px;}
#body{margin-left:10%; margin-top:50px; height:500px; width:80%;}
#right{margin-right:10%; margin-top:50px; height:500px; width:10%;}
#foother{margin-left:0; margin-top:550px; width:100%; height:15px;}

cam asta ar fi un exemplu(nu stiu daca sintaxele sunt exacte 100% nu mai lucrez de mult cu div-uri).

varianta cu tabele ar fi mai simpla dupa parerea mea

<table width="100%" >
<tr><td>
<table width="100%">
<tr height="50px">
<td> HEADER </td>
</tr>
</table>
<table width="100%">
<tr height="500px">
<td width="10%"> Slide left </td>
<td width="80%"> Body </td>
<td width="10%"> Slide right </td>
</tr>
</table>
<table width="100%">
<tr height="15px">
<td> FOOTER </td>
</tr>
</table>
</td></tr>
</table>

parerea mea... acuma astea sutn exemple care imi trec acum fugitiv daca vrei ma gasesti weekend-ul asta la id ashimapetrisor si iti pot arata pe pagina exact cu sintaxele corecte 100%.

#3
Andrey77

Andrey77

    Member

  • Grup: Members
  • Posts: 688
  • Înscris: 22.12.2009
Eu nu te sfatuiesc sa folosesti tabele. Sunt o practica proasta atunci cand vine vorba de layout-ul unui website, iar faptul ca inca de la inceput nu ai abordat-o si mai mult, folosesti float, este de laudat.
In general, tabelele sunt pentru informatii, si daca te obisnuiesti asa, cand vine vorba sa creezi ceva mai complex...tabele, tabele si iar tabele.

In primul rand, tu vei ca orice pui in mijloc sa ocupe tot spatiul dintre cele doua sidebar-uri din stanga si dreapta, nu?
Exista mai multe metode:
Poti sa ii aplici elementului din mijloc niste reguli css prin care ii setezi fix dimensiunea. Dar asta cu conditia ca tu sa stii exact care este latimea viewport-ului (partea vizibila a ecranului, fara browser/OS) si latimile sidebar-urilor. Trebuie doar sa te joci cu pixelii, incerci mai intai 500px, apoi 1000px si le potrivesti si tu.

Sau, metoda pe care ti-o recomand cel mai mult: creeza un div care sa reprezinte tot "corpul" website-ului. Seteaza-i doar lui o dimensiune fixa. Apoi, pune-ti sidebar-urile si continutul in div-ul asta mare.
Acum, tot ce trebuie sa faci este sa iti dai seama cat de mari vrei sa fie, si sa incepi sa setezi dimensiunile relative: left sa aiba 20%, continut sa aiba 60% si right sa aiba 20%. Tine de tine daca vrei sa incluzi headerul si footerul sau nu. In cazul tau, eu ti-as recomanda sa le incluzi si pe ele, amandoua avand 100% width, pentru ca asta si vrei de fapt, din cate am vazut eu.

#4
fuucktheclowns

fuucktheclowns

    Junior Member

  • Grup: Members
  • Posts: 45
  • Înscris: 14.03.2013

View PostMooF2010, on 23 august 2013 - 12:32, said:

1. Iti recomanda tabele.

2. Revenind la ideea ta ar arata ceva de genul:

<div id=content >
<div id=header>
</div>
<div id=left>
</div>
</div id=body>
</div>
<div id=right>
</div>
<div id=footer>
</div>
</div>

si apoi faci in css

#content {margins:0; height=100%; width=100%;}
#header (margin-left:0; margin-top:0; height:50px; width:100%Posted Image
#left {margin-left:0; margin-top:50px; width:10%;height:500px;}
#body{margin-left:10%; margin-top:50px; height:500px; width:80%;}
#right{margin-right:10%; margin-top:50px; height:500px; width:10%;}
#foother{margin-left:0; margin-top:550px; width:100%; height:15px;}

cam asta ar fi un exemplu(nu stiu daca sintaxele sunt exacte 100% nu mai lucrez de mult cu div-uri).

varianta cu tabele ar fi mai simpla dupa parerea mea

<table width="100%" >
<tr><td>
<table width="100%">
<tr height="50px">
<td> HEADER </td>
</tr>
</table>
<table width="100%">
<tr height="500px">
<td width="10%"> Slide left </td>
<td width="80%"> Body </td>
<td width="10%"> Slide right </td>
</tr>
</table>
<table width="100%">
<tr height="15px">
<td> FOOTER </td>
</tr>
</table>
</td></tr>
</table>

parerea mea... acuma astea sutn exemple care imi trec acum fugitiv daca vrei ma gasesti weekend-ul asta la id ashimapetrisor si iti pot arata pe pagina exact cu sintaxele corecte 100%.


Momentan nu am folosit deloc tabele  si nu vreau sa ma incurc mai rau, vreau sa inteleg bine cum sta treaba cu div-urile si pozitionarea elementelor. Apreciez raspunsul tau!

View PostAndrey77, on 23 august 2013 - 12:51, said:

Eu nu te sfatuiesc sa folosesti tabele. Sunt o practica proasta atunci cand vine vorba de layout-ul unui website, iar faptul ca inca de la inceput nu ai abordat-o si mai mult, folosesti float, este de laudat.
In general, tabelele sunt pentru informatii, si daca te obisnuiesti asa, cand vine vorba sa creezi ceva mai complex...tabele, tabele si iar tabele.
In primul rand, tu vei ca orice pui in mijloc sa ocupe tot spatiul dintre cele doua sidebar-uri din stanga si dreapta, nu?
Exista mai multe metode:
Poti sa ii aplici elementului din mijloc niste reguli css prin care ii setezi fix dimensiunea. Dar asta cu conditia ca tu sa stii exact care este latimea viewport-ului (partea vizibila a ecranului, fara browser/OS) si latimile sidebar-urilor. Trebuie doar sa te joci cu pixelii, incerci mai intai 500px, apoi 1000px si le potrivesti si tu.
Sau, metoda pe care ti-o recomand cel mai mult: creeza un div care sa reprezinte tot "corpul" website-ului. Seteaza-i doar lui o dimensiune fixa. Apoi, pune-ti sidebar-urile si continutul in div-ul asta mare.
Acum, tot ce trebuie sa faci este sa iti dai seama cat de mari vrei sa fie, si sa incepi sa setezi dimensiunile relative: left sa aiba 20%, continut sa aiba 60% si right sa aiba 20%. Tine de tine daca vrei sa incluzi headerul si footerul sau nu. In cazul tau, eu ti-as recomanda sa le incluzi si pe ele, amandoua avand 100% width, pentru ca asta si vrei de fapt, din cate am vazut eu.
Am prins ideea destul de repede cum sta treaba cu "float" si div-urile, insa pe mine ma intereseaza  sa centrez continutul meu intre cele doua panouri stanga-dreapta fara sa pun o dimensiune fixa si sa o iau pe ghicite, am sa incerc cum mi-ai zis tu sa fac un div "container". Multumesc!

Edited by fuucktheclowns, 23 August 2013 - 13:23.


#5
MooF2010

MooF2010

    Senior Member

  • Grup: Senior Members
  • Posts: 5,306
  • Înscris: 24.05.2010
aici ai auzit diverite pareri, fiecare are stilul lui... a mea care folosesc tabele de vreo 2 ani si jonglez cu ele cum vreau si a lui @Andrey77 care banuesc ca foloseste div-uri.

pentru mai mult ajutor iti recomand http://www.w3schools...positioning.asp si mai umbli tu prin site, nu este foarte elaborat dar are un + ca poti face teste live

Edited by MooF2010, 23 August 2013 - 14:47.


#6
Andrey77

Andrey77

    Member

  • Grup: Members
  • Posts: 688
  • Înscris: 22.12.2009

View Postfuucktheclowns, on 23 august 2013 - 13:17, said:

Momentan nu am folosit deloc tabele  si nu vreau sa ma incurc mai rau, vreau sa inteleg bine cum sta treaba cu div-urile si pozitionarea elementelor. Apreciez raspunsul tau!


Am prins ideea destul de repede cum sta treaba cu "float" si div-urile, insa pe mine ma intereseaza  sa centrez continutul meu intre cele doua panouri stanga-dreapta fara sa pun o dimensiune fixa si sa o iau pe ghicite, am sa incerc cum mi-ai zis tu sa fac un div "container". Multumesc!
Pai tocmai, daca nu vrei sa o iei pe ghicite, aplica metoda a doua, cea pe care ti-o recomand eu, si anume notarea in procente a dimensiunilor. E simplu, left are width 10%, middle are width 80% si right are width 10%. Plus ca nu se poate spune total "pe ghicite". In fond, tu dai dimensiunile la tot ce ai acolo, si nu trebuie decat sa faci o diferenta ca sa iti rezulte ce vrei.
Acum normal ca va trebui sa pui ceva fix la dimensiunile containerului acestora. Browserul nu are de unde sa stie cat de mare vrei sa fie corpul. Insa aia e singura dimensiune fixa pe care o vei pune.
Uite, o sa iti fac o demonstratie si revin cu un link.

View PostMooF2010, on 23 august 2013 - 14:47, said:

aici ai auzit diverite pareri, fiecare are stilul lui... a mea care folosesc tabele de vreo 2 ani si jonglez cu ele cum vreau si a lui @Andrey77 care banuesc ca foloseste div-uri.

pentru mai mult ajutor iti recomand http://www.w3schools...positioning.asp si mai umbli tu prin site, nu este foarte elaborat dar are un + ca poti face teste live
Ma omule...tu imi amintesti de genul ala de om care "face site-uri si le face sa mearga", si care isi da titlul de "webmaster" sau ce naiba ii mai trece prin cap.
De ce ii recomanzi omului w3cacatul asta? Tu stii cat de vagi, incomplete si uneori incorecte sunt informatiile lor? Ma rog, ar fi trebuit sa stii...
Si legat de tabele. Aici nu e vorba de pareri, stiluri. Tabelele sunt tabele, si sunt menite pentru cu totul altceva. Cum l-ai numi pe un om care isi doreste o masina, are bani sa isi ia, insa nu isi ia, cumparand niste carton si facandu-l sa arate ca o masina? Aha, te-ai prins.

Edited by Andrey77, 23 August 2013 - 15:56.


#7
poadol

poadol

    Guru Member

  • Grup: Senior Members
  • Posts: 14,104
  • Înscris: 13.12.2010
HTML
<html>
	<head>
		<title>Practice</title>
		<link rel="stylesheet"; type="text/css"; href="style1.css" />
	</head>
	<body>
		<div id="content">
<p>CONTENT</p>
<div id="header">
<p>Header</p>
</div>
	<div id="content1">
<div id="left" class="gool">
<p>LEFT</p>
</div>
<div id="body1" class="gool">
<p> BODY1</p>
</div>
<div id="right" class="gool">
<p>RIGHT</p>
</div>

	</div>
<div id="footer">
<p>FOOTER</p>
</div>
		</div>

	</body>
</html>

CSS = style1.css
body {text-align:center;}
#content {display: block; margin:0; height=700px; width=100%;border: 1px solid black; }
#header { margin-top:60px; margin-left:50px; width:1140px; height:45px; border: 1px solid black;}
.gool {display: inline; margin: 0;}
#content1 {margin-top: 10px; margin-left: 50px; width:1140px; height:504px;}
#left { margin-top:0px; margin-left:0px; margin-right:10px; width:170px; height:500px; border: 1px solid black; float:left;}
#body1{ margin-top:0px; margin-right:10px; width:772px; height:500px; border: 1px solid black; float:left;}
#right{ margin-top:0px; margin-right:0px; width:170px; height:500px; border: 1px solid black; float:left; }
#footer{display:block; margin-top:20px; margin-left: 50px; width:1140px; height:35px; border: 1px solid black;}



#8
poadol

poadol

    Guru Member

  • Grup: Senior Members
  • Posts: 14,104
  • Înscris: 13.12.2010
Sau HTML
<html>
	<head>
		<title>Practice</title>
		<link rel="stylesheet"; type="text/css"; href="style2.css" />
	</head>
	<body>
		<div class="top">
			<h1>Practice</h1>
		</div>
		<div class="top1">
			<form>
				<strong>Username:  </strong><input type="text"; name="Username" />
				<strong>Password:  </strong><input type="password" name="Password" />
				<input type="submit"; name="Submit"; value="Login"; />
			</form>
		</div>
	<div class="content">
		<div class="left">
			<ul>
				<li><a href="/Home">Home</a></li>
				<li><a href="/About">About</a></li>
				<li><a href="/Contact">Contact</a></li>
			</ul> 
		</div>
		<div class="continut">
			<p>Continut</p>
		</div>
		<div class="right">
			<h3>Prezentare</h3>
		</div>
	</div>
		<div class="bottom">
			<footer>
				&copy; Popa Madalin
			</footer>
		</div>
			
	</body>
</html>

CSS = style2.css
*{
	padding: 0px;
	margin: 0px;
}
a {
	text-decoration: none;
}
ul {
	list-style: none;
}
body {
	background-color:#1A0000;
	color: white;
}
.top {
	background-color:#1A0000;
}
.top h1{
	text-align:center;
	padding: 15px;
	line-height: 80px
}
.top1 {
	background-color: #FF9933;
	width: 1150px;
	margin-right: 60px;
	margin-left: 60px;
}

.top1 form{
	text-align:center;
	padding-top: 10px;
	padding-bottom: 10px;
}

.test{
	text-align:center;
}

.content {
	width: 1150px;
	height: 470px;
	margin-top: 10px;
	margin-right: 60px;
	margin-left: 60px;
	border: 1px solid black;
}

.left{
	display: inline;
	background-color:FF9933;
	margin-top: 10px;
	margin-left: 0px;
	width: 150px;
	height: 400px;
	color: white;
	float: left;
}

.left ul{
	padding: 10px;
   
}   
.continut{
	display: inline;
	background-color: red;
	margin: 10px 10px;
	width: 788px;
	height: 420px;
	padding: 20px;
	float: left;
	overflow: hidden;   
}

.right{
	display: inline;
	background-color: #FF9933;
	margin-top: 10px;
	margin-right: 0px;   
	width: 150px;
	height:400px;
	color: black;
	float: left;
}

.right h3{
	padding-left:10px;
	padding-top:10px;
}

.bottom{
	background-color: red;
	clear:left;
	margin-top:10px;
	width: 1150px;
	margin-right: 60px;
	margin-left: 60px;
	margin-bottom:10px;
	text-align: center;

}



#9
Andrey77

Andrey77

    Member

  • Grup: Members
  • Posts: 688
  • Înscris: 22.12.2009
http://codepen.io/AndreiPham/pen/iqCbs

#10
Andrey77

Andrey77

    Member

  • Grup: Members
  • Posts: 688
  • Înscris: 22.12.2009
Stiu ca o sa ti se pare ca nu are legatura cu problema ta, si stiu ca nu ti-o rezolva direct. Dar presupunand ca vrei sa inveti, ti-am facut un sample care arata cum functioneaza layout-ul imaginat de tine.

La fel ca tine, am un left sidebar, main content si right sidebar, care se afla intr-un element cu id grid. Lui grid i-am dat width 1400px, sidebar-urilor le-am dat 15% si main content-ului i-am dat 70%. Astea sunt dimensiunile relative de care iti ziceam. Astfel, tu doar alegi "latimea website-ului", si regulile css calculeaza automat cat de mari sa fie coloanele astfel incat sa se completeze unele pe altele.

Ca sa nu se aseze unele sub altele, le-am dat tuturor (3) float: left, astfel aliniandu-se la stanga, fiecare in dreptul celeilalte. Footerul are nevoie de un clear: left, ca sa nu fie afectat de float-ul lor.

#11
poadol

poadol

    Guru Member

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

View PostMooF2010, on 23 august 2013 - 14:47, said:

aici ai auzit diverite pareri, fiecare are stilul lui... a mea care folosesc tabele de vreo 2 ani si jonglez cu ele cum vreau si a lui @Andrey77 care banuesc ca foloseste div-uri.

pentru mai mult ajutor iti recomand http://www.w3schools...positioning.asp si mai umbli tu prin site, nu este foarte elaborat dar are un + ca poti face teste live

De pe: http://www.w3schools...html_layout.asp

"Even though it is possible to create nice layouts with HTML tables, tables were designed for presenting tabular data - NOT as a layout tool!"
"Chiar dacă este posibil să creați structuri frumoase, cu tabele HTML, tabelele au fost proiectate pentru prezentarea datelor in format tabelar - nu ca un instrument de aspect!"

#12
MooF2010

MooF2010

    Senior Member

  • Grup: Senior Members
  • Posts: 5,306
  • Înscris: 24.05.2010

View PostAndrey77, on 23 august 2013 - 15:54, said:

Pai tocmai, daca nu vrei sa o iei pe ghicite, aplica metoda a doua, cea pe care ti-o recomand eu, si anume notarea in procente a dimensiunilor. E simplu, left are width 10%, middle are width 80% si right are width 10%. Plus ca nu se poate spune total "pe ghicite". In fond, tu dai dimensiunile la tot ce ai acolo, si nu trebuie decat sa faci o diferenta ca sa iti rezulte ce vrei.
Acum normal ca va trebui sa pui ceva fix la dimensiunile containerului acestora. Browserul nu are de unde sa stie cat de mare vrei sa fie corpul. Insa aia e singura dimensiune fixa pe care o vei pune.
Uite, o sa iti fac o demonstratie si revin cu un link.


Ma omule...tu imi amintesti de genul ala de om care "face site-uri si le face sa mearga", si care isi da titlul de "webmaster" sau ce naiba ii mai trece prin cap.
De ce ii recomanzi omului w3cacatul asta? Tu stii cat de vagi, incomplete si uneori incorecte sunt informatiile lor? Ma rog, ar fi trebuit sa stii...
Si legat de tabele. Aici nu e vorba de pareri, stiluri. Tabelele sunt tabele, si sunt menite pentru cu totul altceva. Cum l-ai numi pe un om care isi doreste o masina, are bani sa isi ia, insa nu isi ia, cumparand niste carton si facandu-l sa arate ca o masina? Aha, te-ai prins.


1. nu ma declar webmaster...
2. sunt nspe mii de tempalte-uri pe net facute in tabele
3. am precizat ca acel site nu este stralucit, dar pentru ce a precizat el ca are nevoie acum este de ajuns. unuia care este la inceput de drum ii este mai util un site care explica fiecare element separat si da posibilitatea de a faca proba live decat un site cu tutoriale stufoase.

crede-ma prietene orice imi faci tu in div-uri eu sunt in stare sa iti fac in tabele si este mai stabil pe orice browser si pe orice dispozitiv, eu nu fac site-uri eu fac aplicatii web, si nu mi s-a plans nimeni de produsele mele.

#13
Andrey77

Andrey77

    Member

  • Grup: Members
  • Posts: 688
  • Înscris: 22.12.2009
Nu ti s-a plans nimeni pentru ca nimeni nu sta sa se uite la ce ai tu in spate, insa un daca ar vedea un developer asta ori s-ar sinucide cu un facepalm exagerat, ori ti-ar da in cap.

Si nu, prietene, nu ai putea, crede-ma.

Edited by Andrey77, 23 August 2013 - 20:55.


Anunturi

Chirurgia endoscopică a hipofizei Chirurgia endoscopică a hipofizei

"Standardul de aur" în chirurgia hipofizară îl reprezintă endoscopia transnazală transsfenoidală.

Echipa NeuroHope este antrenată în unul din cele mai mari centre de chirurgie a hipofizei din Europa, Spitalul Foch din Paris, centrul în care a fost introdus pentru prima dată endoscopul în chirurgia transnazală a hipofizei, de către neurochirurgul francez Guiot. Pe lângă tumorile cu origine hipofizară, prin tehnicile endoscopice transnazale pot fi abordate numeroase alte patologii neurochirurgicale.

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