Seite 1 von 1
suche Navigationsleisten
Verfasst: Di 12. Apr 2011, 14:04
von Patrick
Huhu,
ich glaube moni hatte mir mal eine seite genannt, wo man verschiedene
Navigationsleisten holen kann. Leider finde ich die adresse dazu nicht mehr.
Wer kann mir seiten nennen, wo man navileisten bekommt?
vielen Dank im voraus!
LG
Re: suche Navigationsleisten
Verfasst: Di 12. Apr 2011, 15:59
von moni
Hallo Patrick...
Glaub das waren die beiden Seiten hier
http://www.dynamicdrive.com/style/cssli ... tegory/C1/
http://de.selfhtml.org/css/layouts/navi ... eisten.htm
Hab auch auf meinen PC schnuppert und was gefunden..es sind ganz einfach leisten ...muss nur sie auf dein e Bedürfnisse anpassen (Farbe breite etc)
ob das ws für dich sein kann
vertikale Navi..
Code: Alles auswählen
ul#Navigation links {
width: 150px;
height: 30px;
line-height:30px;
text-align: center;
text-decoration: none;
font-family: vardana, helvetica, sans-serif;
font-size: 16px;
color: #FFFFFF;
background-color: maroon;
border: solid 1px #ffffff
}
ul#Navigation a {
display: block;
text-align: center;
text-decoration: none;
color: maroon;
background-color: pink;
border: solid 1px #FFFFFF;
}
ul#Navigation a:link {
width: 150px;
height: 30px;
line-height:30px;
text-align: center;
text-decoration: none;
font-family: arial, helvetica, sans-serif;
font-size: 16px;
color: #FFFFFF;
background-color: maroon;
border: solid 1px #ffffff
}
ul#Navigation a:visited {
line-height:30px;
text-align: center;
text-decoration: none;
font-family: arial, helvetica, sans-serif;
font-size: 16px;
color: #FFFFFF;
background-color: maroon;
border: solid 1px #ffffff
}
ul#Navigation a:hover {
color: black;
border: 1px solid red;
background-color: gold;
}
ul#Navigation a:active {
color: black;
border: 1px solid red;
background-color: green;
background-image:url();
background-repeat: repeat;
}
Code: Alles auswählen
#menuoben {
display: block;
width: 151px;
height: 36px;
line-height:37px;
text-align: center;
text-decoration: none;
font-family: verdana, helvetica, sans-serif;
font-weight:normal;
font-size: 17px;
color: #FFFFFF;
background-color: maroon;
border: solid 1px #ffffff;
}
#menuoben:hover {
display: block;
width: 151px;
height: 36px;
line-height:37px;
text-align: center;
text-decoration: none;
color: maroon;
background-color: pink;
border: solid 1px #FFFFFF;
}
Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dreispaltiges Layout mit Kopf- und Fußzeile</title>
<style type="text/css">
body {
color: black; background-color:pink;
background-image:url();
background-repeat: repeat-x;
font-size: 100.01%;
font-family:Verdana,serif;
margin: 0; padding: 9em;
min-width: 41em;
border: 12px ridge red; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
}
a:link {font-family: Verdana, sans-serif;color:#0000FF;font-size:12px;text-decoration:none}
a:visited {font-family: Arial, Helvetica, sans-serif;color:#0000FF;font-size:12px;text-decoration:none}
a:active {font-family: Arial, Helvetica, sans-serif;color:#0000FF;font-size:12px;text-decoration:none}
a:hover {font-family: Arial, Helvetica, sans-serif;color:#9b1515;font-size:16px;text-decoration:none}
h1 {
font-size: 20px;
margin: 0 0 0.7em; padding: 0.3em;
text-align: center;
text-decoration:none;
background-image:url( http://www.animaatjes.de/hintergrunden/natur/55.jpg); /*inhalt und oben */
background-color: silver;
background-repeat: repeat;
border: 0px ridge red;
}
h2 {
font-size: 22px;
margin: 0 0 0.0em; padding: 0.0em;
text-align: center;
background-image:url(); /*logo*/
background-color: green;
background-repeat:no- repeat;
border: 0px ridge gold;
}
ul#Navigation {
width: 151px;
font-size: 20px;
float: left;
text-decoration:none;
margin: 0 0 1.0em; padding: 0;
border: 2px solid black;
background-image:url();
background-repeat: repeat;
background-color: green;
border: 1px solid black;
}
ul#Navigation links {
width: 150px;
height: 30px;
line-height:30px;
text-align: center;
text-decoration: none;
font-family: vardana, helvetica, sans-serif;
font-size: 16px;
color: #FFFFFF;
background-color: maroon;
border: solid 1px #ffffff
}
ul#Navigation a {
display: block;
text-align: center;
text-decoration: none;
color: maroon;
background-color: pink;
border: solid 1px #FFFFFF;
}
ul#Navigation a:link {
width: 150px;
height: 30px;
line-height:30px;
text-align: center;
text-decoration: none;
font-family: arial, helvetica, sans-serif;
font-size: 16px;
color: #FFFFFF;
background-color: maroon;
border: solid 1px #ffffff
}
ul#Navigation a:visited {
line-height:30px;
text-align: center;
text-decoration: none;
font-family: arial, helvetica, sans-serif;
font-size: 16px;
color: #FFFFFF;
background-color: maroon;
border: solid 1px #ffffff
}
ul#Navigation a:hover {
color: black;
border: 1px solid red;
background-color: gold;
}
ul#Navigation a:active {
color: black;
border: 1px solid red;
background-color: green;
background-image:url();
background-repeat: repeat;
}
/* ende navi links*/
div#Info {
font-size: 0.9em;
float: right; width: 150px;
margin: 0 0 1.1em; padding: 0;
background-color: green;
background-image:url();
background-repeat: repeat;
border: 2px solid black;
}
div#Info h2 {
font-size: 1.33em;
margin: 0.2em 0.5em;
}
div#Info p {
font-size: 1em;
margin: 0.0em;
text-align: center;
font weight:bold;
}
div#Inhalt {
margin: 0 0 10 px;
padding: 0 px;
border: 0px solid black;
background-image:url(http://www.animaatjes.de/hintergrunden/natur/55.jpg);
background-repeat: repeat;
border: 5px solid transparent;
}
* html div#Inhalt {
height: 1em; /* Workaround gegen den 3-Pixel-Bug des Internet Explorer bis Version 6 */
}
div#Inhalt h2 {
font-size: 1.2em;
margin: 0.2em 0;
}
div#Inhalt p {
font-size: 1em;
margin: 1em 0;
}
p#Fusszeile {
clear: both;
font-size: 0.9em;
margin: 0; padding: 0.1em;
text-align: center;
background-color:gold; border: 1px solid black;
}
/*navo oben*/
#menuoben {
display: block;
width: 151px;
height: 36px;
line-height:37px;
text-align: center;
text-decoration: none;
font-family: verdana, helvetica, sans-serif;
font-weight:normal;
font-size: 17px;
color: #FFFFFF;
background-color: maroon;
border: solid 1px #ffffff;
}
#menuoben:hover {
display: block;
width: 151px;
height: 36px;
line-height:37px;
text-align: center;
text-decoration: none;
color: maroon;
background-color: pink;
border: solid 1px #FFFFFF;
}
ul#Navigation rechts {
display: block;
width: 150px;
height: 30px;
line-height:30px;
text-align: center;
text-decoration: none;
font-family: arial, helvetica, sans-serif;
font-size: 16px;
color: #FFFFFF;
background-color: maroon;
border: solid 1px #ffffff;
}
#menuoben:hover {
display: block;
width: 150px;
height: 30px;
line-height:30px;
text-align: center;
text-decoration: none;
color: maroon;
background-color: pink;
border: solid 1px #FFFFFF;
}
</style>
</head>
<body>
<p algin="right"><img src="http://lh3.ggpht.com/_WghlenoNYG0/S503b2kafzI/AAAAAAAAJl4/X12Va3gmtGU/s912/bilder.jpg"width="942"height="200">
<h2> <table align="center" border="0">
<tbody>
<tr>
<td><a href="#" id="menuoben">Linkoben01</a></td>
<td><a href="#" id="menuoben">Linkoben02</a></td>
<td><a href="#" id="menuoben">Linkoben03</a></td>
<td><a href="#" id="menuoben">Linkoben04</a></td>
<td><a href="#" id="menuoben">Linkoben05</a></td>
<td><a href="#" id="menuoben">Linkoben05</a></td>
</tr>
</tbody>
</table></div></h2>
<ul id="Navigation">
<h2>Thema</h2>
<li><a href="">seite 1</a></li>
<li><a href="">seite 1</a></li>
<li><a href="">seite 1</a></li>
<li><a href="">seite 1</a></li>
<li><a href="">seite 1</a></li>
<h2>Thema</h2>
<li><a href="">seite 1</a></li>
<li><a href="">seite 1</a></li>
<li><a href="">seite 1</a></li>
<li><a href="">seite 1</a></li>
<li><a href="">seite 1</a></li>
<h2>Thema</h2>
<li><a href="">seite 1</a></li>
<li><a href="">seite 1</a></li>
<li><a href="">seite 1</a></li>
<h2>Thema</h2>
<li><a href="">seite 1</a></li>
<li><a href="">seite 1</a></li>
<li><a href="">seite 1</a></li>
<h2>Bilder
</h2> <p><center>
<img src="http://www.animaatjes.de/hintergrunden/natur/21.jpg"> </center>
</p>
</ul>
</div>
<div id="Info">
<ul id="Navigation">
<p>Thema</p>
<li><a href="">seite 1</a></li>
<li><a href="">seite 1</a></li>
<li><a href="">seite 1</a></li>
<li><a href="">seite 1</a></li>
<p>Thema</p>
<li><a href="">seite 1</a></li>
<li><a href="">seite 1</a></li>
<li><a href="">seite 1</a></li>
<li><a href="">seite 1</a></li>
<li><a href="">seite 1</a></li>
<li><a href="">seite 1</a></li>
<li><a href="">seite 1</a></li>
<li><a href="">seite 1</a></li>
<li><a href="">seite 1</a></li>
<li><a href="">seite 1</a></li>
<li><a href="">seite 1</a></li>
<li><a href="">seite 1</a></li>
<h2>Info-Box</h2>
</ul>
<p>Hatten Sie sich im letzten Beispiel gewundert,
warum die Überschrift dieser Box nicht als solche ausgezeichnet war?
Da diese Info-Box im Quelltext vor dem Inhaltsbereich steht
und erst in diesem die Hauptüberschrift notiert war,
wäre hier eine Überschrift zweiten Grades noch nicht sinnvoll gewesen.</p>
<p>Im Quelltext dieses Beispiels ist nun zuerst die Seitenüberschrift notiert,
wodurch auch dieses semantische Problem gelöst ist.</p>
</div> <p><marquee direction=left> Marquee von rechts nach links </marquee> </p>
<div id="Inhalt">
<h1> ausgezeichnet
und kann genauso gut wie ein <div> über CSS formatiert
- hier mit einem Rahmen und einer Hintergrundfarbe versehen - werden.
Auch eine Grafik könnte in <h1> als Hintergrundbild definiert
oder über <img> eingebunden werden.</p>
<p>Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage.
Nutzen Sie das HTML-Grundgerüst für die Inhalte Ihrer Seite
und passen Sie das CSS nach Belieben Ihren Vorstellungen an:
experimentieren Sie mit den Größenangaben, Farben und Rändern
und fügen Sie z.B. individuelle grafische Elemente ein.</p>
</div>
<p id="Fusszeile">Diese Fußzeile stellt über die CSS-Eigenschaft 'clear'
den Elementenfluss wieder her.</p>
</body>
</html>