|
|||
Div Container beinhaltet weitere Divs,wie den Container scrollen lassen?
Schönen guten Abend,
ich bin nun seit mehreren Tagen auf der Suche nach einer Lösung und finde keine, ich hoffe das ihr einen Rat für mich habt. Relativ einfaches Konstrukt, ich habe ein Div als Container/Wrapper, welcher welche Divs enthält, die mit der Zeit immer mehr werden. Alles was ich möchte ist, dass der Container/Wrapper Div anfängt zu scrollen, wenn die Inhalt Divs über den Monitor Rand hinaus schießen. Folgender Code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css" media="screen"> body { background-color: #e1ddd9; font-size: 12px; font-family: Verdana, Arial, SunSans-Regular, Sans-Serif; color:#564b47; padding:0px; margin:0px; } #links, #mittelinks, #mitterechts, #rechts { margin-left: 20px; width: 400px; background-color: #cccccc; border:solid 1px #000000; float: left; } #container { border:solid 1px #000000; overflow: auto; height: 300px; background-color:#FFFFFF; width: 90%; } </style> </head> <body> <div id="container"> <div id="links"> Beispiel 1 </div> <div id="mittelinks"> Beispiel 2 </div> <div id="mitterechts"> Beispiel 3 </div> <div id="rechts"> Beispiel 4 </div> <div style="clear:left;"></div> </div> </body> </html> Was passiert heute, entweder ich benutze für die Inhalt Div einen left floats und es findet ein zeilenumbruch statt, sobald es zuviele Divs für den Monitor werden oder ich mache es wie in diesem Beispiel, dann scrollt der Container Div aber immer noch nicht und die Inhalt Divs schiessen einfach drüber hinaus. Besten Dank für die Hilfe! Grüße SpecialK Geändert von SpecialK (30.08.2008 um 22:04 Uhr) |
Sponsored Links |
|
||||
Nimm dem Inhalt von #container "position:absolute", "left" und "top" weg. Wenn die Elemente einfach nur untereinander darstellt werden sollen, dann gib ihn auch kein "float". Ansonsten kannst du sie per "float" positionieren.
Wieso lässt du #container nicht einfach größer werden, anstatt ihn zu scrollen? Schau mal in die FAQ unter Punkt 2.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen! Foren-FAQ |
Sponsored Links |
|
|||
Hi BlackHawk,
danke für die flotte Antwort. Aber #Container, hat keine position, top, left angabe!? Oder meinst Du die links, rechts etc. Divs? Wie gesagt, wenn ich sie floaten lasse, dann bricht er um wenn keine Platz mehr da ist, ich will aber das der Container scrollt. Warum er scrollen soll, ich möchte später das der Container 90% der seite zentriert einnimmt, so als Content Box. In der FAQ war ich, dass hilt mir aber nicht weiter, da ich grundsätzlich weiß wie man floatet. Problem ist nur, dem Container bei zu bringen, dass er scrollen sollen, wenn es mehr und mehr Inhalt Divs werden. |
|
|||
Siehe hier, das ganze mit floats:
Scrollt nach wie vor nicht, sondern bricht um. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css" media="screen"> body { background-color: #e1ddd9; font-size: 12px; font-family: Verdana, Arial, SunSans-Regular, Sans-Serif; color:#564b47; padding:0px; margin:0px; } #links { width: 400px; background-color: #cccccc; border:solid 1px #000000; float: left; } #mittelinks { width: 400px; background-color: #cccccc; border:solid 1px #000000; float: left; } #mitterechts { width: 400px; background-color: #cccccc; border:solid 1px #000000; float: left; } #rechts { width: 400px; background-color: #cccccc; border:solid 1px #000000; float: left; } #links, #mittelinks, #mitterechts, #rechts { margin-left: 20px; } #container { border:solid 1px #000000; overflow: auto; height: 300px; background-color:#FFFFFF; width: 90%; } </style> </head> <body> <div id="container"> <div id="links"> Beispiel 1 </div> <div id="mittelinks"> Beispiel 2 </div> <div id="mitterechts"> Beispiel 3 </div> <div id="rechts"> Beispiel 4 </div> <div style="clear:left;"></div> </div> </body> </html> |
|
|||
Es geht nicht um das vertikale scrollen, sondern um das horizontale!
4 Divs a 400px sind für meinen Schirm jedenfalls breit genug um ein scrollen auslösen zu können. Grüße Mike Geändert von SpecialK (30.08.2008 um 22:55 Uhr) |
|
|||
Zitat:
Die Struktur würde dann so aussehen: Code:
<div id="container"> <div id="scroller"> <div id="links">Beispiel 1</div> <div id="mittelinks">Beispiel 2</div> <div id="mitterechts">Beispiel 3</div> <div id="rechts">Beispiel 4</div> </div><!-- /scroller --> </div><!-- /container --> Code:
#scroller { float:left; width: 2500px; } Geändert von EvT (31.08.2008 um 00:36 Uhr) Grund: ** vertikaler Scroller korrigiert in "horizontaler Scroller" |
|
|||
Entschuldige bitte, wenn man tief in einem Thema drin steckt ist es für einen selbst immer ganz klar und man drückt sich vielleicht nicht komplett Interpretationslos aus.
Ja richtig, letztendlich so ein Effekt wie auf der Apple Site. Nutze ich jetzt den Scroller und gebe eine feste breite über 2500px, scrollt er natürlich auch, obwohl vielleicht gar kein Inhalt da ist. Das ganze ist dynamisch, letztendlich sowas wie ein News Script. Schreibt man News, werden diese Links beginnend hinzugefügt. Jetzt müsste man die Scrollerbreite vielleicht noch dynamisieren, so dass pro hinzukommender Eintrag de Breite um xyz erhöht wird... grübel... |
|
||||
Zitat:
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen! Foren-FAQ |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Fragen zu CSS und Joomla | DOKTOR | CSS | 2 | 23.05.2011 20:29 |
Brauche Hilfe: Schwarzes Nichts | Zwox | CSS | 10 | 19.11.2010 17:53 |
Header entfernen | tripple | CSS | 17 | 15.06.2010 16:41 |
Schriftfarbe in den Eintragungsfeldern von jforms | Steveislucky | CSS | 2 | 16.03.2010 11:59 |
CSS Text nebeinander? | carstiee09 | CSS | 13 | 13.11.2009 20:18 |