Autor Zpráva
Hampy
Profil
#1 · Zasláno: 28. 7. 2005, 21:56:39 · Upravil/a: Moderátor (editace znemožněna)
Odpovědět Citovat
Ahoj všem, chtěl bych požádat o radu - stránka http://www.oktavabe.wz.cz se mi v IE zobrazí správně (nevšímejte si drobných nesrovnalostí, je to ve vývoji), ale ve Firefoxu je to divně rozhozené. Můžete mi někdo poradit? Přikládám HTML a CSS kód:


HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD html 4.0 Transitional//EN">

<html>

<head>
<META NAME="description" CONTENT="oktavabe">
<META NAME="keywords" CONTENT="oktavabe">
<META NAME="author" CONTENT="Ondřej Hampejs">
<META http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Oktáva bé</title>
<link rel="stylesheet" type="text/css" href="styl.css">
</head>

<body>
<div id="obsah">
<div id="hlavicka">
<a href="index.htm">
<div id="hlavicka-obsah">
</div>
</a>
</div>

<hr class="cleaner" />

<div class="levypanelhorni" onMouseOver="this.className='levypanelhorni-aktivni'" onMouseOut="this.className='levypanelhorni'">
<A HREF="index.htm">
<div id="levypanelhorni-obsah">
</div>
</A>
</div>

<div id="hornilista">
<div id="hornilista-obsah">
Ahoj
</div>
</div>



<div id="levypaneldolni">
<div id="levypaneldolni-obsah">


<div class="tlacitko" onMouseOver="this.className='tlacitko-aktivni'" onMouseOut="this.className='tlacitko'">
<div id="tlacitko-obsah"><A HREF="necoonas.htm" ID="odkaz-v-menu">třída</A>
</div>
</div>

<div class="tlacitko" onMouseOver="this.className='tlacitko-aktivni'" onMouseOut="this.className='tlacitko'">
<div id="tlacitko-obsah"><A HREF="necoonas.htm" ID="odkaz-v-menu">profesoři</A>
</div>
</div>

<div class="tlacitko" onMouseOver="this.className='tlacitko-aktivni'" onMouseOut="this.className='tlacitko'">
<div id="tlacitko-obsah"><A HREF="necoonas.htm" ID="odkaz-v-menu">nástěnka</A>
</div>
</div>

<div class="tlacitko" onMouseOver="this.className='tlacitko-aktivni'" onMouseOut="this.className='tlacitko'">
<div id="tlacitko-obsah"><A HREF="necoonas.htm" ID="odkaz-v-menu">akce</A>
</div>
</div>

<div class="tlacitko" onMouseOver="this.className='tlacitko-aktivni'" onMouseOut="this.className='tlacitko'">
<div id="tlacitko-obsah"><A HREF="necoonas.htm" ID="odkaz-v-menu">galerie</A>
</div>
</div>

<div class="tlacitko" onMouseOver="this.className='tlacitko-aktivni'" onMouseOut="this.className='tlacitko'">
<div id="tlacitko-obsah"><A HREF="necoonas.htm" ID="odkaz-v-menu">diskuse</A>
</div>
</div>

<div class="tlacitko" onMouseOver="this.className='tlacitko-aktivni'" onMouseOut="this.className='tlacitko'">
<div id="tlacitko-obsah"><A HREF="necoonas.htm" ID="odkaz-v-menu">hlášky</A>
</div>
</div>

<div class="tlacitko" onMouseOver="this.className='tlacitko-aktivni'" onMouseOut="this.className='tlacitko'">
<div id="tlacitko-obsah"><A HREF="necoonas.htm" ID="odkaz-v-menu">maturák</A>
</div>
</div>

<div class="tlacitko" onMouseOver="this.className='tlacitko-aktivni'" onMouseOut="this.className='tlacitko'">
<div id="tlacitko-obsah"><A HREF="necoonas.htm" ID="odkaz-v-menu">užitečné</A>
</div>
</div>

</div>
</div>

<div id="hlavnipanel">
<div id="hlavnipanel-obsah">
Ahoj lidičky jak se máte? Ahoj lidičky jak se máte? Ahoj lidičky jak se máte? Ahoj lidičky jak se máte? Ahoj lidičky jak se máte? Ahoj lidičky jak se máte? Ahoj lidičky jak se máte? Ahoj lidičky jak se máte? Ahoj lidičky jak se máte? Ahoj lidičky jak se máte? Ahoj lidičky jak se máte? Ahoj lidičky jak se máte? Ahoj lidičky jak se máte? Ahoj lidičky jak se máte? Ahoj lidičky jak se máte? Ahoj lidičky jak se máte? Ahoj lidičky jak se máte? Ahoj lidičky jak se máte? Ahoj lidičky jak se máte? Ahoj lidičky jak se máte? Ahoj lidičky jak se máte? Ahoj lidičky jak se máte? Ahoj lidičky jak se máte? Ahoj lidičky jak se máte? Ahoj lidičky jak se máte? Ahoj lidičky jak se máte? Ahoj lidičky jak se máte? Ahoj lidičky jak se máte? Ahoj lidičky jak se máte? Ahoj lidičky jak se máte? Ahoj lidičky jak se máte? Ahoj lidičky jak se máte? Ahoj lidičky jak se máte? Ahoj lidičky jak se máte? Ahoj lidičky jak se máte? Ahoj lidičky jak se máte? Ahoj lidičky jak se máte? Ahoj lidičky jak se máte? Ahoj lidičky jak se máte? Ahoj lidičky jak se máte?
</div>
</div>

<hr class="cleaner" />

<div id="paticka"><div id="paticka-obsah">
Counter: 256 on-line: 2
</div>
</div>

</div>

</body>
</html>




CSS

body
{
margin:0;
padding:0;
text-align:center;
background-color: #86848A;
font-size: 12px;
font-family: Verdana, Tahoma, Arial;
color: #FFF;
}

#obsah
{
width: 704px;
margin-top: 2em;
margin-bottom: 2em;
margin-left: auto;
margin-right: auto;
padding: 0em;
border:0px;
text-align: left;
}

#hlavicka
{
padding: 0;
border: 0px;
background:url("obrazky/hlavicka.JPG") 0 0 no-repeat;
height: 68 px;
width: 704px;
}

#hlavicka-obsah
{
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
display: block;
width: 704px;
height: 68px;
cursor: hand;
}


.levypanelhorni
{
float: left;
width: 127px;
height: 48px;
margin:0;
padding:0;
background:url("obrazky/logo.JPG") 0 0 no-repeat;
}


.levypanelhorni-aktivni
{
float: left;
width: 127px;
height: 48px;
margin:0;
padding:0;
background:url("obrazky/logo-aktivni.JPG") 0 0 no-repeat;
}


#levypanelhorni-obsah
{
width: 127px;
height: 48px;
margin:0;
padding:0;
cursor:hand;
}

#hornilista
{
float: left;
margin:0;
padding:0;
background:url("obrazky/hornilista.JPG") 0 0 no-repeat;
height: 48px;
width: 577px;
}

#hornilista-obsah
{
margin-top: 24px;
margin-right: 5px;
padding:0;
text-align: right;
}

#levypaneldolni
{
float:left;
width: 130px;
height: 359px;
margin: 0;
padding: 0;
background: url("obrazky/menu.JPG") 0 0 no-repeat;
}

#levypaneldolni-obsah
{
margin:0;
padding:0;
}



#hlavnipanel
{
float:left;
margin:0;
padding:0;
background:url("obrazky/hlavni.JPG") 0 0 no-repeat;
height: 359px;
width: 574px;
}

#hlavnipanel-obsah
{
margin-top: 25px;
margin-left: 25px;
margin-right: 25px;
padding: 0;
}

#paticka
{
height: 43px;
width: 704px;
padding: 0px;
background:url("obrazky/paticka.JPG") 0 0 no-repeat;
}

#paticka-obsah
{
text-align: left;
margin-left: 95px;
margin-top: -1px;
}

.tlacitko
{
float: left;
margin-top:7px;
background:url("obrazky/tlacitko.JPG") 0 0 no-repeat;
padding: 0px;
width: 130px;
height: 26px;
}

#tlacitko-obsah
{
margin-top: 5px;
margin-left: 4px;
text-align: left;
font-size: 11px;
font-weight: bolder;
color:FFF;
font-family: Verdana, Tahoma, Arial;
}

.tlacitko-aktivni
{
float: left;
margin-top:7px;
background:url("obrazky/tlacitko-aktivni.JPG") 0 0 no-repeat;
padding: 0px;
width: 130px;
height: 26px;
cursor: hand;
color: #FFF;
}

#odkaz-v-menu
{
display: block;
width: 126px;
height: 26px;
}

hr.cleaner
{
clear:both;
display: none
}
Fred
Profil
#2 · Zasláno: 28. 7. 2005, 22:29:27
Odpovědět Citovat
Takhle vypadá to sice pěkně, ale projel bych to validátorem, je tam dost chyb např. div unitř odkazu, mnoho stejných ídéček atd. Používej trochu dědičnost. To css taky projeď validátorem, chybí tam # u barev, cursor:hand je taky jen pro IE
Např. místo tohohle
<div id="levypaneldolni-obsah">

<div class="tlacitko" onMouseOver="this.className='tlacitko-aktivni'" onMouseOut="this.className='tlacitko'">
<div id="tlacitko-obsah"><a HREF="necoonas.htm" ID="odkaz-v-menu">třída</a>
</div>
</div>

zkus tohle

<div id="levypaneldolni-obsah">

<div onMouseOver="this.className='tlacitko-aktivni'" onMouseOut="this.className=''">
<div><a HREF="necoonas.htm" ID="odkaz-v-menu">třída</a>
</div>
</div>

a ve stylopisu
#levypaneldolni-obsah{zůstane stejné}
#levypaneldolni-obsah div{
float: left;
margin-top:7px;
background:url("obrazky/tlacitko.JPG") 0 0 no-repeat;
padding: 0;
width: 130px;
height: 26px;
}
#levypaneldolni-obsah div div{
float:none;
margin-top: 5px;
margin-left: 4px;
text-align: left;
font-size: 11px;
font-weight: bolder;
color:#fff;
font-family: Verdana, Tahoma, Arial; }
Hampy
Profil
#3 · Zasláno: 29. 7. 2005, 08:17:08
Odpovědět Citovat
Frede děkuju, zkusím se na to podívat - pravděpodobně tam mám teda nějaký závažný chyby který firefox nesežere... jen bych tě prosím ještě požádal - co je validátor a jak se používá?
Fred
Profil
#4 · Zasláno: 29. 7. 2005, 08:43:31
Odpovědět Citovat
To jsi mě docela překvapil, tá stránka vypadá velmi dobře na to, že tohle nevíš :-)
http://validator.w3.org/check?verbose=1&uri=http%3A//www.oktavabe.wz.c z/
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&ur i=http%3A//www.oktavabe.wz.cz/
http://jigsaw.w3.org/css-validator/
Hampy
Profil
#5 · Zasláno: 29. 7. 2005, 09:42:50
Odpovědět Citovat
óóó děkuji:-) fakt nevím, i když uznávám že se tohle téma tady objevuje velmi často. Jsem ještě totální lama... webovkám se věnuju teprve tak půl roku víc ne... díky, mrknu na ty linky cos mi sem dal.
Hampy
Profil
#6 · Zasláno: 29. 7. 2005, 09:45:31
Odpovědět Citovat
Ježíš tak tomu teda vůbec nerozumím...
Časová prodleva: 19 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0