| Autor | Zpráva | ||
|---|---|---|---|
| smonkey Profil |
#1 · Zasláno: 29. 5. 2010, 23:01:14 · Upravil/a: smonkey
Zdravím... chtěl jsem na svém webu udělat phyblivou patičku --> Aby byla vždy dole, úplně naspod stránky. Na Internetu jsem si našel návod - po "aplikování" na moje stránky tento kód nefunguje a rozhazuje stránku.
Mám nějakou takovou strukturu: .... <div id="page"> <div id="menu"> xxxxxx </div> <div id="container"> xxxxxx </div> </div> <div id="footer"> Copyright...... </div> .... Přičemž menu, container a footer mají absolutní pozici. Page relativni. Jde o to že když to mám nastavené takto, footer se "nepohybuje" (není tam, kde má být). Při dalším zkoušení měnení aboslutní a relativní pozice mi to rozhodí celou stránku. Resp. když jsem dal containeru relativní pozici, footer se pohyboval, ale menu se rozhodilo. Doufám že jsem to naspal dost pochopitelně... Předem děkuji za ohlasy... |
||
| mckay Profil |
#2 · Zasláno: 29. 5. 2010, 23:18:05
smonkey:
Ano, úplně se nám všem teď chce si to překládat do css a html, ukládat a spouštět. Koukej sem hodit odkaz na "živou ukázku" ;-). |
||
|
Časová prodleva: 3 dny
|
|||
| smonkey Profil |
#3 · Zasláno: 1. 6. 2010, 17:00:45 · Upravil/a: smonkey
Zdravím, omlouvám se, že tak pozdě - Dřív jsem se na PC prostě nedostal. Takže zde to je:
HTML - Index (Výstřižek) <div id="page">
<div id="header"><a href="**********"><img src="images/logo.jpg"></a></div>
<div id="container" class="rounded">
<div id="context">
<p>
texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
</p>
<p>
<br>
<!--<strong><span style="font-size: 16px"><a href="#">Novinky & Sdělení</a></span></strong><br>
<span style="font-size: 16px">Níže najdete novinky z webu:</span>-->
</p>
<p>
<?
?>
</p>
</div>
<div id="news">
<?
echo $vypis;
?>
</div>
</div>
<div id="menu" class="rounded"><img src="images/menu.jpg">
<br><br><iframe width="240" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="menu.html"> </iframe>
<!--<ul style="list-style-image: URL('images/odrazka.jpg')">
<li><a href="#">Home</a></li>
<li><a href="#">Články</a></li>
<li><a href="#">Autor</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Vyhledávání</a></li>
</ul>-->
</div>
</div>
<div id="footer">
</div>
CSS (Výstřižek) html, body {
height: 100%;
}
body {
font-family: Tahoma, Verdana, Arial, lucida, sans-serif;
background: #fff;
color: #000;
font-size: x-small;
text-align: center;
min-width: 760px;
line-height: 1.5;
}
html>body {
font-size: small;
}
body>#page {
height: auto;
}
#page {
width: 900px;
margin: 0 auto;
text-align: left;
min-height: 100%;
height: 100%;
position: relative;
}
#footer {
width: 700px;
height: 60px;
overflow: hidden;
position: absolute;
bottom: 0;
left: 0;
background: #e6e6e6;
text-align: center;
}
#container { position: absolute; margin-left: 250px; margin-top: 70px; width: 650px; background: #e6e6e6 repeat;}
#menu { position: absolute; margin-top: 70px; width: 240px; float: left; background: #e6e6e6 repeat-y }
#context { padding: 5px 15px 5px 15px; }POZN.: #context je v containeru né kvuli odsazení ale kvuli kulatým rohům #containeru. (Kulaté rohy řeším touto metodou) |
||
| Davex Profil |
#4 · Zasláno: 1. 6. 2010, 20:45:32
1. pro #container používáš absolutní pozicování, a protože je obsah vyjmut z toku dokumentu, tak nezabere žádné místo a obalový blok se nenatáhne - prohoď pořadí #menu a #container a místo pozicování používej float a clear
2. patičku máš mimo obalový blok #page, takže se nepozicuje na jeho spodek - přesuň #header na konec bloku #page 3. ještě je dobré vynulovat okraje body, aby se patička dole neschovávala |
||
| smonkey Profil |
#5 · Zasláno: 1. 6. 2010, 21:09:04
1. pro #container používáš absolutní pozicování, a protože je obsah vyjmut z toku dokumentu, tak nezabere žádné místo a obalový blok se nenatáhne - prohoď pořadí #menu a #container a místo pozicování používej float a clear
Děkuji za odpověd, četl jsem si ten článek o float a clear... nějak tomu nerozumím. Body jsem nastavil clear: both. Mohl by jsi mi prosím nějak poradit s tím floatem? Jak to použít místo pozicionování? (Místo čeho konkrétně)... Děkuji |
||
| Davex Profil |
#6 · Zasláno: 1. 6. 2010, 22:33:34
Schematicky to máš popsáno na JPW: Jak udělat levé menu.
Aby čistič (element s nastavenou vlastností clear) ukončil plavání, tak patří až za plovoucí bloky: <div id="page"> <div id="header"></div> <div id="menu"></div> <div id="container"></div> <div class="cistic"></div> <div id="footer"></div> </div> |
||
|
Časová prodleva: 14 let
|
|||
0