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
 

Nu pot aseza pe 2 coloane din CSS

- - - - -
  • This topic is locked This topic is locked
18 replies to this topic

#1
detective

detective

    Active Member

  • Grup: Members
  • Posts: 1,097
  • Înscris: 24.03.2007
Salut, am ajuns in postura de a folosi CSS, eu pana acum foloseam tabele si ma descurcam cu coloanele si randurile, dar acum am ajuns in nevoia neaparata de a folosi CSS.
Ce doresc sa fac :

Am mai multe input field-uri, nume prenume, email, imagine, etc.Le-am creat frumos, dar ele sunt puse una sub alta si imi lungeste prea mult pagina pe verticala, as dori sa le pun pe 2 coloane, de ex  nume + prenume  pe un rand, apoi email si ym pe al 2-lea rand etc, cu text align stanga. iar acel bloc format din formularul aliniat pe 2 coloane sa fie centrat in pagina.

uitati in screenshot cum arata acum

Attached File  Image.jpg   76.29K   54 downloads


Apoi as mai avea o problema tot legata de CSS.

Pagina mea e compusa din 5 div-uri, Header, Navigatie, Mijloc ( o imagine de background ), Container, Footer.

Problema e ca div-ul Mijloc nu este vizibil, este "calcat" de catre Container si este obturat sa zic asa, div-ul Mijloc are ca setare din CSS o imagine ca background de dimensiuni mici.
Am reusit sa il scot la iveala folosind <br /> in excess. Un exemplu cum este acum si cum ar trebui sa fie am pus in screenshot-urile de mai jos.

Attached File  Image2.jpg   53K   40 downloads

Attached File  Image1.jpg   88.26K   33 downloads

#2
Jumping Jack

Jumping Jack

    Member

  • Grup: Members
  • Posts: 622
  • Înscris: 12.09.2007

 detective, on Sep 19 2008, 01:50, said:

Salut, am ajuns in postura de a folosi CSS, eu pana acum foloseam tabele si ma descurcam cu coloanele si randurile, dar acum am ajuns in nevoia neaparata de a folosi CSS.
Este destul de greu sa iti spun exact ce si cum trebuie facut, atat vreme cit nu vad ce ai facut tu acolo. Pozele nu ajuta foarte mult in cazul asta.

Ca sa asezi continutul pe 2 coloane:
Pentru formularul ala, pui toate perechile label+input in cite un li, si bagi toate li-urile intr-un ul. Cam asa:

<ul id="form_list">
<li><label for="input_id">label</label><input id="input_id" type="text" /></li>
<li><label for="input_id">label</label><input id="input_id" type="text" /></li>
<li><label for="input_id">label</label><input id="input_id" type="text" /></li>
<li><label for="input_id">label</label><input id="input_id" type="text" /></li>
</ul>

Iar in css:

ul#form_list {float:left;width:590px;padding:10px 0 10px 10px}
ul#form_list li {float:left;width:285px;margin:3px 10px 3px 0}

Edited by Jumping Jack, 19 September 2008 - 19:43.


#3
detective

detective

    Active Member

  • Grup: Members
  • Posts: 1,097
  • Înscris: 24.03.2007
Ok a mers cat de cat, problema e ca nu imi apare captcha image acum, si cum fac sa centrez tot bloc-ul asta de ul in centru, deasemenea fiv-ul footer a ajuns saracu' sus de tot, div-ul mijloc nici nu se mai vede.

Attached File  Image4.jpg   134.3K   25 downloads

asta e codul css din interiorul paginii despre care vb

<style type="text/css">
#apDiv1 {
	position:absolute;
	left:6px;
	top:287px;
	width:139px;
	height:333px;
	z-index:1;
}
<!--
.linkuri {
	font-size: 14px;
	font-weight: bold;
	color: #D64627;
	text-decoration: none;
}
#formular {
}
.style1 {
	font-size: 14px;
	font-weight: bold;
}
ul#form_list {float:left;width:590px;padding:10px 0 10px 10px}
ul#form_list li {float:left;width:285px;margin:3px 10px 3px 0}
ul { list-style-type: none }
-->
</style>

Asta ar fi codul intregului formular, introdus un div-ul formular

<div id="formular">
<ul id="form_list">
<form action="trimite.php" method="post" class="niceform" enctype="multipart/form-data">
	<br />
	<label for="x"><span class="style1">- Campurile marcate cu asterisk * sunt obligatoriu de completat</span><br />
	<span class="style1">-  Incercati sa formulati o descriere cat mai detaliata a produsului</span><br />
	<span class="style1">- Poza cu produsul este optional, dar recomandat</span><br /><span class="style1">- Cititi cu atentie</span> <span class="linkuri">Regulile si Termenii de Utilizare</span></label>
	<br />
	<br />
	<li><label for="vanzator">*Nume vanzator:</label><br />
	<input type="text" id="vanzator" name="vanzator" size="12" />
   </li>
	<li><label for="nume">*Nume produs:</label><br />
	<input type="text" id="nume" name="nume" size="12" /><br />
	<br /></li>
	<li><label for="Categorie">*Categorie:</label><br />
	<select size="1" id="select" name="Categorie" class="width_160">
		<option value="">Alege </option>
		<option value="automoto">Auto Moto</option>
		<option value="pc">Calculatoare si Accesorii</option>
		<option value="electro">Electronice</option>
		<option value="imobiliare">Imobiliare</option>
		<option value="imbracaminte">Imbracaminte </option>
		<option value="incaltaminte">Incaltaminte</option>
		<option value="gsm">Telefoane si Accesorii</option>
		<option value="altele">Altele</option>
	</select></li>
	<br />
	<li><label for="pret">*Pretul dorit:</label><br />
	<input type="text" id="pret" name="pret" size="12" /><br />
	<br /></li>
	<li><label for="detalii">*Descriere produs:</label><br />
	<textarea id="detalii" name="detalii" rows="10" cols="20"></textarea><br />
	<br /></li>
	<li><label for="image">Imagine produs :</label><br />
	<input name="image" type="file" size="16" /><br />
	<br /></li>
	<li><label for="telefon">*Telefon:</label><br />
	<input type="text" id="telefon" name="telefon" size="12" /><br />
	<br /></li>
	<li><label for="ym">ID Yahoo Messenger:</label><br />
	<input type="text" id="ym" name="ym" size="12" /><br />
	<br /></li>
	<li><label for="email">*Adresa E-mail:</label><br />
	<input type="text" id="email" name="email" size="12" /><br />
	<br /></li>
	<li><label for="parola">*Parola de autor:</label><br />
	<input type="password" id="parola" name="parola" size="12" /><br />
	<br /></li>
	<li><label for="security">*Cod de securitate:</label><br />
	<input type="text" id="security" name="security" size="12" /><br />
	<li><img src="captcha.php" alt="captcha" /><br /></li>
	<br /></li>
	<li><input type="checkbox" name="TOS" id="TOS" value="DA" /><label for="TOS">*Sunt de acord cu Regulile si Termeni ide Utilizare</label><br />
	<br /></li>
	<li><input type="submit" id="Submit" value="Adauga" /></li>
</form>
</ul>
</div>

Asta ar fi styles.css care de cand am inceput sa lucrez cu css s-a ca dus layout paginii, deci 100% si asta are erori.Bineinteles contine si unele elemente care sunt pe alte pagini, dar pe toate div-ul mybody nu e afisat bine.

.mynav {
	background-image: url(images/layout-contact_02.gif);
	background-position: center top;
	height: 42px;
	width: 100%;
	margin-top: 0px;
	text-align: center;
	padding-top: 0px;
	position: relative;
	bottom: 1px;
}

#banner {
	background-image: url(images/banner.gif);
	background-repeat: no-repeat;
	background-position: right;
	height: 146px;
	width: 100%;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	position: absolute;
	top: 0px;
	right: 0px;
}
#spatier {
	background-image: url(images/spatier.gif);
	background-repeat: repeat-x;
	position: absolute;
	height: 146px;
	top: 0px;
	left: 202px;
	right: 723px;
	width: 723px;
}

.mybody
{
	background-image: url(images/layout-contact_06.gif);
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
}	 

#footer
{
position:relative;
left:0;
top:0;
width:100%;
height:41px;
margin:0;
padding:0;
background-image: url(images/layout-contact_13.gif);
}

#footer_text
{
margin-top:5px;
font-family:arial,helvetica,sans-serif;
font-size:12px;
font-weight:bold;
text-align:center;
padding-top:12px;
}

#logo {
	background-image: url(images/logo.gif);
	background-repeat: no-repeat;
	background-position: left top;
	height: 146px;
	width: 100%;
	margin-top: 0px;
	left: 0px;
	top: 0px;
}
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	color: #00CCFF;
	top: 1px;
	margin-top: 1px;
	padding: 1px;
	font-style: normal;
	word-spacing: 15px;
	text-align: center;
	vertical-align: middle;
	line-height: normal;
	font-weight: bolder;
}
h2 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	vertical-align: 20%;
}
.mynav a {
	font-size: 16px;
	color: #00CCFF;
	text-decoration: none;
	word-spacing: 2px;
}
#numeprodus {
	font-size: 16px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-style: normal;
	text-transform: capitalize;
	font-weight: bold;
	color: #316AC5;
	text-indent: 5px;
}
#poza {
	height: 100px;
	width: 100px;
	padding: 1px;
	border: 3px solid #E7E7E8;
}
#ads {
	position: relative;
}
.mybody #add .style1 a {
	color: #316AC5;
	text-decoration: none;
	font-weight: normal;
	font-family: "Cooper Black";
	font-size: 25px;
}
.tabel #Table_01 #detaliianunt .style3 {
	font-weight: bold;
	color: #316AC5;
	font-size: 12px;
	text-decoration: none;
	word-spacing: 8px;
}
.tabel #Table_01 #detaliianunt {
	font-size: 12px;
	font-weight: bold;
	color: #316AC5;
	text-decoration: none;
}

.mybody #add .style1 .style4 a {
	font-family: "Cooper Black";
	font-size: 16px;
	color: #316AC5;
	text-decoration: none;
}
#divTopLeft a {
	font-size: 16px;
	color: #D34B3A;
	text-decoration: none;
}

L.E : Merge captcha, am resetat XAMPP si a aparut, se afiseaza....well diferit pe toate browserele, dar e un inceput, cel mai bine apare pe IE deocamdata.

FF
Attached File  FF.jpg   136.04K   10 downloads

IE
Attached File  Image6.jpg   156.27K   7 downloads

Chrome
Attached File  Image7.jpg   130.7K   9 downloads

Edited by detective, 20 September 2008 - 11:37.


#4
detective

detective

    Active Member

  • Grup: Members
  • Posts: 1,097
  • Înscris: 24.03.2007
Am reusit cat de cat, dar ma lovesc de o noua problema, cea cu div-urile.

Cum fac ca de ex, am un div care este header-ul, e stabilit chiar sus de tot in pagina adica margine sus 0px, latime 100%, si inaltime sa zicem ca are 200 px.Bun apoi urmatorul div ce vine sub el, eu trebuie sa ii pun o margine de 201px ca sa cada exact sub primul div obtinandu-se efectul de cascada, adica unul sub altul, si asa mai departe cu toate div-urile, dar chestia e ca metoda aceasta nu merge de fiecare data si sunt si erori de afisare in unele browsere, asa ca intreb care este cea mai buna posibilitate de a div-urile, si sa isi pastreze pozitia ?

#5
Jumping Jack

Jumping Jack

    Member

  • Grup: Members
  • Posts: 622
  • Înscris: 12.09.2007

 detective, on Sep 26 2008, 00:14, said:

Am reusit cat de cat, dar ma lovesc de o noua problema, cea cu div-urile.

Cum fac ca de ex, am un div care este header-ul, e stabilit chiar sus de tot in pagina adica margine sus 0px, latime 100%, si inaltime sa zicem ca are 200 px.Bun apoi urmatorul div ce vine sub el, eu trebuie sa ii pun o margine de 201px ca sa cada exact sub primul div obtinandu-se efectul de cascada, adica unul sub altul, si asa mai departe cu toate div-urile, dar chestia e ca metoda aceasta nu merge de fiecare data si sunt si erori de afisare in unele browsere, asa ca intreb care este cea mai buna posibilitate de a div-urile, si sa isi pastreze pozitia ?

Cascada este altceva, nu are treaba cu pozitionarea div-urilor unul sub altul. Cascada se refera la specificitate. Ai aici mai multe informatii despre problema.

Despre problema ta:
La layouturi cu pozitionare absoluta, trebuie sa ai grija ca parintele elementului pozitionat absolut sa fie si el la rindul sau pozitionat, relativ sau absolut. daca asta nu se intimpla, div-ul pozitionat absolut se raporteaza la primul ancestor care este pozitionat, si daca nu gaseste, se raporteaza la body. In cazul de mai jos, .wrapper are position:relative. Daca ii anulezi asta, layoutul se strica. Si inca ceva: la positioning, A nu se confunda margin-left cu left, respectiv margin-right cu right, si tot asa. Nu au nici o legatura unele cu altele. Pozitionarea (offsetingul) se face cu top, right, bottom, left.

Uite aici o bucata de codm, care sa ajute sa intelegi.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
 <head>
 <title>absolute positioned layout</title>
 <style type="text/css">
 *{margin:0;padding:0}
 .wrapper {width:960px;margin:0 auto;position:relative}
 .header {height:200px;border:1px solid red;padding:10px}
 .left{position:absolute;top:201px;left:0;width:200px;border:1px solid red;padding:10px}
 .right{position:absolute;left:210px;top:201px;border:1px solid red;padding:10px}
 
 </style>
 </head>
 <body>
 
 <div class="wrapper">
 <div class="header"><h1>Div.header</h1><p>asta e headerul</p> </div>
 <div class="left"><h2>Div.left</h2><p>Quand le Parlement européen a adopté par 573 voix contre 74</p></div>
 <div class="right"><h2>Div.right</h2>
 <p>Quand le Parlement européen a adopté par 573 voix contre 74, donc à une écrasante majorité l’amendement Bono le public ne s’étaient pas trompés, c’est bien l’Europe qui faisait échec à la conception de la riposte graduée que la France voudrait voir mettre en place dans sa nouvelle loi “Création et Internet”, notamment la surveillance des consommateurs de l’internet et la possibilité de suspendre leur abonnement sur simple décision administrative et le filtrage automatique des réseaux). Mais çà tombe mal, parce que justement c’est la France qui assure en ce moment la présidence tournante de l’UE… alors la Commission européenne, cette autre Europe, ne fait rien de mieux que voler au secours de la pauvre ministre de la culture française par la voix de Mme Reading, Commissaire à la Société de l’information, qui assurer qu’elle ne tiendrait en aucun cas compte de cet amendement. Et vive la démocratie !</p>
 
 </div>
 </div>
 </body>
 </html>

Edited by Jumping Jack, 27 September 2008 - 19:02.


#6
Jumping Jack

Jumping Jack

    Member

  • Grup: Members
  • Posts: 622
  • Înscris: 12.09.2007
Referitor la cascada:  E ceva mai mult de spus acolo, nu numai specificitatea conteaza. Conteaza si de unde vine o definitie css- daca este vorba de inline style, embeded sau extern si asa mai departe. Dar decit sa stau sa explic, mai bine te trimit la sursa:
http://www.w3.org/TR...de.html#cascade

#7
fireblade80

fireblade80

    Member

  • Grup: Members
  • Posts: 278
  • Înscris: 02.12.2006
Positionarea pe 2 sau mai multe coloane nu se face prin absolute positioning sau prin html / css hacks. Ai primit solutii proaste. Se face astfel:

HTML
<div id="pageContent">
<div id="leftColumn">
.........your left-side content .........
</div>
<div id="rightColumn">
............your right-side content........
</div>
<div id="clearFloat">
</div>

CSS
#leftColumn
{
	position: relative;
	float: left;
}

#rightColumn
{
	 position: relative;
	 float: right;
}

#clearFloat
{
	clear: both;
}

Proprietatea float scoate div-ul din fluxul documentului, creand efectul de coloane. Proprietatea clear restabileste fluxul firesc al elementelor in document. Poti folosi doar float: left sau float:right si div-urile se vor alinia unul dupa altul pe stanga, respectiv pe dreapta.

Toate browserele moderne (IE 7, Firefox, Opera, Safari, Konqueror) sustin complet CSS 2.1. IE 6 nu ofera sustinere completa pentru CSS 2.1, dar, in cazul float-urilor, functioneaza bine.  :D

Edited by fireblade80, 28 September 2008 - 21:39.


#8
OriginalCopy

OriginalCopy

    I'm harmful, fear me please! :))

  • Grup: Senior Members
  • Posts: 27,268
  • Înscris: 10.08.2006

 fireblade80, on Sep 28 2008, 21:38, said:

browserele moderne (IE 7
:rolleyes:

Edited by OriginalCopy, 28 September 2008 - 21:45.


#9
fireblade80

fireblade80

    Member

  • Grup: Members
  • Posts: 278
  • Înscris: 02.12.2006
Conceptual, IE7 e declarat CSS 2.1 compliant. In practica, tot vor fi probleme. Pe de alta parte, atunci cand exista diferente semnificative la afisarea unei pagini intre 2 browsere contemporane, de obicei tine de erori de design (HTML + CSS), pe care browserele le trateaza diferit, nu de incompatibilitatea unui anume browser cu standardele CSS.

Standardul CSS defineste cum trebuie sa arate o pagina scrisa corect, nu cum ar trebui un browser sa trateze erorile de design existente. Din cauza asta, modalitatea de tratare a erorilor e specifica browser-ului.

De exmplu, daca declari un div cu height: 100px si depasesti dimensiunea lui, intreaga pagina (care contine div-ul dat) va avea de suferit. Browser-ul ar putea extinde div-ul pentru a acomoda continutul sau ar putea considera proprietatea overflow: visible (default), deci ca intentia ta a fost sa depasesti container-ul.

De aceea, e important ca intotdeauna o pagina web sa fie testata cu cel putin doua browsere bazata pe engine-uri diferite si sa arate la fel (macar in linii mari) in fiecare browser testat. :D

#10
denverash

denverash

    Member

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

 fireblade80, on Sep 28 2008, 22:38, said:

Toate browserele moderne (IE 7, Firefox, Opera, Safari, Konqueror) sustin complet CSS 2.1. IE 6 nu ofera sustinere completa pentru CSS 2.1, dar, in cazul float-urilor, functioneaza bine.  :D

IE6 are probleme cu float left combinat cu margin-left



 fireblade80, on Sep 28 2008, 23:11, said:

De aceea, e important ca intotdeauna o pagina web sa fie testata cu cel putin doua browsere bazata pe engine-uri diferite si sa arate la fel (macar in linii mari) in fiecare browser testat. :D

si ce te faci cand clientul vrea sa-i arate identic pe IE6, IE7, IE8, FF2, FF3, safari, chrome :( iti iei o punga cu cafea si te astepti la cateva nopti foarte lungi :)

#11
fireblade80

fireblade80

    Member

  • Grup: Members
  • Posts: 278
  • Înscris: 02.12.2006
"Linii mari" inseamna, sa zicem, ca un div poate fi mai lung cu un rand in IE decat in Firefox, e acceptabil, dar existenta de elemente suprapuse nu e. Nu m-am exprimat destul de precis. Cam asta inteleg eu prin "linii mari".  :D

#12
Jumping Jack

Jumping Jack

    Member

  • Grup: Members
  • Posts: 622
  • Înscris: 12.09.2007

 fireblade80, on Sep 28 2008, 21:38, said:

Positionarea pe 2 sau mai multe coloane nu se face prin absolute positioning sau prin html / css hacks. Ai primit solutii proaste. Se face astfel:

Si DE CE ma rog este layoutul cu n coloane facut gresit cu pozitionare absoluta? De unde ai decretat tu asta? 

Pentru linistea ta sufleteasca, layout cu position:absolute este absolut corect si safe, cu singura rezerva a pozitionarii footerului, care se poate rezolva (position:fixed), iar pentru ie6 exista solutii javascript. Daca nu ai footer este chiar de preferat varianta asta, pentru ca nu are cum sa-ti explodeze layoutul in fata (in ie lt 7), la text sau orice alt continut prea lat - ca la solutia cu float. 

O seara buna.

#13
fireblade80

fireblade80

    Member

  • Grup: Members
  • Posts: 278
  • Înscris: 02.12.2006

 Jumping Jack, on Sep 29 2008, 22:24, said:

Si DE CE ma rog este layoutul cu n coloane facut gresit cu pozitionare absoluta? De unde ai decretat tu asta? 

Pentru linistea ta sufleteasca, layout cu position:absolute este absolut corect si safe, cu singura rezerva a pozitionarii footerului, care se poate rezolva (position:fixed), iar pentru ie6 exista solutii javascript. Daca nu ai footer este chiar de preferat varianta asta, pentru ca nu are cum sa-ti explodeze layoutul in fata (in ie lt 7), la text sau orice alt continut prea lat - ca la solutia cu float. 

O seara buna.

Layout-ul absolute implica pozitionarea exacta a fiecarui element, deci inclusiv stabilirea dimensiunii exacte a fiecarui element, ceea ce dubleaza daca nu tripleaza efortul de a coda style sheet-ul CSS aferent paginii. Dimensiuni care pot fi sau nu agreate de browsere, mai ales daca sunt "la fix" si un browser (IE, de exemplu) doreste mai "lase" un rand intr-un div. Pentru a evita astfel de "suprapuneri nedorite" se foloseste z-index-ul in mod extensiv.

De asemenea, nu poti crea o pagina cu continut centrat pe mijloc, ceea ce e foarte util tinand cont de diferitele rezolutii ale ecranelor. Pe de alta parte, orice modificare cat de usoara a continutului paginii implica recorelarea tutoror elementelor vizuale, deci o groaza de munca. In consecinta, strategia sugerata (absolutely-positioned controls) e greu de creat, greu de mentinut si de update-at, incluzandu-se intr-o categorie analoga codului spaghetti tip "goto" din programarea nestructurata. Ce sa mai zic daca pagina generata are si continut dinamic, a carui lungime / latime nu o poti sti in anticipatie si nici nu vei folosi scroll.

In ansamblu, CSS absolute positioning este inscrisa in categoria "bad practices" in orice carte, articol, prezentare despre HTML si CSS, demna de a fi utilizata doar pentru cazuri cu adevarat speciale, cum ar fi pop-up menus, de exemplu. Cand navighezi pe web, din cand in cand selecteaza "view page source" din browser si observa cate din site-urile remarcabile sunt realizate cu css absolute positioning. :D

Literatura de specialitate in domeniu referitoare la pozitionari pe mai multe coloane compara css relative positioning cu HTML tables, si da castig de cauza positionarii CSS in cazul definirii de containere si castig HTML tables in cazul unei structuri clar tabelare doar. CSS absolute positioning nici macar nu intra in discutie.  :D

Edited by fireblade80, 29 September 2008 - 22:10.


#14
Jumping Jack

Jumping Jack

    Member

  • Grup: Members
  • Posts: 622
  • Înscris: 12.09.2007

 fireblade80, on Sep 29 2008, 22:03, said:

Layout-ul absolute implica pozitionarea exacta a fiecarui element, deci inclusiv stabilirea dimensiunii exacte a fiecarui element, ceea ce dubleaza daca nu tripleaza efortul de a coda style sheet-ul CSS aferent paginii. Dimensiuni care pot fi sau nu agreate de browsere, mai ales daca sunt "la fix" si un browser (IE, de exemplu) doreste mai "lase" un rand intr-un div. Pentru a evita astfel de "suprapuneri nedorite" se foloseste z-index-ul in mod extensiv.
Nu dubleaza si cu atat mai putin nu tripleaza nimic.
Dimensiuni exacte la containere??? Adica? latime si mai ce? Sau la float nu dai latimea? Poti fi sigur ca cantitatea de cod este fix aceeasi ca la float, sau poate mai mica.


Quote

De asemenea, nu poti crea o pagina cu continut centrat pe mijloc, ceea ce e foarte util tinand cont de diferitele rezolutii ale ecranelor. Pe de alta parte, orice modificare cat de usoara a continutului paginii implica recorelarea tutoror elementelor vizuale, deci o groaza de munca. In consecinta, strategia sugerata (absolutely-positioned controls) e greu de creat, greu de mentinut si de update-at, incluzandu-se intr-o categorie analoga codului spaghetti tip "goto" din programarea nestructurata. Ce sa mai zic daca pagina generata are si continut dinamic, a carui lungime / latime nu o poti sti in anticipatie si nici nu vei folosi scroll.
Offside!!
De ce nu pot sa centrez un layout facut cu position:absolute? Ce ma impiedica sa bag totul intr-un wrapper centrat care este position:relative si sa ma raportez dupa aia numai la el??? Nu inteleg unde este impedimentul.
Check this out:
html:
<div id="wrapper">
  <div id="col1">
  </div>
  <div id="col2">
   </div>
  <div id="col3">
   </div>
</div>

css:
#wrapper {width:960px;margin:0 auto;position:relative;}
#col1 {width:200px;position:absolute;left:0; top:0}
#col2 {width:520px;position:absolute;left:220px; top:0}
#col3 {width:200px;position:absolute;right:0; top:0}

Arata-mi unde este cantitatea aia fantastica de cod, si care este problema sa il modific cum vreau. Si este si extraordinar de flexibil, pot sa modific ordinea containerelor cum vreau, fara sa ma ating de html. Pot sa pun continutul dupa sidebar stinga si in cod sa  apara inainte, lucru care la float in 3 coloane implica existenta a inca unui div suplimentar.

Quote

In ansamblu, CSS absolute positioning este inscrisa in categoria "bad practices" in orice carte, articol, prezentare despre HTML si CSS, demna de a fi utilizata doar pentru cazuri cu adevarat speciale, cum ar fi pop-up menus, de exemplu. Cand navighezi pe web, din cand in cand selecteaza "view page source" din browser si observa cate din site-urile remarcabile sunt realizate cu css absolute positioning. :D

Literatura de specialitate in domeniu referitoare la pozitionari pe mai multe coloane compara css relative positioning cu HTML tables, si da castig de cauza positionarii CSS in cazul definirii de containere si castig HTML tables in cazul unei structuri clar tabelare doar. CSS absolute positioning nici macar nu intra in discutie.  :D

Tu te auzi?
Arata-mi te rog unde este acea literatura de specialitate care spune ca pozitionarea absoluta este "bad practice". Ma refer la literatura de specialitate, nu la forumul lu nea gigi.

Alaturi de float (tables ies din discutie, hai sa fim seriosi), positioning-ul este considerat o modalitate cit se poate de ok pentru a face un layout. Motivul pentru care nu se foloseste prea des este acela ca (sint mai multe motive, de fapt, dar tot de prostia celor de la MS tin toate) ie6 nu stie position:fixed. Dar cum am spus, exista cale ocolitoare, iar acum, cu ie6 este pe cale de disparitie, este o alternativa de luat in seama.

In concluzie, positioning nu se foloseste prea des pentru ca ie (din pacate, monopolul a avut un cuvint greu in asta) are probleme de implementare css. Prin urmare nu se folosete. Prin urmare, dupa un timp vine un nea Gigi de la scularie (nu ma refer la tine) care spune ca "positioning sucks". Drept care, positioning sucks!! Dar asta nu inseamna ca e si adevarat.

Asculta-ma ca stiu ce spun, layout cu positioning este ok!! Doar ca pentru unii e prea greu. Au furat toti layouturi facute de-a gata de pe site-uri gen htmldog sau maxdesign, si peste tot nu mai vezi decit aceleasi stereotipii cu 2 si 3 coloane cu float, si au decretat ca numai asa e bine, altfel nu. Da, float este foarte bun, insa nu e singurul.

Edited by Jumping Jack, 29 September 2008 - 23:05.


#15
OriginalCopy

OriginalCopy

    I'm harmful, fear me please! :))

  • Grup: Senior Members
  • Posts: 27,268
  • Înscris: 10.08.2006
Si eu sunt curios care din voi are dreptate. Din acest motiv voi lua codul sursa unui browser la alegere si ma voi uita prin el.

#16
Jumping Jack

Jumping Jack

    Member

  • Grup: Members
  • Posts: 622
  • Înscris: 12.09.2007

 fireblade80, on Sep 28 2008, 21:38, said:

<div id="pageContent">
 <div id="leftColumn">
 .........your left-side content .........
 </div>
 <div id="rightColumn">
 ............your right-side content........
 </div>
 <div id="clearFloat">
 </div>

CSS
#leftColumn
 {
	 position: relative;
	 float: left;
 }
 
 #rightColumn
 {
	  position: relative;
	  float: right;
 }
 
 #clearFloat
 {
	 clear: both;
 }

Intrebare: de ce au containerele alea doua position:relative? Sau pregatesti ceva absolut in ele? :lol:

De altfel, layoutul tau nu functioneaza atat vreme cit nu dai width la cele doua containere cu float. Se aseaza fix unul sub altul, cu exceptia cazului cind continutul lor este foarte scurt si nu sare pe doua rinduri.
Daca dai un exemplu, macar da-l functional.

 OriginalCopy, on Sep 29 2008, 23:10, said:

Si eu sunt curios care din voi are dreptate. Din acest motiv voi lua codul sursa unui browser la alegere si ma voi uita prin el.
Pai degeaba te uiti, pentru ca (statistic) are dreptate, nu prea o sa vezi layouturi cu pozitionarea absoluta a coloanelor. Doar am spus asta. Eu altceva am afirmat, ca pozitionarea nu este bad practice si poate fi folosita, daca stii cum. Si este foarte misto.

#17
fireblade80

fireblade80

    Member

  • Grup: Members
  • Posts: 278
  • Înscris: 02.12.2006

 Jumping Jack, on Sep 30 2008, 00:04, said:

Offside!!
De ce nu pot sa centrez un layout facut cu position:absolute? Ce ma impiedica sa bag totul intr-un wrapper centrat care este position:relative si sa ma raportez dupa aia numai la el??? Nu inteleg unde este impedimentul.
Corect!  ^_^

 Jumping Jack, on Sep 30 2008, 00:04, said:

(tables ies din discutie, hai sa fim seriosi)
Tables nu ies din discutie, erau solutia standard inainte de adoptarea pe scara larga a CSS, si inca si acum sunt o solutie buna de multe ori, in cazurile in care se genereaza incompatiblitati datorita browser-elor. Incompatiblitati prezente mai ales la position: absolute, nu relative. Si in ziua de astazi, majoritatea site-urilor sunt realizate pe o structura de tabele. :D

The Ultimate CSS Reference said:

Internet Explorer for Windows versions up to and including 6 have problems with margin calculations for absolutely positioned boxes. Percentages for dimensions are computed relative to the parent block, rather than the containing block.
Ce poti rezolva cu position:absolute si nu poti cu position:relative, pentru a avea un flow firesc in document? Dar pentru situatiile, foarte frecvente de altfel, in care ai continut dinamic, ce faci cu position: absolute? Un site position: absolute nu scaleaza bine nici la mici modificari, pentru ca astea se propaga intre elementele din div-ul curent si apoi, prin spatiul ocupat, in toata pagina. Sau daca folosesti o combinatie position: relative cu position:absolute, de ce sa impui aceasta eterogenitate site-ului tau?

Dincolo de un margin sau padding, care sa "lase spatiu" intre controale pe site, mecanismul position: relative e extrem de flexibil, site-ul scaleaza foarte usor, fiindca elementele isi iau spatiul de care au nevoie. Sigur, voi fixa latimea paginii si a unora din controalele componente, dar, dincolo de asta, lungimea si pozitionarea se aloca de la sine, fara efort din partea mea. Flexibilitatea design-ului e un obiectiv general in software design in IT, nu doar pentru pagini web. Mai ales ca in multe cazuri continutul dinamic e prezent pe site-uri in proportie semnificativa.  :D

Cat despre referinte in carti, cartile HTML + CSS pe care le am la acest moment mai degraba sunt references pentru HTML & CSS, decat carti de "good practices". Dar, tin minte referintele din tutorialele video Total Training, foarte cautate pe Internet de altfel, realizate de experti in domeniu. Iti voi da referintele URL catre doi dintre acestia, ale caror tutoriale le-am urmarit, amandoi sustinand CSS relative positioning pentru HTML default layout, HTML tables pentru tabular data structures (si, daca e cazul (target browser inclusiv vechi), pentru default page layout).
Andy Olsen
Janine Warner

Niste tutoriale o idee cam "basic", dar care sustin aceleasi principii sunt realizate de Stefan Mischook.

Edited by fireblade80, 30 September 2008 - 01:01.


#18
Jumping Jack

Jumping Jack

    Member

  • Grup: Members
  • Posts: 622
  • Înscris: 12.09.2007

 fireblade80, on Sep 30 2008, 00:31, said:

Corect!  ^_^


Tables nu ies din discutie, erau solutia standard inainte de adoptarea pe scara larga a CSS, si inca si acum sunt o solutie buna de multe ori, in cazurile in care se genereaza incompatiblitati datorita browser-elor. Incompatiblitati prezente mai ales la position: absolute, nu relative. Si in ziua de astazi, majoritatea site-urilor sunt realizate pe o structura de tabele. :D


Ce poti rezolva cu position:absolute si nu poti cu position:relative, pentru a avea un flow firesc in document? Dar pentru situatiile, foarte frecvente de altfel, in care ai continut dinamic, ce faci cu position: absolute? Un site position: absolute nu scaleaza bine nici la mici modificari, pentru ca astea se propaga intre elementele din div-ul curent si apoi, prin spatiul ocupat, in toata pagina. Sau daca folosesti o combinatie position: relative cu position:absolute, de ce sa impui aceasta eterogenitate site-ului tau?

Dincolo de un margin sau padding, care sa "lase spatiu" intre controale pe site, mecanismul position: relative e extrem de flexibil, site-ul scaleaza foarte usor, fiindca elementele isi iau spatiul de care au nevoie. Sigur, voi fixa latimea paginii si a unora din controalele componente, dar, dincolo de asta, lungimea si pozitionarea se aloca de la sine, fara efort din partea mea. Flexibilitatea design-ului e un obiectiv general in software design in IT, nu doar pentru pagini web. Mai ales ca in multe cazuri continutul dinamic e prezent pe site-uri in proportie semnificativa.  :D

Cat despre referinte in carti, cartile HTML + CSS pe care le am la acest moment mai degraba sunt references pentru HTML & CSS, decat carti de "good practices". Dar, tin minte referintele din tutorialele video Total Training, foarte cautate pe Internet de altfel, realizate de experti in domeniu. Iti voi da referintele URL catre doi dintre acestia, ale caror tutoriale le-am urmarit, amandoi sustinand CSS relative positioning pentru HTML default layout, HTML tables pentru tabular data structures (si, daca e cazul (target browser inclusiv vechi), pentru default page layout).
Andy Olsen
Janine Warner

Niste tutoriale o idee cam "basic", dar care sustin aceleasi principii sunt realizate de Stefan Mischook.


Amice, fara supararea, dar esti pe linga subiect mult de tot. Bati cimpii di granda. Eu zic sa te ocupi in continuare de programare, unde poti fi bun (n-am de unde sa stiu) si sa lasi css-ul si html-ul pe seama noastra, a astora "mici"...
Cea mai clara dovada ca habar n-ai ce spui este ca faci comparatie intre position relative si position absolute, de parca astea doua ar fi alternative. Se pare ca tu consideri position relative ca fiind default pentru containere. Default este position:static, sa stii, nu relative. Iar float este cu totul si cu totul altceva.

Deci, scurta - si haotica - lectie de positioning:
Cum am mai spus, pozitionarea normala a unui container in flow-ul paginii este position:static. In momentul in care ii declari float, SAU position:relative / position:absolute / position:fixed, l-ai scos din flow-ul paginii, cu influenta asupra elementelor inconjuratoare, sau fara, in functie de cele de mai jos.

Relative este pozitionarea fata de locul normal pe care l-ar ocupa selectorul in cauza - relativ la el insusi, daca vrei. Respectiv, daca ii spui unei imagini sa fie position relative, si nu ii dai nici un offset (adica fara top, left, right, bottom), teoretic nu se intimpla absolut nimic cu el. Cel putin conform w3c. Ca in realitate position:relative este folosit uneori ca un medicament in tratarea bolilor de float ale lui ie6, este alta poveste.  Insa, daca respectivului element (img, sau altceva) ii spui {top:-5px;left:-5px;}, acesta se va muta cu numarul de pixeli respectiv la stinga si sus, lasind in urma lui un loc liber, care nu poate fi ocupat de nici un alt element. Pe scurt, il scoti din flow-ul firesc al paginii, insa nu permiti altuia sa ii ia locul.

Pe de alta parte, daca un element are position:absolute, acesta se va raporta la un element parinte care este la rindul sau pozitionat, absolute sau relative. De regula, cel pozitionat relative este chiar parintele celui absolut - daca se specifica asta. Daca nu e cazul, containerul pozitionat absolut urca pe arborele genealogic pina la body, sau pina gaseste un container relative la care sa se raporteze. Absolute, spre deosebire de relative, daca nu ii specifici offset-ul, position absolute ia ca default 0 0, si toate containerele pozitionate absolut dar fara offset, se vor calari unul pe altul.
In afara de asta, in momentul in care un container este pozitionat absolut, locul lui este automat ocupat de elementele inconjuratoare, sper deosebire de relative, unde dupa cum am aratat, acest lucru nu se intimpla.
Cam atata despre positioning. Sper ca am fost suficient de clar. In caz contrar stau la dispozitie cu lamuriri suplimentare. Sau, si mai bine, du-te aici si ti se va lumina calea: http://www.vision.to...r-web-pages.php

La faza cu tables, ce sa zic... nu prea am ce sa zic! Daca tu spui in 2008 ca solutia cu tabele este viabila pentru layout, atunci eu tac. Sau mai bine nu tac, si te intreb: Tu esti conectat la internet? sau intri odata la 7 ani? Nici macar nu ma obosesc sa mai pledez contra layouturilor cu tabele, consider ca astea sint de domeniul paleontologiei in web design. Tabelele, da sint bune, pentru prezentare de tabele, date tabelare, adica. Nu confundam asta cu layoutul. daca ai un text foloseti paragrafe, adica <p>. daca i liste, folosesti <ul> sau <ol>, sau <dl>. Iar daca ai un tabel, folosesti <table>. Si la cam atat se limiteaza utilizarea de tabele.

Iar cei trei asa zisi guru de care ai amintit, nu imi spun absolut nimic. Cel putin in domeniul asta. Vad ca de altfel presteaza in alte domenii. Ce are ASP.NET si Java cu css si html??

Daca vrei referinte pentru css si html, ia de-aici:

http://www.w3.org/
http://www.alistapart.com/
http://www.zeldman.com/
http://tantek.com/
http://meyerweb.com/
http://www.andybudd.com
http://simplebits.com/
http://dean.edwards.name/
http://www.positioniseverything.net/

Si nu in ultimul rind,
http://www.csszengarden.com/

Aici o sa gasesti eventual si mult hulitele layouturi cu absolute positioning.

O zi buna!
Robert Rusanu,
designer de pagini de web

Edited by Jumping Jack, 30 September 2008 - 11:49.


Anunturi

Neurochirurgie minim invazivă Neurochirurgie minim invazivă

"Primum non nocere" este ideea ce a deschis drumul medicinei spre minim invaziv.

Avansul tehnologic extraordinar din ultimele decenii a permis dezvoltarea tuturor domeniilor medicinei. Microscopul operator, neuronavigația, tehnicile anestezice avansate permit intervenții chirurgicale tot mai precise, tot mai sigure. Neurochirurgia minim invazivă, sau prin "gaura cheii", oferă pacienților posibilitatea de a se opera cu riscuri minime, fie ele neurologice, infecțioase, medicale sau estetice.

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