Autor Zpráva
Mesiah
Profil
zdravicko,
prosim Vas, jak bych mohl udelat zarovnání 2 a více sloupců (o ~5 polozkach) vedle sebe?
neco jako:
<ul>
 <li> A </li>
 <li> A </li>
 <li> A </li>
 <li> A </li>
 <li> A </li>
</ul>
<ul>
  <li> B </li>
  <li> B </li>
</ul>

tak aby se nezobrazovali pod sebou, ale vedle sebe?
johnl
Profil
Deto třeba tak že každý ul obalíš ještě
<div id="název"></div>
a každému divu dátš v css jiný float, přeba
#pravy {float:right;} #levy {float:left;}
Mesiah
Profil
neco podobnyho me napadlo...
jenže, když dám elementům ul vlastnost float: left, tak to sice zpusobi serazeni seznamu vedele sebe, ale soucasne to zpusobí vyriznutí seznamů z původného divu, který má (původní div) vlastnost position: relative...
takze jiny napad? :)
Jimmy Hayek
Profil
johnl
Deto třeba tak že každý ul obalíš ještě <div id="název"></div>...
Mohu se zeptat, proč je třeba obalovat seznamy divem navíc?

Mesiah
Seznamům nastav:
ul {float: left;}
a obalujícímu prvku nastav
overflow: hidden;
.
Mesiah
Profil
Jimmy Hayek
tohle funguje jak bych chtel, ale stejne to použít nemužu...
tady je obrazek původního problému (s využtím overflow na obalujícím prvku):


a tady po aplikovaní řešení od Jimmy Hayka:


Jak vidite, jedno reseni vede k chybe druheho... takze napada nekoho neco jineho? :)
Plaváček
Profil
Mesiah

Bez konkrétní ukázky kódu mě napadá jediné - máš to nějaké rozbité.
Mesiah
Profil
Plaváček
jn, nic co by nezpravilo par sroubku a uderu kaldiva, co? :)

takze tady je kod zalozky:
<div class="zalozka"> 
<div class="razitko">
 <p> Kategorie </p>
</div> 

<ul class="svisly"> 
 <li><a href="index.php?p=produkty&k=2">Android</a></li>
 <li><a href="index.php?p=produkty&k=3">OS X</a></li>
 <li><a href="index.php?p=produkty&k=7">RIM OS</a></li>
 <li><a href="index.php?p=produkty&k=5">Symbian</a></li>
 <li><a href="index.php?p=produkty&k=4">Web OS</a></li>
</ul> 
<ul class="svisly"> 
 <li><a href="index.php?p=produkty&k=1">Windows Mobile</a></li>
</ul> 
</div> 


a tydy je stylovani:
.zalozka
        {
            border: 1px solid #838383;
            padding: 5px;
            width: 100%;
            position: relative;
            background: url('grafika/bglittlegray.png') repeat-x;
            padding-top: 10px;
            padding-bottom: 10px;
            margin-bottom: 25px;
            overflow: hidden;
        }
        .zalozka .razitko
        {
            background: url('grafika/graybutton.png') no-repeat;
            width: 100px;
            height: 25px;
            font-size: .8em;
            text-align: center;
            position: absolute;
            top: -15px;
            right: 15px;
            cursor: Pointer;
        }
        .zalozka .svisly
        {
            float: left;
            border: 1px solid black;
            /* position: relative; */
            list-style: none;
            padding: 0px;
            width: 150px;
        }
        .zalozka .svisly li
        {
            list-style: none;
            margin: 0px;
        }
Jimmy Hayek
Profil
Mesiah
EDIT 2:
Tak tedy obal seznamy ještě jedním divem, kterému nastav to
overflow: hidden;
a zároveň toto nastavení odeber třídě .zalozka
Plaváček
Profil
Mesiah

.zalozka
        {
            border: 1px solid #838383;
            padding: 5px;
            width: 100%;
            position: relative;
            background: url('grafika/bglittlegray.png') repeat-x;
            padding-top: 10px;
            padding-bottom: 10px;
            margin-bottom: 25px;
        }
.zalozka .razitko
        {
            background: url('grafika/graybutton.png') no-repeat;
            width: 100px;
            height: 25px;
            font-size: .8em;
            text-align: center;
            position: absolute;
            top: -15px;
            right: 15px;
            cursor: pointer;
        }
        .zalozka .svisly
        {
            float: left;
            border: 1px solid black;
            /* position: relative; */
            list-style: none;
            padding: 0px;
            width: 150px;
        }
        .zalozka .svisly li
        {
            list-style: none;
            margin: 0px;
        }
br {
          clear:both
}


<div class="zalozka">
  <div class="razitko">
    <p> Kategorie </p>
  </div>
  <ul class="svisly">
    <li><a href="index.php?p=produkty&k=2">Android</a></li>
    <li><a href="index.php?p=produkty&k=3">OS X</a></li>
    <li><a href="index.php?p=produkty&k=7">RIM OS</a></li>
    <li><a href="index.php?p=produkty&k=5">Symbian</a></li>
    <li><a href="index.php?p=produkty&k=4">Web OS</a></li>
  </ul>
  <ul class="svisly">
    <li><a href="index.php?p=produkty&k=1">Windows Mobile</a></li>
  </ul>
  <br>
</div>


P.S. Nemůžeš použít trik pro ukončení obtékání s overflow:hidden u nadřazeného prvku (protože jiný blok pozicuješ absolutně mimo jeho obsah), takže musíš floatované elementy ukončit jinak. Třeba pomocí BR.
Mesiah
Profil
Plaváček
trik s cisticem jsem zkuosel... no teda spis zkusil, jednou...
ale tedka to resi oba problemy, ale zase se objevil dalsi (ajaj), zalozka je cela nejaka neprirozene prodlouzene a dost dobre nechapu, proc..?
Plaváček
Profil
Mesiah

Nechápu ani já a dám ti dobrou radu. Pokud chceš pomoci, nedávej sem fragmenty kódu, ale prostě udělej živou ukázku s kompletním kódem. Protože chyba může být kdekoliv kolem. Můžu si jenom tipnout - zkus udělat div .zalozka plovoucí.
Mesiah
Profil
Plaváček
děkuji Vám za pomoc a za Váš čas, nakonec jsem vyzkoušel řešení, které navrhoval Jimmy Hayek a to přidat jeden div s overflow: hidden, to nakonec zabralo, takže teď to běží jak má, teda aspoň co se týká ff... :)
Díky Jimmy! Ofc, děkuji i Vám Plaváčku! :))

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: