Autor Zpráva
Lorinka
Profil *
Ahoj, ještě jednou Vás prosím o pomoc. Díky tomuto foru jsem pomocí float umístil dva seznamy vedle sebe, ale při zobrazení jinde než v Ie (opera, firefox mozila) se pravý seznam zobrazí o řádek níž než levý a rozhodí se i následující text pod seznamy. Tam si pomohu pomocí clear:both.
v ext css:
.seznam_vpravo {
width: 65%;
float: right;
text-align: left;
list-style-position: inside;
}
<p>text</p>
<ul class="seznam_vpravo">
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
<p>text</p>

Když první seznam obalím do div a tam bude i class tak to zobrazí dobře Ie i Opera, ale mozila ne. Když to obalím do div a class nechám v ul tak je to lepší, ale potom opera, firefox mozila zobrazují nad seznamem dva prázdné řádky místo jednoho a pod ním každý jinak 1 nebo dva prázdné řádky.
Jak to vyřeším, aby to bylo v každém prohlížeči stejné?
v6ak
Profil
.seznam {

width: 40%px;
float: left;
text-align: left;
list-style-position: inside;
}

...
<p>text</p>
<ul class="seznam">
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
<ul class="seznam">
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
<p>text</p>
Toto mi fungovalo, jen nesmí být výška přes 1/2.
Pozn:Nemám po ruce Operu.
Lorinka
Profil *
Díky ;-) Taky jsem to dnes řešil a podstatu jsem pochopil až když jsem si vše orámoval rámečkem. Zásadní problém byl jak jinak než primární nastavení margin a padding.
Nakonec jsem to vytvořil takto:

<style type="text/css">
ul {
margin: 0;
padding: 0 0 0 2em;
}
.seznam_vpravo {
width: 65%;
padding: 0;
float: right;
text-align: left;
list-style-position: inside;
}
</style>

<p>text</p>
<ul class="seznam_vpravo">
<li>text 2</li>
<li>text 2</li>
<li>text 2</li>
</ul>
<ul style="width: 12em">
<li>text 1</li>
<li>text 1</li>
<li>text 1</li>
</ul>
<p>text</p>

takto se zdá, že je to ve všech prohlížečích ok a je v pořádku i odsazení nad a pod seznamy.
teď jsem ještě zkoušel tvojí verzi a šlo by to pro mou potřebu takto (jen jsem přidal margin, padding a clear: both):

<style type="text/css">
.seznam {
margin: 0;
padding: 0;
width: 40%;
float: left;
text-align: left;
list-style-position: inside;
}
</style>

<p>text</p>
<ul class="seznam">
<li>text 1</li>
<li>text 1</li>
<li>text 1</li>
</ul>
<ul class="seznam">
<li>text 2</li>
<li>text 2</li>
<li>text 2</li>
</ul>
<p style="clear: both">text</p>

ale problém je ve spodním odsazení který je u Mozilly jinak než u ostatních. Vyřešit by se to dalo. Tedy díky za ochotu :-)
Toto téma je uzamčeno. Odpověď nelze zaslat.

0