zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Div Container beinhaltet weitere Divs,wie den Container scrollen lassen?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.08.2008, 21:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.08.2008
Beiträge: 6
SpecialK befindet sich auf einem aufstrebenden Ast
Standard 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)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.08.2008, 21:44
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 30.08.2008, 21:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.08.2008
Beiträge: 6
SpecialK befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 30.08.2008, 22:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.08.2008
Beiträge: 6
SpecialK befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
  #5 (permalink)  
Alt 30.08.2008, 22:47
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Durch was soll denn overflow ausgelöst werden, wenn die Höhe deiner Inhalte die in #wrapper vorgegebene Höhe von 300px nicht erreicht?
Mit Zitat antworten
  #6 (permalink)  
Alt 30.08.2008, 22:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.08.2008
Beiträge: 6
SpecialK befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #7 (permalink)  
Alt 31.08.2008, 00:31
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Zitat:
Zitat von SpecialK Beitrag anzeigen
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.
Die Beschreibung ist interpretationsfähig. Ist das nun so zu verstehen, wie dieser horizontale Scroller** im Header der Apple-Site? Falls ja, ziehst du am besten einen weiteren Bereich ein, der die vier floatenden Bereiche einfasst.

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 -->
#scroller wird dann eine Breite zugewiesen, die (deutlich) über des Viewport liegt.

Code:
#scroller {
float:left;
width: 2500px;
}
Welche Breite für dich in Betracht kommt, musst du ausprobieren.

Geändert von EvT (31.08.2008 um 00:36 Uhr) Grund: ** vertikaler Scroller korrigiert in "horizontaler Scroller"
Mit Zitat antworten
  #8 (permalink)  
Alt 31.08.2008, 00:35
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.08.2008
Beiträge: 6
SpecialK befindet sich auf einem aufstrebenden Ast
Standard

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...
Mit Zitat antworten
  #9 (permalink)  
Alt 31.08.2008, 00:37
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Zitat:
Zitat von SpecialK Beitrag anzeigen
Hi BlackHawk,

danke für die flotte Antwort.

Aber #Container, hat keine position, top, left angabe!?
Oder meinst Du die links, rechts etc. Divs?
Zitat:
Zitat von BlackHawk Beitrag anzeigen
Nimm dem Inhalt von #container "position:absolute", "left" und "top" weg.
Evt hat den Rest schon angesprochen.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 01.09.2008, 12:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.08.2008
Beiträge: 6
SpecialK befindet sich auf einem aufstrebenden Ast
Standard

Funktioniert nur leider nicht im IE
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:51 Uhr.