| Autor | Zpráva | ||
|---|---|---|---|
| Kry5 Profil * |
Tak vás zase po poměrně krátké době zdravím, ;-)
dokončil jsem můj první web (tak buďte schovívaví) už teď sice vidím co bych pozměnil, ale nechávám si to na dobu až bude web kompatibilní s IE a Operou. A k tomu se právě chci dostat. V FF a Google Chrome běží web bez chybičky přesně tak jak si ho představuju. Ale pak je tu několik problémů s IE a Operou: Všechny problémy uvidíte na www.stmivani.kx.cz 1) Prohlížeč který zlobí: IE Problém: v levém menu se v IE vše vpravo ořezává. Předpokládám, že je to kvůli tomu, že menu "naráží" na neviditelnou tabulku ve které jsou umístěni články (je to stupidní, ale použil jsem to :-)). Ovšem v jiných prohlížečích to nedělá tak nevím. Samozřejmě by to asi vyřešilo posunout celé menu doleva, ale to se mi nechce kvůli rozvrhu webu. 2) Prohlížeč, který zlobí: IE Problém: Poslední položka v postraním menu má dlouhý text a IE ji "rozdělí" do dvou okének. OOvšem když na ní najedem myší (aktivuje se hover) vrátí se to zase jen do jednoho políčka. Samozřejmě bych chtěl aby se to celé zobrazovalo do jednoho políčka. 1,2: Kód k levému menu: HTML: <div id="menu2"> <ul> <li><a href="#">Stmívání</a></li> <li><a href="#">Nový Měsíc</a></li> <li><a href="#">Zatmění</a></li> <li><a href="#">Rozbřesk</a></li> <li><a href="#">Půlnoční Slunce</a></li> </ul> </div> CSS: #menu2 ul
{
text-align: center;
list-style-type: none;
padding-left: 30px;
position: absolute;
top: 250px;
left: 240px;
}
#menu2 ul li
{
display: block;
}
#menu2 ul li a
{
background-image: url(img/polozka2.png);
margin-bottom: 5px;
display: block;
text-decoration: none;
line-height: 30px;
text-align: center;
width: 110px;
height: 30px;
padding: 0 20px 0 0;
text-decoration: none;
font-weight: 600;
font-size: 12px;
color: #000;
}
#menu2 ul li a:hover
{
color: #C59B6C;
text-decoration: none;
background-color: #66411C;
font-weight: bold;
}3) Prohlížeč, který zlobí: IE, Opera Problém: jedná se o celkové posuny horního menu a zajíždění do loga (nebo také podjíždění v případě opery). Potřeboval bych aby se menu zobrazovalo ve stejné šířce jako logo a těsně pod ním (viz. web v FF nebo GCH). Kód k hornímu menu + logu: HTML: logo: <h1> Edward a Bella Cullens<span><a href="index.html" title="Zpět na úvodní stranu"></a></span> </h1> Horní menu: <div id="menu"> <ul> <li><a href="#">Stephania Meyer</a></li> <li><a href="#">Twilight knihy</a></li> <li><a href="#">Twilight film</a></li> <li><a href="#">Twilight povídky</a></li> </ul> </div> CSS: Logo: h1
{
margin: 0 auto;
padding: 0;
position: relative;
width: 900px;
height: 150px;
overflow: hidden;
clear: both;
text-align: center;
color: black;
}
h1 span
{
display: block;
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 900px;
height: 150px;
margin: 0;
padding: 0;
background-image: url(img/logo.png);
background-repeat: top left no-repeat;
}
h1 span a
{
display: block;
width: 900px;
height: 150px;
}Horní menu: #menu ul {
text-align: center;
list-style-type: none;
padding-left: 30px;
position: absolute;
top: 142px;
left: 232px;
}
#menu ul li {
display: block;
float: left;
}
#menu ul li a {
background: #A67C52;
display: block;
text-decoration: none;
line-height: 30px;
text-align:center;
width: 205px;
height: 30px;
padding: 0 20px 0 0;
text-decoration: none;
font-weight: 600;
font-size: 12px;
color: #000;
}
#menu ul li a:hover
{
color: #A67C52;
text-decoration: none;
background-color: #66411C;
font-weight: bold;
}To je asi tak vše. Nevím jestli se vám bude zobrazovat logo...ic.cz je holt pomalý...kdyžtak 3. problém vynechte dokud se to konečně neaktulizuje... PS: nevšímejte si grafiky loga...jen jsem tam něco plácnul ;-). Tisickrát děkuju za tolik ochoty pro takovou lamu jako jsem asi já :-D |
||
| Johny007 Profil |
#2 · Zasláno: 6. 3. 2009, 21:13:07 · Upravil/a: Johny007
Tak to jsem zvědavej co ti kdo poradí, s odrážkama jsou podle mýho problémy v různých prohlížečích největší. Než vychytávat css tak bych radši vymyslel něco bez odrážek :-D
|
||
| Johny007 Profil |
#3 · Zasláno: 6. 3. 2009, 21:16:03
Já bych asi udělal div menu s css display: block; a pak spany s odkazy
|
||
| Johny007 Profil |
#4 · Zasláno: 6. 3. 2009, 21:21:18
No prostě je to těma odrážkama, když je vymažeš ul dáš do pr.... a li nahradíš span tak by to mohlo zafungovat
|
||
| panther Profil |
#5 · Zasláno: 6. 3. 2009, 21:28:41
Johny007
„s odrážkama jsou podle mýho problémy v různých prohlížečích největší“ nepovídej, když nevíš, co povídáš.. „Než vychytávat css tak bych radši vymyslel něco bez odrážek :-D“ to není nejlepší způsob, jak řešit problémy. „Já bych asi udělal div menu s css display: block; a pak spany s odkazy“ A proč? Máme krásný tag „<menu>“, položky patří do „<li>“ „No prostě je to těma odrážkama“ tady je někdo chytrej. „když je vymažeš ul dáš do pr.... a li nahradíš span tak by to mohlo zafungovat“ nejen, že to nebude fungovat, ale ještě k tomu Kry5ovi radíš pozbít veškerou snahu a sémantický kód (sice do ideálu má daleko, ale je na dobré cestě) |
||
| Kry5 Profil * |
#6 · Zasláno: 6. 3. 2009, 21:29:20
Teď narážíš na problém č.1,2,3? Já jen pro potvrzení ;-)
|
||
| Kry5 Profil * |
#7 · Zasláno: 6. 3. 2009, 21:30:38
panther: odeslali jsme to najednou ;-).
Díky za podporu...mohl bys mi tedy poradit ty? Alespoň něco. Díky. |
||
| Johny007 Profil |
panther
no počkám si jak mu sémanticky přepíšes to css aby mu to chodilo v IE 5,5-8 , Mozile, Opeře, Safari i chromu :-D Fakt jsem upřímě zvědavej |
||
| Kry5 Profil * |
#9 · Zasláno: 6. 3. 2009, 21:38:02
Johny: mimochodem: ve dvou z těch prohlížečů to už jde ;-)
|
||
| Johny007 Profil |
#10 · Zasláno: 6. 3. 2009, 21:40:50
Alesamozřejmě vždycky to jde ve dvou a když to odsazení z leva změníš tak aby to šlo v těch druhejch dvou tak to přestane jít v těch prvních :-D to znám ale nevím jak to vychytat pro všechny pomocí odrážek s obrázkama v pozadí :-D
Nemyslím to zle fakt mě zajímá co ti poradí sémantik pak se podle toho taky zařídím. |
||
| panther Profil |
#11 · Zasláno: 6. 3. 2009, 21:42:13
Kry5
„Problém: jedná se o celkové posuny horního menu a zajíždění do loga (nebo také podjíždění v případě opery). Potřeboval bych aby se menu zobrazovalo ve stejné šířce jako logo a těsně pod ním (viz. web v FF nebo GCH). “ nevyřešilo by to přidání floatu k tomu menu? Btw. obrázek „logo.png“ není na serveru nahrán, proto se nezobrazuje. „2) Prohlížeč, který zlobí: IE Problém: Poslední položka v postraním menu má dlouhý text a IE ji "rozdělí" do dvou okének. OOvšem když na ní najedem myší (aktivuje se hover) vrátí se to zase jen do jednoho políčka. Samozřejmě bych chtěl aby se to celé zobrazovalo do jednoho políčka. “ menu je psáno tenčím, tedy i kratším písmem, zkrátka, vejde se na řádek. 2) a 3) nezkoumal jsem to moc podrobně, ale neuřezává ti to tam ten pravý padding: 30px? PS: pozicování všech prvků na stránce není nejlepším řešením porozhlédni se po floatovaných layoutech |
||
| Kry5 Profil * |
#12 · Zasláno: 6. 3. 2009, 21:42:22
jj. tak jsem si všiml toho n..ale neni to od tématu?
Jo v pohodě. To taky znám, ale co se týče kompatibility nejhůř mi to jde s IE...to mě doslova přivede do hrobu ;-) |
||
| SwimX Profil |
Johny007
Necituj celé příspěvky, to je čuňačina. Své příspěvky upravuj a nepiš 3pod sebe pokud to není nezbytné. A řiď se Pravidly IE 5.5 už dnes není zastoupené. Testovat má význam pouze pro IE6, 7 a 8 shodit do vykreslovacího režimu 7. Safari Chrome Opera a Firefox zobrazují hodně podobně, takže to nebude takový problém. Věřím, že panther mu to napíše :) Moderátor Mistr: Necituj celé příspěvky, to je čuňačina. - už jsem mu to opravil.
|
||
| panther Profil |
#14 · Zasláno: 6. 3. 2009, 21:43:46
Johny007
„Alesamozřejmě vždycky to jde ve dvou a když to odsazení z leva změníš tak aby to šlo v těch druhejch dvou tak to přestane jít v těch prvních :-D to znám ale nevím jak to vychytat pro všechny pomocí odrážek s obrázkama v pozadí :-D “ žádná taková samozřejmost není. Nebo myslíš, že žádný web nefunguje, resp. nezobrazuje se všude stejně? „Nemyslím to zle fakt mě zajímá co ti poradí sémantik pak se podle toho taky zařídím.“ tak ti radím projít si tenhle web, třeba tě něco zaujme |
||
| Johny007 Profil |
#15 · Zasláno: 6. 3. 2009, 21:45:07
Ono je to ale obráceně. Je to odsazením zleva. Pokud ho nastavíš nějak standardně tak to v IE funguje a v mozile a opeře a podobných to má to odsazení cca o5px menší a tím se to šoupe doleva. Ty sis to nastavil na mozilu a... a proto ti to nejde v IE
|
||
| panther Profil |
#16 · Zasláno: 6. 3. 2009, 21:45:27
SwimX
„Věřím, že panther mu to napíše :)“ <mimo-téma>co, kde, jak, komu, za kolik</mimo-téma>? |
||
| Kry5 Profil * |
#17 · Zasláno: 6. 3. 2009, 21:46:03
panther: já už teď taky nemám moc času.
Sry za to logo. Já měl dvě a nahrál jsem na web to druhý (logo2.png) a myslel jsem že v kódu mám uvedený logo2, ale bylo tam uvedený logo.png...teď už to jede. Zároveň s tim se zobrazuje problém "podjetí" horního menu i v FF (neni to náhodou tou pitomou lištou u ic.cz)? 2) Takže myslíš, že by stačilo dourčit písmo pro IE aby se to psalo stejnym jako jinde a klapalo by to? Tim by nám odpadával jeden problém :-D |
||
| Kry5 Profil * |
#18 · Zasláno: 6. 3. 2009, 21:48:04
Johny: aha řikal jsem si že v tom musí bejt nějakej problém s zobrazovánim px v IE ;-) Díky. ALe nevim jak to vyřešit... :-(
|
||
| panther Profil |
#19 · Zasláno: 6. 3. 2009, 21:49:34
Kry5
„Zároveň s tim se zobrazuje problém "podjetí" horního menu i v FF (neni to náhodou tou pitomou lištou u ic.cz)? “ Ano, také. Ale hlavně je to tím, že logo má na výšku nastaveno 150px; a „#menu ul“ má „top: 142px;“ „2) Takže myslíš, že by stačilo dourčit písmo pro IE aby se to psalo stejnym jako jinde a klapalo by to? Tim by nám odpadával jeden problém :-D“ Ne, to by nestačilo, to problém neřeší. Jak jsem řekl, jestli jsem se dobře podíval, ubral bych ten pravý padding: 20px u „menu2 ul li a“. |
||
| SwimX Profil |
#20 · Zasláno: 6. 3. 2009, 21:50:27
panther
„<mimo-téma>co, kde, jak, komu, za kolik</mimo-téma>?“ to byla reakce na: „no počkám si jak mu sémanticky přepíšes to css aby mu to chodilo v IE 5,5-8 , Mozile, Opeře, Safari i chromu :-D Fakt jsem upřímě zvědavej“ Chtěl jsem říct, že věřím, že bys to zvládl přepsat. A jelikož se nudím, tak to také zkusím, já ovšem nic nezaručuji. |
||
| Kry5 Profil * |
#21 · Zasláno: 6. 3. 2009, 21:52:31
SwimX, panther nebo kdokoli další...kdybyste potřebovali zbytek CSS souboru tak stačí napsat. HTML máte ve zdrojáku na www.stmivani.kx.cz ;-)
|
||
| Kry5 Profil * |
#22 · Zasláno: 6. 3. 2009, 21:54:10
panther: díky za tvojí včímavost ;-). Těch 150px už je opraveno.
2) zkusim to ráno... :-D |
||
| panther Profil |
#23 · Zasláno: 6. 3. 2009, 21:54:45
SwimX
„to byla reakce na: ...“ aha, toho příspěvku jsem si nevšiml :-) Johny007 [#8]„no počkám si jak mu sémanticky přepíšes to css aby mu to chodilo v IE 5,5-8 , Mozile, Opeře, Safari i chromu :-D Fakt jsem upřímě zvědavej“ takže: - nic přepisovat nebudu - nemám čas ani náladu - IE5.5 se může s klidem vynechávat pomalu - firefox, opera, safari, chrome = téměř shodné zobrazení - sémanticky se dá zapsat HTML, nikoliv CSS. Jestli jsi stále zvědavý, tak je mi to líto, ale zklamu tě ;-) |
||
| Kry5 Profil * |
#24 · Zasláno: 6. 3. 2009, 21:56:45
nastavil jsem těch 150px, ale pořád to trochu podjíždí (ale už to tolik nevadí) a nechci zbytečně přidávat px aby to zase něco nezničilo v jinym prohlížeči :-D
|
||
| panther Profil |
#25 · Zasláno: 6. 3. 2009, 21:59:50
Kry5
ještě něco: podívej se na stránku v jakékoliv rozlišení jiném, než jaké máš a pro které jsi to dělal - web se rozpadá (logo centrované, zbytek pozicovaný, tedy nejistý.) Pokud to nechceš celé předělávat, přidej do CSS: body {.... text-align: center;}
#main {
width: 900px;
position: relative;
margin: 0 auto;
text-align: left;
}
a u všeho pozicovaného uber „left“ u levého sloupce a u pravého ho příslušně sniž (vymaž to tvé „centrování“, které nefunguje a ani fungovat nemůže) |
||
| Johny007 Profil |
#26 · Zasláno: 6. 3. 2009, 22:00:27
Tak jsem se zase nic nedozvěděl :-D teda kromě té sémantiky a toho že IE 5,5 není zastoupenej. Ví teda někdo jak docílit stejného zobrazení odrážkovaného textu v IE verze xy a "mozila-like" prohlížečích???
|
||
| panther Profil |
#27 · Zasláno: 6. 3. 2009, 22:01:37
Johny007
„Ví teda někdo jak docílit stejného zobrazení odrážkovaného textu v IE verze xy a "mozila-like" prohlížečích???“ ano, třeba já a spousta dalších. |
||
| Johny007 Profil |
#28 · Zasláno: 6. 3. 2009, 22:03:41
:-D tak to se máš :-D já to holt budu řešit nesémanticky :-D hlavně že to chodí
|
||
| panther Profil |
#29 · Zasláno: 6. 3. 2009, 22:05:36 · Upravil/a: panther
Johny007
v CSS: menu li a {
background: url(obrazkova odrazka.jpg) left top no-repeat;
padding: 0 0 0 10px /* misto 10px si dosad hodnotu, o kterou chces text odkazu odsadit - aby nebyl pres obrazek na pozadi - odrazku */
...
} |
||
| SwimX Profil |
#30 · Zasláno: 6. 3. 2009, 22:21:42 · Upravil/a: SwimX
Kry5
Koukni na to: http://plavec.borec.cz/upfiles/diskuse/st.html + css testováno: Opera 9.63, Mozila 3.. IE6, IE7, IE8b1(jinou nemám) a teď i IE5 - všude stejně. A jelikož se pořád nudím, tak klidně napiš sem nebo na icq: 345369426 a doladíme úpravy. Johny007 „:-D tak to se máš :-D já to holt budu řešit nesémanticky :-D hlavně že to chodí“ a proto budeš mít málo zákazníků |
||
|
Téma pokračuje na další straně.
|
|||
0