div ausrichten, aber wie?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
attribut
code
eigenschaft
ende
entfernen
glauben
header
http
inhalt
mitte
navigation
passen
position
probier
probieren
problem
setzen
vermeiden
verschieben
versehen position
-
Also ich bin mir nicht sicher, ob ich gerade auf dem Schlauch steh oder einfach etwas zu kompliziert angefangen habe. Das Problem findet sich hier: http://werktags.lima-city.de/project/
Am Ende soll noch ein div kommen mit einem Hintergrundbild (http://werktags.lima-city.de/project/img/footer.png). Jedoch weiß ich einfach gerade nicht wie ich das machen soll, da ich ja nicht weiß wie ich es positionieren soll mit \"top\", immerhin soll es ja variabel bleiben und nicht einen festen Platz haben.
Wäre für Ratschläge dankbar, insbesondere auch in der Optimierung meiner Quelltexte! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Wie meinst du das, \"am Ende\"? Meinst du, unter dem Div mit dem lorem ipsum soll noch ein div angehängt werden, also nur biem runterscrollen sichtbar, oder meinst du, dass am unteren Bildschirmrand immer ein Div angezeigt werden soll?
Ersteres wäre eventuell über \"bottom: 0;\" (o.ä) erreichbar, letzteres ebenfalls über \"bottom: 0;\" in Verbindung mit \"position: fixed;\".
Wenn du etwas anderes willst, bitte eine genauere Beschreibung ;) -
Ich würd einfach beide per position:relative; positionieren und dann einfach einen drunter hinklatschen und es sollte eigentlich passen.
Sollte dann auch weiter nach unten gehen, wenn der Div darüber größer wird. -
Prinzipiell soll immer nach dieser Sidebar/Lorem ipsum Teil dieser Footer kommen, jedoch nicht ständig sichtbar, sondern erst wenn man ganz nach unter gescrollt hat. Das wäre somit dein erste Version. Das mit dem \"bottom: 0px;\" hab ich schon ausprobiert. Leider setzt es dann das ganze nicht unter die anderen divs sondern einfach dahin, wo der browser aufhört.
Habs gerade so hochgeladen, also müsste man den Effekt sehen können.
benutzernaemelchen schrieb:
Ich würd einfach beide per position:relative; positionieren und dann einfach einen drunter hinklatschen und es sollte eigentlich passen.
Sollte dann auch weiter nach unten gehen, wenn der Div darüber größer wird.
Welche beiden sind den gemeint? Habs schon mal mit relative was gemacht, da hat mirs die div einfach verschoben.
Beitrag geändert: 23.7.2008 1:35:10 von werktags -
Welche beiden sind den gemeint? Habs schon mal mit relative was gemacht, da hat mirs die div einfach verschoben.
Ehrlich gesagt, alle.
Ich positioniere grundsätzlich immer relativ(außer es lässt sich nicht vermeiden, fixed z.B.). Dadurch wird das ganze einfach flexibler.
nunja, eigentlich sollten dann die beiden in der mitte relativ positioniert sein.
Dann wäre das linke Menü float:left, der Content float:right.
der footer wär dann eben auch wieder position:relative und clear:both;(Achtung: Die Eigenschaft hab ich selbst noch nie benutzt, hab nur das drüber gelesen. float:left würde wahrscheinlich auch gehen.)
Wenn du willst, könnte ich das mal hier probieren ;) -
merovius schrieb:
Hm, probier mal,
<div id=\\\'navi\\\'></div>
<div id=\\\'main\\\'></div>
<div id=\\\'sidebar\\\'>
Die alle in ein div (\\\'content\\\' oder so?) zu setzen und anschließend das position: absolute vom footer zu entfernen?
Habs probiert. Leider machts einfach nicht so wie es soll. Ich hab wie gesagt, dass div um die anderen gemacht und dann mit den Attributen versehen \"position: relative; width: 850px;\". Somit ist top/left = 0 und ich muss nich alles verschieben. Nur umschließt das div aber wenn man es noch mit einem border versieht eigentlich gar nichts, es ist einfach nur oben. Das liegt glaube ich an dem position: absolute der anderen divs, aber wenn ich das änder verschiebts mir alles nicht so wie ichs gerne hätte
benutzernaemelchen schrieb:
Welche beiden sind den gemeint? Habs schon mal mit relative was gemacht, da hat mirs die div einfach verschoben.
Ehrlich gesagt, alle.
Ich positioniere grundsätzlich immer relativ(außer es lässt sich nicht vermeiden, fixed z.B.). Dadurch wird das ganze einfach flexibler.
nunja, eigentlich sollten dann die beiden in der mitte relativ positioniert sein.
Dann wäre das linke Menü float:left, der Content float:right.
der footer wär dann eben auch wieder position:relative und clear:both;(Achtung: Die Eigenschaft hab ich selbst noch nie benutzt, hab nur das drüber gelesen. float:left würde wahrscheinlich auch gehen.)
Wenn du willst, könnte ich das mal hier probieren ;)
Hab das auch ausprobiert und komme einfach nicht weiter. Das float: right zum Beispiel verschiebt mir meinen ganzen Text einfach nach rechts. Und wenn ich nur den Inhalt und die Sidebar mit relative mache, setzt es natürlich die sidebar unterhalb des Inhalts an.
Würde das Angebot annehmen, wenns nicht zu viel Umstände bereitet. -
Habs probiert. Leider machts einfach nicht so wie es soll. Ich hab wie gesagt, dass div um die anderen gemacht und dann mit den Attributen versehen \"position: relative; width: 850px;\". Somit ist top/left = 0 und ich muss nich alles verschieben. Nur umschließt das div aber wenn man es noch mit einem border versieht eigentlich gar nichts, es ist einfach nur oben. Das liegt glaube ich an dem position: absolute der anderen divs, aber wenn ich das änder verschiebts mir alles nicht so wie ichs gerne hätte
D.h. ein Setup wie
<img id=\"header\" src=\"img/header.png\"/> <div id=\"content\"> <div id=\"navi\"></div> <div id=\"main\"></div> <div id=\"sidebar\"></div> </div> <div id=\"footer\"> </div>
Ohne jegliche position/top/left/bottom/right-Eigenschaften führt nicht zum gewünschten Ergebnis? Das fände ich verhältnismäßig seltsam, muss ich zugeben... -
@merovius: Ich habs hochgeladen. Alle Positionierungen kann ich ja nicht wegmachen, oder?
-
@merovius: Ich habs hochgeladen. Alle Positionierungen kann ich ja nicht wegmachen, oder?
Hab mal mein Firebug ein bisschen spielen lassen und folgendes getan:
dv#warp: border: none;
img#header: position: relative;
div#main: position: relative; top: 50px;
div#sidebar: top: 50px;
Die Werte für Top bei div#main und div#sidebar musst du selber überlegen, wie du die haben willst. Ansonsten sollte das ziemlichg enau das sein, was du willst. Übrigens ist der Stand, den ich verändert habe der von ca. 2:50, wenn du seitdem wieder was hochgeladen hast, kommt möglicherweise was anderes raus...
Beitrag geändert: 23.7.2008 2:51:25 von merovius -
Dankeschön, es hat geklappt. Das einzige Problem wäre, wenn die Sidebar länger wäre als der Inhalt, da das Footer-div sich ja direkt am Inhalt-div ausrichtet. Obwohl ich nicht denke, dass das passiert, wäre es vorsichtshalber doch nicht schlecht.
Da ich ja schon bei den Problemen bin, gibts -wie eigentlich immer- ein Darstellungsfehler im IE und wie das eben so ist, seh ich nicht wo das Problem liegen könnte. Da mein IE sowieso nicht richtig funktioniert und es für ihn kein Firebug gibt, kann ichs nur schlecht ausprobieren.
LG -
Also, IE ist echt problematisch. hast du IE7? Viele Probleme sind da immerhin schon behoben...
Ws dein Navigationsleisten-Problem angeht: Wenn du von den positionierungen her die navi mit dem Hauptcontent vertauschst (also die navi relative und den Hauptcontent absolute, jeweils mit passenden Werten für top und left), könnte das vielleicht dann andersrum passen... Einziges Problem wären variable Längen... aber imho solltest du dir eh evtl. überlegen den Header zukürzen, dass er direkt unten mit dem Div abschließt, also nicht so weit nach link ragt, wenn du weisst, was ich meine... das würde dann wohl alle deine Probleme lösen udn sähe imho auch besser aus.... -
Ne, hab irgend ne Vorgänger-Version von IE, jedenfalls kann noch nicht mal .png richtig anzeigen. Hab schon ein paar mal versucht IE7 zu installieren, aber am Ende kommt immmer ne Fehlermeldung, dass er nicht richtig installiert werden konnte. Kein Plan warum!
Wenn ich das vertausche (die position von Sidebar und Inhalt) dann würde es sich ja aber an der Sidebar ausrichten, was ja auch nicht so gut wäre. Musste im Übrigen das Navi-div rausnehmen, da sie ansonsten am falschen Platz war. Hab das ja mit so ul und li gelöst, weil ich keine map benutzen wollte. Funktioniert aber so auch. Lad gleich nochmal die Dateien hoch.
Verstehs nicht mit dem Header kürzen? Bitte nochmal erklären
Edit: Dateien neu hochgeladen
Beitrag geändert: 23.7.2008 11:27:13 von werktags -
1. Als Doctype XHTML 1.0 Strict deffinieren
2. vor dem Footer ein \"Clearer\" einfügen: <div style=\"clear:both;\"></div>
Das \"zieht\" den umrandeten Div dann nach unten.
Beispiel.
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\"> <html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\"> <head> <title>title...</title> </head> <body> <div>header...</div> <div><!-- main --> <div style=\"width:200px;float:left;\"> Navigation </div> <div style=\"width:800px;float:right;\"> Content </div> <div style=\"clear:both;\"></div> <!-- Main nach unten \"ziehen\" --> </div> <div>footer</div> </body> </html>
Egal ob der Content oder die Navigation höher ist, der Footer st immer darunter.
/Edit: Das Boxenmodell nach XHTML 1.0 Strict wird dann im IE6 sowie 7 gleich interpretiert, beim 6er dummerweise jedoch nur, wenn der Doctype in der ersten Zeile steht (darum wird die XML-Deffinition weggelassen).
Beitrag geändert: 23.7.2008 11:43:41 von trueweb -
Damit funktioniert es sehr gut. Leider ist das Problem mit dem IE noch nicht behoben. Da muss ich wohl noch etwas suchen.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
