Skládání webu pomocí CSS (z obrázků) – CSS – Fórum – Programujte.com

Ahoj,

jak poskládat web, který tvoří obrázky :) ? myslim jako na pozadí divů apod ? jak je to nejlepší a jak se hned od začátku vyvarovat chybám aby se mi zobrzaovalo správně v IE,FF,Opeře ?


Díky

To Michalek : teď jsem tě moc nepochopil... máš nějaký design třeba v .psd a chceš ho nakódovat? potom rozřezat a kódit a kódit :-)

To Mautinek : Já se spíš obávám, že má "obrázkový web", a má ho rozřezanej na menší díly

Jj, přesně! Rozřezat a pak kodovat, kodovat, kodovat... ; )

Osobně si vytvořenou grafiku vždycky rozvrhnu na určité části, které mají zůstat neměnné a které se použíjí jako spacer (obrázek na pozadí který se opakuje, např. na programujte.com je to obrázek na pozadí co kopíruje podle osy x). Jednotlivým takto zvoleným částem grafiky pak vyberu příslušnou kvalitu a formát do kterého se mají exportovat (gif|png|jpg).

Když je grafika nařezaná, začnu kódovat základní oddíly stránky (záhlaví, menu, obsah, panel, patičku, pozadí). To může být celkem fuška, ale po netu je naštěstí spousta článků s popisem technik jak vytvořit css layout který potřebuješ ;-) Obrázky co slouží jen k designu nechám načíst přes css (ne přes img tag) a nastavím jim umístění, opakování, odsazení, atd. Pak doladím detaily s typografií, odsazením bloků a formátováním hlavního textu.

Docela mi pomáhá začít vytvářet html šablonu nejdříve pro Firefox a pak postupně kontrolovat a odlaďovat skoro-hotový kód v IE, Opeře, Safari. Mouchy u jednotlivých prohlížečů se dají většinou vychytat buď css hackama nebo v případě IE můžeš opravy vložit třeba jako další css v podmíněném komentáři.

Taky, když použiješ rovnou xhtml strict 1.0 pár starších chyb z IE se už neobjeví.

Snad to trochu pomůže. Hlavně trpělivost při kodovaní a následném ladění... ;-)

To Ondra Macoszek : přesně tohle jsem myslel , už něco mám a docela je to dobrý :) funguej to ve všech stejně jenže tedka potřebuju udělat na každe straně okraj aby nepřetékal text aby to fungovalo na obou stranách ? určitě se na to někdo ptal, ale hledal jsem na foru a nic (tak me nekamenujte ;) )

Díky

To Michalek :

Nejsem si jistý, co tím přesně myslíš. Okraje se nastavují nastavují v margin/padding, to ale určitě víš. ; )

Přetékání se objevuje když má blokový element (p, div,...) nastavenou pevnou šířku, popř. výšku a overflow: auto. Když změníš výšku/šířku na procenta nebo auto, mělo by to vyřešit. Text přetéká taky v případě jednolitého šíleně dlouhého "slova". (tohle pohodově řeší Texy! , další info ještě třeba tady http://www.jakpsatweb.cz/clanky/fosilie-wbr.html)

Možná se bude hodit i tohle: http://blog.html.it/layoutgala/ Tuším že něco podobného možná vyšlo i jako seriál na intervalu...

http://svk.virtual-reality.cz/penguin/penguin-menu1/index.php?page=data/stranka/uvod

To Michalek : Já menu vidim.

Uvod Piloti Kontakt Flotila Testpage chybova stranka

Zobrazují se jinak v IE a jinak v Opeře viď?
Zkus se úplně obejít bez float...mám na mysli ten float DIV#nav
Stejně to máš přeDIVované

Jestli to má být vycentrované, zkus tohle (omluv případný sek, netestováno)

<div id="menu">

     <ul id="nav">

        <li><a ....../a></li>

        <li><a ....../a></li>

     </ul>

</div>

======================================================

* {margin:0;padding:0}



ul#nav {

width:100%; 

text-align: center;

font: bold 15px/23px san-serif;  /* fontSize= AA= 15px  height(ul)= BB= 23px */

}



ul#nav li {

list-style-type: none;

display: inline;

}



ul#nav a, ul#nav a:link, ul#nav a:visited  {

padding: 4px 3px;        /* (BB-AA)/2 = (23-15)/2 = 4 ...horní a dolní výplně*/

text-decoration: none;

color: ......;

}

ul#nav a:hover {....}

díky PETROFF ale nějak to nemaká v IE :( http://svk.virtual-reality.cz/penguin/penguin-menu1/

Protože jsi opsal css správně (aspoň doufám), ale xhtml není v pořádku.

<div id="menu">

			<ul id="nav">



			<ul>

				<li><a href="index.php?page=data/stranka/uvod">Uvod</a></li>

				<li><a href="index.php?page=data/stranka/piloti">Piloti</a></li>

				<li><a href="index.php?page=data/stranka/kontakt">Kontakt</a></li>

				<li><a href="index.php?page=data/stranka/flotila">Flotila</a></li>

				<li><a href="index.php?page=data/stranka/testpage">Testpage</a></li>



				<li><a href="index.php?page=data/stranka/cby">chybova stranka</a></li>

</ul>			</ul>

		</div>

<div id="menu">

	<ul id="nav">

		<li><a href="index.php?page=data/stranka/uvod">Uvod</a></li>

		<li><a href="index.php?page=data/stranka/piloti">Piloti</a></li>

		<li><a href="index.php?page=data/stranka/kontakt">Kontakt</a></li>

		<li><a href="index.php?page=data/stranka/flotila">Flotila</a></li>

		<li><a href="index.php?page=data/stranka/testpage">Testpage</a></li>

		<li><a href="index.php?page=data/stranka/cby">chybova stranka</a></li>

	</ul>

</div>

To Petroff : nefunguje to jak má :(, veřešil jsem to, že to nebudu používat

Momentálně zkouším jak udělat aby "DIV" byl "přilepenej" vpravo, ale nějak se mi nedaří, používám "text-align:right;" ale text je uplně u kraje prohlížeče :(

http://svk.virtual-reality.cz/web/penguin%2Dmenu1/index.php?page=data/stranka/flotila

už je vyřešeno :)

To jsem rád.
Jinak ten návrh co jsem ti poslal se zobrazuje přesně shodně v Opeře, FF, IE7 a IE6 - takže se příště raději přesvěč.
Tady si to můžeš ověřit: http://exstream.atlasweb.cz/pingwin_menu/menu.html

díky uložim si to zvážim ještě použití,

http://svk.virtual-reality.cz/web/penguin%2Dmenu1/index.php?page=data/stranka/cby

Asi myslíš H3
Pokud chceš mít perfektně shodnou výšku nadpisu i písmo, tak si ho dej do stylu nadpisu (takhle si můžeš ponastavovat všechny typy nadpisů které používáš):
h3 { height: 20px; font: bold 16.4px/1.2 Helvetica,"Trebuchet MS",sans-serif; }
Pak napiš jestli to pomohlo (existuje ještě 2.možná příčina různého vzhledu)
Hele - na adresu stránky nepoužívej tlačítko "kód" (to je na zdrojový text) ale ten "řetízek"=vložit odkaz. Ať je to klikací
petr

Petroff napsal:
Asi myslíš H3
Pokud chceš mít perfektně shodnou výšku nadpisu i písmo, tak si ho dej do stylu nadpisu (takhle si můžeš ponastavovat všechny typy nadpisů které používáš):
h3 { height: 20px; font: bold 16.4px/1.2 Helvetica,"Trebuchet MS",sans-serif; }
Pak napiš jestli to pomohlo (existuje ještě 2.možná příčina různého vzhledu)
Hele - na adresu stránky nepoužívej tlačítko "kód" (to je na zdrojový text) ale ten "řetízek"=vložit odkaz. Ať je to klikací
petr