Skládání webu pomocí CSS (z obrázků) – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

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

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
Michalek0
Návštěvník
30. 10. 2007   #1
-
0
-

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

Nahlásit jako SPAM
IP: 213.29.24.–
Michalek http://dragon.profitux.cz/images/smajlici/ilovewindows.gif
Reklama
Reklama
Mautinek
~ Redaktor
0
Grafoman
1. 11. 2007   #2
-
0
-

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 :-)

Nahlásit jako SPAM
IP: 213.211.37.–
Programujte.com redaktor
Sleduj mě na @MartinSimko
JMM
~ Redaktor
0
Grafoman
1. 11. 2007   #3
-
0
-

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

Nahlásit jako SPAM
IP: 85.71.16.–
Jan Malý | web: www.malyphoto.cz, @malyphoto
Ondra Macoszek
~ Anonymní uživatel
2 příspěvky
1. 11. 2007   #4
-
0
-

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í... ;-)

Nahlásit jako SPAM
IP: 85.160.204.–
Michalek0
Návštěvník
2. 11. 2007   #5
-
0
-

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

Nahlásit jako SPAM
IP: 213.29.24.–
Michalek http://dragon.profitux.cz/images/smajlici/ilovewindows.gif
Ondra Macoszek
~ Anonymní uživatel
2 příspěvky
4. 11. 2007   #6
-
0
-

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...

Nahlásit jako SPAM
IP: 85.160.199.–
Michalek0
Návštěvník
10. 11. 2007   #7
-
0
-

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


trochu jsem pokročil, ale menu se mi nezobrazuje, můžete se mi na to mrknout :) ? Díky

Nahlásit jako SPAM
IP: 213.29.24.–
Michalek http://dragon.profitux.cz/images/smajlici/ilovewindows.gif
mates0
Grafoman
10. 11. 2007   #8
-
0
-

To Michalek : Já menu vidim.

Uvod Piloti Kontakt Flotila Testpage chybova stranka

Nahlásit jako SPAM
IP: 85.207.161.–
Petroff0
Věrný člen
10. 11. 2007   #9
-
0
-

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 {....}

Jinak třída s barvou je .menubarva{color:xxxx} a ne identifikátor #xxxxx

Nahlásit jako SPAM
IP: 89.102.211.–
Michalek0
Návštěvník
11. 11. 2007   #10
-
0
-
Nahlásit jako SPAM
IP: 213.29.24.–
Michalek http://dragon.profitux.cz/images/smajlici/ilovewindows.gif
Petroff0
Věrný člen
11. 11. 2007   #11
-
0
-

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>

Tam nemá být 2x <UL>
Má to být takhle:


<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>

A teď k css:
vypadlo ti p v slově padding
Myslím že je hezčí zvětšit úměrně i vodorovné výplně, aspoň takto (klidně i víc) : padding: 4px 6px;

* {margin:0;padding:0} se dává na úplný začátek stylů => prostě se vynulují hodnoty okrajů (které některým HTML prvkům nastavují prohlížeče, často každý jinak). No a po vynulování je to ve všech stejné. Jen si nesmíš vynulovat svoje vlastní úpravy marg(padd)inů ....proto to umístění jako 1.pravidlo

Nahlásit jako SPAM
IP: 89.102.211.–
Michalek0
Návštěvník
11. 11. 2007   #12
-
0
-

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

Nahlásit jako SPAM
IP: 213.29.24.–
Michalek http://dragon.profitux.cz/images/smajlici/ilovewindows.gif
Michalek0
Návštěvník
11. 11. 2007   #13
-
0
-

už je vyřešeno :)

Nahlásit jako SPAM
IP: 213.29.24.–
Michalek http://dragon.profitux.cz/images/smajlici/ilovewindows.gif
Petroff0
Věrný člen
11. 11. 2007   #14
-
0
-
Nahlásit jako SPAM
IP: 89.102.211.–
Michalek0
Návštěvník
11. 11. 2007   #15
-
0
-

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


jak udělat u tohodle, aby když dám H2 aby nebyla velká mezera v OPERE ? v IE A FF se to jakštak zobrazuej jak potřebuju ;)

Nahlásit jako SPAM
IP: 213.29.24.–
Michalek http://dragon.profitux.cz/images/smajlici/ilovewindows.gif
Petroff0
Věrný člen
12. 11. 2007   #16
-
0
-

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

Nahlásit jako SPAM
IP: 89.102.211.–
Michalek0
Návštěvník
13. 11. 2007   #17
-
0
-

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

jdu to zkusit

Nahlásit jako SPAM
IP: 213.29.24.–
Michalek http://dragon.profitux.cz/images/smajlici/ilovewindows.gif
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 4 hosté

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý