Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Vand Proiect AI cu ChatGPT 4(Gene...

E-Mail in serie prin Excel si Out...

Modul alimentare rulou/jaluzea ex...

Recuperare fișiere dupa form...
 Aplicatii stress test RAM

Asigurare auto hibrid

Asus B550M - PC-ul nu porneste di...

Tzanca Uraganu - Inconjurat de Fe...
 explicatie montaj breadboard

3 Doors Down - Kryptonite

Semnalizati cand virati pe un dru...

Succesiune - mostenire apartament...
 Donez Siofor de 1000mg ( diabet t...

Izolatie intre parter si etaj

Hranirea pasarilor din orase -pro...

[unde] goarna tramvai
 

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

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

#1
detective

detective

    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

Attached File  Image.jpg   339.03K   13 downloads

IE

Attached File  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.


#2
Alta_

Alta_

    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>


#3
detective

detective

    Active Member

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

View PostAlta_, 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 :D

#4
k3liutZu

k3liutZu

    New Member

  • Grup: Members
  • Posts: 8
  • Înscris: 28.06.2004

View Postdetective, on Nov 27 2008, 22:35, said:

Merge perfect, ms mult, dau o bere :D

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)

Anunturi

Chirurgia spinală minim invazivă Chirurgia spinală minim invazivă

Chirurgia spinală minim invazivă oferă pacienților oportunitatea unui tratament eficient, permițându-le o recuperare ultra rapidă și nu în ultimul rând minimizând leziunile induse chirurgical.

Echipa noastră utilizează un spectru larg de tehnici minim invazive, din care enumerăm câteva: endoscopia cu variantele ei (transnazală, transtoracică, transmusculară, etc), microscopul operator, abordurile trans tubulare și nu în ultimul rând infiltrațiile la toate nivelurile coloanei vertebrale.

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