Svislá vysouvací navigace v CSS 2

Fucza · Příspěvekod **Fucza** » 15 bře 2010 19:51

Zdravím.
Chtěl bych se ještě obrátit na všechny o pomoc.
Myloš mi s tím pomáhal a pomohl, ale ještě to není úplně ono. Nechci ho zase tak zatěžovat¨.
Jedná se mi o stránky www.zskrasnepole.cz
styly jsou na www.zskrasnepole.cz/styly.css
Co mě pořád zlobí?
1. V IE 7 se nabídka vysouvá, ale jsou tam ty hnusné čáry v menu (to způsobuje v #menu li :height:1%;). bez toho se dá najet v druhé úrovni jen do druhého odkazu a pak to mizí.
2. V IE 6 se mi tam nedaří rozchodit ten hover.htc fakt nevím, proč se nabídka nevysouvá

3. Řeším ještě 1 problém. Chtěl jsem upravit odkaz z Toplistu, aby prošel validací. Mrknul sem do knížky od Martina Domese, kde to popisuje (vyhodil jsem language="JavaScript" v otvírací značce <script>, smazal <nonscript> a </nonscript> a border="0" jsem nahradil style="border: 0;")
Tak by to mělo být validní. A skutečně je, jen se na stránce objevují toplisty 2 (respektive jen 1 - ten druhý nevím, co je zač)
Moc díky za pomoc.

Reklama

CZechBoY · Příspěvekod **CZechBoY** » 17 bře 2010 09:22

Proč toplist není validní ? Chybí tam totiž alt neboli alternativní popisek, dej tam třeba <img alt="TopList" nebo tak, teda pokud to máš jako obrázek.
Ještě si dej do menu text-decoration: none aby se ti nepodtrhávaly ty odkazy, vypadá to lépe.
Jaký čáry máš na mysli ? Prohlížim to v Opeře 10.50

Fucza · Příspěvekod **Fucza** » 17 bře 2010 18:20

K tomu Toplistu: právě, že tam alt mám, nebo ne? Ale herdek, proč to tam je dvakrát?
[syntax]<div id="toplist">
<a href="http://www.toplist.cz/"><script type="text/javascript">
</script></a>
<img src="http://toplist.cz/count.asp?id=1079246&logo=mc" style="border: 0;"
alt="TOPlist" width="88" height="60" />

</div>[/syntax]

K pruhům: V Opeře, ani FF, ani v IE 8 to nedělá, jen v IE7. V IE6 jsou ty pruhy taky, ale ke všemu se ani ta nabídka nevysouvá. Inu problém s hover.htc , ale jaký?

viz screeny (první je z IE 7(s pruhy), druhý z IE8

CZechBoY · Příspěvekod **CZechBoY** » 19 bře 2010 11:55

jako že to udělá to modré pozadí nebo ty mezery v hlavním menu ?

Fucza · Příspěvekod **Fucza** » 19 bře 2010 14:38

Ty mezery v hlavním menu (je to vždy pod položkou, která je vysouvací)

Fucza · Příspěvekod **Fucza** » 22 bře 2010 15:45

A ještě bych se rád zeptal. Jak poznám, že prohlížeč shazuju do quirku?

Fucza · Příspěvekod **Fucza** » 26 bře 2010 14:37

Zdravím.
Tak koukám, že zatím moc odezvy není. No zkusím ještě jednou.

1. Jde o to tozchodit vysouvací menu u 2 položek v IE6 pomocí hover.htc. (mám ho tam podle návodů, ale nejede mi to)
2. Pokud možno odtranit v IE 6 a IE 7 ty malé proužky pod vysouvacími položkami v menu (screen - viz výše)
3. V kódu dodaného k toplistu udělat nějakou změnu, aby byl validní, ale aby se toplist zobrazoval pouze 1x (screen viz výše)
kód XHTML:
[syntax]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs">
<head>
<meta name="generator" content="PSPad editor, www.pspad.com" />
<meta http-equiv="content-type" content="text/html; charset=windows-1250" />

<title>Základní a Mateřská škola Ostrava - Krásné Pole</title>
<link rel="stylesheet" type="text/css" href="styly.css" />
</head>
<body>
<div id="obal"> 
<div id="zahlavi"> 
<h1>Základní a Mateřská škola Ostrava-Krásné Pole</h1>
</div>
<div id="hlavni">
<div id="obsah">
<h1 id="nadpis">Aktuality</h1> 

<h2>Nové fotografie:</h2>
<h3>Volitelný předmět Domácnost - Stolování</h3>
<p style="display: inline; margin:15px"><img src="obrazky/uvod2.jpg" title="Lucka s Natálkou" alt="Lucka s Natálkou" /></p><p style="display: inline; margin:15px"><img src="obrazky/uvod3.jpg" title="Kluci v akci" alt="Kluci v akci" /></p>
<p><a href="stolovani.html">více</a></p>
<h3>Maškarní ples</h3>
<p style="display: inline; margin:15px"><img src="obrazky/uvod1.jpg" title="Katka" alt="Katka" /></p><p style="display: inline; margin:15px"><img src="obrazky/uvod4.jpg" title="ples" alt="ples" /></p>
<p><a href="karneval.html">více</a></p>
</div>

<div id="menu">
<ul>
<li><a href="index.html">Úvodní stránka</a></li>
<li><a href="#">Naše škola</a>
<ul>
<li><a href="skola.html">Naše škola</a></li>
<li><a href="historie.html">Historie</a></li>
<li><a href="skrok.html">Školní rok</a></li>
<li><a href="akce.html">Akce + fotografie</a></li>
<li><a href="zamestnanci.html">Zaměstnanci a kontakty</a></li>
<li><a href="mixer.html">Školní časopis Mixér</a></li>
<li><a href="krouzky.html">Kroužky</a></li>
<li><a href="sdruzeni.html">Sdružení rodičů</a></li>
<li><a href="skolska-rada.html">Školská rada</a></li>
<li><a href="zakovska-rada.html">Žákovská rada</a></li>
<li><a href="pozarni-vychova.html">Požární ochrana</a></li>
<li><a href="sponzori.html">Sponzoři</a></li>

<li><a href="dotazniky.html">Dotazníky</a></li>
</ul>
</li>
<li><a href="http://www.mskrasnepole.benjamin.cz/">Mateřská škola</a></li>
<li><a href="jidelna.html">Školní jídelna</a></li>
<li><a href="#">Projekty EU</a>
<ul>
<li><a href="cil.html">Cíl 3 – Evropská územní spolupráce</a></li>
<li><a href="interreg.html">Interreg IIIa ČR - Polsko</a></li>

</ul>
</li>
<li><a href="omluvenka.html">Omluvenka</a></li>
<li><a href="dokumenty.html">Dokumenty</a></li>
<li><a href="kestazeni.html">Ke stažení</a></li>
<li class="spodni"><a href="odkazy.html">Odkazy</a></li>
</ul>
</div>

<div id="toplist">
<a href="http://www.toplist.cz/"><script type="text/javascript">
</script></a>
<img src="http://toplist.cz/count.asp?id=1079246&logo=mc" style="border: 0;"
alt="TOPlist" width="88" height="60" />

</div>

</div>
<div id="zapati">
<p>Základní a Mateřská škola Ostrava - Krásné Pole © 2010</p>

</div>
</div>
</body>
</html>[/syntax]

CSS:
[syntax]/* CSS Document */
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Arial, sans-serif;
font-size: small;
margin: 0 ;
background: #D4ECFB;

}
h1, h2, h3, h4 {
font-family: Georgia, "Times New Roman", serif;
margin-top: 0;
}
h1 {
font-size: 150%;
margin: 0 0 10px 0;
}
#obsah h1 {
border-bottom: 1px dotted blue;
}
h2 {
font-size: 113%;
margin: 10px 0 5px 0;
}
h3 {
font-size: 110%;
margin: 10px 0 5px 0;
}
p, ul, a {
font-size: 100%;
}
p {
margin: 0 0 5px 0;
}
ul {
margin: 0 0 5px 20px;
}
#obsah ul {
margin: 0 0 5px 20px;
}

#obal {
width: 800px;
margin: 0 auto;

}
#obsah a {
font-weight: bold;
color: blue;

}

#zahlavi {
width: 100%;
height: 200px;
background: blue url(obrazky/logo.jpg);
/*border bottom: 2px solid green;*/

}

#menu {
width: 25%;
float: left;
}
#obsah {
width: 75%;
float: right;
}
#obsah a, ul, li, p, h1, h2, h3, h4 {
margin: 15px;

}

#hlavni {
width: 100%;
float: left;
background: #ECECEC url(obrazky/pozadi.gif) repeat-y;
}
#zahlavi h1 {
display: none;
}
table, td, th {
border: 1px solid #333399;
border-collapse: collapse;
font-size: 95%;
}
td, th {
padding: 3px 5px;
}
th {
background: #333399;
color: white;
}
.seda {
background: #e0cece;
}
#obsah li {
list-style-type: circle;
}

#menu ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu li {
background-color: silver;
border: 1px solid black;
margin-bottom: 0;
height:1%;

}
#menu ul li:hover ul li {
background-color: #fee;
}
#menu ul {
width: 200px;
}
#menu ul li {
position: relative;
}
#menu ul ul {
position: absolute;
left: 198px;
top: 0;
visibility: hidden;
}
#menu ul li:hover ul {
visibility: visible;
}
#menu a {
display: block;
padding: 3px;
width: 192px;
height:100%;
}
#menu a:hover {
color: white;
background: #333399;
font-weight: bold;
}
#menu ul li:hover li, #menu ul li.hover li {
visibility: visible; background-color: #fee;
}

#menu .spodni {
border-bottom: 2px solid black;
}

table {
margin: 10px auto;

}
p {
text-align: justify;
}
img {
text-align: center;
}
#zapati {
width: 100%;
float: left;
background: #333399;
color: white;
}
#zapati p {
text-align: center ;
}
#toplist a {
margin: 50px;
}

[/syntax]

Díky moc za pomoc všem ochotným.

CZechBoY · Příspěvekod **CZechBoY** » 26 bře 2010 22:15

To že tam máš mezeru je nějaký pading nejspíš, nebo <p> nebo <br> něco takovýho...
že tam máš dvakrát toplist tak ho tam dej jednou ne ? :)
validní nemůže být ten obrázek, dej tam alt a už bude valid, nebo co to píšu za chybu ?

Fucza · Příspěvekod **Fucza** » 27 bře 2010 18:55

Jako ty pruhy jsou pul bidy, spis me vadi to, ze nefunguje ten hover.htc pro IE6
Ten toplist, co tam ted je je validni, ten co se zobrazoval tak jak mel, prave validaci neprosel.

Svislá vysouvací navigace v CSS 2

Re: Svislá vysouvací navigace v CSS 2

Re: Svislá vysouvací navigace v CSS 2

Re: Svislá vysouvací navigace v CSS 2

Re: Svislá vysouvací navigace v CSS 2

Re: Svislá vysouvací navigace v CSS 2

Re: Svislá vysouvací navigace v CSS 2

Re: Svislá vysouvací navigace v CSS 2

Re: Svislá vysouvací navigace v CSS 2

Re: Svislá vysouvací navigace v CSS 2

Kdo je online