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 :)
Nekoukal jsem na to moc, ale mám jednu radu. U takového jednoduchého webu, zapomeňte na position:absolute; a použijte CSS styly.
Hledal jsem na netu jak to udělat, ale jak jinak mám udělat :D aby obrázek, nebo text byl např 10% od levého kraje a 20% od horního kraje.. ?
V CSS:
Jak říkám, úplně zapomeňte, že existuje position:absolute;. Na takovém jednoduchém webu je to úplně zbytečné. Absolutní pozicování by se mělo používat pouze tam, kde je opravdu nezbytně nutné - třeba jaký vysouvací prvek, který překrývá jiné.
Díky
<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>
Díky za radu
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 :)
On měl namysli mojí chybu.
Float a clear jsou CSS vlastnosti a nemají <>(jak jsem napsal výše). Jinak více na: JPW-CSS
Ale souhlasím, také bych absolutní pozicávní zahodil do koše. Zkus si zmenšit okno, a to že to okno pořád považuji za dost veliké. Nebo zkus "crtl" + "-" ...
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.
Co znamená to ,,obal,, ?
Obal = wrapper.
<div>, který je nadostatními prvky. Prvky uvnitř pak umisťuješ vůči obalu, ne celé stránce.
Reakce na předchozí:
Každý prohlížeč vykresluje trošičku jinak, není na tom bohužel co k chápání, s tím nic neuděláš.
Uvidíš, že především s IE zažiješ chvilky zábavy.(natož starší verze a podpora css).
Ale spíše než řešení tohoto, Ti doporučuju: Trejpův návod
Máš to tam bez obalu, bez pozicování(mnohdy je zbytečný, já ho zmínil vzhledem k Tvému pozicování), krásně přehledně.
Děkuji ! :)
Abych Tě nemátl, obal tam je ve formě: <div id="vse">
Jinak určitě všechno je probráno diskusi.jakpsatweb, tak zkus pátrat před položením dotazů i tam.
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.