Deus Figendi: dynamische webseitenanpassen mit knöpfen

Beitrag lesen

SELF-Forum

dynamische webseitenanpassen mit knöpfen

Deus Figendi
– Informationen zu den Bewertungsregeln

Demo gefunden.

Irgendwo habe ich eine Demo rumfliegen

Die Seite hab' ich mal für nen Freund zusammengestümpert, der das erst auch mit JavaScript machen wollte...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
       "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
	<head>  
		<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
		<title>Zwei Hintergruende</title>	  
		<link rel="stylesheet" type="text/css" href="./layout.css">  
		<!--[if lt IE 8 ]>  
			<link href="./ie.css" rel="stylesheet" type="text/css">  
		<![endif]-->  
	</head>  
	<body>  
		<ul class="navigations_liste">  
  
			<li><a href="#" class="navii_a" id="nav_aes" ><span class="alttext">Abenteuer- und Erlebnis-Sport</span></a></li>  
			<li><a href="#" class="navii_a" id="nav_uel" ><span class="alttext">Uebungsleiter                </span></a></li>  
			<li><a href="#" class="navii_a" id="nav_nawo"><span class="alttext">naechste Woche               </span></a></li>  
			<li><a href="#" class="navii_a" id="nav_gal" ><span class="alttext">Bilder-Gallerie              </span></a></li>  
			<li><a href="#" class="navii_a" id="nav_fusa"><span class="alttext">Fundsache                    </span></a></li>  
			<li><a href="#" class="navii_a" id="nav_imp" ><span class="alttext">Impressum und Kontakt        </span></a></li>  
  
		</ul>  
	</body>  
</html>

layout.css

  
ul.navigations_liste {  
	padding-top: 0px;  
	padding-left: 0px;  
	marging: 0px;  
	position: absolute;  
	left: 0px;  
	Top: 150px;  
	list-style-type:none;  
	z-index:100;  
}  
  
.navii_a {  
	width: 180px;  
	height: 60px;  
	display:block;  
	text-decoration:none;  
}  
  
span.alttext {  
	visibility:hidden;  
	text-decoration:none;  
}  
  
#nav_aes {  
	background-image:url(./grafics/button1a.png);  
}  
#nav_aes:hover {  
	background-image:url(./grafics/button1b.png);  
}  
  
#nav_uel {  
	background-image:url(./grafics/button2a.png);  
}  
#nav_uel:hover {  
	background-image:url(./grafics/button2b.png);  
}  
  
#nav_nawo {  
	background-image:url(./grafics/button3a.png);  
}  
#nav_nawo:hover {  
	background-image:url(./grafics/button3b.png);  
}  
  
#nav_gal {  
	background-image:url(./grafics/button4a.png);  
}  
#nav_gal:hover {  
	background-image:url(./grafics/button4b.png);  
}  
  
#nav_fusa {  
	background-image:url(./grafics/button5a.png);  
}  
#nav_fusa:hover {  
	background-image:url(./grafics/button5b.png);  
}  
  
#nav_imp {  
	background-image:url(./grafics/button6a.png);  
}  
#nav_imp:hover {  
	background-image:url(./grafics/button6b.png);  
}

Also die Positionierung etc. hat natürlich nichts mit der ganzen Sache zu tun. Der Punkt ist mit Pseudoklassen und Hintergrundgrafiken sowie Blockelementen kannst du das ganze bauen.
Die "alttext"-Elemente dienen der Barrierearmut, damit Sehbehinderte und Benutzer mit Textbrowsern da noch irgendwas wahrnehmen (wobei Textbrowser es ggf. auch ausblenden).
Im Code-Zusammenstückeln hast du schon Erfahrung, also schau was du damit anfangen kannst ansonsten bietet das CSS-Kapitel hier auf selfhtml.org alle Informationen die du brauchst. Wie gesagt die Stichworte lauten:
Pseudoklasse(n)
Hintergrundgrafik (oder background-image)
und Blockelement (oder display:block)

--
sh:( fo:| ch:? rl:( br:& n4:& ie:{ mo:} va:) de:µ_de:] zu:) fl:( ss:| ls:[ js:(
Beitrag melden
–
Informationen zu den Bewertungsregeln