| Autor | Zpráva | ||
|---|---|---|---|
| bjx Profil * |
#1 · Zasláno: 20. 6. 2006, 09:12:54
Zdravím, tak zas budu za vola :). Jako svoji první stránku jsem to pár hodinách snahy vyplodil níže uvedený kód (sorry za ten span, ale tohle ještě nemůžu hodit na web). Problém mám s použitím doctype. Četl jsem tady na webu samozřejmě kapitolu o optimalizaci pro jednotlivé prohlížeče, ale moc moudrý z toho nejsem :(. Pokud použiju níže uvedený kód v IE 6.0 bez jakéhokoliv doctype, jsem spokojen se vzhledem .. ale běda, když to otevřu v Mozille, příp. ve Firefoxu .. Zkoušel jsem různé doctype, i tu věc s moz-box-sizing, ale bez úspěchu .. Jak tedy psát kód, aby stránka fungovala tak jak má v IE i Mozille??? Dále bych uvítal jakékoliv poznámky ke kódu a designu stránek - vím, že na to tady je vlastní téma, ale nebudu to tady dávat 2x. Snažil jsem se o to, co začátečníkům vy zkušení vtloukáte do hlavy - tedy že nejde o super hi-tech přeplácáný design, ale hlavně o informace - vždyť html je především "publikační" jazyk .. Předem dík za konstruktivní kritiku. BJx
<head> <meta http-equiv="Content-Language" content="cs"/> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"/> <title>Moje stránky</title> <style type="text/css" media="all"> p {text-align: justify} body {margin:0; padding:0; background:#ffffff; text-align: center; font-family: verdana, sans-serif; font-size: 12;} #obalovydiv ul {margin: 0; padding: 0; list-style-type: none;} #obalovydiv a {display: block; color: #FFF; background-color: #036; width: 9em; padding: 3px 12px 3px 8px; text-decoration: none; border-bottom: 1px solid #fff; font-weight: bold;} #obalovydiv a:hover {background-color: #369; color: #FFF;} #obalovydiv li li a {display: block; color: #FFF; background-color: #69C; width: 9em; padding: 3px 3px 3px 8px; text-decoration: none; border-bottom: 1px solid #fff; font-weight: normal;} #hlavicka {padding: 10; border: 0.5px solid black; background: #69C;} #obsah {width: 750px; margin:1em auto; border: 1px solid black; text-align:left;} #levypanel {float: left; width: 120px; margin:0; padding:0; background: #ffffff;} #levypanel-obsah {margin:0; padding: 0.5em 1em;} #hlavnipanel {margin:0 0 0 120px; padding:0;} #hlavnipanel-obsah {margin:0; padding: 0.5em 1em;} hr.cleaner {clear:both; display: none} .textovy-odkaz {color: #FFF; background-color: #036; width: 9em; padding: 3px 12px 3px 8px; text-decoration: none; border-bottom: 1px solid #fff; font-weight: bold;} </style> </head> <body> <div id="obsah"> <div id="hlavicka"> <img src="logo.gif" alt="logo.gif" height="54" width="91" border="2" align="right"><br> <h3>Vítejte na mojí stránce</h3> </div> <hr class="cleaner" /> <div id="levypanel"> <div id="levypanel-obsah"> <div id="obalovydiv"> <ul> <li><a href="#">Úvod</a></li> </ul> <ul> <li><span class="textovy-odkaz">Kdo jsme</span> <ul> <li><a href="#">Něco o nás</a></li> <li><a href="#">Org. struktura</a></li> <li><a href="#">Stanovy</a></li> <li><a href="#">Lidé</a></li> </ul> </li> <li><a href="kontakt.htm">Kontakt </a> <li><span class="textovy-odkaz">Sekce</span> <ul> <li><a href="#">Informační</a></li> <li><a href="#">Hist.dopravy</a></li> <li><a href="#">Památková</a></li> </ul> </li> <li><a href="#">Články</a></li> <li><span class="textovy-odkaz">Katalogy</span> <ul> <li><a href="#">Vozidla</a></li> <li><a href="#">Památky</a></li> <li><a href="#">Publikace</a></li> </ul> </li> <li><span class="textovy-odkaz">Fotogalerie</span> <ul> <li><a href="#">Osobní auta</a></li> <li><a href="#">Nákladní auta</a></li> <li><a href="#">Trolejbusy</a></li> <li><a href="#">Tramvaje</a></li> <li><a href="#">Lokomotivy</a></li> <li><a href="#">Památky</a></li> <li><a href="#">Ostatní</a></li> </ul> <li><span class="textovy-odkaz">Download</span> <ul> <li><a href="#">Fotografie</a></li> <li><a href="#">Tapety</a></li> <li><a href="#">Plakáty</a></li> <li><a href="#">Dokumenty</a></li> </ul> <li><a href="#">Odkazy</a> <li><a href="#">Pro členy</a> <li><a href="#">Sponzoři</a> </div> </div> </div> <div id="hlavnipanel"> <div id="hlavnipanel-obsah"> <h4>Aktuality:</h4> <p><b>12.6.2006 - 26. ročník Veterán Tour Macocha</b></p> <img src="obr04.jpg" alt="obr04.jpg" height="75" width="100" border="2" align="left"> <p>Tato akce pořádaná zároveň jako Memoriál Mirko Řezníčka proběhla v sobotu 10. června. Od deváté hodiny ranní se na parkovišti na náměstí v Blansku "sráželi" veteránská vozidla všech věkových, váhových i národnostních kategorií. V půl jedenácté byl poté odstartován samotný závod do vrchu, který vedl spletitými cestičkami Moravského krasu až do Petrovic. Zde byl totiž ten nejlepší motivační cíl - oběd :). Spousta zajímavých a krásných vozidel, nějaký ten povedený snímek a šílená zima. Takto jsem akci vnímal bezprostředně po vyfocení posledního závodníka. Faktem ale zůstává, že tato akce patří již tradičně mezi ty velmi povedené .. </p> <a href="#">Celý článek+fotoreportáž</a><hr> <p><b>7.6.2006 - Navštívili jsme AUTOTEC 2006</b></p> <img src="obr05.jpg" alt="obr05.jpg" height="75" width="100" border="2" align="left"> <p>Společně s dalšími 69 tisíci návštěvníky jsme shlédli čtyřdenní výstavu užitkových vozidel na Brněnském výstavišti. Náš špacír tým se pochopitelně zaměřil na svoji "krevní skupinu" a tak se ve foreportáži můžete podívat například na kloubový trolejbus s "výzbrojí" Škoda a karosérií a la Citibus. V pavilonu H byla vystavena také histroická vozidla.</p> <a href="#">Celý článek+fotoreportáž</a><hr> <p><b>5.6.2006 - Dopravní nostalgie</b></p> <img src="obr06.jpg" alt="obr06.jpg" height="75" width="100" border="2" align="left"> <p>Jako část programu festivalu Ignis Brunensis mohli brňané kromě festivalu ohňostrojů obdivovat parní tramvaj Karolínu, brněnskou koňku nebo možnost povozit se historickými autobusy. Velkou měrou se na této akci podílelo Technické muzeum v Brně a zaslouží si za to bezesporu pochvalu - i když ta je směřována spíše tě, kteří mají zájem a snahu tyto historické krásy zachovat a jejich nelehkým údělem je, že jsou zaměstnanci TMB. Není to lehký úděl a proto Vám pánové skládám hlubokou poklonu.</p> <a href="#">Celý článek+fotoreportáž</a><hr> <span>Starší reportáže najdete v sekci</span> <a href="#">Články</a> </div> </div> <hr class="cleaner" /> </div> </div> </body> </html> |
||
| bjx Profil * |
#2 · Zasláno: 20. 6. 2006, 09:57:11
14 přístupů (1 je můj :)) a žádná rada? To je to fak tak blbý dotaz? BJx
|
||
| daneel Profil |
#3 · Zasláno: 20. 6. 2006, 11:09:02
Dále bych uvítal jakékoliv poznámky ke kódu a designu stránek
Design ti nikdo hodnotit nebude, ne každý má takovou představivost, aby ho ve zdrojáku viděl ;-) A dlouhý vložený zdroják ani nikdo číst nebude, založ si účet na webzdarma.cz a tam to hoď. Ale neodpustím si, používáš tam nadpisy h3 a h4, nebylo by vhodnější uvádět je tam od nejdůraznějšího, tedy h1 pro název strany, h2 pro nadpis "aktuality", h3 pro názvy článků,... Ten styl hoď do externího souboru, takhle by se stahoval při každém načtení. K těm rozdílům prohlížečů: chce to kontrolovat průběžně a uvidíš, čeho by ses měl vyvarovat. |
||
| bjx Profil * |
#4 · Zasláno: 20. 6. 2006, 11:31:27
Psal jsem, že to nebudu v tomhle stavu nebudu dávat na web, není snad takový problém Ctrl-C Ctrl-V, hodit to do Notepadu a pak to otevřít,ne?
|
||
| tiso Profil |
#5 · Zasláno: 20. 6. 2006, 11:48:26
bjx
Nie je to taký problém, ale ty niečo chceš, nie my... Takže pre to aby Ti niekto pomohol by si mu mal pomôcť čo najviac... Problém máš ten že používaš relatívne a obsahové jednotky ako sa Ti zachce a zrejme si nepochopil ako obísť rôzne box-modely cez matrijošku, lebo ju síce používaš, ale nie všade... |
||
| koudi Profil |
#6 · Zasláno: 20. 6. 2006, 11:49:04
bjx
není snad takový problém Ctrl-C Ctrl-V, hodit to do Notepadu a pak to otevřít,ne? Asi se budeš divit, ale je. Když chceš poradit a nedáš si ani minimální práci s tim, abys to někam hodil a každej si to moh rovnou prohlídnout, tak nečekej, že se někomu bude chtit se tim zabejvat. |
||
| bjx Profil * |
#7 · Zasláno: 20. 6. 2006, 12:34:53
Dobře, tady to je: http://bjx.xf.cz
to tiso: Dík za radu, ale právě proto jsem tady psal .. Matrijoška pro mě není taková "pohoda a jasná věc" jako pro tebe .. |
||
| tiso Profil |
#8 · Zasláno: 20. 6. 2006, 14:16:25
1. uprav si štruktúru menu - tie vnorené ul/li zoznamy treba ja nejako oddeliť, takto sa v tom každý okrem Teba stratí... Ešte k tomu niečo je odkaz niečo nie, tak si to zjednoť a rozdeľ, inšpiruj sa na nejakých stránkach s veľa pložkami v menu...
2. matrijoška a rôzne box-modely v skratke: pokiaľ blokovému prvku zadávaš width/height, nezadávaj mu border a padding v rovnakom smere... Takže vonkajšiemu prvku nastav width, vnútornému border a padding a máš po problémoch... Prejdi si prvky a porozmýšľaj kde potrebuješ ktorú vec nastaviť, prípadne nastavením iného pvku dosiahnuť rovnaký výsledok... Platí jednoduché pravidlo z praxe - pokiaľ prvku nepotrebuješ nastaviť border a background, tak miesto paddingu použi margin a nepotrebuješ matriošku... |
||
| bjx Profil * |
#9 · Zasláno: 20. 6. 2006, 14:48:17
2 tiso: Díky moc.
ad 1) je tohle lepší? Na http://bjx.xf.cz jsem nechal původní verzi .. ul> <li><a href="#">Úvod</a> <span class="textovy-odkaz">Kdo jsme</span> <a href="#">Něco o nás</a> <a href="#">Org. struktura</a> <a href="#">Stanovy</a> <a href="#">Lidé</a> <a href="kontakt.htm">Kontakt</a> <span class="textovy-odkaz">Sekce</span> <a href="#">Informační</a> <a href="#">Hist. dopravy</a> <a href="#">Památková</a> <a href="#">Články</a> <span class="textovy-odkaz">Katalogy</span> <a href="#">Vozidla</a> <a href="#">Památky</a> <a href="#">Publikace</a> <span class="textovy-odkaz">Fotogalerie</span> <a href="#">Osobní auta</a> <a href="#">Dopravní auta</a> <a href="#">Trolejbusy</a> <a href="#">Tramvaje</a> <a href="#">Lokomotivy</a> <a href="#">Památky</a> <a href="#">Ostatní</a> <span class="textovy-odkaz">Download</span> <a href="#">Fotografie</a> <a href="#">Tapety</a> <a href="#">Plakáty</a> <a href="#">Dokumenty</a> <a href="#">Odkazy</a> <a href="#">Pro členy</a> <a href="#">Sponzoři</a> </ul> ad 2) na tímhle se budu muset trochu zamyslet ... |
||
| tiso Profil |
#10 · Zasláno: 20. 6. 2006, 15:01:51
Nie je... načo tam máš to ul/li? skôr som myslel spraviť niečo ako
<h3>sekcia1</h3> <ul><li><a...>odkaz1-1</a></li> <li><a...>odkaz1-2</a></li> <li><a...>odkaz1-3</a></li></ul> <h3>sekcia2</h3> <ul><li><a...>odkaz2-1</a></li> <li><a...>odkaz2-2</a></li> <li><a...>odkaz2-3</a></li></ul> |
||
| bjx Profil * |
#11 · Zasláno: 21. 6. 2006, 09:29:34
2 tiso: No nevím, ale mě ta moje verze přijde přehlednější (a funguje ..). Asi se nad těma stránkama a kódem budu muset trochu víc zamyslet (studuju html + css po večerech asi týden), protože chci udělat solidní "kostru", abych potom neměl v budoucnu zbytečné problémy. Cílem je udělat poměrně obsáhlý web pro jedno historické sdružení, plánuje se hodně sekcí (články, reportáže, fotogalerie, fórum ..), tak asi nemá smysl to nějak uspěchat .. každopádně díky za rady a komentáře
|
||
| mata Profil |
#12 · Zasláno: 21. 6. 2006, 10:31:23
Vaše verze je sice přehlednější co se kódu týče, ale zkuste si vypnout v prohlížeči styly a pochopíte, proč je tisova verze lepší.
|
||
| krteczek Profil |
#13 · Zasláno: 21. 6. 2006, 13:14:47
bjx: použijte hotový redakční systém... pokud chcete vytvořit něco rozsáhlého je to asi nejlepší řešení... takhle sice vytvoříte nějaký vzhled, ale za chvilku se v struktuře a souborech na webu ztratíte... krteczek
|
||
| bjx Profil * |
#14 · Zasláno: 21. 6. 2006, 13:55:01
2 krteczek: Hotový redakční systém? To si mám jako najít podobný server a použít jeho kód? Nějaký vzhled - chceš říct, že ten co je tam momentálně není nic moc? Idea byla/je taková, že všechny stránky budou vypadat "stejně" - zůstane menu vlevo, jenom se bude měnit obsah a nadpis v hlavičce ..
|
||
|
Časová prodleva: 18 let
|
|||
Toto téma je uzamčeno. Odpověď nelze zaslat.
0