Webová stránka, 3 prohlížeče
Dobrý den, jsem student, který se začíná učit psát webové stránky, vytvořil jsem docela pěknou webovouprezentaci.
Ale mám dotaz : vše jsem zkoušel v prohlížeči firefox.
Když zapnu stránky v google chrome, nebo I.exploreru, šedé pole, kde ma být umístěn text, zlobí, není tam kde má být, nebo je velký, jakto?
Jde o web : www.pantau.kvalitne.cz
Prosím profíky o radu :)
<body> - Obsah musí být mezi těmito dvěmi tagy. Divím se, že mi to vůbec FF zobrazí.
</body>
</div> - Ukončený div, který nemá co ukončovat, máš v tom s prominutím docela guláš.
<style> - Neukončený, a má být uvnitř <head> - už jsem párkrát viděl ujinde, ale myslím že správně má být v <head>.
(background-color: #e7f2f6(pozadí přes celou obrzovku); color: #000000 (písmo)}
(poznámka: nekontroloval jsem každý znak)
Ještě doporučím udělat obal, páč když změnším okno, tak se stránka rozhází. A nejlépe určit min-width.
Jinak já vůbec absolutní pozicování moc rád nemám a procenta taktéž. Doporučuju zajít na jpw a najít <div><float><clear><body><style>
Jen tak naokraj - neznám tagy <float><clear>
Zřejmě jste měl na mysli CSS vlastnosti float a clear.
Díky za radu, jak říkam, učím se :)
Když se učíte, je sice dobré vědět k čemu je absolutní/relativní pozicování, ale nesmí se znásilňovat jako ve Vašem případě. Na takové weby nepoužívejte position:absolute;, tohle se dá krásně řešit pomocí divů s floaty, marginy, a jiné.
Děkuji za rady, ale porád nechápu, proč to je v google chrome a IE jiné ?
Protože každý z těch prohlížečů vykresluje věci jinak. Jak s oblibou píšu, jedny prohlížeče dělají například orámování ve stylu "obraz", kdy k prvku "přidají" rám a tím jej zvětší (když se např. rámují prvky).
Jiné prohlížeče zase berou prvek jako "pozemek" a když přidáš rám (jako třeba zeď u pozemku), nemůžeš to přeci postavit okolo pozemku a tím jej zvětšit. Pozemek musí být stále stejně velký, čili zeď 0,5 m musí být uvnitř a tím se zmenší vnitřní prostor.
Ještě doporučuji používat CSS reset (pozor na YUI 2 CSS reset ten je až moc drastický).
Co to je? Ve zkratce - každý browser dává elementům jako je p, div, em apod. základní vlastnosti, zejména padding a margin. Problém je v tom, že ty hodnoty dává každý browser jiné, CSS reset je stanovuje pro všechny stejné, tudíž se předejde problémům.
Myslím, že by mělo stačit:
* {
margin: 0;
padding: 0;
}
"*" znamená všechny prvky.
Hvězdičkový selektor nechutně vytíží prohlížeč. Opravdu doporučuji do souboru reset.css třeba překopírovat ten reset a linkovat na něj, dříve než na své hlavní CSS.
V prípade takého jednoduchého pravidla ten selektor vôbec nevyťaží prehliadač. Problémy s výkonom môžu nastať až pri zložitejších pravidlách.