Stránka 1 z 1
Problemy s ruznyma prohlizeci (CSS)
Napsal: úte 11. dub 2006, 17:04
od Nidzo
Mam vodorovne menu, s urcenou velikosti - 150x20px - 5x vedle sebe, s pozadim jako prechod (no proste aby to vytvorilo dojem tlacitka) a porad mi to blbne v IE6 (FF a Opera je ok)...
Kod stranky (uryvek):
Kód: Vybrat vše
<div class="upmenu">
<a href="" class="upmenu-item">Blog</a>
<a href="" class="upmenu-item">Galerie</a>
atd...
a v CSS mam na upmenu-item nastavene:
Kód: Vybrat vše
.upmenu-item:link, .upmenu-item:visited
{
background-image: url("./Images/upmenu.gif");
background-repeat: repeat-x;
border-right: 1px solid #989898;
color: #A00000;
display: table-cell;
font-size: 12px;
font-weight: bold;
height: 20px;
padding-top: 2px;
text-align: center;
text-decoration: none;
width: 150px;
}
Pokud dam display: block; tak se nahazou pod sebe...uz nevim co s tim, zkousel jsem snad vse, kdyz nekdo poradi budu vdecny...
Funkcni ukazka je na:
http://nidzo.aspweb.cz
EDIT: Jelikoz se mi rozmnozilo vice problemu, doslo k prejmenovani threadu.
Napsal: stř 12. dub 2006, 20:12
od k23
Jsi na dobré cestě, mrkni na tohle, vykuchej si z toho co potřebuješ, tohle funguje v IE/FF/Opeře.
Kód: Vybrat vše
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Browse</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Upload</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Rules</a></li>
</ul>
<div class="cleaner"> </div>
</div>
Kód: Vybrat vše
.menu {
width: 100%;
background-color: white;
border-bottom: 3px solid gray;
border-top: 3px solid orange;
}
.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.menu li {
float: left;
font-size: 12px;
text-align: center;
width: 6em;
margin-top: -3px;
margin-bottom: -4px;
_margin-bottom: -5px;
}
.menu a {
padding: 4px 0;
display: block;
width: 100%;
background: white;
text-decoration: none;
font-weight: bold;
color: black;
border-top: 3px solid orange;
border-bottom: 3px solid gray;
}
.menu a:hover {
background-color: #696969;
color: White;
}
.cleaner {
clear: both;
}
Napsal: stř 12. dub 2006, 20:47
od karf
nepomohla by tabulka?
btw: po různých úvahách na téma menu jsem vsadil na černou skříňku by xara a neni to špatný
www.karf.wz.cz
Napsal: stř 12. dub 2006, 22:57
od k23
karf píše:nepomohla by tabulka?
btw: po různých úvahách na téma menu jsem vsadil na černou skříňku by xara a neni to špatný
www.karf.wz.cz
Dělej jak myslíš, ale tímto způsobem nebudeš umět menu dělat nidky
Černé skříňky jsou fajn do doby, kdy to začne zlobit.
Nidzo je na dobré cestě, navíc nechtěl nějakej paskvil ale je moderní a chtěl CSS
Napsal: čtv 13. dub 2006, 19:52
od Nidzo
2k23: Thx, uz to zkousim nejak prekopat...
2karf: Nevim, v Xare jsem si delal menu pred 5 lety, kdyz mi to prislo hezky, ted nad tim radsi stravim chvili v Photoshopu a nad CSS...Tabulkou by to asi slo, ale nemam je rad
Kazdopadne diky...
Napsal: čtv 13. dub 2006, 21:20
od Nidzo
Tak uz sem vyresil jak to zobrazit vodorovne, ale ted mi to v IE dela pro zmenu jinou chybu
look:
http://nidzo.aspweb.cz/
EDIT: Vypoctene je to spravne, tento problem v IE zmizi kdyz nastavim sirku posledniho odkazu na 146px, jenze pak je tam 2px dira a vypada to osklive
Napsal: čtv 13. dub 2006, 23:21
od Nidzo
Mam to!
Oóóó, jak jsem stastny, po nekolikahodinovem trapeni jsem nakonec ze zoufalstvi za poslednim tlacitkem odradkoval (<br />) a najednou koukam, ono to funguje jak ma.
A to sem to tam puvodne napsal za ucelem, jestli mi to neco neprozradi...
Takze vysledny kod vypada takle (treba to nekomu v budoucnu ulehci praci):
Kód: Vybrat vše
<div class="upmenu">
<a href="" class="upmenu-item">Blog</a>
<a href="" class="upmenu-item">Galerie</a>
<a href="" class="upmenu-item">Portfolio</a>
<a href="" class="upmenu-item">Download</a>
<a href="" class="upmenu-item" style="width: 150px; border-right: none;">O mně</a><br />
</div>
CSS:
Kód: Vybrat vše
.upmenu
{
border-right: 1px solid #989898;
border-left: 1px solid #989898;
height: 20px;
margin: 0 auto;
text-align: center;
width: 750px;
}
.upmenu-item:link, .upmenu-item:visited
{
background-image: url("./Images/upmenu.gif");
background-repeat: repeat-x;
border-right: 1px solid #989898;
border-bottom: 1px solid #989898;
color: #A00000;
display: block;
float: left;
font-size: 12px;
font-weight: bold;
height: 18px;
padding-top: 2px;
text-align: center;
text-decoration: none;
width: 149px;
}
.upmenu-item:hover, .upmenu-item:active
{
background-image: url("./Images/upmenu-click.gif");
background-repeat: repeat-x;
color: #D00000;
}
Vsem moc dekuju. Doufam ze uz se dalsi problemy nevyskytnou
Napsal: ned 14. kvě 2006, 17:34
od Nidzo
Tak bohuzel ted se vyskytly...a to s Operou. V IE a FF to jede, v Opere nikoli. Kdyz se podivate pod logo a ten informacni "panylek", je tam 2px mezera a ta tam nema byt
Reseni znam, ze napisu u wrapperu margin-top: -2px; ale pote se to rozhodi v IE a FF...nejaky napady? Predem thx
EDIT:
link at nemusite zbytecne rolovat...
Napsal: ned 14. kvě 2006, 17:46
od Axis
Nidzo píše:Tak bohuzel ted se vyskytly...a to s Operou. V IE a FF to jede, v Opere nikoli. Kdyz se podivate pod logo a ten informacni "panylek", je tam 2px mezera a ta tam nema byt
Reseni znam, ze napisu u wrapperu margin-top: -2px; ale pote se to rozhodi v IE a FF...nejaky napady? Predem thx
EDIT:
link at nemusite zbytecne rolovat...
Mal som podobný problém, kde mi v IE a FF šlo dobre, a v Opere nie...
Musel som inak navrhnúť tabuľku... A použiť IE hack? Že by si spravil aby vo FF a v Opere šlo narovnako, a na IE by si si nastavil vlastnú hodnotu...
--
Ja viem veľmi všeobecná rada, ale mne pomohla
Napsal: ned 14. kvě 2006, 18:36
od Nidzo
2Axis: IE hack mi nic neresi, v IE to funguje paradne ale ta Opera zlobi...ono by to slo pres ASP.NET, ze bych pro Operu udelal specialni, ale nechce se mi kvuli 2px to resit takle slozite.
Navic tady je to opravdu jen zalezitost, kde je pouzit 4x <div>. div nahore (info), wrapper a uvnitr neho jeden nalevo (content) a napravo (menu). Urcite tam mam nejakou kravinu, kterou porad prehlizim...