Sponsored Links |
|
||||
Mit „vertical-align“ kannst Du die Ausrichtung von #logo und #navMain steuern.
Dafür müssten sie, in Deinem Fall (feste Breiten), als Inline-Block-Elemente formatiert werden (display: inline-block). „vertical-align“ wirkt auch bei Tabellen-Zellen. Dein Header als eine CSS-Tabelle zu formatieren, ginge also auch. |
Sponsored Links |
|
||||
Hallo,
danke für die Antwort. Die CSS-Variante mit display: table bwz. display:table-cell habe ich wieder entfernt, da ich in den einigen Browsern (Opera, Safari, Chrome) und bei mobile Devices massive Probleme damit hatte. Das Logo wurde gar nicht mehr angezeigt. Daher jetzt meine Umstellung auf gefloatete divs. Mit festen Breiten meinst du statt der 30% - 70% dann Pixelangaben? Das wird sich nicht machen lassen, da das gesamte Layout ausschließlich auf Prozentangaben basiert. Viele Grüße mimii |
|
||||
Nein, ungünstig ausgedrückt.
Wobei, aus meiner Sicht Prozent-Breiten, auch feste Breiten sind. Gemeint habe ich, dass die Elementen Breiten haben. Sonst hätte man sie auch mit „display: inline“ formatieren können. |
|
||||
Hallo nochmals,
also ich habe mit vertical-align und inline-block experiementiert - ohne Erfolg Hier hab' ich mal n fiddle erstellt, mit dem groben Layout. Was ich erreichen will, ist dass die Navigation auf dem grauen content aufsitzt. Danke für Eure Hilfe und Gruß mimii |
|
||||
Du muss natürlich die Floats raus nehmen, wenn Du #logo und #navMain mit „display: inline-block“ formatierst.
Float macht jedes Element zum Block-Elementen. Da nutzt Dir kein „display: inline-block“ - der „display: block“ durch den Float ist stärker. |
|
||||
hmmmmm,
irgendwie ist es nicht das was ich will. Die das Logo und die Nav sollten eigenlich nebeneinander und nicht untereinander platziert sein. Testcase hier hier .... und Danke für die Hilfe |
|
||||
Bei der Berechnung der Breiten (40% + 60%) kommen die Leerräume dazu (Inline-Elementen, Zeilen-Block).
Entweder reduzierst Du die Breiten ein wenig, oder sorgst dafür, dass die Leerräume nicht in die Berechnung mit einbezogen werden. Letzteres könntest Du in etwa so machen: HTML-Code:
<!doctype html> <meta charset="UTF-8"> <title>mimii :: xhtmlforum.de</title> <style> * { margin:0; padding:0; } header, #content { width: 90%; margin: 0 auto; } header { white-space: nowrap; } #logo { display: inline-block; width: 40%; } nav { display: inline-block; width: 60%; text-align: right; vertical-align: bottom; } nav ul { display: inline; white-space: normal; } nav li { background-color: #abc123; display: inline; margin-left: 2%; padding: 2% 4%; } #content { background-color: #696978; padding: 5%; } </style> <header> <div id="logo"> <h1><img src="http://placehold.it/250x100" alt="logo" /></h1> </div> <nav> <ul> <li>Link 1</li> <li>Link 2</li> <li>Link 3</li> </ul> </nav> </header> <div id="content"> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> </div> |
|
|||
Hallo,
die aktuelle Technik um solche Probleme zu lösen ist Flexbox: HTML5: mimii - Header Layout Gruss MrMurphy |
Sponsored Links |
|
|||
Hallo,
oder die alte Technik mit position: absolute; Edit fiddle - JSFiddle HTML-Code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Testseite</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> * { margin: 0; padding: 0; } html { font-family: Verdana, sans-serif; font-size: 120%; } body { margin: 2% auto; width: 96%; } header { background: yellow; position: relative; } header:after { content: " "; display: block; clear: both; } header figure { background: orange; float: left; width: 30%; } header figure img { max-width: 100%; vertical-align: bottom; } header nav { position: absolute; left: 30%; bottom: 0; width: 70%; } header nav ul { border-top: 1px solid #000; } header nav ul:after { content: " "; display: block; clear: both; } header nav ul li { background: lime; list-style: none; float: right; margin-left: 2%; padding: 2% 4%; } p { background: #696978; padding: 5%; } @media only screen and (max-width: 570px) { header, header nav { position: static; } header figure { float: none; width: 100%; } header nav { left: 0; bottom: 0; width: 100%; } header nav ul li { border-bottom: 1px solid #000; float: none; margin-left: 0; } } </style> </head> <body> <header> <figure> <img src="http://www.placehold.it/250x200" alt="Fliesen Geib - Fliesenleger Meisterbetrieb"> </figure> <nav> <ul> <li>Link 1 ... </li> <li>Link 2 ... </li> <li>Link 3 ... </li> </ul> </nav> </header> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> </body> </html> MfG Roland |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Hilfe!!! mein Homepagelayout funktioniert nicht! | maxx | CSS | 5 | 14.10.2012 08:21 |
Wachsende Container | Andy CD | CSS | 13 | 10.02.2010 14:08 |
3 dynam. Spalten mit Inhaltsüberlauf | spacegaier | CSS | 6 | 12.10.2007 01:24 |
Webseite in IE/MAXTHON ok, in Firefox zerissen | Midnight | CSS | 50 | 21.02.2006 11:34 |
Bild im Container mittig positionieren... | 18inch | CSS | 5 | 09.07.2005 15:48 |