Mitschrift 29.04.2014
TAG 16
Strukturierung von Navigationen
mit Hilfe von Float
Dokument des Dozenten: navigation-1.htmlIn dieser Datei wurde eine Navigation mit Hilfe von Listen gebaut:
<!doctype html>
<html>
<head>
<title>Navigation</title>
<meta name="author" content="Michael Sewelies">
<style type="text/css">
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Produkte</a></li>
<li><a href="#">Katalog</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Impressum</a></li>
</ul>
</body>
</html>
 |
| So sieht die hochgestellte Datei aus |
Schritt für Schritt- Bearbeitung der CSS-Angaben, um eine Navigation aufzubauen.
1. Schritt:
zunächst die Aufzählungszeichen wegmachen:
css3you>listen>Aufzählungszeichen (list-style-type=none)
<style type="text/css">
ul {
list-style-type: none;
}
</style>
wir haben listenelemente / Blockelemente und wollen nun eine Navigation bauen
2. Schritt:
Listenelemente floaten, damit die Listenelemente nebeneinander aufgereiht sind:
<style type="text/css">
ul {
list-style-type: none;
}
li {
float: left;
}
</style>
 |
| gefloatete Listenelemente |
3. Schritt:
das Listenelement (Blockelemen) erhält eine feste Breitenangabe:
<style type="text/css">
ul {
list-style-type: none;
}
li {
float: left;
width: 75px;
}
</style>
 |
| gefloatete Listenelemente mit definierter Breite |
den Text mittig ausrichten, damit die Abstände gleichmäßiger werden:
Vorschlag eines Teilnehmers:
wir können das a-Tag zentrieren
ABER: -> a ist ein Inlineelement und nimmt sich nur den Platz, den der Text benötigt...also müssen wir aus a erst ein Blockelement machen:
Css4you>text>horizontale Ausrichtung (text-align: left, center, justify, right)
<style type="text/css">
ul {
list-style-type: none;
}
li {
float: left;
width: 75px;
}
a {
display: block;
text-align: center;
}
</style>
Das Display transformiert die Elemente.
Kurze Erklärung der Wahl von block:
Wir benötigen ein reines Blockelement: also display = block und nicht inline-block, da es dann eine Mischform wäre, die immernoch Eigenschaften eines Inlineelementes aufweist.
Css4you>a-z>d>display
Wiederholung:
Das Display-Element ist dafür da, ein Inline-Element (display=block) zu einem Blockelement oder ein Blockelement (display=inline) zu einem Displayelement zu machen bzw auch Mischformen (display=inline-block) zu erstellen.
Wenn ich Navigationen baue, muss ich sehen, was ich baue - da hilft die background-color! - also bei li die background-color einstellen:
li {So sieht man auch, warum wir die width eingestellt haben und es nicht über die margin gelöst haben:
float: left;
width: 75px;
background-color: #efefef;
}
- Die Margin (Außenabstand würde als weiße Zwischenabstände angezeigt werden)
- die width bildet eine Art Balken hinter allen Listen-Elementen
 |
| gefloatete Listenelemente mit definierter Breite und Hintergrundfarbe |
So, jetzt haben wir aus dem a-Tag ein Blockelememnt gemacht. Unser Ziel ist aber eine solche Navigation:
Ich muss das aTag zu einem Blockelement machen, da ich sonst nur den Link dort habe, wo die Schrift des a-Tags ist (Eigenschaft von Inlineelementen - sie erstrecken sich nur über die Breite des Inhaltes -. dier der Text "Team")
 |
| a-Tag als Inline-Element (blau ist der auszulösende Bereich des Links - hie rnur über die Breite des Textes) |
- als Blockelement (Eigenschaft - ich kann die Breite durch width einstellen und somit erstreckt sich das Element über die gesamte definierte Breite) ist der gesamte Bereich der Blockelements ein Link!!!
 |
| a-Tag alsBlock-Element (blau ist der auszulösende Bereich des Links - hier über das gesamte Element) |
Klarer Vorteil für eine gute Usability.
5 Schritt:
Rahmen um die Listenelemente:
<style type="text/css">
ul {
list-style-type: none;
}
li {
float: left;
width: 75px;
background-color: #efefef;
margin-right: 3px;
}
a {
display: block;
text-align: center;
border: 1px solid #333333;
}
</style>
 |
| gefloatete Listenelemente mit definierter Breite und Hintergrundfarbe, Außenabstand & Rahmen |
Farbwechsel , wenn ich mit der Maus über die Kästen fahren
Dazu benötigen wir Pseudo-Klassen - insbesondere den hover (Ein Event, der Sachen verändern kann, wenn ich mit der Maus drüberfahren! = Mouseover-Effekt!)
css4you>(hover)
<style type="text/css">
ul {
list-style-type: none;
}
li {
float: left;
width: 75px;
background-color: #efefef;
margin-right: 3px;
}
a {
display: block;
text-align: center;
border: 1px solid #333333;
}
a:hover {
color: orange;
}
</style>
 |
| gefloatete Listenelemente mit definierter Breite und Hintergrundfarbe, Außenabstand & Rahmen und hover (Mouseover-Effekt) :) |
Pseudo Klassen / Elemente -> Hover:
Die Pseudoelemente benötigen einen Doppelpunkt ":" - dieser stellt eine Instanz zu den Interaktionen her = Pseudo-Klassen!
Das heißt: dieser Stylesheet "a:hover wird nur dann aufgerufen, wenn wir mit der Maus hovern = darüberfahren und zwar über den mit a referenzierten Link! Sonst ist er nicht aktiv!
So haben wir eine Möglichkeit als User mit dem Browser zu interagieren
-> User fährt mit der Muas darüber und
-> der Browser wendet den hover an!
 |
| Pseudoklasse a:hover (mit Mouseover-Effekt) "an" bzw aktiv - bezieht sich nur auf das a-Tag! Sobald ich mit der Maus drüberfahre, soll er die Farbe wechseln |
 |
| Pseudoklasse a:hover (mit Mouseover-Effekt) "aus" bzw inaktiv - bezieht sich nur auf das a-Tag! Sobald ich mit der Maus drüberfahre, soll er die Farbe wechseln, sonst nicht! |
Was können wir noch tun, wenn der User mit der Maus über den link fährt?
- Linkfarbe ändern
- Schriftart könnte sich ändern
- Schriftgröße
- Background-color,
- Border-Einstellungen,
- bold, italic...
=> Wir haben viele Möglichkeiten, es ist halt die Frage, was sinnig ist ;)
Beispiel:
a:hover {
color: orange;
font-family:arial;
font-style: italic;
border: 2px dashed red;
background-color: white;
}
 |
| Spielerei: Hover verändert :) |
über text-decoration: none können wir den Unterstrich unter dem Link entfernen! :)
<style type="text/css">
ul {
list-style-type: none;
}
li {
float: left;
width: 75px;
background-color: #efefef;
margin-right: 3px;
}
li:hover {
background-color: #222;
border-bottom: 10px solid red;
}
a {
display: block;
text-align: center;
border: 1px solid #333333;
}
a:hover {
color: orange;
font-family:arial;
font-style: italic;
border: 2px dashed red;
background-color: white;
text-decoration: none;
}
</style>
 |
| wir können auch das Listenelement hovern |
li:hover {
background-color: #222;
border-bottom: 10px solid red;
}
 |
| text-decoration sorgt dafür, dass der Linktext nicht mehr unterstrichen ist |
Frage: Wie kann ich die ganze Navigation zentrieren?
Also einen div um die UL bauen und eine Id geben: wrapper:
<div id="wrapper">
<!doctype html>
<html>
<head>
<title>Navigation</title>
<meta name="author" content="fraukalke">
<style type="text/css">
div#wrapper {
margin-left: auto;
margin-right: auto;
}
ul {
list-style-type: none;
}
li {
float: left;
width: 75px;
background-color: #efefef;
margin-right: 3px;
}
li:hover {
background-color: #222;
border-bottom: 10px solid red;
}
a {
display: block;
text-align: center;
border: 1px solid #333333;
text-decoration: none;
}
a:hover {
color: orange;
font-family: arial;
font-style: italic;
border: 2px dashed red;
background-color: white;
text-decoration: none;
}
</style>
</head>
<body>
<div id="wrapper">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Produkte</a></li>
<li><a href="#">Katalog</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Impressum</a></li>
</ul>
</div>
</body>
</html>
Mmh - klappt irgendwie nicht sonderlich gut.
ABER - der Dozent leitet uns eine Datei weiter, in der er es anders gelöst hat:
zentrieren-1.html:
Die klassische Art des zentrieren geht über margin: 0 auto;
div#inner {margin: 0 auto;} = 2 Werte: 0 für untern und oben und auto für links und rechts
 |
| Ausgabe des oberen Quelltextes (zentrieren-1.html) |
die UL hat default-mäßig ein padding-left von 40px - also zunöchst in die ul {padding-left: 0px;} eintragen.
Jetzt wollen wir die UL mittig stellen.
also margin einstellen - dafür geben wir es unserem wrapper mit:
Vorschau auf morgen: Positioning (absolutes Positionieren)
 |
| Navigationslinks nebeneinander - mit float |
 |
| Navigationslinks untereinander - ohne float |
 |
| Bilder mit float und clear nebeneinander und untereinander anordnen |
!!!Das li gehölrt zu einem Ul-Verbund und ist damit zählbar. Ich kann nth-child zuweisen!
Ich kann es auch berechnen und sagen: jedes dritte, jedes vierte...!!!
Der div-Container ist nur zum Strukturieren da - mit der UL kann ich dann berechnen :)
So könnte ich auch sagen:" Wenn das Device/Ausgabegerät kleiner wird, kann ich die einzelnen Elemente genau ansprechen und bspw sagen, dass sie kleiner werden sollen, wenn das Ausgabegerät kleiner wird und umgekehrt.
|
| Dieses Bild nacharbeiten |
Tipp:
Bootstrap - CSS-Hilfe gerade toll für Responsive-Design :)
Keine Kommentare:
Kommentar veröffentlichen