|
|||
Probleme mit Floats
Liebe Forumsgemeinde,
Ich habe ein Problem mit floats und google ist erschöpft. Anbei eine Grafik worauf ich hinaus will. Vielleicht ist auch die Verteilung der Container so gar nicht richtig ( oder notwendig) jedenfalls ist die geplante seite full-width. Zur weiteren Beschreibung: Das Logo steht ganz links, die beiden Menüs links und rechts und darunter ein Strich (der eben nicht über die ganz Länge geht sondern die Breite des Logos ausnimmt und das ist die Schwierigkeit) Fällt euch dazu was ein? Vielen Dank für eure Hilfe im Vorraus. Liebe Grüße |
Sponsored Links |
|
|||
Du kannst es mal so versuchen, ich aber habs nicht getestet.
Die Stylesheets werden normal ausgelagert. HTML-Code:
<div style="width: 800px; height: 800px; border: solid 1px #FF0000; padding: 1px; margin: 5px auto;"> <div style="float: left; width: 200px; height: 200px; "> <img src="adresse.jpg" style="border: double; width: 200px; height: 200px;" alt="Logo" /> </div> <div style="float: right; width: 590px; height: 200px; border-bottom: solid 2px; "> <div style="float: left; width: 290px; height: 190px; padding: 5px; padding-top:150px ;"> <ul style="display: inline;"> <li style="display: inline; text-decoration: none;">Link1</li> <li style="display: inline; text-decoration: none;">Link2</li> <li style="display: inline; text-decoration: none;">Link3</li> </ul> </div> <div style="float: right; width: 280px; height: 190px; padding: 5px; padding-top:150px ;"> <ul style="display: inline;"> <li style="display: inline; text-decoration: none;">Link4</li> <li style="display: inline; text-decoration: none;">Link5</li> <li style="display: inline; text-decoration: none;">Link6</li> </ul> </div> </div> </div> Geändert von gabischatz (13.08.2012 um 02:37 Uhr) |
Sponsored Links |
|
|||
Hi,
der Ansatz von Gabischatz ist schon ganz gut, leider fehlt noch ein clearendes Element, die horizontale Linie geht über die gesamte Breite des div und ein paar div sind zuviel. Hier mal ein möglicher Aufbau: HTML-Code:
<img style="display:block;float: left; width: XXXpx; height: YYYpx; src="adresse.jpg" alt="Logo" /> <div style="height:YYYpx"> <ul style="float: left;margin-top: XYZpx;display: inline;"> <li style="display: inline; text-decoration: none;">Link1</li> <li style="display: inline; text-decoration: none;">Link2</li> <li style="display: inline; text-decoration: none;">Link3</li> </ul> <ul style="float: right;margin-top: XYZpx;display: inline;"> <li style="display: inline; text-decoration: none;">Link4</li> <li style="display: inline; text-decoration: none;">Link5</li> <li style="display: inline; text-decoration: none;">Link6</li> </ul> <div style="clear:both;"></div> <hr style="width:90%;" /> </div> |
|
|||
Hi Hook,
den Ansatz ist auch nicht schlecht, es kommt nur darauf an wie es hinterher aussehen soll, wobei das Irrelevant ist da jeder Benutzer sich seine Ansicht selber einrichten kann. Es ging mir nur darum ihm zu zeigen wie man so etwas aufbaut. Ob man einige DIVs weglassen kann, hängt von den Hintergrund-Grafiken ab oder ob ich es zentriert haben möchte oder oder oder. HR setze ich ein, um bei aus geschalteten Stylesheet Informationsbereiche von einander zu trennen. Deshalb steht bei mir in der CSS-Datei HTML-Code:
hr { display: none; clear: both; } MfG |
|
|||
Wenn Du schon Code zeigst, Dan bitte so:
HTML-Code:
<!doctype html> <html lang="de"> <head> <meta charset="UTF-8" /> <title>Beispiel</title> <style type="text/css"> ............................................... </style> </head> <body> ............................................ </body> </html> Gruß, Roland |
|
|||
sensationell wie schnell in diesem Forum wer antwortet - Danke!
Als Schwierigkeit kommt hinzu (und das ist ja genau das Problem) das Logo hat natürlich eine gewisse Breite (sagen wir jetzt 150px), der Rest (also das im gelben Kästchen) geht immer über die restliche Breite des Fensters... Ideen? |
|
|||
Danke
Zitat:
Zitat:
Volle Zustimmung. Deswegen ja auch nur der prinzipielle Aufbau. Der To hat jetzt schon mal zwei Ansätze, auf denen er weiter Aufbauen kann. @K.Roland Warum sollte ich das gesamte Grundgerüst mit angeben. Ich kenne weder die gewünschte DTD noch weiß ich welcher Zeichensatz genommen werden soll. Für mich ging es hier nur um einen Codeschnippsel, der den rudimentären Aufbau darstellt, ohne jeden überflüssigen Kram. Und inline-Styles sind zwar nicht schön, aber auch nicht falsch. Hook |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
CSS-Anfänger: im IE7 Probleme mit clear und falling floats | blablub | CSS | 7 | 24.08.2009 21:38 |
Probleme mit floats bei Bildern | fex89 | CSS | 1 | 16.03.2009 20:22 |
IE: Probleme mit ul-Menü | Ares | CSS | 4 | 18.10.2006 12:42 |
IE und Probleme mit floats | insanic! | CSS | 2 | 28.08.2006 21:03 |
Probleme mit geschachtelten divs und floats im Firefox | thalon | CSS | 5 | 04.11.2004 14:12 |