FF2 vs FF1 vs IE – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

FF2 vs FF1 vs IE – CSS – Fórum – Programujte.comFF2 vs FF1 vs IE – CSS – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
Milan0
Stálý člen
7. 2. 2007   #1
-
0
-

Pri tvorbe stranky som chcel vyskusat metodu vyhradne prostrednictvom div a css. avsak narazil som na problem hned pri zaciatku.. Zatial na nej nic nie je ale hodil som ju na svoju staru stranku aby ste si to mohli pozriet http://www.morb.pacienti.sk. Na Firefox 2.0.0.1 sa mi to zobrazuje ako chcem. Na FF 1.0.3 je to uz ale ine a na IE este horsie. Poradte prosim..dik
Kod - default.css

body{

background: url("bg_body.gif")repeat-x 0px 55px;
background-color:#3f3f3f;
margin: 0;
padding-top: 5px;
}
#container {
margin: 0 auto;
padding: 0;
position: relative;
width: 800px;
text-align: left;
}
#top{
background: url("top.gif") no-repeat;
width: 800px;
height: 50px;
}
#logo{
background: url("mid.gif") no-repeat;
width: 800px;
height: 186px;
}
.invisible{ display:none; visibility:hidden;}

#navlist {
margin: 0;
width: 800px;
height: 30px;
list-style: none;
padding: 20px 0 0 375px;
}
#navlist li {
list-style-type: none;
display: inline;
margin: 0;
padding: 0;
}

#navlist li a {
text-decoration: none;
float: left;
height: 30px;
overflow: hidden;
padding-left: 5px;
}
#navlist li a span{ visibility:hidden;}
#about{ width: 98px; height: 30px; background: url("about.gif") no-repeat; }
#about:hover{ background: url("about_hover.gif") no-repeat; }
#about:active, #about:focus, #about #active { background: url("about_hover.gif") no-repeat; }

index.htm
<body>

<div id="container">
<div id="top"><h1 class="invisible">Top</h1>
<ul id="navlist">
<li><a id="about" href="#"><span>About me</span></a></li>
<li><a id="about" href="#"><span>About me</span></a></li>
<li><a id="about" href="#"><span>About me</span></a></li>
<li><a id="about" href="#"><span>About me</span></a></li>
</ul>
</div>
<div id="logo"><h1 class="invisible">Logo</h1></div>
</div>
</body>

Nahlásit jako SPAM
IP: ...–
www.milankohut.com
Reklama
Reklama
Martin0
Návštěvník
7. 2. 2007   #2
-
0
-

Nejsem si jisty, co je konkretne spatne, ale v IE mas layout zarovnany doleva => zkus pridat do CSS k body { text-align: center; }

Nahlásit jako SPAM
IP: ...–
Milan0
Stálý člen
7. 2. 2007   #3
-
0
-

To nickJartin: skusal som to ale nefachalo mi to.. v IE sa mi nechcel zobrazovat ani background ale to som tiez upravil.. v IE sa mi nepaci ze tie tlacitka este nejak zvlastne blikaju ked na ne prechadzam.. vo FF1.0.3 ak kliknem na tlacitko tak sa mi cely container nejak posunie dolava a potom spat...neviem no.. vo FF2 to fici ako ma... aj v opere.. akurat ze tu nefunguje nejak :hover tusim...

Nahlásit jako SPAM
IP: ...–
www.milankohut.com
Martin0
Návštěvník
7. 2. 2007   #4
-
0
-

To mORb:
tak jsem se na to mrknul a vytvoril toto (i s komentarem):



body {
background: url("bg_body.gif") repeat-x 0px 55px; /* chybela mezera pred repeat-x */
background-color: #3f3f3f;
margin: 0;
padding-top: 5px;
text-align: center;
}
#container {
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
width: 800px;
text-align: left;
}
#top{
background: url("top.gif") no-repeat;
width: 800px;
height: 50px;
position: relative;
}
#logo{
background: url("mid.gif") no-repeat;
width: 800px;
height: 186px;
}
.invisible{ display:none; visibility:hidden;}

/* ten padding 375px nahrazeno za absolutni pozici.. nevim IE to nejak vadilo */
#navlist {
margin: 0;
height: 30px;
list-style: none;
/*padding: 20px 0 0 375px;*/
text-align: right;
position: absolute;
top: 20px;
left: 375px;
}
#navlist li {
list-style-type: none;
display: inline;
margin: 0;
padding: 0;
}
#navlist li a {
text-decoration: none;
padding-left: 5px;
}
#navlist li a span{ display: none;}

/* mensi zmeny, ktere nejspis nemaji na nic vliv ;-) */
a#about:active, a#about:link, a#about:visited {
width: 98px;
height: 30px;
float: left;
background: url("about.gif") no-repeat;
}
a#about:hover{
background: url("about_hover.gif") no-repeat;
}

kdyztak si to douprav dle libosti.. melo by to resit problem s layoutem stranky.. bohuzel to "problikavani" se mi vyresit nepodarilo (taky by me zajimalo cim by to mmohlo byt)

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

Jeste k tomu problikavani.. pokazde kdyz najedu nad ten odkaz tak se mi ten obrazek znovu stahne, coz chvili trva => odkaz problikne... Zkusil jsem preload obrazku, ale nepomohlo to, takze uz nevim :-(

Nahlásit jako SPAM
IP: ...–
olgo0
Věrný člen
8. 2. 2007   #6
-
0
-

nickJartin píše:#
# Jeste k tomu problikavani.. pokazde kdyz najedu nad ten odkaz tak se mi ten obrazek znovu stahne, coz chvili trva => odkaz problikne... Zkusil jsem preload obrazku, ale nepomohlo to, takze uz nevim :-(


http://www.jakpsatweb.cz/odkazy.html#menici

Nahlásit jako SPAM
IP: ...–
"Boze, dopraj mi, prosim ta, petdesiat rokov prace a zabavy, a potom nahlu smrt v spanku." J. Grisham
Milan0
Stálý člen
10. 2. 2007   #7
-
0
-

To olgo: vyskusal som vselico mozne ale stale to nejako preblikava. v style mam definovane <a id="about" takto:

#about{ width: 103px; height: 30px; background: url("images/about.gif") no-repeat; }

#about:hover{ background: url("images/about_hover.gif") no-repeat; }

vyskusal som aj preload ale stale to nejako nejde.. na mojom kompe to na IE ide v poho ale akonahle to hodim na net a IEckom to pozriem tam tak to preblikava.. a pomocou JS (onmouseover, onmouseout) by som to riesit nechcel..

Nahlásit jako SPAM
IP: ...–
www.milankohut.com
Milan0
Stálý člen
10. 2. 2007   #8
-
0
-

tak nakoniec som to spravil pomocou onmouseover a onmouseout.. uz to tak nepreblikava ale stale to nie je to prave orechove.. ale aj tak by ma zaujimalo preco to jende tym hoverom.. ja to kodujem podla vzoru jednej stranky (kde to ficalo v poho) a snazim sa pochopit ako to funguje pretoze predtym som css moc nepouzival a layout bol pomocou tabuliek..

Nahlásit jako SPAM
IP: ...–
www.milankohut.com
olgo0
Věrný člen
12. 2. 2007   #9
-
0
-

To mORb: keby sis to precital tak ti o funguje.
pr.:
takto ma vyzerat obrazok (obydva stavy v jednom obrazku)
http://www.7591.wz.cz/textures/button_main.png
a potom ich len posunes



.main{
width: 68px;
height: 25px; /*polovica vysky obrazku*/
background: #000000 url(textures/button_main.png) 0px 0px; /*zobraz vrchnu polovicu*/
}
.main:hover{
background-position: 0px 25px; /*posun na spodnu polovicu*/
}

Nahlásit jako SPAM
IP: ...–
"Boze, dopraj mi, prosim ta, petdesiat rokov prace a zabavy, a potom nahlu smrt v spanku." J. Grisham
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, 9 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ý