<div>-Struktur auf umdiewelt.de
Eddie
1 1 
Gunnar Bittersmann
1 0 0 Eddie
<div>-Struktur auf umdiewelt.de
Eddie
Hallo allerseits,
ich habe ein kleines Div-Problem, und komme nicht wirklich weiter :-(
Auf folgender Grafik koennt ihr sehen, wie es gerade aussieht:
- ein Hauptbereich (schwarz), der positioniert ist.
- darin ein roter Navigationsbereich und ein blauer Content-Bereich.
Zu sehen auch auf: http://www.umdiewelt.de/struktur.htm.
Das Problem mit dem grünem Rahmen habe ich schon Jahre, er wird weiter unten dargestellt, als der eigentliche Content. Mein (ganz mieses) Workaround war bisher ein "margin-top:-30px;"
Das Wichtigste aber ist der graue Rahmen, den es noch nicht gibt! Ich habe keine Ahnung, wie ich den so positionieren kann, dass er auch bei sehr viel Content (lange Seite) ganz unten erscheint, aber noch vor Ende des Contents (also links davon und nicht unten!).
Waere sehr toll, wenn ihr mir da helfen koenntet!
Danke euch,
Eddie
P.S. (@Andreas): Dein Beitrag unter https://forum.selfhtml.org/?t=109479&m=684511 hat mir sehr geholfen, leider ist der Thread schon im Archiv gelandet... Darum Danke an dieser Stelle!
--
Old men and far travelers may lie with authority.
Old men and far travelers may lie with authority.
-
hi,
Das Wichtigste aber ist der graue Rahmen, den es noch nicht gibt! Ich habe keine Ahnung, wie ich den so positionieren kann, dass er auch bei sehr viel Content (lange Seite) ganz unten erscheint, aber noch vor Ende des Contents (also links davon und nicht unten!).
du könntest "rot" und "blau" nochmals zusammen in einen container packen, dessen höhe dann vom blauen bereich abhängen soll. diesen positionierst du relative, so dass du grau darin mit left:0; bottom:0; absolute positionieren kannst.
das geht aber dann in die hose, wenn blau nicht hoch genug sein sollte - dann überlagern sich rot und grau.
liesse sich evtl. verhindern, wenn grau eine feste höhe hat, und rot ein entsprechendes margin-bottom bekommt. je nach aufbau des ganzen mit float usw. muss man dann aber sehen, wie man den zusätzlichen container dazu bekommt, sich auch zu vergrößern, wenn blau zu kurz ist, als den margin-bottom von rot noch mit einzubeziehen.gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; } -
Hi Eddie,
ich habe ein kleines Div-Problem,
Eher ein großes. ;-)
Das Problem ist, dass du von der aktuell gewünschten Darstellung ausgehst und die mit miesen Tricks zusammenschusterst.
Denk nicht div, sondern zeichne die Struktur deines Dokumentes vernünftig in HTML aus. Sollten zur Gruppierung einige _wenige_(!) div nötig sein, so sei es.
<body> <div id="navigation"> <ul id="menu"> <!-- Es ist ja eine NavigationsLISTE --> <li>Navigation</li> <li>Navigation</li> <li>Navigation</li> <!-- ... --> </ul> <!-- Hier wär der Platz für dein graues Ding --> <ul id="weitereLinks"> <li>weitere Links<li> <li>weitere Links<li> <li>weitere Links<li> </ul> </div> <div id="inhalt"> <h1>Lorem ipsum</h1> <p>Lorem ipsum dolor sit amet …</p> </div> </body>div#navigation gibst du eine Breite (vorzugsweise in em) und
float: leftDas Problem mit dem grünem Rahmen habe ich schon Jahre, er wird weiter unten dargestellt, als der eigentliche Content. Mein (ganz mieses) Workaround war bisher ein "margin-top:-30px;"
Dann ist auch dein „(ganz mieses) Workaround“ überflüssig. (Die Klammern waren es auch ;-))
Gruß,
Gunnar--
„Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein) -
Hallo Eddie,
Mein Vorschlag,
<div id="container"
style="position:absolute;
top:200px;
background-image:url(back.gif); background-repeat:repeat-y;"><div id="navigation" style="width:200px; float:left;">
<ul style="list-style-type:none">
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
</ul><div id="Boxunten"
style="position:absolute; bottom:0px;
width:200px;"> <-- eigentlich unnütz,
aber ohne klappt es im FF nicht<div id="Box1" style="background-color:#cccccc">
Die neue graue Box
</div>Das was in deiner obigen Zeichnung grün ist ...
</div></div>
<div id="inhalt" style="margin-left:220px">
Inhalt
</div>Bei zu wenig Inhalt schiebt sich allerdings die Box über die Navigation. Ausprobiert habe ich obiges im IE6, FF, und Opera. An die 5er IEs will ich da lieber nicht denken. Ich habe allerdings keinen zum testen.
Grüße,
Jochen
-
Hi,
wozu das Ganze absolut top:200px positionieren? Reicht Dir margin-top nicht?
Dir ist klar, was 210px + 70% alles ergeben kann?
Um ein Element unten zu positionieren, ist position:absolute erforderlich.
Das Hintergrundbild könntest Du wier in http://de.selfhtml.org/css/layouts/anzeige/hintergrund.htm einbinden.freundliche Grüße
Ingo -
Hallo nochmal,
so, jetzt habe ich einen neuen Entwurf, waer super nett, wenn ihr da nochmal drauf schauen (und es vor allem mit euren Browsern checken) koenntet!
Hier der HTML-Code: http://www.umdiewelt.de/struktur_final.htm.
Und so in etwa ist der Code strukturiert, wobei der blaue Content-Bereich als erstes definiert wird (hat dann auch den Vorteil, dass der eigentliche Inhalt weiter oben steht):
Die Rechtecke sind alle <div>s!
Auch der graue Bereich (in der HTML-Version mit ein paar "Lorem Ipsums" gefuellt) haut soweit hin.Es hat bei mir funktioniert mit:
- Firefox
- IE 5.5 & 6
- Mozilla 1.2b
- Opera 7.11
Nicht funktioniert hat es allerdings mit Opera 6.0 - keine Ahnung wieso :-(
Ich habe das jetzt aus euren gesammelten Tipps zusammengebaut, mit viel Rumprobieren... Was meint ihr, kann man das so lassen???
Danke nochmal für eure Zeit,
Eddie--
Old men and far travelers may lie with authority.-
Hi!
Ich habe das jetzt aus euren gesammelten Tipps zusammengebaut, mit viel Rumprobieren... Was meint ihr, kann man das so lassen???
In Opera 8 klappt's auch. Also wenn's fast überall gut aussieht, dann lass es doch so. Ich frage mich nur, ob man nicht auch mit weniger positions ausgekommen wäre. Aber das heißt ja nicht, dass man nun alles noch mal aufrollen müsste...
Liebe Grüße
Fredo -
Hi,
Es hat bei mir funktioniert mit:
- Firefox
nicht mit meinem 1.0.4.
freundliche Grüße
Ingo-
Hallo Ingo,
was genau haut denn bei dir nicht hin?
Ich habe jetzt bei mir das Problem, dass bei sehr grossen Seiten (mit Bildern) die linken Kaestchen positioniert werden, noch bevor die Bilder da sind. Die Kaestchen erscheinen dann irgendwo in der Mitte der langen Navigationsleiste.
Erst bei neuem Laden der Seite (unter Verwendung der gecachten Bilder) haut es dann hin. Das ist zumindest mein Verdacht...Nur, wie kann ich das in den Griff bekommen??? JavaScript?
Mann, langsam bin ich echt am verzweifeln, draussen ist perfektes Wetter, und ich sitz vor der verdammten Kiste - und dann funzt das nach 8 Stunden noch nicht mal...
Eddie
--
Old men and far travelers may lie with authority.-
Hi,
was genau haut denn bei dir nicht hin?
ich weiß ja nicht, ob Du das so geplant hast...
freundliche Grüße
Ingo-
ich weiß ja nicht, ob Du das so geplant hast...
Genau so habe ich das geplant.
Aber was ist mit den Kaestchen die links unten erscheinen sollen? Wo stehen die bei dir?Eddie
--
Old men and far travelers may lie with authority.-
Hi,
Genau so habe ich das geplant.
Aber was ist mit den Kaestchen die links unten erscheinen sollen? Wo stehen die bei dir?gerade eben in Höhe von "In Jharkot; Ortseingang". Nach Reload dann ganz unten.
Eddie
freundliche Grüße
Ingo-
Heißa, Ingo,
Aber was ist mit den Kaestchen die links unten erscheinen sollen? Wo stehen die bei dir?
gerade eben in Höhe von "In Jharkot; Ortseingang". Nach Reload dann ganz unten.Im Konqueror verhält es sich ebenso wie in deinem und auch in meinem Firefox. Allerdings bleibt der Kasten immer etwas überhalb der Mitte der Seite, nach jedem Reload wo anders.
Gautera!
Grüße aus Biberach Riss,
Candid Dauth--
„Verwende niemals einen Vorteil, den dir ein anderer verschafft hat, zu deinem eigenen Nutzen.“ | Mein SelfCode
http://cdauth.de/
-
-
-
-
Hallo Eddi,
Ich habe jetzt bei mir das Problem, dass bei sehr grossen Seiten (mit Bildern) die linken Kaestchen positioniert werden, noch bevor die Bilder da sind. Die Kaestchen erscheinen dann irgendwo in der Mitte der langen Navigationsleiste.
du solltest auf jeden Fall den Bilder height (und width) mitgeben.
Dann steht die Seitenhöhe gleich beim laden fest, und die linke Box sollte demnach richtig positioniert werden.Grüße,
Jochen
-
Hallo Jochen,
cool, danke fuer den "Arschtritt"! Das war seit 2 Jahren ueberfaellig, jetzt habe ich die letzten 6 Stunden damit verbracht, meine 13.000 Bilder zu vermessen... Und so wie's aussieht, ist die Datenbank jetzt tatsaechlich auf dem richtigen Stand :-))
Die Aenderungen sind auch schon online - boah, welch ein Gefuehl beim Surfen auf meiner eigenen Seite!!!Stellt sich nur noch die Frage nach dem besseren Stil:
<img ... style="width:100px;height:150px">
oder
<img ... width="100" height="150">
(siehe https://forum.selfhtml.org/?t=109776&m=686833Eddie
--
Old men and far travelers may lie with authority.
-
-
