Autor Zpráva
Jcas
Profil *
Prosím radu.
Když skončí (na výšku-height) obrázek na pozadí, ukončí se tím i <div>, nebo lze pokračovat dál s bílým pozadím (žádným). Obr. nelze opakovat.

Kod je moc velky abych ho sem dával a web zatím nemám.

1. Mám opakované pozadí na celou str.
2. Na to jsem napozicoval pozadí pro menu. Konkrétní obrázek (kresba) - proto je nesmysl opakovat
3. Na toto pozadí mám napozicováno menu (seznam - vysouvací-podsezna)
4. Menu je oboustrane (float left a float right)
5. Uprostřed je obsah

Chcu, aby obsah pokračoval i pod menu. Tzn. Menu je obtékáno a po jeho konci se <div> s obsahem roztáhne na celou stránku a pokračuje dál.

Problém - IE pokračování ani nezobrazuje. Pozadí pro celou stránku končí s koncem menu.

Poradíte prosím? Mám sem vložit kód?
děkuji
Leopik 2x
Profil
Nerobil by som to pozicovaním ale spravil by som si skôr nejaký jeden hlavný div s nejakou šírkou (napríklad 600px) a doňho by som pridal:
<div style="width: 600px; margin: 0 auto;">
  <div class="menu_left" style="float: left; width: 200px; height: 300px; background-color: red;"></div>
  <div class="obsah" style="float: left; width: 200px; height: 400px; background-color: green;"></div>
  <div class="menu_right" style="float: left; width: 200px; height: 100px; background-color: blue;"></div>
</div>

Ak to nechceš mať v strede tak zmaž to margin: 0 auto;
Jcas
Profil *
Podívejte se na www.zoo-kuryr.cz/
To je inspirace. Rozdíle je v tom, že oni to mají obsah v rámu.
Já bych rád aby text plynul dál. Tzn. Jak se dostanu pod obrázek, na kterém je napozicováno menu, bude obsah i centrální pozadí pokračovat dál.

Ps. Když si vymezím část obsahu, odpovídají výšce menu a uzavřuji do <div ceter> a další obsah umístím do dalšího <div>u, tak je to v poho, ale je to strašně nepraktické.
panther
Profil
Leopik 2x:
nastavovat blokům, kde očekávám textový obsah výšku? Nee.

Jcas:
Když skončí [...] obrázek na pozadí, ukončí se tím i <div>, nebo lze pokračovat dál s bílým pozadím (žádným)
proč by měl obrázek na pozadí (CSS) ukončit div (HTML)? Samozřejmě, jde zadeklarovat barvu, která bude tam, kde nebude obrázek (např. i při vypnutých obrázcích). Např.:
background: #00f url('background.png') left top repeat-x


Kod je moc velky abych ho sem dával a web zatím nemám.
snadno zřídíš freehosting. Z koule věštit nechci, ani ty bys to po mě neměl chtít.
Jcas
Profil *
http://www.zocschmoravskebranice2.websnadno.cz/adresa/hlavni-stranka.html

Tak tady je ukázka. Původně jsem výšku nechtěl nastavovat, ale bylo dost těžké to menu napozicovat tak, aby to zobrazovali všichni stejně. (testováno na F, IE, O)
Jcas
Profil *
www.zocschmoravskebranice2.websnadno.cz/adresa/hlavni-stranka.html
panther
Profil
Jcas:
přidej k
div.telo {_padding-bottom: 172px}

Stejná hodnota jako relativní odpozicování shora. Tady na tvém webu krásně vidíš, že pozicování pro začátečníka dobré není, třeba budeš chtít zkusit i floatované layouty (float + clear).
Jcas
Profil *
bezva děkuju
Vysvětlíš mi to prosím.
Jestli dobře chápu zápis, tak s tím " _ " je ten tzv. háček a je to zápis pouze pro IE.
Ale nemůžu pochopit, že pomůže nastavit stejní spodní padding, jako je posun.
panther
Profil
Jcas:
Jestli dobře chápu zápis, tak s tím " _ " je ten tzv. háček a je to zápis pouze pro IE.
konkrétně pro IE <=6, od sedmičky neplatí.

A proč spodní padding? Bylo, nebylo... Ne, je to způsobené tou relativní pozicí. Kdybys nepozicoval, blok skončí normálně. Relativní pozicí se nic kolem nemění, jen se tento šoupne o 172px dolů - a ztratil se :-)

Ono napozicovat design (JPW je taky pozicovaný) není žádná sranda, navíc se dnes běžněji používá floatovaných layoutů (float, clear). Ono s pozicováním se musí zacházet velmi opatrně a měl bys jej používat až když víš, jak se chová. To, že spousta začátečníků myslí, že je to nejsnažší, je věc druhá (a mylná).
Jcas
Profil *
Děkuji
Souhlasím. Určitě si nemyslím, že pozicování je jednoduché.
Ovšem viděl si co tvořím. A když si chcu menu nastrkat do kotců (králíkárny), tak nevím jestli by to šlo udělat jinak, než s pozicováním.
panther
Profil
Jcas:
A když si chcu menu nastrkat do kotců (králíkárny), tak nevím jestli by to šlo udělat jinak
šlo by to udělat, docela dobře, ani nebude zapotřebí nějakých speciálních CSS znalostí. Navíc tys pozicoval i všechno kolem, ne jen to menu, o kterém teď mluvíš. Zkusím náznak (levá strana, pravá analogicky, s otočenými obrázky a hodnotami):

ul.seznam {width: 200px; background: url('slepice.png') left top no-repeat; padding-top: 210px; /*padding = vyska slepice*/}
ul.seznam li {padding: 35px 35px 0 50px; height: 85px; width: 115px; text-align: center; background: url('kotec.png')} 
/* text jen ve svetlem poli, da se to zmenit na rozmery sv. hnedeho ramecku kolem, bude vice mista na dlouhe polozky
boční paddingy + width = šířka seznamu, horní a dolní padding + height = výška kotce (obrázku na pozadí) */


Případně, ještě lépe, nechat rozměry LI maximální (tedy 200 x 120px na mém příkladu) a padding s těmi zmenšenými rozměry (a display: block) dát odkazu. Bude tak klikatelná celá položka, celý kotec a ne jen text.
ul.seznam li {width: 200px; height: 120px;}
ul.seznam li a {padding: 35px 35px 0 50px; height: 85px; width: 115px}


Teď záleží na tom, jak si to nařežeš. Já pracoval s tím (rozměry tomu +- odpovídají, i když jsou jen odhadem), že kotec.png bude obrázek mezi horizontálními linkami odlišující kotce, tedy vlevo bude i boční stěna kotce pod ním. Proto budeš muset poslední položku, kde tento kousek obrázku už není, odlišit (class="last") a dát jí na pozadí jiný obrázek (bez stěny následujícího kotce).

Ono vůbec, udělat to tak, jak jsi to udělal, je dost nešťastné. Tohle by se mělo rozřezat minimálně ještě takto:
- slepice (menu)
- kotec (položka)
- vnitřek kotce - neaktivní položka a aktivní položka (takhle budeš muset mít 10 těhle velkých obrázků). Předpokládám, že bílá je aktivní, kostičkovaná nikoliv.
- nadpis


Samozřejmě tak, jak jsem to menu napsal, nebude problém s ním později manipulovat - přidat položku, odebrat položku, všechno uděláš během minuty i se zapnutím počítače.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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

0