| Autor | Zpráva | ||
|---|---|---|---|
| Anonymní Profil * |
#1 · Zasláno: 2. 9. 2005, 10:26:06
Dobrý den,
mám tento html soubor: <html> <link rel="stylesheet" type="text/css" href="styl.css"> <body> <div id="obsah"> nějaký text <br>nějaký text <br>nějaký text <br>nějaký text <br>nějaký text <br>nějaký text <br>nějaký text <br>nějaký text <br>nějaký text <br>nějaký text <br> </div> <div id="menu"> menu </div> </body> </html> a tento styl: #menu { position: fixed; left: 10px; top: 10px; width: 200px; } #obsah { position: absolute; left: 215px; top: 10px; } Potřebuji nějak zajistit, aby menu bylo ve výstupu zobrazeno nahoře vlevo, aby bylo obtékáno a zároveň aby v html bylo definováno až na konci. Experimenty s pozicováním jsem dosáhl jen toho, že se mi podařilo zprovoznit obtékání menu, ale muselo být v html definováno dříve než text a nebo stavu, kdy je sice definováno později, ve výstupu je jako první, ale není obtékáno. Můžete prosím poradit? |
||
| krteczek Profil |
#2 · Zasláno: 2. 9. 2005, 11:26:32 · Upravil/a: krteczek
čauky koukni se na float:-)
celé to zabal do: <div id="stranka"> potom dej css: #stranka{width:770px;} #menu{float:left;width:200px} #obsah{float:right;width:550px} pridej tam i div patka #patka{clear:both} <html> <link rel="stylesheet" type="text/css" href="styl.css"> <body> <div id="stranka"> <div id="obsah"> nějaký text <br>nějaký text <br>nějaký text <br>nějaký text <br>nějaký text <br>nějaký text <br>nějaký text <br>nějaký text <br>nějaký text <br>nějaký text <br> </div> <div id="menu"> menu </div> <div id="patka"><p>vytvořil ©....</p> </div> </div> </body> </html> a na position absolte nemusíš ani myslet :-) krteczek |
||
| peta Profil * |
#3 · Zasláno: 2. 9. 2005, 11:28:01
obtekani se dela pomoci float
.obsah {_display:inline-block} p {clear:right} p img {float:right} <div class="obsah"> <p> <img> dddddddd </p> <p> eeeeeee <img> </p> <p></p> </div> Pozicovani, to je velmi zajimave, ale zalezi na to, co kde pozicujes. Treba to menu se da ze spodu, ale musis zajistit, aby v miste, kde ma byt, bylo neco obtekano. A ted je otazka, zda ma byt obtekano po celem obvodu (float) nebo staci pouze z nejake strany (margin, padding) www.jakpsatweb.cz - CSS - .obsah {padding-left:6em} .menu {position:absolute;top:6px;width:5em} <div class="obsah"> ddddddddd </div> <div class="menu"> <a href="#">ddd</a> </div> Jenzeeee, u position musis jeste zarucit to, aby se dalo dostat do menu pri uzsi sirce stranky a take to, kdyz je tex na vysku mensi nez vyska menu, aby se zobrazil scroll na vysku. Zkratka moreee problemu. Nechces radeji pouzit nejaky 3sloupcovy layout, odkazy na www.volny.cz/peter.mlich/www.htm - ze spodu asi 100 radku nebo pozmenit floatovany vzhled na //peter-mlich.wz.cz/x/jvl5a/ |
||
| krteczek Profil |
#4 · Zasláno: 2. 9. 2005, 11:32:36
no jako myslim že moře problému je právě ty absolutně pozicované layouty, ten floatnuty je bez problému:-)
je to jednoduche a žádné čáry:-) navíc i seo frendly:-) |
||
| peta Profil * |
#5 · Zasláno: 2. 9. 2005, 12:31:33
krteczek
Pozicovane se daji taky udelat dobre. Jen si s tim treba pohrat. Floatovane jdou udelat IE-nefriendly, viz tve opomenuti display:inline-block. |
||
| habendorf Profil |
#6 · Zasláno: 2. 9. 2005, 12:35:34 · Upravil/a: habendorf
Floatovane jdou udelat IE-nefriendly, viz tve opomenuti display:inline-block.
Ale houby, display:inline-block; je tvoje mánie, se kterou tady neustále všechny strašíš. Vůbec to není potřeba. Sorry, jednou už jsem ti to říct musel. |
||
| radekt Profil |
#7 · Zasláno: 2. 9. 2005, 15:33:41
Díky moc všem, o víkendu se na to vrhnu.
|
||
| krteczek Profil |
#8 · Zasláno: 2. 9. 2005, 16:35:16
habendorf: díky :-) ani nevím že nějaká taková inline block existuje... pomocí floatu dělám všechny sve desingy a nemám problém...:-) jde jen o to správně pochopit jak to funguje, který prvek má jakou funkci a není žáden problém... stejne to nakonec dopadá tak že má každý tak dva layouty jeden dvoj a druhy třísloupák a jen v případě potřeby změní desing(obrázky barvy...
krteczek |
||
| habendorf Profil |
#9 · Zasláno: 2. 9. 2005, 16:49:59
krteczek: přesně. Nedávno jsem dělal gumový 4-sloupcový, celý je to jen na floatech a problém s tím žádný není.
|
||
| krteczek Profil |
#10 · Zasláno: 2. 9. 2005, 19:39:58
habendorf: OT: jako dvoj a třísloupcový zvládám (třeba pomocí vkládání dalších dvou sloupcu... takže ten čtyřsloupák by nebyl asi problém, ale nece se mi to dělat jen kuli pokusum, mohl bys někde ukázat jak si to řešil?
tu gumovost si myslel tak že rozměry sou v em??? nebo procenta? díky krteczek |
||
| habendorf Profil |
#11 · Zasláno: 2. 9. 2005, 21:11:56
tu gumovost si myslel tak že rozměry sou v em??? nebo procenta?
Krajní dva sloupce mají pevnou šířku, vnitřní dva ji mění podle okna. Žádné rozměry nemají, jsou právě zcela volně plovoucí. A celé se to odehrává v rozmezí cca 770 - 1024, takže min- a max-width plus expressions pro IE. Jinak není problém udělat třeba 50 sloupců, pořád jen dělíš a dělíš. Já to dělal pro Plaváčka, šlo tady o ten návrh: http://klient.plavacek.net/prima-kava.jpg Vzhledem k tomu, že to chtěl prodat, viz http://weblog.plavacek.net/2005-05.html - "graf. návrh za hubičku", nevím jestli sem bez jeho svolení můžu dát ostrý kód. |
||
| krteczek Profil |
#12 · Zasláno: 3. 9. 2005, 01:55:32
habendorf: pěkné!!!!!!
krteczek |
||
| radekt Profil |
#13 · Zasláno: 5. 9. 2005, 09:15:14 · Upravil/a: radekt
Tak to nefunguje (viz níže), alespoň u mně (mám MSIE 6.0). V manuálu CSS od Pixyho jsem četl, že obtékané prvky musí být uvedeny v kódu dřív než prvky, které je mají obtékat, takže nevím, zda to jde nějak obejít nebo ne.
celé to zabal do: <div id="stranka"> potom dej css: #stranka{width:770px;} #menu{float:left;width:200px} #obsah{float:right;width:550px} pridej tam i div patka #patka{clear:both} <html> <link rel="stylesheet" type="text/css" href="styl.css"> <body> <div id="stranka"> <div id="obsah"> nějaký text <br>nějaký text <br>nějaký text <br>nějaký text <br>nějaký text <br>nějaký text <br>nějaký text <br>nějaký text <br>nějaký text <br>nějaký text <br> </div> <div id="menu"> menu </div> <div id="patka"><p>vytvořil ©....</p> </div> </div> </body> </html> |
||
|
Časová prodleva: 19 let
|
|||
Toto téma je uzamčeno. Odpověď nelze zaslat.
0