Problema DIV

Incerc sa fac o lista cu produse, dar nu pot sa o fac sa arate cum vreau eu. Nici macar nu inteleg de ce nu merge. Div-ul are height 70px si totusi p-ul trece prin el. De ce ?
Daca puneti exemplul intr-o pagina html, o sa vedeti

<div>
<p>Lapte</p>
<p>branza</p>
<p>oua</p>

<p>kent</p>
<p>malboro</p>
<p>winston</p>
<p>dunhil</p>

<p>bere</p>
<p>vin</p>
<p>tuica</p>
</div>

<style>
div {width:900px;
height:70px;
border:solid 2px black;:}
p {line-height:0px; padding-left:10px;}
</style>

Nu am nevoie de o varianta ca tabel sau altceva, vreau sa rezolv lista asta. Div-ul are height 70px si textul trece prin el....

Edited by Andrei-1989, 18 June 2011 - 19:21.

pai scoate line-height: 0, altfel toate <p>' urile o sa-tiapara pe aceeasi linie.
si 70px nu e destul pt div. la cat text ai acolo inaltimea trebuie sa fie mai mare. nu stiu de ce n-o lasi automata...

Nemesis-, on 18th June 2011, 20:54, said:

N-ai inteles. Eu vreau dv-ul sa fie cu height 70px si textul sa se incadreze in astia 70px. Normal ca nu e deajuns, dar nu ar trebui ca ce e cu p sa treaca pe un rand nou ? Aici e problema mea. line-height-u n-are nici o treaba

Daca tu vrei sa ai 3 coloane, poti adauga 3 div-uri in div-ul tau (un div pentru o categorie).

atunci pune float:left la <p>-uri si da-le o lungime fixa de ex. 200px

si mai adauga in css:

.clear:after{
  content:".";
  display:block;
  clear:both;
  visibility:hidden;
  line-height:0;
  height:0;
}

si clasa .clear o aplici div-ului ce contine paragrafele

Nemesis-, on 18th June 2011, 21:41, said:

Nu merge ce vreau eu, si hai sa-ti spun de ce....

De ex am trei liste cu fructe, bautura si tigari, iar in fiecare dintre ele am cate trei cuvinte. Adica asa :

<p>fructe 1</p>
<p>fructe 2</p>
<p>fructe 3</p>
<p>bautura 1</p>
<p>bautura 2</p>
<p>bautura 3</p>
<p>tigari 1</p>
<p>tigari 2</p>
<p>tigari 3</p>

si imaginea trebuie sa arate asa :
 lista.jpg   18.3K   25 downloads

Eu i-am gasit deja o solutie cu display:inline-block si width:150px sa zicem, dar mi le aliniaza in continuare. Eu vreau una sub alta :|

Edited by Andrei-1989, 18 June 2011 - 20:57.

pai si nu poti schimba codul html sau ce?
cum a zis deea: http://jsfiddle.net/rAnQx/1/

Edited by Nemesis-, 18 June 2011 - 21:10.

Ar fi fost super daca as fi putut, dar nu pot... orice as face :(

De ce nu poti? Daca vrei sa-ti iasa ca in poza atasata, ti-a aratat Nemesis mai sus.

Care este problema pana la urma? Nu stii cum sa faci? Nu-ti iese?

deeaa1989, on 19th June 2011, 01:12, said:

Sunt web designer si pot sa zic ca am cunostinte 99% html si css, dar aici e mai complicat.

Vezi subiectele noi de sus de pe forum ? Gandestete ca totul ar veni dintr-un singur link sa zicem. Nu stiu daca intelegi, dar eu am ceva de genu :

<div>
<p><?php $variabila ?></p>
</div>

Si variabila este setata din panoul administratorului sa apara de 9 ori. Daca gandestji putin problema, o sa-ti dai seama ca nu prea am cum sa fac asta...

Astept in continuare un sfat din css !

Daca tot nu stie nimeni, sunt nevoit sa fac 3 div-uri cu aceeasi variabila. Asta inseamna sa-mi apara de 3 ori toate categoriile. Le pun clasa la fiecare div si le dau display hidden cu position absolute, ca sa pot ascunde div-urile astfel icat sa se vada cate trei din fiecare. Asta inseamna o prostie, dar alta varianta nu am :|

1) "dar nu ar trebui ca ce e cu p sa treaca pe un rand nou" - Deloc, pentru ca <p> e block level element, nu inline.
2) N-am habar in ce browser(e) testezi tu, dar e clar ca pe IE8 nu, ca ai vedea ceva total diferit. line-height: 0 nu face decat sa ascunda textul.
3) Nu ma luati cu IE hacks si ca ce browser prost e ca vorbiti tampenii. Daca scrii cod XHTML valid, ai doctype-ul corespunzator si folosesti un stylesheet css reset standard (gen cel de la Yahoo UI) o sa arate exact la fel pe orice browser. Evident apoi problema o sa se rezume si la cat css cunosti.
4) Un designer decent testeaza pe IE7,8,9, FF3.5,4, Chrome, Safari si Opera ultimele versiuni. Orice site trebuie sa fie functional si pe IE6, asa ca se verifica si ala, desi defectele vizuale minore nu sunt reparate. Daca clientul are pretentii probabil o sa trebuiasca sa testezi si pe Mac, desi daca respecti cateva reguli de bun simt nu o sa fie nicio diferenta. Nu zic nimic de mobile ca si acolo se complica lucrurile.
Ai auzit de IE compatibility mode? Meta-ul X-UA-Compatible ajuta.

5) Intotdeauna, dar intotdeauna se seteaza un line-height corespunzator pe elementele in care ai text.
6) Dupa orice serie de elemente float-ate se pune un clear.
7) Instaleaza firebug pe Firefox si vezi si tu cum arata box model-ul tau ca sa-ti dai seama ce greseli flagrante faci. Defapt nici nu inteleg cum puteti unii sa lucrati fara firebug. Productivitate 0.
8) Ce vrei tu e imposibil, fara CSS3 (pentru care nu o sa avem suport bun in majoritatea browserelor decat intr-un an-doi) sau Javascript (care-ar trebui sa fie ultima solutie, daca nimic altceva nu se poate face).
9) Evita cu orice pret sa folosesti display:inline-block (read http://foohack.com/2...block-styling/)

Solutia ta e sa modifici partea care-ti genereaza HTML-ul.
Daca tu esti si developer atunci mi se pare foarte foarte dubios sa fi deschis topic-ul asta.
Daca nu atunci va trebui sa-l faci sa inteleaga ca nu exista coloane in HTML-ul actual care sa nu vina cum ti-a spus si deeaa1989.

Edit:
Nu stiu cine se ocupa de backend, dar clar nu se prea pricepe la programare. De ce-ar fi complicat sa separi link-urile in coloane intr-un banal for?

Edited by sergiu_spooky, 19 June 2011 - 10:10.

Andrei-1989, on 18th June 2011, 21:55, said:

E si normal sa ti le alinieze in linie..nu e display:inline?

Nu inteleg dc nu folosesti declaratie de tip lista , <li> si  folosesti declaratie de tip paragraf , care iti genereaza automat spatiu intre randuri.

Parerea mea si nu te cred ca ai cunostinte 99% html si css si nu stiu cine te crede de aici.

Faci

<ul class="prima">
<li>

<ul><li>cuv 1</li><li>cuv 2</li><li>cuv 3</li></ul>

</li>

<li>

<ul><li>cuv 1</li><li>cuv 2</li><li>cuv 3</li></ul>

</li>
<li>

<ul><li>cuv 1</li><li>cuv 2</li><li>cuv 3</li></ul>

</li>

</ul>

si la lista cu class="prima" ii dai display:inline si asa ai rezolvat problema.

Edited by thetycy, 23 June 2011 - 08:37.

Dacă ai deci, 3 linii cu 3 coloane, eu le-aș pune într-un tabel și gata.

Voi nu vreti sa intelegeti ca lista si produsele din lista sunt generate dintr-o singura variabila !?! Singurul raspuns pe care il vreau, este daca voi stiti vreo varianta sa fac o lista in felul urmator. Daca ar exista vreo posibilitate, ar fi doar din css, nu si din html....

Poftim :

 lista.jpg   274.43K   13 downloads

Singurul lucru care pot schimba din codul ala, este tag-ul p. Adica, il pot inlocui cu span, care are automat display:inline, sau altele.

Daca va uitati si probati codul, o varianta este display:inline-block, doar ca mi le afiseaza din stanga in dreapta, si nu de sus in jos (iar atunci cand se termina marimea [height-ul] div-ului, sa reinceapa pe o coloana noua) asa cum vreau eu.

Sper ca am fost destul de clar. Daca credeti ca exista vreo varianta din css, spunetimi-o si mie, ca eu am incercat o gramada....

Edited by Andrei-1989, 23 June 2011 - 23:12.

Doar din CSS nu ai cum sa faci asa ceva :)
Si oricum ai da-o este ilogic ce vrei.
Singura optiune pentru tine este un mic scriptulet javascript care sa iti faca wrapping la continutul ala in 3 div-uri cu float left.

DarkAngelBv, on 24th June 2011, 00:17, said:

E ilogic pentru tine, daca ai vedea ce am aici n-ai mai zice.
E bine ca m-am lamurit ca nu exista varianta din css. Asta e.

Multumesc pentru raspunsuri.

E ilogic pentru oricine stie cu ce se mananca un box model :)
Fara un wrapping al elementelor niciodata nu o sa ti se alinieze cum vrei tu.

DarkAngelBv, on 24th June 2011, 01:34, said:

Ilogic nu e, pentru ca asta imi trebuie mie. De fapt tu vrei sa zici ca e inutil sa gandesc ca poate merge din css. Am inteles. De asta am apelat la forum, am zis ca poate m-au inconjurat cunostintele :P
Eu am zis ca poate merge din css, pentru ca o solutie apropiata este facand style p-ului de display:inline-block si width 100px sa zicem. Dar tot nu ma ajuta pentru ca nu-mi face ordinea care vreau eu.

Imi dai si mie un model cum as putea face sa-mi iasa ce vreau eu ? M-am uitat pe jquery si nu prea vad sa fie un exemplu pentru problema mea...

Edited by Andrei-1989, 24 June 2011 - 01:01.