tein dropdown valikon. kun avaan valikon(otsikko<ul>pudotus<li> kaikki näyttää hyvältä kaikkine tyylimäärittelyineen, jes! no kun sitten hymykorvissa vein ensimmäistä kertaa hiiren otsikon päälle ja innokkaana silmät loistaen odotin dropdown elämystä, mun maailma kaatui. se otsikko <ul> jonka olin työntänyt <divin> sisään päätti alkaa venymään <li> mukaan, vaikka aiemmin ku olin määritellyt kaikille otsikoille saman leveyden kaikki toimi loistavasti!!
eli näin:
|otsikko||otsikko||otsikko|
---------------------------
|dropdowndropdown|
|dropdowndropdown|
ja nyt näin:
|otsikko(_tyhjäätyhjää)||otsikko||otsikko|
------------------------------------
|dropdowndropdown|
|dropdowndropdown|
jos joku osaisi hieman neuvoa tällaisessa pienessä mutta minulle sitäkin kimurantimmassa pulmassa, kiitos jo etukäteen!
ps. en tiedä onko tämä oikea paikka tälle mutta en pääse tästä eteenpäin ilman neuvoja.
Laita se koodi tai osoite, tuon voi tehdä niin monella tavalla.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>valikko</title>
<style type="text/css">
ul li {
display:none;
}
ul:hover li {
display:block;
}
ul {
list-style:none;
margin:0 0 0 0;
padding:0 0 0 1px;
}
ul #etusivu_nappi {
width:60px;
}
ul #opiskelu_nappi {
width:70px;
}
ul #hakeminen_nappi {
width:85px;
}
ul #tyonaytteet_nappi {
width:90px;
}
ul #tyoelamayhteydet_nappi {
width:133px;
}
ul #materiaalit_nappi {
width:82px;
}
ul #yhteystiedot_nappi {
width:95px;
}
ul #palaute_nappi {
width:60px;
}
li {
width:170px;
list-style:none;
}
#etusivu_nappi {
border:solid 1px #999999;
text-align:left;
text-indent:4px;
background-color:#abcdef;
font-family:verdana;
color:#ffffff;
font-weight:bold;
font-size:12px;
padding:1px;
width:60px;
}
#etusivu:hover {
background-color:#abc999;
}
#etusivu_dd {
border:solid 1px #999999;
text-align:left;
text-indent:4px;
margin-top:1px;
background-color:#abcdef;
font-family:verdana;
color:#ffffff;
font-weight:bold;
font-size:12px;
padding:1px;
}
#etusivu_dd:hover {
background-color:#abc999;
}
#etusivu_dd a {
font-weight:bold;
font-size:12px;
color:#ffffff;
text-decoration:none;
}
#opiskelu {
border:solid 1px #999999;
text-align:left;
text-indent:4px;
background-color:#abcdef;
font-family:verdana;
color:#ffffff;
font-weight:bold;
font-size:12px;
padding:1px;
}
#opiskelu:hover {
background-color:#abc999;
}
.opiskelu_dd {
border:solid 1px #999999;
text-align:left;
text-indent:4px;
margin-top:1px;
background-color:#abcdef;
font-family:verdana;
color:#ffffff;
font-weight:bold;
font-size:12px;
padding:1px;
}
.opiskelu_dd:hover {
background-color:#abc999;
}
.opiskelu_dd a {
font-weight:bold;
font-size:12px;
color:#ffffff;
text-decoration:none;
}
#hakeminen {
border:solid 1px #999999;
text-align:left;
text-indent:4px;
background-color:#abcdef;
font-family:verdana;
color:#ffffff;
font-weight:bold;
font-size:12px;
padding:1px;
}
#hakeminen:hover {
background-color:#abc999;
}
#tyonaytteet {
border:solid 1px #999999;
text-align:left;
text-indent:4px;
background-color:#abcdef;
font-family:verdana;
color:#ffffff;
font-weight:bold;
font-size:12px;
padding:1px;
}
#tyonaytteet:hover {
background-color:#abc999;
}
.tyonaytteet_dd {
border:solid 1px #999999;
text-align:left;
text-indent:4px;
margin-top:1px;
background-color:#abcdef;
font-family:verdana;
color:#ffffff;
font-weight:bold;
font-size:12px;
padding:1px;
}
.tyonaytteet_dd:hover {
background-color:#abc999;
}
.tyonaytteet_dd a {
font-weight:bold;
font-size:12px;
color:#ffffff;
text-decoration:none;
}
#tyoelamayhteydet {
border:solid 1px #999999;
text-align:left;
text-indent:4px;
background-color:#abcdef;
font-family:verdana;
color:#ffffff;
font-weight:bold;
font-size:12px;
padding:1px;
}
#tyoelamayhteydet:hover {
background-color:#abc999;
}
#materiaalit {
border:solid 1px #999999;
text-align:left;
text-indent:4px;
background-color:#abcdef;
font-family:verdana;
color:#ffffff;
font-weight:bold;
font-size:12px;
padding:1px;
}
#materiaalit:hover {
background-color:#abc999;
}
#yhteystiedot {
border:solid 1px #999999;
text-align:left;
text-indent:4px;
background-color:#abcdef;
font-family:verdana;
color:#ffffff;
font-weight:bold;
font-size:12px;
padding:1px;
}
#yhteystiedot:hover {
background-color:#abc999;
}
#palaute {
border:solid 1px #999999;
text-align:left;
text-indent:4px;
background-color:#abcdef;
font-family:verdana;
color:#ffffff;
font-weight:bold;
font-size:12px;
padding:1px;
}
#palaute:hover {
background-color:#abc999;
}
#kaikkinapit {
widht:auto;
height:auto;
}
#etusivu {
float:left;
}
#opiskelu_nappi {
float:left;
}
#hakeminen_nappi {
float:left;
}
#tyonaytteet_nappi {
float:left;
}
#tyoelamayhteydet_nappi {
float:left;
}
#materiaalit_nappi {
float:left;
}
#yhteystiedot_nappi {
float:left;
}
#palaute_nappi {
float:left;
}
</style>
</head>
<body>
<div id="kaikkinapit">
<div id="etusivu">
<ul><div id="etusivu_nappi">Etusivu</div>
<li><div id="etusivu_dd"><a href="etusivu.html">Uutiset ja tiedotteet</a></div>
</li>
</ul></div>
<div id="opiskelu_nappi">
<ul><div id="opiskelu">Opiskelu</div>
<li><div class="opiskelu_dd"><a href="etusivu.html">Kurssitarjonta</a></div>
</li>
<li><div class="opiskelu_dd"><a href="etusivu.html">Työjärjestykset</a></div>
</li>
<li><div class="opiskelu_dd"><a href="etusivu.html">Opettajat</a></div>
</li>
<li><div class="opiskelu_dd"><a href="etusivu.html">Työtilat ja kalusto</a></div>
</li>
<li><div class="opiskelu_dd"><a href="etusivu.html">Opetussuunnitelma</a></div>
</li>
<li><div class="opiskelu_dd"><a href="etusivu.html">Päättötyö</a></div>
</li>
<li><div class="opiskelu_dd"><a href="etusivu.html">Työssäoppiminen</a></div>
</li>
<li><div class="opiskelu_dd"><a href="etusivu.html">Opintojen jälkeen</a></div>
</li>
<li><div class="opiskelu_dd"><a href="etusivu.html">Oppilaiden kertomuksia</a></div>
</li>
</ul></div>
<div id="hakeminen_nappi">
<ul><div id="hakeminen">Hakeminen</div></div>
<div id="tyonaytteet_nappi">
<ul><div id="tyonaytteet">Työnäytteet</div>
<li><div class="tyonaytteet_dd"><a href="etusivu.html">Verkkoviestintä</a></div>
</li>
<li><div class="tyonaytteet_dd"><a href="etusivu.html">Mobiiliympäristöt</a></div>
</li>
<li><div class="tyonaytteet_dd"><a href="etusivu.html">Video ja ääni</a></div>
</li>
<li><div class="tyonaytteet_dd"><a href="etusivu.html">Animaatio ja 3D</a></div>
</li>
<li><div class="tyonaytteet_dd"><a href="etusivu.html">Print</a></div>
</li>
<li><div class="tyonaytteet_dd"><a href="etusivu.html">Päättötyöt</a></div>
</li>
<li><div class="tyonaytteet_dd"><a href="etusivu.html">Muut</a></div>
</li>
</ul></div>
<div id="tyoelamayhteydet_nappi">
<ul><div id="tyoelamayhteydet">Työelämäyhteydet</div></div>
<div id="materiaalit_nappi">
<ul><div id="materiaalit">Materiaalit</div></div>
<div id="yhteystiedot_nappi">
<ul><div id="yhteystiedot">Yhteystiedot</div></div>
<div id="palaute_nappi">
<ul><div id="palaute">Palaute</div></div>
</div>
</body>
</html>Mod. lisäsi kooditagit
Lähdepä ihan alkajaisiksi pyrkimään kohti validia koodia. Esimerkiksi div-elementti ei missään nimessä kuulu ul-elementin sisään, joten en lainkaan ihmettele, jos toiminta on odottamatonta.
Lisäksi voisit hieman tiivistää tuota CSS:ää. Kun samat ehdot (mm. värit) pätevät lähes kaikille elementeille, kannattaisi ehkä määritellä ne luokille tai jopa suoraan tagin mukaan tai vähintääkin yhdistää määrittelyt:
#jokin, #muukin, #elementti {
color: red;
}Edit. En ole ennen dropdownia CSS:llä tehnyt enkä myöskään ole selainyhteensopivuuden ammattilainen näissä ulkoasuasioissa, mutta tällainen tuli hatusta ja toimi ainakin Fx3:lla.
<style type="text/css">
.dropdown li {
display: inline;
position: relative;
}
.dropdown li ul {
display: none;
position: absolute;
left: 0;
}
.dropdown li:hover ul {
display: block;
padding-left: 0;
}
.dropdown li ul li {
display: block;
}
.dropdown li ul li:hover, .dropdown li ul li:hover a {
font-weight: bold;
}
</style>
<ul class="dropdown">
<li>
<a href="pahkinat.html">pähkinät</a>
<ul>
<li><a href="pahkinat-saksan.html">saksanpähkinät</a></li>
<li><a href="pahkinat-maa.html">maapähkinät</a></li>
<li><a href="pahkinat-kookos.html">kookospähkinät</a></li>
</ul>
</li>
<li>
<a href="hillot.html">hillot</a>
<ul>
<li><a href="hillot-mansikka.html">mansikkahillot</a></li>
<li><a href="hillot-puolukka.html">vadelmahillot</a></li>
<li><a href="hillot-puolukka.html">puolukkahillot</a></li>
<li><a href="hillot-lettu.html">lettuhillot</a></li>
</ul>
</li>
<li>
<a href="laatikot.html">laatikot</a>
<ul>
<li><a href="laatikot-porkkana.html">porkkanalaatikot</a></li>
<li><a href="laatikot-pahvi.html">pahvilaatikot</a></li>
</ul>
</li>
</ul>kiitos, koitan saada järjestelmällisemmäksi omaa ajatustani.
-juhab
Hyvä muistaa että parempi tehdä turhaa koodia joka toimii, kuin jättää tekemättä yhtään jos ei ymmärrä automaatiota. Samaa tein VB6:sessa jokin aika takaisin kun For-silmukka ei käynyt järkeen.
Aihe on jo aika vanha, joten et voi enää vastata siihen.