3 Divs gleich hoch, Website-Links nun kaputt
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
abschnitt
auto
code
funktionieren
header
http
image
index
inhalt
jemand
layout
libero
mauer
position
problem
spalten
tempus
url
wall
ziel
-
Hallo zusammen!
Ich habe nun ein Problem, von dem ich nie gedacht hätte, dass es auftaucht: Durch den "Hack" für 3 gleichgroße Divs sind die Links zu einem Abschnitt auf der selben Seite "kaputt".
Für eine Website, die auch im IE7 funktionieren muss, habe ich ein Hausfront-Layout gemacht, Oben links findet ihr einige Links für tieferliegende Abschnitte auf der Seite
<a href="#anker1">Ziel1</a> [...] <a name="anker1">Ziel1 erreicht</a>
Der Inhalsbereich ist quasi die Tür des Hauses. Rechts und links soll die Mauer zu sehen sein. Auf die selbe Höhe habe ich die Ebenen schon gebracht, und zwar mit:
margin-bottom:-32000px; padding-bottom:32000px;
Einzeln laufen die beiden Codeschnipsel einwandfrei. Jedoch springt der Browser (FF, O, C, IE) beim Klick auf die Links unschön auf das Ziel. Das Ziel wird zwar erreicht, jedoch wandert der Inhalt, der über dem Ziel liegt, unter den Header und ist somit nicht mehr lesbar. Unter Umständen entsteht am Seitenende ungewollter Weißraum. Der Inhalt des #content wird nach oben geschoben, aber das Layout läuft nicht mit, sodass die Seite erst ohne den Link geladen werden muss, damit man sie wieder gut nutzen kann.
Ich bin für jeden Hinweis dankbar! Ich weiß nicht, wie ich das Problem lösen soll...
Grüße
things
PS: Alle drei Spalten haben eine relative Breite; darum sind auch 3 Hintergrundbilder (Hausrand, Steine, Balken) notwendig, um den Gesamteindruck des Layouts zu erhalten. Da es bis zum IE7 runter funktionieren soll, kann ich hier leider keine mehrfachen Hintergrundbilder definieren, aber ich denke, mit der jetzigen Lösung geht es die nächsten Monate auch...
Ich würde mich wirklich freuen, wenn mir jemand bei diesen doofen Problem helfen könnte. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ich habe schon häufig in Foren gelesen, dass diese margin-bottom/padding-bottom-Lösung nicht das gelbe vom Ei ist, wenn man sein Design weiter ausbaut.
Ich habe mal auf einer befreundeten Website ein JavaScript eingebaut (findest du im Quellcode von http://template-hamster.host4free.de/). Wo ich das damals her hatte weiß ich nicht mehr. Es sollte auch möglich sein, das auf drei spalten zu erweitern.
Ob ich damals auch mit IE7 getestet habe weiß ich nicht mehr. -
Hi!
Mir ist jetzt noch aufgefallen, dass IE7 doch komplett falsch dargestellt wird. Mit den Entwicklertools des IE sieht man, dass die Inhalte des header-Tags nicht als Inhalt des header-Elements umgesetzt werden - aber nur hier auf dem Lima-City-Server. Bei meinem xampp sieht es richtig aus und wird auch richtig umgesetzt.
Wie das möglich ist, versteht ich nicht :/
@mein-wunschname
Ich würde gerne ohne JS arbeiten, was nicht ganz machbar ist, aber ich mag einfach nicht glauben, dass ich dafür JS brauche oO" Ich werde mir das Script mal ansehen. Vielen Dank dafür ^^
Wenn mir jemand noch einen Tipp geben kann, bin ich sehr dankbar! >.<
Grüße
things -
wieso setzt du bei margin/padding 32000 ein? hat die zahl eine bestimmte bedeutung? under kannst du auch zb 1 und -1 oder 0 und 0 nehmen?
ich denke, dann würde der inhalt nicht mehr unter dem header verschwinden. -
things schrieb: ...habe ich ein Hausfront-Layout gemacht,
*hüstl* Gemacht, oder benutzt? Ich erinnere mich dunkel, daß dieses Design hier, vor ein, oder zwei Jahren, schon Diskussionsthema war.
Egal.
Das Problem läßt sich doch recht einfach lösen.
Ordne dem Body der Seite den Ziegelhintergund zu. Diesen nahtlos zu kacheln, bleibt dir überlassen, sollte aber kein Problem sein. Die äußeren Spalten bekommen dann einen Transparenten Hintergrund und die mittlere Spalte beinhaltet dann Headermenü, Content und Footer mit entsprechend überlagernden Hintergrundgraphiken. fertig!
Beitrag zuletzt geändert: 21.9.2013 4:20:08 von fatfreddy -
Hallo,
@mein-wunschname
Okay, das JavaScript liest ja einfach nur die Höhe der beiden Elemente aus und setzt die höchste Höhe als festen Style fest. Das ist ja kein Hexenwerk :)
@snhth
Dieser Wert ist nur ein Wert, der von dem Inhalt her nicht erreicht wird. Ich könnte auch 100000 schreiben, aber irgendwie wird immer 32000 genutzt... Bei 1, 0 oder 100 wäre es zu wenig. Der Abstand wird ja zu der Größe des Divs addiert und dient dazu, das Hintergrundbild über die gesamte Höhe anzuzeigen. Durch ein overflow:hidden des umspannenden Divs werden die Divs mit dem margin/padding abgeschnitten und scheinen über die gesamte Höhe zu gehen - anscheinend sind alle Divs gleich hoch. Tada!
@fatfreddy
Wow, bist du gut! Ich hab gar nicht mehr daran gedacht, dass ich hier schon mit dem Layout gefragt habe ^^" Das ist meines - höchst eigens erdacht, gepixelt und gecodet. Nur, dass ich heute die Seiten von der Haustür auch in variabler Breite haben möchte und nicht mehr fix.
Das mit dem Hintergrund funktioniert so leider nicht. Zumal die Steine des body etwas kleiner sein sollten, als die der Front, da sie ja räumlich weiter hinten liegen ;) Selbst wenn ich dem website-wrapper die Steine so verpasse, habe ich das Problem, dass links und rechts der Haustür die divs zu klein sind. Der Inhalt ist z. B. 800 px hoch, links sind es vielleicht 200px und rechts auf dieser Seite dann mal 0px. Und schon habe ich zwar einen weißen Inhaltsbereich und rechts und links Steine, aber diese Steine werden ja einfach nur abgeschnitten und haben keine Bruchkante. Wenn das ganze in Farbe daherkommt wird es noch störender sein.
Ich verstehe einfach nicht, warum auch im IE8 die Ansicht nicht optimal ist und die Links nicht ordnungsgemäß funktionieren - der Browser muss die Seite doch nur runter scrollen! ><
Nachtrag:
Meine Lösung:
Große divs, die jeweils ein HG-Bild beinhalten und auf 100% Höhe gesetzt sind. Mit z-index sind diese Container hinter den Inhalt gesetzt.
<div id="content-wrapper"> <div id="col1" class="wall left relative" name="wall-left"> <div id="sub-nav"> <div id="signboard"> <strong>Übermenupunkt</strong> <ul class="reset"> <li><a href="left.html">Menu</a></li> <li><a href="left.html">Menupunkt mit vielen Inhalten</a></li> <li><a href="left.html">Menu</a></li> </ul> </div> </div> </div> <div id="col2" name="content"> <div> <a name="anker1"><h2>Ziel1</h2></a> <p>Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.</p> </div> </div> <div id="col3" class="wall right relative" name="wall-right"> <div>hier steht inhalt :D</div> </div> <div class="stones left"></div><div class="stones right"></div> <div id="container1"></div> <div id="container2"></div> <div id="container3"></div> <div id="container4"></div> </div>
#content-wrapper { position:relative; height:auto; display:block; } .stones { background-image:url("../img-new/stones.gif"); background-repeat:repeat; background-position:left 6px; width:19%; position:absolute; top:0; height:100%; } .stones.left { left:0; } .stones.right { right:0; background-position:left 8px; } #container1, #container2, #container3, #container4 { width:100%; height:100%; position:absolute; top:0; } #container1 { background-image:url("../img-new/wall-left-left.gif"); background-repeat:repeat-y; background-position:left top; } #container2 { background-image:url("../img-new/wall-left-right.gif"); background-repeat:repeat-y; background-position:right top; width:22.6%; left:0; } #container3 { background-image:url("../img-new/wall-right-right.gif"); background-repeat:repeat-y; background-position:right -134px; } #container4 { background-image:url("../img-new/wall-right-left.gif"); background-repeat:repeat-y; background-position:left 2px; width:22.6%; right:0; } #col1, #col3 { width:19%; position:absolute; top:0; z-index:1; padding-top:2em; } #col1 { padding-right:40px; left:0; } #col3 { padding-left:40px; right:0; } #col2 { width:55%; margin:0 auto; position:relative; z-index:1; } #col2 > div { padding:2em; }
Ich dachte, dass es vielleicht irgendwann mal jemanden interessieren könnte... :S
Grüße
things
Beitrag zuletzt geändert: 27.9.2013 15:46:35 von karlsve -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
