nicht angemeldet
Positionierung von Ebenen
Hallo Forum,
ich bin das erste mal dran eine Seite nicht mit Tabellen sondern mit Ebenen zu layouten.
Aller Anfang ist schwer, aber es ist doch shcon eine Ecke flexibler als Tabellen.
Nun habe ich bei meinen ersten Versuchen noch zwei kleine Problemchen.
Die Seite ist unter www.phpwg.de/ebenen zu sehen
1. Das Logo will nicht da hin wo es hin soll
2. Die Ebene Submenu sollte die restliche Höhe der Seite ausfüllen (height: 100%; führt im IE zu Problemen)
Zum ersten Problem muss ich sagen, dass ich schon einige Varianten ausprobiert habe. ich habe versucht, das logo mit eine top -400px an seine
Stelle zu schieben. Dies funktionierte im Firefox und Opera, der IE hat dann aber eine Lücke in Höhe des Logos vor dem Navigationsbalken gelassen.
Der Fehler liegt wohl in der Positionierung mit absolute bzw relative, bei meinen Recherchen bin ich aber auch nicht schlauer geworden. Wäre cool wenn mir jemand von Euhc weiterhelfen könnte.
grüße
Uli
Hier noch die Sources:
HTML
index.html
http://phpfi.com/60056
STYLESHEET
http://phpfi.com/60057
-
Moinsen,
Der Fehler liegt wohl in der Positionierung mit absolute bzw relative, bei meinen Recherchen bin ich aber auch nicht schlauer geworden. Wäre cool wenn mir jemand von Euhc weiterhelfen könnte.
versuche doch mal mit float weiterzukommen. Die absolute Positionierung kannst Du Dir dann sicher sparen. Um floats zu "beenden" (also den normalen Textfluss wieder zu erzeugen) brauchst Du clear.
Beispiele zu einfachen CSS basierten Layouts mit DIV-Containern.
--
cu,
Maz-
Danke mal für die Links,
aber mit float kann ich wohl wenig anfangen, weil das Logo über einer anderen Ebene, das den Hintergrund beinhaltet.
Oder liege ich da falsch?
Gruss Uli-
Hallo Uli!
aber mit float kann ich wohl wenig anfangen, weil das Logo über einer anderen Ebene, das den Hintergrund beinhaltet.
Was meinst du eigentlich mit Ebenen?
Oder liege ich da falsch?
Ja, tust du *g*
Setze für das Element, das das Logo enthält
float:right;und das Logo steht oben rechts in der Ecke (wenn es auch im Quelltext ganz oben steht).Gruß
Martin
-
Was meinst du eigentlich mit Ebenen?
Upps, in diesem Fall ist Ebene räumlich gemeint. Das div mit der id="logo" liegt vom z-index her gesehen überhalb der Ebene Content.
Also ich bin weiterhin der Überzeugung dass michfloat:right;nicht weiterbringt.Gruss Uli
-
Moinsen,
Was meinst du eigentlich mit Ebenen?
Upps, in diesem Fall ist Ebene räumlich gemeint. Das div mit der id="logo" liegt vom z-index her gesehen überhalb der Ebene Content.den z-index brauchst Du nicht wenn Du die Elemente floatierst.
Also ich bin weiterhin der Überzeugung dass mich
float:right;nicht weiterbringt.es kommt drauf an was Du rechts floatest: Das Logo selber oder das umgebende Element (z.B. ein DIV). Innerhalb des DIVs kannst Du den textfluss mit text-align: right rechtsbündig setzen. Dazu noch ein paar paddings und das Ding sitzt perfekt. Du kannst aber auch im DIV Elemente floatieren.
und vergiss nciht ab dem Element, das nicht mehr gefloatet sein soll, ein clear einzusetzen.
--
cu,
Maz -
hi,
Also ich bin weiterhin der Überzeugung dass mich
float:right;nicht weiterbringt.ich bin weiterhin der meiung, dass du dich mit der bereits verlinkten seite http://de.selfhtml.org/css/layouts/ erst mal etwas intensiver beschäftigen solltest - bevor du dich weiter in absolute positionierung verrenst.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; } -
Hi Uli!
Ich war sogar angefangen, dir den Code zuschreiben - aber du hast jetzt schon so eine <div>-Suppe, dass ich kaum durchsteige. Hier mal dein gereinigter HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Ebenentest</title> <link href="vetter.css" rel="stylesheet" type="text/css"> </head> <body> <div id="content"><img src="images/back_temp.jpg" width="751" height="395"> <!--wenn dies ein Hintergrundbild sein soll, dann mach auch eins draus --> <img src="images/logotemp.gif" width="93" height="94" id="logo"> </div> <ul id="menu"> <li><img src="images/menu_kontakt.gif" alt="Kontakt" width="149" height="26"> <li><img src="images/menu_kontakt.gif" alt="Kontakt" width="149" height="26"> <li><img src="images/menu_kontakt.gif" alt="Kontakt" width="149" height="26"> <li><img src="images/menu_kontakt.gif" alt="Kontakt" width="149" height="26"> </ul> <div id="submenu">submenu soll den rest der seite auffüllen</div><!-- und was ist mit Content???--> </div> </body> </html>Versuche, diesen Code mit CSS so zu gestalten, wie es dir gefällt. Die restlichen divs waren überflüssig. Ebenso würde ich die Subnavigation mit Textlinks gestalten und Größenangaben per CSS regeln.
Gruß
Martin
-
-
-
-
-
Hi!
Der Fehler liegt wohl in der Positionierung mit absolute bzw relative, bei meinen Recherchen bin ich aber auch nicht schlauer geworden. Wäre cool wenn mir jemand von Euhc weiterhelfen könnte.
Ich habe auch anfangs versucht, mit absoluter/relativer Positionierung zu basteln. Ich habe aber schnell gemerkt, dass man davon besser die Finger lassen sollte und sich eher mit float, margin und padding beschäftigen sollte.
Auch ein Studium des SelfHTML-Kapitels über CSS-Layout wirkt Wunder.
Gruß
Martin