Autor Zpráva
mantisa
Profil
Mám patičku, která je pod divem obsah, ale zalézá mírně pod ten obsah pomocí záporného horního marginu (obsah má nastaven vyšší z-index). A chci text v patičce vpravo i vlevo.

Když floatnu doprava a pak doleva, v Opeře se odstavec zobrazí nelogicky až pod tím divem obsah, i kdyý je patička zastrčená, FF blázní úplně a IE se chová rozumně. tudíž to dost dobře nevycentruji na výšku. vyřešil jsem to následovně:

CSS:

#footer {
min-height: 110px;
background: #5A0000;
color: #FFFFFF;
margin-top: -36px;
}

#footer-in {
width: 950px;
margin: 0 auto;
background: #5A0000;
}

#footer a, #footer a:visited {
color: #FFFFFF;
font-weight: normal;
}

p.footer-left {
text-align: left;
margin-left: 12px;
padding-top: 42px;
line-height: 190%;
}

p.footer-right {
text-align: right;
margin: -2.4em 12px 0 0;
}


HTML

<div id="footer">
<div id="footer-in">
<p class="footer-left">&copy; <a href="/">...</a>, 2008.</p>
<p class="footer-right"><a href="#">Mantis-a</a> &raquo; <a href="#">...</a></p>
</div>:
</div>


Ale vím, že to není uplne koser, ale na druhou stranu to bez problémů funguje napric vsemi beznymi prohlizeci. Jde to nejak efektivněji? Děkuji
Měsíček
Profil
Třeba se mi zdá těch divů na patičku moc ... nestačil by jeden?

<div id="paticka">

<p class="paticka_text_vlevo"></p>
<p class="paticka_text_vpravo"></p>

</div>

také vlastnost clear:both; by se mohla přidat.
mantisa
Profil
Měsíček

Ahoj, to je opravdu pouze zdání...
Dranel
Profil
Měsíček
Dva divy v sobě jsou kvůli paddingu a správnému počítání rozměrů s ním.

mantisa
Optimalizuj si kódy... např místo #FFFFFF stačí dát #fff. Zbytek se mi v tto pozdní hodinu luštit nechce.
mantisa
Profil
Dranel

Optimalizuj si kódy... např místo #FFFFFF stačí dát #fff.

Děkuji za radu nad zlato. Ještě, že Vás mám...
Manq
Profil
např místo #FFFFFF stačí dát #fff.
Osobně nevidím smysl této rady…

mantisa
Ale vím, že to není uplne koser, ale na druhou stranu to bez problémů funguje napric vsemi beznymi prohlizeci.
Když to funguje, nevidím důvod, proč to měnit. Když to situace vyžaduje, musí se sáhnout po ne zrovna efektním řešení.

Mám patičku, která je pod divem obsah, ale zalézá mírně pod ten obsah pomocí záporného horního marginu
A proč je to takto? Možná by se našlo lepší řešení.
Měsíček
Profil
Dva divy v sobě jsou kvůli paddingu a správnému počítání rozměrů s ním.

To opravdu není dobré řešení.
Plaváček
Profil
Měsíček

To opravdu není dobré řešení.

Proč?
Měsíček
Profil
Připadá mi to hodně zbytečné, rád bych viděl celou stránku, abych si to mohl zkusit udělat bez těch dvou divů ..
mantisa
Profil
Plaváček

Protože jste OUT a neznáte již moderní trendy...

Prosím, konec OT, děkuji.
Plaváček
Profil
mantisa

z-index funguje výhradně u relativně nebo absolutně pozicovaných bloků. Neznám celý kód, ale mělo by postačit bloku obsah nastavit position:relative a pak by z-index mohl zabrat. Určitě ale existují i jiná možná řešení, což z tého krátké ukázky kódu posoudit nelze.

Měsíček

V čem je Plaváček OUT?

Protože stále považuje Pixyho matrjošku za nejbezpečnější a zpětně i dopředně kompatibilní řešení problémů s box-modelem. Je na tom něco špatného?
mantisa - na jieném počítači doma
Profil *
Plaváček

Boxu s obsahem mám position relative nastavenou. Patička je zalezlá pod tím obsahovým boxem, ale obsah v té patičce nevím, jak správně odsadit od shora, aby taky nebyl zalezlej pod tím obsahovým blokem jako část té patičky, u které to je žádoucí. Pokud ho floatnu doprava a doleva, tak se to chová podivně, jediné funkční řešení na které jsem přišel, je výše uvedené. Ale trochu problém je, když chci třeba do toho textu napravo dát více řádků, to pak musím zvětšit záporný horní margin u textu vlevo, což se mi dvakrát nezdá.
hidden.work
Profil *
Je třeba se zbavit toho zápornýho marginu - pokud má obsah nastavenej vyšší z-index, je blbost aby překrejval patičku, která je logicky odsazena až pod obsahovym boxem. Můžeš sem hodit celej kod?
huleň
Profil *
Mantiso, mantiso takovou prasaarnu sem uz fakt dlouho nevidel, dat dva odstavce pod sebe a na stejnej radek je dostavat zapornym marginem. Floatovani by fakcilo, kdyby si floatovanym odstavcum nastavil nejakou tu sirku, takhle se roztahnou pres cely div, no a je jasny ze vedle sebe je normalne samo nenacpes. Mozna jsem pubertak, ale aspon umim kodovat
habendorf
Profil
Nevím jestli se v tom teď dobře orientuju, ale pravděpodobně by stačilo rozplavat #footer, viz můj příspěvek zde: http://diskuse.jakpsatweb.cz/index.php?action=vthread&forum=7&topic=67 578

Lepší by bylo dát sem link na živou ukázku, aby člověk mohl zkoušet naostro, kopírovat se mi moc nechce. Takže jen tipuju do větru, ale to se mi zas při zjevné aroganci tazatele dvakrát také nechce.
Dranel
Profil
mantisa
Děkuji za radu nad zlato. Ještě, že Vás mám...
Ok. Příště budu zticha. Zapoměl jsem, že všechno umíš a víš.
mantisa
Profil
huleň
Někde jsem napsal, že jsem plaváčkům nezadával šířku?

Dranel
Děkuji, konečně pořádný příspěvěk od Tebe.

habendorf
Děkuji, vypadá to, že by to mohlo řešit můj problém. Vyzkouším...

Nejsem arogantní, ale pokud se na něco ptám a někdo mi odpoví, že si mám opravit kód z #FFFFFF na #fff, mírnější reakce mě nenapadá.
mantisa
Profil
habendorf

Děkuji, skutečně se jedná o tuto chybu Opery. Rozplavání patičky pomohlo, nevím jenom, jak zařídit, aby při zmenšení okna pod šířku boxu s obsahem (950px) se patička nechovala trochu zle (malinko se ořízne)...

#footer {
min-height: 100px;
background: #5A0000;
color: #FFFFFF;
margin-top: -36px;
float: left;
width: 100%;
min-width: 950px;
}

tohle bych jako elegatní taky neviděl :-)
mantisa - opět nepřihlášen
Profil *
Ahoj, stále se lopotím s tou patičkou, jelikož při rozlišení 800x600 a menším se nezobrazí celá, kvůli width: 100%.

Respektive nevím, jak ji pěkně "rozplavat", aby byla přes celou šířkui při nižším horizontálním rozlišení něž je šířka boxu s obsahem. Napadlo mě tedy ještě řešení dát patičku pod obsah a graficky překrytí nasimulovat, ale to už se mi tak moc nelíbí... :-)
Plaváček
Profil
mantisa - opět nepřihlášen

Kdybys konečně dodal odkaz na celý kód, dal by se myslím celý problém snadno vyřešit. Z takového úryvku, co nám předkládáš, se fundovaně prostě poradit nedá.
mantisa - opět nepřihlášen
Profil *
#content-box {
width: 943px;
margin: 0 auto;
background-color: #151515;
border: 3px solid #FFFFFF;
text-align: left;
color: #FFFFFF;
position: relative;
z-index: 1000;
min-height: 100%;
}

#content-box-in {
width: 100%;
}

#content-box-left {
float: left;
width: 66%;
margin-bottom: 5em;
}

#content-box-right {
float: right;
width: 30%;
margin-bottom: 5em;
}

#content-box-left-in {
margin: 2.4em 4em 0 2.9em;
}

#content-box-right-in {
margin: 2.4em 0 0 2.6em;
}

#footer {
min-height: 100px;
background: #5A0000;
color: #FFFFFF;
margin-top: -36px;
float: left;
width: 100%;
}

#footer-in {
width: 950px;
margin: 0 auto;
background: #5A0000;
}

#footer a, #footer a:visited {
color: #FFFFFF;
font-weight: normal;
}

p.footer-left {
width: 450px;
float: left;
text-align: left;
line-height: 190%;
margin: 40px 0 0 12px;
}

p.footer-right {
width: 450px;
float: right;
text-align: right;
margin: 40px 12px 0 0;
}


<!-- Content box -->
<div id="content-box">
<div id="content-box-in">

<!-- Content box right -->
<div id="content-box-right">
<div id="content-box-right-in">
<h3>News and actual offers</h3>
<h3>Contact information</h3>
</div>
</div>
<!-- Content box right end -->


<!-- Content box left -->
<div id="content-box-left">
<div id="content-box-left-in">
<h3 class="first">LOREM IPSUM DOLOR SIT AMET</h3>
<p>...</p>

<h3>LOREM IPSUM DOLOR SIT AMET</h3>

<h3>LOREM IPSUM DOLOR SIT AMET</h3>
</div>
</div>
<div class="cleaner">&nbsp;</div>
<!-- Content box left end -->
</div>
</div>
<!-- Content box end -->


<!-- Footer -->
<div id="footer">
<div id="footer-in">
<p class="footer-left">...</p>
<p class="footer-right">...</p>
</div>
</div>
<!-- Footer end -->
mantisa
Profil
Jedná se o problém, který tady vystihl habendorf : http://diskuse.jakpsatweb.cz/index.php?action=vthread&forum=7&topic=67 578

Jenom nevím, jak "kloudně" rozplavat patičku, když ji chci roztaženou přes celou šíčku stránky i při menších horizintálních rozlišeních než je šířka obsahu (v případě, kdy se zobrazuje horizontální posuvník).
mantisa
Profil
zatím nikdo nereagoval, tak dotaz zúžím...

Dá se nějak rozplavat patička, aby byla široká vždy přes celé okno prohlížeče, i když je zobrazen horizontální posuvník?

#footer {
min-height: 100px;
background: #5A0000;
color: #FFFFFF;
margin-top: -36px;
float: left;
width: 100%;
}

#footer-in {
width: 950px;
margin: 0 auto;
background: #5A0000;
}

moje řešení kolabuje při horizontálním rozlišení menším než 950 px... min-width se mi používat moc nechce

Děkuji

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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