|
|||
HTML-Code:
<body> <header> <img src="" width="900" height="250" alt=""/> </header> <nav> <ul id="navigation"> <li><a href="index.htm"><div class="home">Home</div></a></li> <li><a href="about.htm"><div class="about">Über uns</div></a></li> <li><a href="concept.htm"><div class="concept">Konzept</div></a></li> <li><a href="ohours.htm"><div class="ohours">Öffnungszeiten</div></a></li> <li><a href="contact.htm"><div class="contact">Kontakt</div></a></li> <li><a href="drive.htm"><div class="drive">Anfahrt</div></a></li> <li><a href="sitenotice.htm"><div class="impressum">Impressum</div></a><div></div></li> </nav> <section> <p>Das ist ein Beispieltext.</p> <p>Das ist ein Beispieltext.</p> <p>Das ist ein Beispieltext.</p> <p>Das ist ein Beispieltext.</p> <p>Das ist ein Beispieltext.</p> <p>Das ist ein Beispieltext.</p> <p>Das ist ein Beispieltext.</p> <p>Das ist ein Beispieltext.</p> <div id="aside"><p>Hier kommt der Facebookbutton!</p></div> </section> <footer> <div id="Footer"><p>Copyright © </p></div> </footer> </body> |
Sponsored Links |
|
|||
So. Viele. Divs. Warum diese ganze divitis? Das bringt doch nichts.
Und, wenn ich dich richtig verstehe: Du gibst deiner section eine feste Breite und wunderst dich, dass sie nicht breiter wird? Auch solltest du elemente auch clearen wenn du sie floatest. Es scheint, dass du dir die Grundlagen von HTML/CSS noch genauer anschauen solltest. |
|
|||
Hallo,
ich werfe mal eine ganz andere Lösung in den Ring. Irgendwie werden bei der ganzen Diskussion die wichtigsten Personen im Bezug zu einer Webseite vergessen - die Besucher. Ein sinnvoller Grundsatz ist ja, das in Internetseiten nicht seitlich gescrollt werden sollte. In Zeiten von Touchscreens, Smartphones und Tablets würde ich die Navigation als flexible Buttons erstellen. Dann haben die Benutzer direkt sichtbare Flächen, die sie zum Wechsel der Seite antouchen können. Mit dem Flexbox-Modell muss auch nichts berechnet werden. Der HTML-Teil des Quellcodes bleibt sauber und übersichtlich. Links können ohne Änderung der CSS-Angaben hinzugefügt oder entfernt werden. Die Ansicht wirkt bei jeder Fensterbreite und jedem Zoomfaktor "sauber". Später kann dann mit Responsive Design noch genauer auf die Anordnung / Breite der Buttons eingewirkt werden. Vorlagen für CSS3-gestaltete Buttons gibt es inzwischen zu tausenden. Nachfolgend mal ein Beispiel, nur flexibel, noch ohne jegliches Responsive Design: HTML-Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt --> <title>Layout der Navigation</title> <meta name="description" content="Layout der Navigation"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) --> <style> @media all { * { -moz-box-sizing: border-box; box-sizing: border-box; } html { font-size: 100%; -moz-box-sizing: border-box; box-sizing: border-box; } body { padding: 0; } ul { padding: 0; margin: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } li { list-style-type: none; text-align: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -webkit-flex: auto; -ms-flex: auto; flex: auto; } a { text-decoration: none; color:white; font-weight:bold; width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 1.0rem; padding: 0.5rem 1rem; border:1px solid #74b807; border-radius: 0.5rem; margin: 0.5rem; -moz-box-shadow:inset 0px 1px 0px 0px #a4e271; -webkit-box-shadow:inset 0px 1px 0px 0px #a4e271; box-shadow:inset 0px 1px 0px 0px #a4e271; background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #89c403), color-stop(1, #77a809)); background:-moz-linear-gradient(top, #89c403 5%, #77a809 100%); background:-webkit-linear-gradient(top, #89c403 5%, #77a809 100%); background:-o-linear-gradient(top, #89c403 5%, #77a809 100%); background:-ms-linear-gradient(top, #89c403 5%, #77a809 100%); background:linear-gradient(to bottom, #89c403 5%, #77a809 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#89c403', endColorstr='#77a809',GradientType=0); background-color:#89c403; text-shadow:0px 1px 0px #528009; } a:hover { background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #77a809), color-stop(1, #89c403)); background:-moz-linear-gradient(top, #77a809 5%, #89c403 100%); background:-webkit-linear-gradient(top, #77a809 5%, #89c403 100%); background:-o-linear-gradient(top, #77a809 5%, #89c403 100%); background:-ms-linear-gradient(top, #77a809 5%, #89c403 100%); background:linear-gradient(to bottom, #77a809 5%, #89c403 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77a809', endColorstr='#89c403',GradientType=0); background-color:#77a809; } </style> </head> <body> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Über uns</a></li> <li><a href="#">Konzept</a></li> <li><a href="#">Öffnungszeiten</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#">Anfahrt</a></li> <li><a href="#">Impressum</a></li> </ul> </nav> </body> </html> MrMurphy Geändert von MrMurphy (03.04.2015 um 07:41 Uhr) |
Stichwörter |
ausrichten horizontal, css, html, navigation ausrichten |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit sticky navigation | ha-bauer | Javascript & Ajax | 6 | 22.04.2013 20:05 |
Problem mit Navigation | safari | CSS | 12 | 20.04.2011 12:11 |
Dropdown Navigation Problem in Opera | xuxu | CSS | 1 | 28.01.2011 17:45 |
Ul mit Sub-Ul Navigation macht Darstellungsprobleme im Opera | eRoZion | CSS | 17 | 16.09.2005 10:30 |
Container mit 2 Container darin -> Hintergrund anzeigen | bendar | CSS | 4 | 05.04.2005 19:18 |