« 1 2 »
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
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
Já bych asi udělal div menu s css display: block; a pak spany s odkazy
Johny007
Profil
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
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 *
Teď narážíš na problém č.1,2,3? Já jen pro potvrzení ;-)
Kry5
Profil *
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 *
Johny: mimochodem: ve dvou z těch prohlížečů to už jde ;-)
Johny007
Profil
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
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 *
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
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
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
SwimX
Věřím, že panther mu to napíše :)
<mimo-téma>co, kde, jak, komu, za kolik</mimo-téma>?
Kry5
Profil *
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 *
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
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
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 *
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 *
panther: díky za tvojí včímavost ;-). Těch 150px už je opraveno.
2) zkusim to ráno... :-D
panther
Profil
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 *
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
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
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
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
:-D tak to se máš :-D já to holt budu řešit nesémanticky :-D hlavně že to chodí
panther
Profil
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
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ů
« 1 2 »

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: