Autor | Zpráva | ||
---|---|---|---|
Mesiah Profil |
#1 · Zasláno: 5. 8. 2009, 23:02:18
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 |
#2 · Zasláno: 6. 8. 2009, 00:01:34 · Upravil/a: johnl
Deto třeba tak že každý ul obalíš ještě
<div id="název"></div> #pravy {float:right;} #levy {float:left;} |
||
Mesiah Profil |
#3 · Zasláno: 6. 8. 2009, 00:25:54
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 |
#4 · Zasláno: 6. 8. 2009, 09:17:18 · Upravil/a: Jimmy Hayek
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;} overflow: hidden; |
||
Mesiah Profil |
#5 · Zasláno: 6. 8. 2009, 11:25:00
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 |
#6 · Zasláno: 6. 8. 2009, 11:29:04
Mesiah
Bez konkrétní ukázky kódu mě napadá jediné - máš to nějaké rozbité. |
||
Mesiah Profil |
#7 · Zasláno: 6. 8. 2009, 12:53:07
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 |
#8 · Zasláno: 6. 8. 2009, 12:57:18 · Upravil/a: Jimmy Hayek
Mesiah
EDIT 2: Tak tedy obal seznamy ještě jedním divem, kterému nastav to overflow: hidden; |
||
Plaváček Profil |
#9 · Zasláno: 6. 8. 2009, 13:01:45 · Upravil/a: Plaváček
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 |
#10 · Zasláno: 6. 8. 2009, 13:45:43
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 |
#11 · Zasláno: 6. 8. 2009, 15:15:41
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 |
#12 · Zasláno: 6. 8. 2009, 15:34:47
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! :)) |
||
Časová prodleva: 15 let
|
0