| Autor | Zpráva | ||
|---|---|---|---|
| kuxa Profil |
#1 · Zasláno: 22. 1. 2015, 16:49:41
Zdravím,
mám stejný problém jako tady, jenže s dvěma rozdíly: 1. Mám jinou šablonu 2. Nefunguje to řešení Šablona body
{
padding: 0px;
margin: 0px auto;
}
#obsah
{
width: 1036px;
margin: 0px auto;
margin-top: 5px;
margin-bottom: 5px;
padding: 2px;
min-height: 660px;
border: 1px solid black;
}
#paticka
{
text-align: center;
width: 1000px;
margin: 0px auto;
margin-top: 5px;
margin-bottom: 5px;
padding: 3px 3px 3px 3px;
}
#hlavni_obsah
{
border: 1px solid black;
position: relative;
float: left;
width: 880px;
text-align: left;
min-height: 100%;
}
#bocni_panel
{
border: 1px solid black;
position: relative;
float: left;
width: 140px;
text-align: left;
margin-right: 10px;
min-height: 100%;
}
<div id="hlavicka"> hlavička </div> <div id="obsah"> <div id="bocni_panel"> panel </div> <div id="hlavni_obsah"> nějaký text, který je hóooodně dlouhý </div> </div> <div id="paticka"> patička </div> </body> </html> Víte někdo prosím, jak to vyřešit? Jak už jsem řekl řešení zhora nefunguje. Děkuji předem! |
||
| Tomáš123 Profil |
kuxa:
Odpoveď naformátujem podobne ako ty otázku: Chyba: clear: both (po plávajúcich prvkoch), #hlavni_obsah {min-height: 660px} a html, body {height: 100%}
Podľa úprav som dorobil tvoj kód a funguje. Ak si fakt nebudeš vedieť rady, pošlem ti tú ukážku, ale navrhujem, aby si najprv skúsil použiť vlastnú hlavu. |
||
| kuxa Profil |
Tak už jsem to částečně vyřešil...
Pozadí se prodlužuje jak má, ale mám v obsahu "stopu" po bočním panelu... 
Asi to bude tím floatem, ale ani za nic nemůžu přijít na to, jak to spravit... Víte prosím někdo, jak na to? Děkuji. Kód: #hlavni_obsah
{
border: 1px solid black;
position: relative;
top: 0px;
left: 150px;
width: 880px;
text-align: left;
}
#bocni_panel
{
border: 1px solid black;
position: relative;
float: left;
left: 0px;
width: 140px;
text-align: left;
margin-right: 10px;
min-height: 660px;
} |
||
| kuxa Profil |
#4 · Zasláno: 23. 1. 2015, 20:23:34
Tomáš123: Promiň, ale pořád na to nemůžu přijít. CSS jsem se nikdy moc neučil, vždy jsem si jen našel to, co jsem potřeboval, a pak si to snad nějak zapamatoval. Napíšeš mi prosím řešení, na které jsi přišel? Děkuju.
|
||
| Tomáš123 Profil |
#5 · Zasláno: 23. 1. 2015, 20:50:55
|
||
| kuxa Profil |
#6 · Zasláno: 23. 1. 2015, 22:11:02
Super, díky! Už to částečně funguje :). Patička se posune dobře (spolu s hlavním_obsahem), ale obsah se nezvětší spolu s hlavním_obsahem:
A nedělá to tak ani ten tvůj příklad. Víš prosím, jak to opravit? Děkuju! |
||
| Tomáš123 Profil |
kuxa:
Obecne patrí situácia, ktorú chceš dosiahnuť medzi dosť ťažko riešiteľné. Skúsil som to objasniť v ukážke, na ktorú som ťa odkázal vyššie [#5]. Taktiež som nedávno pozoroval dosť zvláštne správanie clearu. Keď sa dostanem ku počítaču, skúsim vytvoriť ukážku.
|
||
| Keeehi Profil |
#8 · Zasláno: 25. 1. 2015, 12:19:55
kuxa:
Vynechej height z obsahu a bude to ok. Pokud chceš mít nějakou minimální výšku, použij min-height.
|
||
| kuxa Profil |
#9 · Zasláno: 25. 1. 2015, 12:34:21
Děkuji za radu. Bohužel obě uvedené možnosti jsem už zkoušel - když zadám
min-height: 100%, je výsledek stejný jako s height, a když height úplně vynechám, je obsah vysoký 2 px (kvůli padding, jinak by asi zmizel úplně)
|
||
| Keeehi Profil |
#10 · Zasláno: 25. 1. 2015, 12:41:02
Ono to ale funguje. Raději jsem připravil ukázky
Bez height: Živá ukázka S min-height, krátký text: Živá ukázka S min-height, dlouhý text: Živá ukázka |
||
| kuxa Profil |
#11 · Zasláno: 25. 1. 2015, 12:47:59
Tak to je hodně zvláštní, mě to vážně nefunguje... :(. I když i z logickýho hlediska by mělo...
Každopádně, už jsem to vyřešil! Stačilo do #obsah přidat content: ""; display: table; clear: both;
Děkuji všem za rady, bez vás bych to nevyřešil :) |
||
| Tomáš123 Profil |
kuxa:
Situácia s clear funguje iba ak je jeden z panelov vyšší. Ide o ďalšie možné riešenie rovnako vysokých stĺpcov.
Ako sám píšeš, šlo by to tabuľkou, resp. display: table;.
Keeehi: Cieľom bolo dostať pätičku vždy dole. Nikdy nevieš ako vysoký monitor má užívateľ. Preto nejde pre min-height použiť absolútnu hodnotu. Taktiež sa nedá vnárať dva prvky s min-height: 100%.
|
||
| Keeehi Profil |
#13 · Zasláno: 25. 1. 2015, 20:05:53
Tomáš123:
Mít patičku vždy dole jsem z té konverzace nějak nevydoloval. V tom případě bych to viděl na 2 problémy: 1) 2 sloupce vedle sebe obalené rodičem, 2) patička vždy dole. První problém je snad jasný a pdo druhý s úspěchem používám ryanfait.com/sticky-footer |
||
| Tomáš123 Profil |
#14 · Zasláno: 26. 1. 2015, 13:19:15
Keeehi:
„Mít patičku vždy dole jsem z té konverzace nějak nevydoloval.“ Možno to kuxa mienil inak, ale ja som to pochopil tak, že chce mať obidva stĺpce vysoké minimálne 100% (čiže pätička bude až pod nimi, vždy dole) „1) 2 sloupce vedle sebe obalené rodičem, 2) patička vždy dole“ 3) Rovnako vysoké stĺpce Článok na ktorý si odkázal sa orientuje na jednostĺpcový layout. kuxa: „ale obsah se nezvětší spolu s hlavním_obsahem“ To bol ten problém. Vznikol kvôli tomu, že nejde s návratom očakávaných výsledkov vnárať dva prvky s min-height. kuxa to však vyriešil inak.
|
||
|
Časová prodleva: 11 let
|
|||
0