| Autor | Zpráva | ||
|---|---|---|---|
| DarkMeni Profil |
#1 · Zasláno: 6. 12. 2013, 16:12:58
Zdravim, pokoušim se udělat dvousloupcový layout (navigace vlevo a obsah vpravo), ale nedaří se mi přizpůsobit výšku jednoho sloupce tomu druhému.
Kdyby se stalo, že by byl text příliš krátký, tak aby se výška divu s obsahem přizpůsobila výšce navigace, a kdyby byl zase moc dlouhý, tak aby se navigace přizpůsobila obsahu. Měl sem to udělaný tabulkovým layoutem přes pozadí z obrázků, ale potom sem změnil pozadí a teď mi stačí jen pozadí nastavené barvy a rámeček, a použít na to pozadí z obrázku mi připadá zbytečný a neefektivní. Ale když to udělám přes div s barvou pozadí a rámečkem, tak mu jen tak nemůžu nastavit výšku na 100% (tomu prohlížeči je to prostě jedno), a když nastavim 100% řádku tabulky, buňce a pak i tomu divu, tak pak mi z nějakého důvodu přesahuje sloupec s obsahem do patičky (asi o 10px, takže přibližně o ten rámeček, každopádně je vidět že ten odstup dolní hrany divu od patičky neni dodrženej) a nepomohlo mi ani nastavení marginu na 10px u divu s id content-div. Zkoušel sem to i přes divový layout (bez použití tabulek), ale tam se mi nepodařilo nastavit ani těch 100% výšky pro ten obsah. Layoutový kód vypadá zatim takto: <!DOCTYPE html>
<html>
<head>
<title>Titulek...</title>
<meta http-equiv="Content-Type" content="text/html;Charset=utf-8">
<style type="text/css">
table {
border-collapse: collapse;
}
#main {
width: 800px;
background: gray;
margin: auto;
}
#logo {
height: 200px;
background: green;
}
#navigation {
vertical-align: top;
background: red;
width: 200px;
height: 400px;
}
#body-tr {
height: 100%;
}
#content {
vertical-align: top;
background: orange;
height: 100%;
padding: 5px;
}
#content-div {
border: 4px solid red;
height: 100%;
background: #ddd;
}
#footer {
/* zatim nic */
}
</style>
</head>
<body>
<table id="main">
<tr>
<td id="logo" colspan="2">
<img src="logo.jpg">
</td>
</tr>
<tr id="body-tr">
<td id="navigation">
Navigace...
</td>
<td id="content">
<div id="content-div">
Obsah...
</div>
</td>
</tr>
<tr>
<td id="footer" colspan="2">
Patička...
</td>
</tr>
</table>
</body>
</html>Ale docela mi vadí že pak ten obsah přesahuje do patičky a nevim proč. Když nastavim místo 100% třeba 95%, tak je pak zase nevyrovnaný odstup obsahu od patičky (u krátkýho textu je ta mezera větší a u dlouhýho zase menší) Tak kdyby někdo měl nějakou radu jak na to, tak mu budu vděčný. |
||
| Str4wberry Profil |
#2 · Zasláno: 6. 12. 2013, 16:16:01
|
||
| DarkMeni Profil |
#3 · Zasláno: 7. 12. 2013, 22:54:19
Díky, ale
Obrázkům sem se chtěl právě vyhnout (natahovat tak 30kB velkej obrázek mi připadá neefektivní, a navíc když budu chtít něco změnit, tak musim překreslovat i obrázky) Oddělení rámečkem dosáhnu i pomocí tabulek, ale ten obsah právě nechci mít přilepenej ke hraně, ale spíš uvnitř toho sloupce s obsahem chci mít další div a tomu chci nastavit pozadí pro obsah a margin (nebo padding tomu sloupci) tak 10px Absolutní pozicování použít nemůžu protože právě nevim co bude delší (třeba hláška že stránka nebyla nalezena je kratší než levý sloupec, a zase normální obsah je většinou delší) - i když sem si s tim zkoušel pohrát, ale nepodařilo se mi docílit toho, co si představuju (a navíc s tim marginem nebo paddingem u obsahu se to pak chová stejně jako u tý tabulky, přesahuje do patičky) JavaScript na to použít nechci (nechci aby bylo správné zobrazení stránek závislé na zapnutém JavaScriptu) A jestli sem pochopil tu poznámku u flexboxů dobře, tak ty maj zatim špatnou podporu, tak sem na to ani nějak moc nekoukal Takže nakonec to vypadá že budu muset použít stejně obrázky, nebo ještě něco zkusim vymyslet, ale dík! |
||
|
Časová prodleva: 10 let
|
|||
0