Wie würdet ihr es in HTML schreiben und später mit CSS stylen?
Hallo Leute.
Ich wollte den Header mit einem Bild in der Mitte zentriert und zwei Links, jeweils links und rechts darstellen.
Die Darstellung die ich wollte, habe ich hinbekommen.
(Es geht nur um die Positionierung der Elemente, und nicht um Farben, oder ob man die Links nicht im Header, sondern wo Anders positionieren sollte. Es geht explizit um diese Darstellung im Header-Breich.)
Bild 1(Browser): >>>>>>>>>>
Bild 2(HTML): >>>>>>>>>>
Bild 3(CSS): >>>>>>>>>>
Meine Frage wäre: Wie würdet ihr denn die HTML schreiben und anschließend mit CSS stylen, um so ein Ergebnis zu erreichen.
Ich bin mir ziemlich sicher, dass meine Variante nicht die übliche Variante ist, die ein erfahrener in diesem Bereich bevorzugen würde.
Danke.
4 Antworten
Ich bin mir ziemlich sicher, dass meine Variante nicht die übliche Variante ist,
Das hast du richtig erkannt, denn mit statischen Positionsangaben wirst du heute nicht sonderlich weit kommen. Dein Layout ist gerade mal für den von dir verwendeten Monitor geeignet (und alle Endgeräte, die zufällig die gleiche Auflösung nutzen). Sobald eine andere Auflösung verwendet wird, z.B. auf kleinen Smartphones, sieht der Nutzer nur noch einen kleinen Ausschnitt.
In Zeiten, wo es Responsive Webdesign gibt, sollte man die Seite auch von Beginn an so planen, dass sich das Layout an das jeweilige Endgerät anpasst. Und dazu gehört dann auch, dass man keine statischen Positionierungen vornimmt, sondern eben dynamische - und die erübrigen sich bereits häufig, wenn man Frameworks wie z.B. Bootstrap verwendet und seine komplette Seite in einem Grid darstellt.
Ja, da hast du recht. Man sollte von Anfang an Responsive arbeiten. Danke.
position: absolute und die ganzen Koordinaten sind in diesem Fall unnötig und sind nicht responsive (passen sich nicht an die Bildschirmgröße an).
Du könntest das ganze mit CSS Flexbox lösen. Hier ist eine Anleitung: A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks
Beispiel:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
< !-- Header ist grundsätzlich so breit wie der Bildschirm,
aber maximal 1024px.
'margin: 0 auto;'zentriert ihn horizontal.-->
header {
width: 100%;
max-width: 1024px;
margin: 0 auto;
}
nav {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
nav div {
flex-grow: 1;
text-align: center;
}
nav div a {
display: inline-block;
padding: 24px;
}
nav div img {
width: 144px;
}
</style>
</head>
<body>
<header>
<nav>
<div><a href="#home">Home</a></div>
<div><a href="#news">News</a></div>
<div><img src="bild.jpg"></div>
<div><a href="#contact">Contact</a></div>
<div><a href="#about">About</a></div>
</nav>
</header>
</body>
</html>
In Hinblick auf responsive Darstellung und einfachere Positionierung der Elemente, würde man eher zu einer Flexbox oder anderen Framework basierenden Gridsystemen greifen, mit deren Hilfe die Elemente innerhalb eines Rasters in gleichmäßigen Abständen aufgezogen werden können.
Etwas mehr HTML-Code, dafür flexibler im CSS und sich leichter an unterschiedliche Bildschirmgrößen anpassend.
Der von dir genutzte Code hat den entscheidenden Nachteil, dass er nur dann funktioniert, wenn Jemand ein exakt gleich großes Browserfenster, den gleichen Browser (unterschiede im Rendering) und Textgrößen nutzt. Sobald es davon Abweichungen gibt, sorgt die unflexible absolute Positionierung für gestalterische Brüche.
So :
HTML
<body>
<ul class="navBar">
<li>
<a href="Link1">Link1</a>
</li>
<li>
<a href="Link2">Link2</a>
</li>
<li>
<img src="img.png" alt="f">
</li>
<li>
<a href="Link3">Link3</a>
</li>
<li>
<a href="Link4">Link4</a>
</li>
</ul>
</body>
CSS :
*{
margin: 0;
padding: 0;
}
.navBar{
/* Hier durch bleibt navBar immer oben (auch beim scrollen) */
position: absolute;
top: 0;
/* Bild und links werden ordentlich angeordnet */
display: flex;
justify-content: space-between;
align-items: center;
height: 3rem;
width: 100%;
background-color: gray;
}
img{
height: 3rem;
}
li{
list-style: none;
}
a{
padding: 1rem;
}
Habe selber aber auch nicht so viel Erfahrung mit html und css