Lze to řešit efektivněji (patičku)?

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.

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.

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í.

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í.

Měsíček

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

Proč?

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

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?

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á.

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?

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

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.

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íš.

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í... :-)

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á.

#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 -->