Keskustelu: Nettisivujen teko: Select laatikko & CSS

GoldenDragon [03.05.2006 20:52:33]

Saako select-laatikosta scrollbaria pois ollenkaan (size attribuutilla 2 tulee scroll ja 1:llä tai ilman attribuuttia hyppynappi) ? IE:llä saa ne pois näkyvistä mutta ei Firefoxilla. Onko jokin CSS-hack olemassa? Ei näyttäisi onnistuvan alla olevalla tavalla.

Lisäys:
PS. Tämä on vain testi, jolla testaan, olisiko mahdollista saada CSS:n ja select:n avulla navigaatiovalikko (ei luultavasti tule oikeasti käyttöä mutta vinkkinä joillekkin voisi antaa.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>

   <head>
      <title>DropDown test</title>
      <style type="text/css">
      	body{
		  background-color: #009CE8;
		  height: 100%;
		  width: 100%;
		  overflow: auto;
		}
		div#nav form#navi select#navval{
		  border: 1px outset #0000ff;
		  background-color: #009CE8;
		  overflow: auto !important;
		}
		div#nav form#navi select#navval:hover{
		  border: 1px outset #009CE8;
		}
		div#nav form#navi select#navval option{
		  color: #0000ff;
		  background-color: #009CE8;
		}
		div#nav form#navi select#navval option:hover{
		  background-color: #0000ff;
		  color: #009CE8;
		}
	   </style>
   </head>

   <body>

		<div id="nav">
			<form action="handler.php" method="GET" enctype="application/x-www-form-urlencoded" name="navi" id="navi" title="Navigaatio">
				<select onchance="this.form.submit();" size="6" name="Valinnat" id="navval" title="Valinnat">
					<option value="Etusivu" name="etusivu">Etusivu</option>
					<option value="CV" name="cv">Curriculum Vitae</option>
					<option value="Keskustelu" name="keskustelu">Keskustelu</option>
					<option value="Vieraskirja" name="gb">Vieraskirja</option>
					<option value="Linkit" name="linkit">Linkit</option>
					<option value="Palaute" name="palaute">Palaute</option>
				</select>
				</select>
			</form>
		</div>
   </body>
</html>

Koodia vielä korjattu hieman sellaiseksi, kuin sen aioin...

wwwapu [04.05.2006 20:50:03]

Yllätyin kun muistin tunnukseni.

Ongelman ratkaisu on myös yllättävän helppo.

#navval{
   visibility: collapse;
}
#navval option{
   visibility: visible;
}

Tämän jälkeen IE:n tulkinta näyttää kökköseltä.

GoldenDragon [04.05.2006 22:28:26]

wwwapu kirjoitti:

Yllätyin kun muistin tunnukseni.

Ongelman ratkaisu on myös yllättävän helppo.
#navval{
   visibility: collapse;
}
#navval option{
   visibility: visible;
}
Tämän jälkeen IE:n tulkinta näyttää kökköseltä.

Tuota en tullutkaan ajatelleeksi :) Kiitos.

wwwapu [04.05.2006 23:09:06]

Ei kannata kuitenkaan hirveästi innostua. Vaikka alkuperäinen ongelma ratkesikin tuolla, niin tulihan siitä uusia tilalle. Suunta kuitenkin jotain tuonne päin.

Opera.

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Kirjautuminen