Jak udělat na stránce patičku v HTML?
Dobrý den, mám takový problém. Potřebuji umístit patičku (a nějaké další divy) na konec stránky, aby vždy byly dole nehledě na velikost textu. Mohli by jste mi říci, kde dělám chybu?
Jsem začátečník a moc se v tom ještě nevyznám. Děkuji!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">;;
<title></title>
<style type="text/css">
<!--
html, body {
height: 100%;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0
}
html>body {
font-size: small;
}
*|html[xmlns*=""] #main {
display: table;
height: 100%
}
#main {
min-height: 100%;
margin: 0 auto;
width: 1000px;
position: relative;
height: 100%;
background: green
}
body>#main {
height: auto;
}
#hlavicka {
position: absolute;
background-image: URL('images/web_01.gif');
width:1000px;
height:42px;
top: 0px;
left: 0px
}
#lsloupec {
position: absolute;
background-image: URL('images/web_02.gif');
width:39px;
height:802px;
top: 42px;
left: 0px
}
#odkaz {
position: absolute;
background-image: URL('images/web_03.gif');
width:899px;
height:145px;
top: 42px;
left: 39px
}
#psloupec {
position: absolute;
background-image: URL('images/web_04.gif');
width:62px;
height:145px;
top: 42px;
left:938px
}
#pododkaz {
position: absolute;
background-image: URL('images/web_05.gif');
width:900px;
height:25px;
top: 187px;
left: 39px
}
#bannery {
position: absolute;
background-image: URL('images/web_06.gif');
width:61px;
height:657px;
top: 187px;
left: 939px
}
#menu {
position: absolute;
background-image: URL('images/web_07.gif');
width:189px;
height:477px;
top:212px;
left: 39px
}
#prouzek {
position: absolute;
background-image: URL('images/web_08.gif');
width:37px;
height:477px;
top: 212px;
left: 228px
}
#obsah {
position: absolute;
background-image: URL('images/web_09.gif');
width:674px;
min-height:477px;
top:212px;
left: 265px
}
#podpaticka {
position: absolute;
background-image: URL('images/web_12.gif');
width:900px;
height:35px;
bottom:0px;
left: 39px;
overflow: hidden;
}
#paticka {
position: absolute;
background-image: URL('images/web_11.gif');
width:900px;
height:89px;
overflow: hidden;
bottom:35px;
left: 39px
}
#podobsah {
position: absolute;
background-image: URL('images/web_10.gif');
width:900px;
height:31px;
top: 689px;
left: 39px
}
-->
</style>
</head>
<body>
<div id="main">
<div id="hlavicka">Hlavicka</div>
<div id="lsloupec">Levz sloupec</div>
<div id="odkaz">Odkaz</div>
<div id="psloupec">Pravz sloupec</div>
<div id="pododkaz">Pod odkazem</div>
<div id="bannery">Bannery</div>
<div id="menu">Menu</div>
<div id="prouzek">Prouyek</div>
<div id="obsah">Obsah</div>
<div id="podpaticka">Pod paticka</div>
<div id="paticka">Paticka</div>
<div id="podobsah">Pod obsaem prouzek</div>
</div>
</body>
</html>
Jsem začátečník a moc se v tom ještě nevyznám. Děkuji!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">;;
<title></title>
<style type="text/css">
<!--
html, body {
height: 100%;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0
}
html>body {
font-size: small;
}
*|html[xmlns*=""] #main {
display: table;
height: 100%
}
#main {
min-height: 100%;
margin: 0 auto;
width: 1000px;
position: relative;
height: 100%;
background: green
}
body>#main {
height: auto;
}
#hlavicka {
position: absolute;
background-image: URL('images/web_01.gif');
width:1000px;
height:42px;
top: 0px;
left: 0px
}
#lsloupec {
position: absolute;
background-image: URL('images/web_02.gif');
width:39px;
height:802px;
top: 42px;
left: 0px
}
#odkaz {
position: absolute;
background-image: URL('images/web_03.gif');
width:899px;
height:145px;
top: 42px;
left: 39px
}
#psloupec {
position: absolute;
background-image: URL('images/web_04.gif');
width:62px;
height:145px;
top: 42px;
left:938px
}
#pododkaz {
position: absolute;
background-image: URL('images/web_05.gif');
width:900px;
height:25px;
top: 187px;
left: 39px
}
#bannery {
position: absolute;
background-image: URL('images/web_06.gif');
width:61px;
height:657px;
top: 187px;
left: 939px
}
#menu {
position: absolute;
background-image: URL('images/web_07.gif');
width:189px;
height:477px;
top:212px;
left: 39px
}
#prouzek {
position: absolute;
background-image: URL('images/web_08.gif');
width:37px;
height:477px;
top: 212px;
left: 228px
}
#obsah {
position: absolute;
background-image: URL('images/web_09.gif');
width:674px;
min-height:477px;
top:212px;
left: 265px
}
#podpaticka {
position: absolute;
background-image: URL('images/web_12.gif');
width:900px;
height:35px;
bottom:0px;
left: 39px;
overflow: hidden;
}
#paticka {
position: absolute;
background-image: URL('images/web_11.gif');
width:900px;
height:89px;
overflow: hidden;
bottom:35px;
left: 39px
}
#podobsah {
position: absolute;
background-image: URL('images/web_10.gif');
width:900px;
height:31px;
top: 689px;
left: 39px
}
-->
</style>
</head>
<body>
<div id="main">
<div id="hlavicka">Hlavicka</div>
<div id="lsloupec">Levz sloupec</div>
<div id="odkaz">Odkaz</div>
<div id="psloupec">Pravz sloupec</div>
<div id="pododkaz">Pod odkazem</div>
<div id="bannery">Bannery</div>
<div id="menu">Menu</div>
<div id="prouzek">Prouyek</div>
<div id="obsah">Obsah</div>
<div id="podpaticka">Pod paticka</div>
<div id="paticka">Paticka</div>
<div id="podobsah">Pod obsaem prouzek</div>
</div>
</body>
</html>
Odpovědi
Diskuze
2) Chyba bude patrně v šířce divů. Mimoto je jich na stránce zbytečně mnoho. 3)Deklaruj každému divu barvu, abys ho viděl barevně odlišený.
4) Bottom mnohdy nereaguje, používej raději top.
5) Je nutný div proužek, pododkaz, podpaticka, podobsah? Co to má smysl? Pro začátek použij dvousloupcový design s hlavičkou a patičkou, pak zkus přidávat další prvky.
ALE PŘEDEVŠÍM: Absolutní pozicování se nepoužívá, obsah stránky se ti při zvětšení a zmenšení stránky rozsype, nehledě na to, že bude vypadat v každém prohlížeči jinak.
Lépe by ti poradili v diskuzi na jakpsatweb.cz, nebo na jaknaweb.cz
V této souvislosti doporučuji umístit web na internet, například bezplatně na webzdarma.cz
html, body {
height: 100%;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
Co to jako má být? Cite, sup, sub, strike, small atd. jsou HTML kódy, co dělají v deklaraci CSS?
var se používá v php