Hilfe bei der Positionierung der Navigation
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
arbeiten
auto
bild
blocken
boxen
code
display
element
grafik
header
http
information
kommentar
layout
navigation
position
sache
text
url
verwenden
-
Hallo,
ich verzweifel gerade an einer kleinen Problematik.
1.) Ich möchte in meinem Header-Bereich der Webseite eine Grafik einbinden,
2.) auf diese sollen zwei Divs.
- In die erste kommt eine Kurzbeschreibung (ca mittig links von der Grafik)
- die zweite beinhaltet die Navigation
3.) das Hintergrundbild + die beiden Divs sollen sich prozentual zur Fenstergröße/ Browsergröße
verändern
Ich habe es bereits über diesen Weg probiert:
- beide Divs mit position: relative und bottom an die gewünschte Positon verschieben
- die Abstände- und Größenangaben mit % bzw. vw angegeben
- die Divs floaten nach links, damit unter der Grafik kein allzugroßer Abstand entsteht.
Nun die Problematik:
Sobald wie ich das Browserfenster veränder oder auf einem anderem Endgerät anzeigen lasse, ist die navigation verschoben.
Wie schaffe ich es das die Navigation am unteren Ende bündig mit der Hintergrundgrafik abschließt?
Hier der Rohbau:
http://webdesign-koehler.lima-city.de/
Vielen Dank schonmal -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hallo webdesign-koehler,
also ich würde das layout ein wenig umstellen:
<!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <title>Webdesign Köhler</title> <style type="text/css"> html, body { width:100%; height:100%; margin:0px; padding:0px; overflow:auto; } body { font:100%/1.4 Verdana, Arial, Helvetica, sans-serif; background-color:#363636; color:#000; text-align:center; } h1, p { margin:0px; padding:0px; } #container_tabelle { display:table; width:85%; height:100%; margin:0px auto; background-color:#FFFFFF; } #container_tabelle > div { display:table-row; } #container_tabelle > div > div { display:table-cell; text-align:center; } #obere_zeile > div { vertical-align:top; } #untere_zeile > div { vertical-align:bottom; } #header { position:relative; } #header > img { width:100%; margin:0px; } #detail { position:absolute; top:30%; right:0px; background-color:orange; padding:5px; font-size:1vw; } #navigation { width:100%; position:absolute; bottom:5px; left:0px; text-align:center; } #navigation > div { display:table; margin:0px auto; } #navigation > div > ul { display:table-row; } #navigation > div > ul > li { display:table-cell; padding:4px 12px; margin:0px; border:1px darkgrey solid; background-color:rgba(200,200,200,0.4); text-align:center; vertical-align:bottom; } #navigation > div > ul > li:hover { background-color:orange; } #navigation > div > ul > li > a { font-size:1.5vw; text-decoration:none; } #navigation > div > ul > li > a:hover { text-decoration:none; } .icon { width:7vw; } #main { padding:3% 5%; } #main h1 { text-align:center; padding-bottom:5px; border-bottom:1px solid #999; } #footer { background-color:#CCC49F; padding:1% 5%; } </style> </head> <body> <div id="container_tabelle"> <div id="obere_zeile"> <div> <div id="header"> <img src="http://webdesign-koehler.lima-city.de/images/header.jpg" alt=""> <div id="detail"> <h2>Christopher Köhler</h2> <p>Webdesign und Onlinemarketing<br>Alles aus einer Hand!</p> </div> <nav id="navigation"> <div> <ul> <li><a href="#" title=""><img class="icon" src="http://webdesign-koehler.lima-city.de/images/icon1.png" alt=""><br>Startseite</a></li> <li><a href="#" title=""><img class="icon" src="http://webdesign-koehler.lima-city.de/images/icon2.png" alt=""><br>Lebenslauf</a></li> <li><a href="#" title=""><img class="icon" src="http://webdesign-koehler.lima-city.de/images/icon3.png" alt=""><br>Zeugnisse</a></li> <li><a href="#" title=""><img class="icon" src="http://webdesign-koehler.lima-city.de/images/icon4.png" alt=""><br>Referenzen</a></li> <li><a href="#" title=""><img class="icon" src="http://webdesign-koehler.lima-city.de/images/icon5.png" alt=""><br>Kontakt</a></li> </ul> </div> </nav> </div> <div id="main"> <h1>1.) Anweisungen</h1> <p> Beachten Sie, dass der CSS-Code für diese Layouts mit vielen Kommentaren versehen ist. Wenn Sie vor allem in der Entwurfsansicht arbeiten, werfen Sie einen Blick auf den Code, um Tipps zum Verwenden von CSS für die festen Layouts zu erhalten. Sie können diese Kommentare vor dem Veröffentlichen Ihrer Site löschen. Weitere Informationen zu den in diesen CSS-Layouts verwendeten Methoden finden Sie in diesem Artikel im Adobe Developer Center. </p> <br> <h1>...</h1> <p> ... </p> </div> </div> </div> <div id="untere_zeile"> <div> <div id="footer"> <p>Footer</p> </div> </div> </div> </div> </body> </html>
LG hechma
p.s.: den container habe ich als blinde-css-tabelle formatiert um den footer immer am unteren bildschirmrand zu haben, auch wenn der inhalt weniger als eine bildschirmhöhe aufspannt
Beitrag zuletzt geändert: 29.8.2015 13:42:24 von hechma -
Vielen Dank für die hilfreiche Antwort,
ich werde sofort morgen deine Vorschläge umsetzten! =)
Wie sieht es mit der Browserkompatibilität von:
- display: table* und
- der Größenangabe VW und VH
aus?
Ach und erkennen die Browser auch die Zeichen > bei
- #id > ul > li
oder kann es da auch zu Komplikationen kommen,
weil ich die Schreibweise nicht kenne? =)
LG und Vielen Dank nochmal. -
Hallo!
display: table funktioniert eigentlich überall; bei IE ab Version 8. Du kannst mit mindestens 97% Unterstützung (global rechnen)
VH bzw. VW sieht schon deutlich schlechter aus, IE unterstützt ab Version 9, Chrome und Firefox in den neusten Versionen. Insgesamt 69% global und 78% in Deutschland. (Mehr: http://caniuse.com/#search=vh)
#id > ul > li Das ist gar kein Problem und gibt es schon ziemlich lange: 97% Unterstützung und mehr.
Alle Informationen von: http://caniuse.com/
Dort kannst du so etwas leicht nachschauen.
mfg
jonas -
Hallo webdesign-koehler,
das mit der schriftgröße ist leider immernoch so'ne sache... wie gesagt werden die neueren relativen einheiten (vw/vh,rem) nicht vom explorer8- untersctützt...
für eine sich an die fenstergröße anpassende schriftgröße kann man aber auch komfortable jquery-plugins benutzen, zb.: http://fittextjs.com/
ich würde dir allerdings sehr anraten deine seite auf dem html5 standart auszuzeichnen (wie das grundgerüst in meinem obigen beitrag, auch das nav-element ist da ja schon verbaut) - und die entsprechenden html5-elemente anstatt der div-.suppe zu verwenden (besonders article, header, footer, aside, section, nav) - die suchmaschinen werden es dir danken. hier eine kleine übersicht dazu: http://blog.selfhtml.org/2013/03/10/html5-serie-neue-elemente-fuer-die-seitenstruktur/
wenn du noch mehr icons verbauen willst solltest du auch darüber nachdenken die bilder der icons nicht alle als einzelne bildchen zu speichern sondern ein einziges großes bild mit allen icons drauf zu erstellen von dem du dann immer den entsprechenden ausschnitt anzeigen lässt (css-image-sprite) denn schließlich verbraucht jede bildquelle einen neuen verbindungsaufbau was die ladezeit unter umständen sehr beeinträchtigen kann. siehe hierzu: http://www.w3schools.com/css/css_image_sprites.asp
oder aber gleich ganz ohne bilder, als text-glyphen wie man es von bootstrap kennt: http://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp, http://glyphsearch.com/
...und wenn du's ganz schick machen willst (oder ein besonders nettes suchmaschinenergebnis erzielen willst) dann informiere dich noch über strukturierte-daten: https://developers.google.com/structured-data/
LG hechma -
Ihr seid spitze!
Nochmal vielen viele Dank,
dass bringt mich ordentlich voran
Beitrag zuletzt geändert: 30.8.2015 10:13:20 von webdesign-koehler -
Ein Hinweis
Aus meiner Sicht ist die Verwendung solcher Konstrukte wie
#container_tabelle > div > div
zwar auf den ersten Blick praktisch, aber lesbarer und damit auch wartungsfreundlicher ist in den meisten Fällen doch einfach die Verwendung von Klassen vzw. ID
und eine Frage
Wie wirkt sich die Nutzung von vw bei Geräten mit kleinen Viewport aus? Ich sehe nur Microschrift, wenn ich mir die Website mit einem Smartphone ansehe.
-
nun der ausdruck
beinhaltet ja sogar eine id - und wenn es darum geht eine tabellenstruktur auszudrücken, also irgendwie gerade den zusammenhang zwischen eltern- und kindelementen (<table><tr><td></td></tr></table>), finde ich die schreibweise sogar äußerst zutreffend :P#container_tabelle > div > div
außerdem spart sie platz im initialen quelltext wenn die css ausgelagert wird - und das ist immer gut :)
lg hechma -
@hechma: warum fängt man so schön mit den HTML5 Tags an wie header und nav und setzt dies nicht konsequent im Script weiter? Wozu gibt es denn die Tags wie section, aside, footer usw.?
-
ich seh schon hier gibt es doch noch einige Ansichtspunkte die ich noch gar nicht so betrachtet habe! =)
Danke für die konstruktiven Kommentare! -
@all-in1: ja ich wollt mich an seinen code halten damits verständlicher ist
ich hätt das template wahrscheinlich in etwa so gemacht:
<!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="robots" content="index, follow"> <title>Christopher Köhler | Startseite</title> <meta name="description" content="Willkommen bei Christopher Köhler - Ihr Spezialist in Sachen Webdesign und Onlinemarketing"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <link href="favicon.ico" rel="icon"> <link href="style.css" type="text/css" rel="stylesheet"> </head> <body> <article> <div> <section> <div> <header> <div> <h1>Christopher Köhler</h1> <p>Webdesign und Onlinemarketing<br>Alles aus einer Hand!</p> </div> <img src="http://webdesign-koehler.lima-city.de/images/header.jpg" alt=""> </header> <nav> <div> <ul> <li><a href="startseite/" title="Startseite"><img src="http://webdesign-koehler.lima-city.de/images/icon1.png" alt="Startseite">Startseite</a></li> <li><a href="lebenslauf/" title="Lebenslauf"><img src="http://webdesign-koehler.lima-city.de/images/icon2.png" alt="Lebenslauf">Lebenslauf</a></li> <li><a href="zeugnisse/" title="Zeugnisse"><img src="http://webdesign-koehler.lima-city.de/images/icon3.png" alt="Zeugnisse">Zeugnisse</a></li> <li><a href="referenzen/" title="Referenzen"><img src="http://webdesign-koehler.lima-city.de/images/icon4.png" alt="Referenzen">Referenzen</a></li> <li><a href="kontakt/" title="Kontakt"><img src="http://webdesign-koehler.lima-city.de/images/icon5.png" alt="Kontakt">Kontakt</a></li> </ul> </div> </nav> </div> <article> <header> <h2>Startseite</h2> <p>Willkommen bei Christopher Köhler - Ihr Spezialist in Sachen Webdesign und Onlinemarketing</p> </header> <section> <h3>1.) Anweisungen</h3> <p>Beachten Sie, dass der CSS-Code für diese Layouts mit vielen Kommentaren versehen ist. Wenn Sie vor allem in der Entwurfsansicht arbeiten, werfen Sie einen Blick auf den Code, um Tipps zum Verwenden von CSS für die festen Layouts zu erhalten. Sie können diese Kommentare vor dem Veröffentlichen Ihrer Site löschen. Weitere Informationen zu den in diesen CSS-Layouts verwendeten Methoden finden Sie in diesem Artikel im Adobe Developer Center.</p> </section> <section> <h3>...</h3> <p>...</p> </section> </article> </section> </div> <div> <section> <footer> <p>FOOTER</p> </footer> </section> </div> </article> </body> </html>
@charset "utf-8"; html, body { width:100%; height:100%; overflow:auto; margin:0px; padding:0px; } body { background-color:#363636; font:100%/1.4 Verdana, Arial, Helvetica, sans-serif; text-align:center; } h1, h2, h3, p { margin:0px; padding:0px; } h2 { padding-bottom:5px; } h1, h3 { text-align:center; padding-bottom:5px; border-bottom:1px solid #999; } body > article { display:table; width:85%; min-width:480px; height:100%; margin:0px auto; background-color:#FFFFFF; -webkit-box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.75); box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.75); } body > article > div { display:table-row; } body > article > div > section { display:table-cell; text-align:center; vertical-align:top; } body > article > div:last-child > section { vertical-align:bottom; } /* ---------- header ---------- */ body > article > div > section > div { position:relative; } body > article > div > section > div > header > div { position:absolute; top:25%; right:0%; min-width:200px; background-color:orange; padding:2% 3%; font-size:1vw; } body > article > div > section > div > header > div > h1 { font-size:1.5vw; } body > article > div > section > div > header > div > p { font-size:1vw; } @media (max-width: 800px) { body > article > div > section > div > header > div > h1 { font-size:3vw; } body > article > div > section > div > header > div > p { font-size:2vw; } } body > article > div > section > div > header > img { width:100%; display:block; } /* ---------- nav ---------- */ body > article > div > section > div > nav { width:100%; position:absolute; bottom:0px; left:0px; background-color:rgba(200,200,200,0.3); } body > article > div > section > div > nav > div { display:table; table-layout:fixed; width:50%; min-width:420px; margin:0px auto; } body > article > div > section > div > nav > div > ul { display:table-row; } body > article > div > section > div > nav > div > ul > li { display:table-cell; padding:0; margin:0; border-right:1px darkgrey solid; vertical-align:bottom; } body > article > div > section > div > nav > div > ul > li:first-child { border-left:1px darkgrey solid; } body > article > div > section > div > nav > div > ul > li:hover { background-color:orange; } body > article > div > section > div > nav > div > ul > li > a { display:block; padding:8%; color:#000000; text-align:left; font-size:1vw; font-weight:bold; text-decoration:none; } body > article > div > section > div > nav > div > ul > li > a:hover { text-decoration:none; } body > article > div > section > div > nav > div > ul > li > a > img { display:block; width:100%; } body > article > div > section > div > nav > div > ul > li > a > p { display:block; } /* ---------- mitte ---------- */ body > article > div > section > article { padding:8%; text-align:left; border-top:3px solid orange; } body > article > div > section > article > section { margin:5% 0%; } /* ---------- footer ---------- */ body > article > div > section > footer { background-color:#222222; border-top:3px solid orange; color:#EEEEEE; padding:1% 5%; } -
perfekt danke für die vielen interessanten Kommentare
und die unterschiedlichen Ansichtspunkte =)
Ich kann mir jetzt schon einiges mehr unter den Weiten des Webdesigns vorstellen ;)
Danke an alle!
-
Hallo webdesign-koehler!
Ich habe mir soeben deine Website angeschaut (http://webdesign-koehler.lima-city.de/).
Die prozentuale Vergrößerung etc. funktioniert ja schon einmal so wie sie soll. Bloß einen kleinen Tipp hätte ich noch für dich: setze für die Bilder in der Navigationsleiste bitte eine maximale Größe. Ich habe einen 1600x900px Bildschirm und bei mir werden die Bilder größer gestreckt, als sie sind, das heißt sie sind sehr stark verpixelt und übrigens auch etwas überproportional groß. Eine einfache Lösung für das Problem:
//CSS; Bilder der Navigation jeweils mit der Klasse .nav_img versehen, also <img src="" class="nav_img"> #nav_img { //Hier der schon bestehende Code für die Skalierung des Bildes max-width: ???px; //Hier die Tatsächliche, unskalierte Breite der Bilder angeben, um zu verhindern dass diese höherskaliert und somit verpixelt werden... max-height: ???px; //Das selbe wie oben, bloß mit der Höhe der Bilder (Dient hier der Sicherheit, dass alles funktioniert). }
Ich, weiß, das hat mit dem eigentlichen Thema dieses Beitrages nicht mehr wirklich viel zu tun, aber vielleicht ist es ja trotzdem hilfreich
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
