HTML/CSS
Ralf Herbst
Navigationen anlegen
Navigationen Steuerung
im Ordner Webprojekte ein neues Projekt/Ordner mit Namen Navigationen sowie Unterordner css anlegen, dann im HTML-Ordner unter Menüleiste Projekte neues Projekt erstellen mit den Pfaden zum Ordner Navigation und Unterordner css mit Einbindung einer externen css
- basis.css
@charset "utf-8";
body { font-family: Verdana, Geneva, sans-serif; font-size: 100%; color: #666; }
* { margin: 0; padding: 0; }
h1 { font-family: Courier New, Courier, monospace; font-size: 200%; color: #060; }
/*Aufbau ohne großen Container*/
/*div { border: solid 1px #999; padding: 10px; width: 970px; margin: 5px auto;}*/
div { border: solid 1px #999; padding: 10px; margin: 5px; }
#footer { border: none; border-top: solid 2px #999; text-align: center; color: #FFF;
background-color: #060; clear: both; }
=soll sich nicht rechts anordnen wie die anderen Container, deshalb clear
Aus dem HTML-Lexikon die Datei 00.css_vorlage.html speichern unter Navigationen mit Namen: - 01.navi_display_block.html
im head-Bereich die Attribute eingeben:
<style type="text/css">
#mainnav { width: 10em; = em für barrierefreie Einstellungen im Browser
margin: 0.313em; = errechnet aus dem Umrechner pxtoem.com vom Wert 5px
padding: 0.5em; = errechnet aus dem Umrechner pxtoem.com vom Wert 8px
float: left; = damit der Container nach rechts geht
text-align: right; }
#mainnav ul { list-style-type: none; = entfernen der automatischen Punkte der Liste }
#mainnav ul li { line-height: 180%; } = Zeilenabstand %, denn im basis.css Angabe font-size: 100%
#mainnav ul li a { text-decoration: none; font-weight: bold;
display: block; = damit wird dem Link ein Block gegeben für die gesamte Länge
padding-right: 0.8em; }
#mainnav ul li a:hover { color: #FFF; background-color: #666; }
#main { padding: 0.500em; margin: 0.625em 0.3em 0.625em 12em; }
</style>
im body-Bereich die Daten eingeben:
<div id="header"><h1>Navigation mit display block</h1></div>
<div id="mainnav">
<ul> <li><a href="#">Home</a></li> <!--# oder #nogo möglich-->
<li><a href="#">Produkte</a></li>
<li><a href="#">Kunden</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Anfahrt</a></li>
</ul>
</div>
<div id="main">
<p>Text.</p><h2>Überschrift h2</h2><p>Text</p>
</div><div id="footer">css Menus</div>
Umrechnungsfaktor für pixels - ems - percent - points
Basis: 16px 1.000em 100% 12pt
die Datei abspeichern im Ordner Navigationen unter neuen Namen:
- 02.navi_vertical_flyout.html
im head-Bereich die Attribute eingeben:
<link rel="stylesheet" href="css/basis.css" type="text/css"> = Hinweis auf externe css.datei
<style type="text/css">
#mainnav { width: 10em; margin: 0.313em; padding: 0.5em; float: left; }
#mainnav ul, li { margin: 0; padding: 0; }
#mainnav ul { list-style-type: none; width: 10em; border: solid 1px #000; border-bottom: none; }
#mainnav ul li { border-bottom: solid 1px #000; background-color: #CCC; }
#mainnav ul li a { text-decoration: none; color: #000; display: block; width: 9em; height: 1em; padding: 0.5em; }
#mainnav ul li a:hover { color: #FFF; background-color: #666; }
/*-------------------------- ab hier wird das flyout (Unterliste gesteuert -------------------------*/
#mainnav ul li ul { position: absolute; left: -9999px; }
#mainnav ul li:hover ul { margin-left: 10em; left: auto; margin-top: -2em; }
#mainnav ul li:hover ul li:first-child { background-color: #999; margin-top: -0.125em; border-top: 1px solid #000; }
#main { padding: 0.5em; margin: 0.625em 0.3em 0.625em 12em; }
</style>
</head>
im body-Bereich die Listen einbauen:
<div id="header"> <h1>Vertical Flyout Navigation</h1> </div>
<div id="mainnav">
<ul> <li><a href="#">Home</a></li>
<li><a href="#">Produkte</a>
<ul><li><a href="#">Produkt A</a></li>
<li><a href="#">Produkt B</a></li>
<li><a href="#">Produkt C</a></li>
</ul>
</li>
<li><a href="#">Kunden</a>
<ul><li><a href="#">Kunde A</a></li>
<li><a href="#">Kunde B</a></li>
</ul>
</li><li><a href="#">Kontakt</a></li>
<li><a href="#">Anfahrt</a></li>
</ul></div>
<div id="main">Text </div>
die Datei abspeichern im Ordner Navigationen unter neuen Namen:
- 03.navi_horizontal-flyout.html
im head-Bereich die Attribute eingeben:
<style type="text/css">
#mainnav { /*background-color: #CCC;*/ }
#men1, #men1 li ul { margin: 0px; padding: 0px; list-style-type: none; height: 3em; }
= relative setzen damit die darin ligenden Listen absolute positioniert werden können (Eltern-Kind)
#men1 li { position: relative; float: left; cursor: pointer; }
Menu-Überschriften formatieren:
#men1 li strong { display: block; width: 14em; padding: 1em; background-color: #CCC; color: #333; }
#men1 li a { display: block; padding: 1em 1.3em; background-color: #999; color: #FFF; text-decoration: none; font-weight: normal; font-size: 0.8em; }
#men1 li a:hover { color: #FFF; background-color: #666; }
Untergeordnete Liste formatieren:
#men1 li ul li {float: none; display: inline; }
#men1 li ul { position: absolute; left: 0; top: auto; }
#men1 li ul li a { display: block; border-buttom: solid 1 px #000; width: 14em; }
verstecken der untergeordneten Listen:
#men1 li ul { position: absolute; left: -9999em; top: -9999em; }
#men1 li:hover ul { position: absolute; left 0em; top: auto; }
#men1 li ul li a { /*padding-left: 2em;*/ text-align: center; }
</style>
im body-Bereich die Angaben eingeben:
<div id="header"><h1>Horizontal Flyout Navigation</h1></div>
<div id="mainnav">
<ul id="men1">
<li><strong>Menupunkt 1</strong> <!--Begin Liste 1-->
<ul>
<li><a href="#">Unterpunkt</a></li>
<li><a href="#">Unterpunkt</a></li>
<li><a href="#">Unterpunkt</a></li>
<li><a href="#">Unterpunkt</a></li>
</ul>
</li> <!--End of Liste 1-->
<li><strong>Menupunkt 2</strong> <!--Begin Liste 2-->
usw. bis
</li> <!--End of Liste 4-->
</ul></div>
<div id="main"><p>Text</p><h2>Überschrift h2</h2><p>Text</p>
</div>
EMPFEHLUNGEN:
cssplay
Keine Kommentare:
Kommentar veröffentlichen