Chyba v kódu XHTML/CSS
Ahoj všem,
Mám dotaz ohledně chyby v kódu XHTML nebo CSS. Učím se layout stránek a z nějakého důvodu se zápatí stránky nezobrazuje s barevným pozadím. Nemůžu přijít na to, kde je chyba. Odzkoušeno ve třech prohlížečích Explorer, Firefox a Chrome. Všude je to stejné. Děkuji za každou radu.
Zde je kód:
<?xml version="1.0" encoding="windows-1250"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"xhtml1-strict.dtd">
<html xmlns="xhtml" xml:lang="cs" lang="cs">
<head><!-- ščřžýŠČŘŽÝ -->
<meta name="generator" content="PSPad editor, www.pspad.com" />
<meta http-equiv="content-type" content="text/html; charset=windows-1250" />
<title>Moje první WWW stránky</title>
<style type="text/css">
body {
margin: 0;
}
#obal {
width: 700px;
margin: 0 auto;
background: yellow;
}
h1, h2 {
margin-top: 0;
}
#zahlavi {
width: 100%;
height: 100px;
background: red;
}
#menu {
width: 25%;
float: left;<!--Plovoucí umístění nalevo-->
top: 100px;
}
#obal {
position: relative;
}
#obsah {
width: 75%;
float: right;<!--Plovoucí umístění napravo-->
left: 25%;
}
#hlavni {
width: 100%;
float: left;
background: yellow;
}
#zapati {
width: 700px;
float: left;<!--Zápatí nadefinováno do plovoucího plovoucího umístění vlevo-->
background: silver;
}
</style>
</head>
<body>
<div id="obal">
<div id="zahlavi">
<h1>Název společnosti</h1>
</div> <!--Konec záhlaví-->
<div id="hlavni"><!--Menu i obsah zabaleny do dalšího elementu div, nutné k vložení těchto dvou částí k definici plovoucího umístění, neboť zmizelo pozadí-->
<div id="obsah">
<h2>Obsah stránky</h2>
<p>Lorem ipsum dolor sit amet consectetuer laoreet semper nibh mus Nam. Nibh quis sodales Sed felis malesuada quam rhoncus quis lacinia risus. Ac montes Lorem eros id justo auctor dapibus leo auctor risus. Ut ullamcorper Donec Sed pellentesque Aenean Nulla Quisque et mus consectetuer. Eu In congue nec ut platea consectetuer nisl leo lacinia.</p>
<p>At Vestibulum amet libero Nulla nec mauris elit elit Aenean neque. In libero amet Phasellus tortor Vestibulum ipsum semper Nam consequat ac. Phasellus convallis condimentum vitae sem facilisi neque laoreet laoreet orci neque. Laoreet ac lacinia tempus interdum quis tortor neque dignissim dolor Curabitur. Turpis senectus tempus interdum interdum elit nec suscipit augue adipiscing neque. Curabitur dolor Proin lacinia fames vitae mauris.</p>
</div> <!--Konec obsahu-->
<div id="menu">
<h2>Navigace:</h2>
<ul>
<li>Odkaz 1</li>
<li>Odkaz 2</li>
<li>Odkaz 3</li>
<li>Odkaz 4</li>
<li>Odkaz 5</li>
<li>Odkaz 6</li>
</ul>
</div> <!--Konec menu-->
</div><!--Konec identifikátoru hlavní-->
<div id="zapati">
Zápatí stránky
</div>
</div> <!--Konec obalu-->
</body>
</html>
#hlavni {
width: 100%;
float: left;
background: yellow;
clear: both;
}
A zkus kódování UTF-8.
Ahoj, dík za radu, ale nepomohlo to
Smaž poznamku v definici zapati (<!--Zápatí nadefinováno do plovoucího plovoucího umístění vlevo-->)
Super, pomohlo to! Teď ale prosím o vysvětlení, proč může komentář v kódu ovlivnit výsledek?
To je (X)HTML komentář, v CSS kódu se používá /* komentar */.
Aha
Zatím jsem v knize nic jiného neviděl.
Teď už je mi to jasné, učím se podle knihy a komentáře jsem automaticky psal do XHTML i CSS
Mám už jen poslední otázku, proč vše ostatní v kódu funguje, i když v CSS mám více takových komentářů?
Ale ono ti to nefunguje, jen to kvůli dalším chybám nevidíš. Např. top bez position neudělá vůbec nic.
Ten CSS tag můžeš zapsat (resp. formátovat) taky takhle:
#zapati {width: 700px;float: left; <!--Zápatí nadefinováno do plovoucího plovoucího umístění vlevo--> background: silver;} a to určitě uznáš, že je pitomost. Tag totiž začíná a končí složenou závorkou a poznámka může být jen mimo ni.
Ale sakra beru zpět, už jsem zas někde jinde - pravdu má samozřejmě host
To máš pravdu. Díky, jsi frajer...