Problema cu modul de afisare a elementelor a 2 UL-uri

#1
detective

Posted 27 November 2008 - 14:11

Active Member

Grup: Members
Posts: 1,097
Înscris: 24.03.2007

Am o problema cu afisarea elementelor a 2 UL-uri care sunt dispuse una langa alta pe orizontala cu float, deci 2 coloane mai simplu zis.
Problema este la elementele LI-urilor care nu se "auto-rup" daca lungimea lor e prea mare, ci isi pastreaza lungimea indiferent de cate caractere se afla pe o linie si asta imi "impinge UL-ul din dreapta sub cel din stanga.

Ciudat este ca desi IE-ul ar fi primul la batai de cap la crearea unui website, doar el afiseaza corect, FF, Opera, Safari si Chrome afiseaza incorect.

Atasez 2 poze cu exemplul si codul mai jos.

( scuzati textul pus la abureala in elementele LI )

FF, Chrome, Opera, si Safari

Image.jpg 339.03K 13 downloads

IE

Image1.jpg 317K 10 downloads

Codul CSS

#leftColumn #lista {
list-style-type: circle;
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 12px;
font-weight:bold;
color:#316AC5;
text-decoration:none;
padding-left:15px;
margin:0px;
}
#leftColumn #lista a{
list-style-type: circle;
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 12px;
font-weight:bold;
color:#316AC5;
text-decoration:none;
padding-left:15px;
margin:0px;
}
#leftColumn #lista a:hover{
font-size: 18px;
text-decoration:none;
}#rightColumn #lista {
list-style-type: circle;
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 12px;
font-weight:bold;
color:#316AC5;
text-decoration:none;
padding-left:15px;
margin:0px;
}
#rightColumn #lista a{
list-style-type: circle;
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 12px;
font-weight:bold;
color:#316AC5;
text-decoration:none;
padding-left:15px;
margin:0px;
}
#rightColumn #lista a:hover{
font-size: 18px;
text-decoration:none;
}
#leftColumn
{
	position: relative;
	float: left;
}

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

#clearFloat
{
	clear: both;
}
</style>

Codul HTML

<div id="leftColumn">

		  <ul id="lista">
		  <li>ELEMENT</li>
		</ul>
		
</div>
<div id="rightColumn">

		  <ul id="lista">
		  <li>ELEMENT</li>
		</ul>
		 
</div>
<div id="clearFloat">
</div>

Aceste 2 UL-uri dupa cum se vede in screeshot-uri se afla intr-o celula a unui tabel, cu o latime fixa de 675px.
Deci eu doresc sa obtin acelasi efect de rupere randuri in toate browserele la fel cum e in IE.

Edited by detective, 27 November 2008 - 14:13.

Back to top

#2
Alta_

Posted 27 November 2008 - 21:25

Active Member

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

Daca o sa pui style="border: solid 1px;" la div-uri (leftColumn, rightColumn) o sa vezi ca div-ul din stanga se acomodeaza dupa lungimea <li>-urilor pe care le contine, iar div-ul din dreapta, neavand loc suficient, o sa alunece dedesubt. Daca cele doua coloane impart acelasi container, cred ca ar trebui sa stabilesti dinainte cat aloci pentru coloana din stanga si cat iti ramane pentru coloana din dreapta.
De exemplu:

<div id="leftColumn" style="border: solid 1px; width: 45%">
<ul>
<li>...</li>
</ul>
</div>

<div id="rightColumn" style="border: solid 1px; width: 45%">
<ul>
<li>...</li>
</ul>
</div>

Back to top

#3
detective

Posted 27 November 2008 - 22:35

Active Member

Grup: Members
Posts: 1,097
Înscris: 24.03.2007

Alta_, on Nov 27 2008, 21:25, said:

Daca o sa pui style="border: solid 1px;" la div-uri (leftColumn, rightColumn) o sa vezi ca div-ul din stanga se acomodeaza dupa lungimea <li>-urilor pe care le contine, iar div-ul din dreapta, neavand loc suficient, o sa alunece dedesubt. Daca cele doua coloane impart acelasi container, cred ca ar trebui sa stabilesti dinainte cat aloci pentru coloana din stanga si cat iti ramane pentru coloana din dreapta.
De exemplu:

<div id="leftColumn" style="border: solid 1px; width: 45%">
<ul>
<li>...</li>
</ul>
</div>

<div id="rightColumn" style="border: solid 1px; width: 45%">
<ul>
<li>...</li>
</ul>
</div>

Merge perfect, ms mult, dau o bere

Back to top

#4
k3liutZu

Posted 15 December 2008 - 00:14

New Member

Grup: Members
Posts: 8
Înscris: 28.06.2004

detective, on Nov 27 2008, 22:35, said:

Merge perfect, ms mult, dau o bere

Si vezi ca id-ul trebuie sa fie unic intr-un document. Nu poti avea de 2 ori id="lista"
(practic poti, dar o sa iti crape ceva mai devreme sau mai tarziu)

Back to top

Anunturi

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

Problema cu modul de afisare a elementelor a 2 UL-uri

#1 detective Posted 27 November 2008 - 14:11

#2 Alta_ Posted 27 November 2008 - 21:25

#3 detective Posted 27 November 2008 - 22:35

#4 k3liutZu Posted 15 December 2008 - 00:14

Anunturi

▶ 0 user(s) are reading this topic

Sign In

#1
detective

Posted 27 November 2008 - 14:11

#2
Alta_

Posted 27 November 2008 - 21:25

#3
detective

Posted 27 November 2008 - 22:35

#4
k3liutZu

Posted 15 December 2008 - 00:14