Ergebnis 1 bis 11 von 11
-
21-09-2013, 20:01 #1
Jungspund
- registriert
- 21-09-2013
- Beiträge
- 13
<div> bis ans Seitenende mit JS dynamisch ziehen
Halli Hallo liebe jswelt-Community
Ich sage zum ersten Mal hallo hier, also. HALLO!
Ein kleines Problem auf meiner neuen Seite:
Bitte schaut euch mal folgende Seite an:
Diamond Dog
Wie ihr seht, habe ich ein div namens ".page_main", welches als Streifen von oben bis ans untere Seitenende gehen soll.
Darin befindet sich der container ".page_content", welcher der Inhalt, in diesem Falle die verschiedenen Angebote, enthält.
Wenn kein Link aufgeklappt ist, sieht es wunderbar aus. Jetzt kann man aber die verschiedenen Angebote ausklappen.
Dafür habe ich folgenden Code verwendet:
Code:<a href="javascript:toggle('id1')">Waschen</a> <br /><div id="id1" style="display: none">Die individuell für die verschiedenen Haut- und Felltypten ausgewählten Shampoos garantieren ein optimales Schlussergebnis.<br><br></div> <a href="javascript:toggle('id2')">Kämmen / Bürsten</a> <br /><div id="id2" style="display: none">Durch kämmen und bürsten des Tieres wird die Unterwolle entfernt. Dies ermöglicht es der Haut, besser durch das Fell zu atmen.<br><br></div> etc...
Ist es jetzt möglich, mit JS dieses immer auf 100% höhe zu strecken? Denn CSS merkt natürlich nicht, dass ich mit JS den Content verlängert habe und passt sich dementsprechend auch nicht ans neue Seitenende an...
Hier noch der CSS Code von den Containern:
Code:.page_main{ position: absolute; width: 1000px; height: 100%; bottom: 0px; background-color: #9c9cde; left: 50%; top: 360px; margin-left: -500px; }
Code:.page_content{ position: absolute; width: 750px; height: auto; background-color: #7b7bd2; left: 50%; top: 100px; margin-left: -395px; padding: 20px; color: #27276d; border-right: solid 2px #6869cd; border-bottom: solid 2px #6869cd; }
Könnt ihr mir da mal auf die Sprünge helfen?
Vielen Dank und freundliche Grüsse aus der Schweiz
befuboGeändert von befubo (23-09-2013 um 15:30 Uhr)
-
22-09-2013, 12:54 #2
AW: <div> bis ans Seitenende mit JS dynamisch ziehen
Dafür braucht man kein JS, sondern exakt für sowas ist CSS gedacht.
Du darfst einfach nicht alle deine Elemente über position: absolute; positionieren. Dann kann sich das äußere <div> auch an die Höhe des inneren anpassen.
Dein Problem existiert übrigens nicht nur, wenn du was ausklappst, sondern auch schon, wenn ein Besucher einfach ein etwas kleineres Browserfenster hast...
-
22-09-2013, 12:58 #3
AW: <div> bis ans Seitenende mit JS dynamisch ziehen
Verschoben.
-
22-09-2013, 13:39 #4
Jungspund
- registriert
- 21-09-2013
- Beiträge
- 13
AW: <div> bis ans Seitenende mit JS dynamisch ziehen
Hi kkapsner
Hm, das Problem ist, dass ich bald alle Variantionen von height, position, display und overflow durchhabe und ich einfach ein Blackout habe.
Ich krieg's einfach nicht hin, dass sich das *** .page_main immer bis nach unten zieht, wenn sich der Inhalt verlängert... Vor allem finde ich es merkwürdig, dass es beim .page_content mit dem Text geht, aber beim .page_main es einfach nicht funktioniert...
-
22-09-2013, 16:41 #5
AW: <div> bis ans Seitenende mit JS dynamisch ziehen
Bei den beiden <div>s, um die es geht, musst du weder height noch position noch display noch overflow angeben. Per margin: 0 auto; bekommst du sie mittig und mit geeigneten padding-Werten bekommst du die Abstände richtig hin.
Damit die <div>s dann auch vertikal an der richtigen Stelle sind, dürfen die <div>s drüber natürlich auch kein position: absolute; haben - was sie aber genausowenig brauchen...
-
23-09-2013, 09:46 #6
Jungspund
- registriert
- 21-09-2013
- Beiträge
- 13
AW: <div> bis ans Seitenende mit JS dynamisch ziehen
Also, ich hab jetzt mal bei allen containern (ausser bei .l und .r) die position: absolute; rausgenommen.
Es funktioniert jetzt super, dass sich auch der .page_main beim ändern des .page_content verlängert.
Dafür danke ich schonmal recht herzlich.
Jetzt ist aber das Problem, dass der .page_main wieder nicht bis ans untere Seitenende gezogen wird...
Hier nochmals der Zwischenstand:
Diamond Dog
Jetzt kann ich ja nicht mehr mit height: 100% arbeiten...
Wie kann ich jetzt den Container trotzdem bis ans untere Seitenende ziehen?
Vielen Dank und liebe Grüsse
befuboGeändert von befubo (23-09-2013 um 15:30 Uhr)
-
23-09-2013, 15:37 #7j-l-n Guest
-
23-09-2013, 15:57 #8
Jungspund
- registriert
- 21-09-2013
- Beiträge
- 13
-
23-09-2013, 22:32 #9
AW: <div> bis ans Seitenende mit JS dynamisch ziehen
Dir geht es um den lila Streifen, oder?
Da gibt es mehrere Methoden. Eine wäre z.B. alle lila Teile durch ein einzelnes <div> zu realisieren, dass du dann wieder mit height: 100% versehen kannst.
Eine andere wäre es, kein <div> lila zu machen, sondern dem <body> ein Hintergrundbild zu geben, das zentriert ist und einfach einen lila Streifen darstellt.
-
24-09-2013, 12:44 #10
Jungspund
- registriert
- 21-09-2013
- Beiträge
- 13
AW: <div> bis ans Seitenende mit JS dynamisch ziehen
Doh!
warum bin ich nicht auf die Idee mit dem BG gekommen -.-
Danke! So klappts tip top
-
24-09-2013, 17:31 #11
Ähnliche Themen
-
CSS-Menü bis zum Seitenende
Von CyberBoy96 im Forum CSS und (X)HTMLAntworten: 1Letzter Beitrag: 01-09-2009, 01:13 -
XMLHttpRequest wartet nicht auf Seitenende
Von Cowboy74 im Forum JavaScriptAntworten: 11Letzter Beitrag: 16-07-2008, 16:56 -
Automatisches nachladen am Seitenende
Von regen im Forum JavaScriptAntworten: 2Letzter Beitrag: 21-08-2007, 08:29 -
daten ziehen
Von frogge im Forum Serverseitige ProgrammierungAntworten: 8Letzter Beitrag: 23-04-2002, 07:18 -
seitenende springen
Von hupfer im Forum JavaScriptAntworten: 1Letzter Beitrag: 23-01-2002, 13:20
Lesezeichen