|
|||
DIV statt Tabelle, für horizontale Navigationsleiste
Hallo.
Ich lese mich aktuell etwas in HTML und CSS ein, um von den Tabellen als Layout-Grundgerüst weg zu kommen. Das war Ziel für meine neue, kleine Seite. Leider scheitere ich dabei, DIV`s richtig zu nutzen und bin etwas ratlos. Ziel Eine horizontale Navigationsleiste, dessen 5 Menüpunkte immer zentriert ausgerichtet sind, und wo sich die äusseren Bereiche entsprechend der Browserbreite anpassen. Der Teil mit dem Inhalt, soll später nur so breit werden, wie die Menüpunkte zusammen. Hier habe ich das mit einer Tabelle gelöst, aber es ist nicht zufriedenstellend: René Scheibel | Leidenschaftliche Fotografie Eigentlich sollen die Menüpunkte in der Tabelle nach unten rechts ausgerichtet werden, aber das spinnt alles rum. Auch sollen beim Menüpunkt "Storys" später mehrer Auswahlmöglichkeiten aufklappen, wenn man mit der Maus rüber fährt. Vermutlich ist das bei einer Tabelle auch nicht realisierbar? Problem Ich habe nun 2 DIV`s genommen, um den linken und rechten Bereich darzustellen. Diese habe ich mit float entsprechend ausgerichtet. Allerdings bekomme ich es nicht hin, nun 5 weitere DIV`s für die Navigation, mit einer definierten Breite zentrisch dazwischen zu bekommen, während sich das linke und rechts DIV dann entsprechend automatisch nur in der Breite anpassen. Hier mal der Aufbau mit den DIV`s: René Scheibel | Leidenschaftliche Fotografie Was muss ich nun beachten, möchte ich die Leiste wie oben mit der Tabelle, nur in DIV`s realisieren? Mein css: body { margin-top: 70px; margin-left:0; margin-right:0; padding:0; } #left { float:left; width:250px; height: 50px; background-color:#000000; } #right { float:right; width: 250px; height: 50px; margin-left: 14em; background-color:#000000; } Mein body: <body> <div id="left"> </div> <div id="right"> </div> </body> Würde ich riesig freuen, etwas Input bekommen zu können! Gruss, Rene |
Sponsored Links |
|
||||
Hallo
Dir fehlen leider 15 Jahre Entwicklung von HTML und CSS. Die Zeiten von divs als Grundelement sind gezählt. div sollen (nach den HTML-Regeln sogar: dürfen) nur noch verwendet werden, wenn es keine geeigneteren Container gibt. Für die Hauptnavigation gibt es das nav-Element. Gleichermaßen sollen Informationen und Gestaltung so weit wie möglich getrennt werden. Daraus folgt dass nur Elemente in den body-Bereich gehören, die unbedingt notwendig sind. Auf Elemente nur zur Gestaltung sollte verzichtet werden. Entsprechend sieht der Quelltext für die Navigation folgendermaßen aus: Code:
<body> <nav> <a href="">Home</a> <a href="">About me</a> <a href="">Equipment</a> <a href="">Story</a> <a href="">Gallery</a> </nav> </body> Code:
nav { background-color: black; color: white; padding: 0 20%; margin: 1rem auto; display: flex; justify-content: space-around; } nav a { color: white; text-transform: uppercase; padding: 0.5rem 1rem; } nav a::before { content: "// "; color: #B68948; } Als Zeichenkodierung solltest du UTF-8 wählen. Das ist bereits seit 10 Jahren mehr oder weniger Standard. Dann müssen auch nur noch einige wenige Zeichen maskiert werden. Der gesamte Quelltext mit deinen bisherigen Angaben könnte dann so aussehen: Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>René Scheibel</title> <meta name="description" content="HTML5, CSS3"> <link href="http://www.scheibel-fotografie.com/favicon.ico" type="image/x-icon" rel="shortcut icon"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--[if lt IE 9]> <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script> <![endif]--> <style> @media all { header, nav, main, aside, footer, section, article, figure, figcaption, audio, video { display: block; } * { box-sizing: border-box; } html { background-image: url(http://www.scheibel-fotografie.com/background_wood.jpg); font-family: Sans-Serif; font-size: 100%; } body { margin: 0; } nav { background-color: black; color: white; padding: 0 20%; margin: 1rem auto; display: flex; justify-content: space-around; } nav a { color: white; text-transform: uppercase; padding: 0.5rem 1rem; } nav a::before { content: "// "; color: #B68948; } } </style> </head> <body> <nav> <a href="">Home</a> <a href="">About me</a> <a href="">Equipment</a> <a href="">Story</a> <a href="">Gallery</a> </nav> </body> </html> Zitat:
Zitat:
Zitat:
Zitat:
Du solltest nicht in den Fehler verfallen, eine Tabelle mit div nachbauen zu wollen. Das funktioniert nicht und fliegt dir spätestens um die Ohren, wenn du die Seite später mal für Smartphones und Tablets responsive gestalten möchtest. Gruss MrMurphy Geändert von MrMurphy (03.03.2016 um 18:55 Uhr) |
Sponsored Links |
|
|||
Herzlichen Dank für diesen tiefen Einblick ...
Hier das Beispiel, was ich mit "Inhalt = Menübreite" meinte: http://www.scheibel-fotografie.com Ich habe den alten Code mal mit deiner Variante ersetzt: René Scheibel
Was genau bedeuten die Befehle flex, text-transform und justify? Mit den Werten "rem" hälst du einen Abstand ein? Wie genau lässt sich der beziffern? nav { background-color: black; color: white; padding: 0 20%; margin: 1rem auto; display: flex; justify-content: space-around; } nav a { color: white; text-transform: uppercase; padding: 0.5rem 1rem; } nav a::before { content: "// "; color: #B68948; } |
|
||||||
Hallo
Zitat:
Ich habe das mal eingebaut. Heutzutage wird auf so große Hintergrundbilder (deins 680kb) auch verzichtet. Die Ladezeiten bei Smartphones und Tablets dauern dadurch zu lange und werden als störend empfunden. Leute mit Volumen-Verträgen werden dich verfluchen, da das Hintergrundbild überflüssig ist. Zitat:
Aufklappmenüs sind nicht sehr benutzerfreundlich und wegen der Touchscreens sehr aufwändig zu erstellen. Von daher rate ich von denen ab. Zitat:
Zitat:
Code:
text-transform: uppercase; Zitat:
1rem sind umgerechnet 16px. Zitat:
Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>René Scheibel</title> <meta name="description" content="HTML5, CSS3"> <link href="http://www.scheibel-fotografie.com/favicon.ico" type="image/x-icon" rel="shortcut icon"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--[if lt IE 9]> <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script> <![endif]--> <style> @media all { header, nav, main, aside, footer, section, article, figure, figcaption, audio, video { display: block; } * { box-sizing: border-box; } html { background-image: url(http://www.scheibel-fotografie.com/background_wood.jpg); font-family: Sans-Serif; font-size: 100%; } body { margin: 0; } nav { background-image: linear-gradient(90deg, black 0%, black 19%, transparent 19%, transparent 81%, black 81%, black 100%); color: white; padding: 0 19.5%; margin: 1rem auto; display: flex; justify-content: space-between; } nav a { background-color: black; color: white; text-align: center; text-transform: uppercase; padding: 0.5rem 1rem; margin: 0 1%; flex-grow: 1; flex-shrink: 1; flex-basis: auto; } nav a::before { content: "// "; color: #B68948; } main { background-color: white; width: 60%; padding: 0.5rem; margin: 1rem auto; } } </style> </head> <body> <nav> <a href="">Home</a> <a href="">About me</a> <a href="">Equipment</a> <a href="">Story</a> <a href="">Gallery</a> </nav> <main> <h1>Autobahnwahn</h1> <p>Seit zwei Jahren ist meine Arbeit in Düsseldorf. Meine Familie lebt dagegen in Hamburg. Und dazwischen ich, aber ganz cool.</p> <p>Vollbremskombination aus Ampel oder Einfädeln oder beides auf einmal. Geht nur mit Tricks. Eben noch kurz auf die A 52. Schon vielversprechend lebhaft. Hinter dem Breitscheider Kreuz geht es richtig los. Stau auf der A 3 bis Oberhausen.</p> <p>Danach entspannt es sich auch nur deshalb, weil enge Baustellen mit rüden Geschwindigkeitsbegrenzungen zum gleichmässigen Rollen zwingen. Es wird links überholt, es wird rechts überholt. Es wird gar nichts mehr, alles steht und macht lange Gesichter.</p> <p>Ich dagegen wechsle die Cassette. Es geht weiter. Vor und hinter mir hektische Spurenwechsel. So zieht sich das Stück A 2 bis zum Recklinghauser Kreuz. Der erhofften Entspannung folgt zuverlässig der Vollfrust.</p> <p>Die A 43 bis Münster ist genauso voll wie das Kamener Kreuz zur Rush-hour. Auf der A 1 ist dann endgültig Schluss mit lustig. Alles dümpelt auf der Überholspur. Natürlich mit 90. Rechts geht es schneller, irrerweise wegen der Lkws. Die wollen nämlich alle noch vor zehn zu Hause sein.</p> </main> </body> </html> MrMurphy Geändert von MrMurphy (03.03.2016 um 21:46 Uhr) |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
CSS - CMS - lange Menus Balken/BG oben? | shinobi | CSS | 3 | 13.10.2011 22:12 |
DIV Höhe 100% | Daniel86 | CSS | 12 | 29.07.2011 13:40 |
Design Float IE6 Problem | koknarr | CSS | 10 | 05.09.2008 19:05 |
Linkverhalten im IE6 | ChOpSueY! | CSS | 19 | 19.05.2008 23:48 |
tabelle in div drin, wer bestimmt die Breite? | bastien | CSS | 3 | 12.12.2006 17:03 |