CSS - scrollen im div-Bereich NICHT Tabelle

jilli · 03. Feb. 2006

Hallo,

ich bin gerade dabei nach 10 Jahren HTML mich in CSS einzarbeiten. Ich habe ein Layout zu 100% in CSS programmiert. Jetzt möchte ich, dass wenn der Text im Content-Bereich zu lang ist, ein vertikaler Scrollbar eingeblendet wird. Mit overflow hat es geklappt - ich möchte ihn aber in der css. Datei definieren (Farben, ....).
Wenn möglich soll der Scrollbar möglichst weit rechts im Contentbereich platziert werden.

Siehe http://www.is-kandemir.de/kita/konzept_ziele.htm

Danke vorab - Jilli ;-)

Code:

-----------------------------------------------------
CSS- Datei:

* {
padding:0px;
margin:0px;
overflow:hidden;
}

body
{
font-family:verdana;
font-size:11.5px;
background-color: #FFFFFF;
text-align:center;
line-height:0.47cm;
}
h1 {font-size:13px;color:#000000;margin:0px;}

 
#rahmen {
width:780px;
height:550px;
border:2px solid #ff6900;
margin:25px auto;
text-align:left;
background-color:#FFFFFF;
}

#header {
height:175px;
background-color:#ff6900;
}

… navigation….


#content {
background-image: url(images/grafiken/bg_logo.gif);
repeat:no-repeat;
float:left;
width:555px;
height:371px;
padding-left:20px;
padding-top:26px;
}

#content p {
padding-bottom:15px;
padding-right:15;
margin:none;
text-align:justify;
}

#pfeile {
font-weight:bold;
float:left;
color:#ff6900;
font-size:13px;
}
	
#link {
padding-left:30px;
font-weight:bold;
font-size:13px;
color:#000000;
margin:0px;
}


-------------------------HTML Datei  --------------------------

<!-- saved from url=(0022)[url]http://internet.e-mail[/url] -->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Liane Kita</title>
<link rel=stylesheet type="text/css" href="kita.css">
</head>

<body>
    
   <div id="rahmen">
   <div id="header">
   <div id="bild1"><img src="images/fotos/garten1.jpg"></div>
   <div id="bild2"><img src="images/fotos/kind_tuer.jpg"></div>
   <div id="bild3"><img src="images/grafiken/logo.gif"></div>
   </div>
   
   <div id="nav">
   		<div class="nav_1"><p><a href=""></a></p></div>
		<div class="nav_2"><p><a href=""></a></p></div>
   </div>

	   <div id="content">
	   <div align="right">grafik</div><br>
	   <p>Bewegung ist Grundlage einer gesunden Entwicklung der Sinne, der Wahrnehmungsverarbeitung, des Denkens, der Sprache und
	   der Emotionalität. Im Wechselspiel mit der Bewegung entwickeln und integrieren sich die drei grundlegenden Sinne: Bewegungs- 
	   und Stellungssinn, Gleichgewichtssinn und Tastsinn. Durch Bewegung erschließen sich Kinder ihre Umwelt, sammeln Erfahrungen und
	   Einsichten und erkennen eigene Stärken und Schwächen. Wir bieten den Kindern vielfältige Bewegungsreize, um spielerische 
	   und fantasievolle Bewegungsabläufe zu fördern.<br>
	   Das große Freigelände und die günstige Lage der Kindertagesstätte, direkt am Feld und dem Naturschutzgebiet Platzenberg, sowie die Nähe
	   zum Schlosspark laden uns zu viel bewegung und Exkursionen in die nähere Umgebung ein.<br>
	   Der Stadtbus hält unmittelbar vor dem Gemeindezentrum und bringt uns zu Ausflügen auch in den Wald und zu anderen Spielflächen
	   innerhalb des Stadtgebietes.
</p>
	   <div id="pfeile">>></div><div id="link">Freigelände</div>   
	   <div id="pfeile">>></div><div id="link">Kinderhaus</div>   
	   <div id="pfeile">>></div><div id="link">Gymnastikraum</div>   
		<div id="pfeile">>></div><div id="link">Innenräume</div>   
		<div id="pfeile">>></div><div id="link">Gymnastikraum</div>   
		<div id="pfeile">>></div><div id="link">Innenräume</div>   
		</div>
		

</div>
   
</body>

</html>

dkdenz · 03. Feb. 2006

Dann solltest Du hier:
<div align="right">
dem div eine id geben und in die css dann eben Dein overflow:auto reinsetzen.
Dann aber sollte das div auch eine Höhenangabe besitzen, sonst klappt das nicht.
Zudem kannst Du dann dem div auch in der css 'sagen', dass es align:right zu sein hat...

jilli · 03. Feb. 2006

hi dkdenz,

ja vom prinzip her ist es mir klar. ich habe im web auch mehre codes dazu gefunden, bekomme es aber nicht richtig in meine css-datei und html-datei integriert.

wie würde ich das u.a. beispiel in meinen bestehenden code einbinden?

danke JILLI

als beispiel:

-------------------------------------
#scroll
{
width: 240px;
height: 100px;
font-family: verdana;
font-size: 11px;
color: #ccddee;
background-color: #203b59;
scrollbar-base-color: #203b59;
scrollbar-3d-light-color: #a0bbd9;
scrollbar-arrow-color: #a0bbd9;
scrollbar-darkshadow-color: #203b59;
scrollbar-face-color: #203b59;
scrollbar-highlight-color: #809bb9;
scrollbar-shadow-color: #809bb9;
scrollbar-track-color: #203b59;
}

------------------------------------------------------

dkdenz · 03. Feb. 2006

Code:

#scroll
{
width: 240px;
height: 100px;
[B]overflow:scroll;[/B] /*____oder overflow:auto____ist so ziemlich das Selbe___*/
font-family: verdana;
font-size: 11px;
color: #ccddee;
background-color: #203b59;
scrollbar-base-color: #203b59;
scrollbar-3d-light-color: #a0bbd9;
scrollbar-arrow-color: #a0bbd9;
scrollbar-darkshadow-color: #203b59;
scrollbar-face-color: #203b59;
scrollbar-highlight-color: #809bb9;
scrollbar-shadow-color: #809bb9;
scrollbar-track-color: #203b59;
}

jilli · 03. Feb. 2006

hi nochmal,

erstmal danke. ja das hatte ich auch schon - es hat auch funktioniert.

ich habe jetzt aber doch noch zwei fragen.
1. vom inhalt her brauche ich nur in der vertikalen einen scroller. ich habe jetzt aber auch in der horizontalen scroll-pfeile. kann ich die unterdrücken???

2. kann ich den abstand zwischen scrollbar und aussenrahmen des containers verkleinern bzw. den abstand scrollbar zum text definieren.

1000 dank vorab - JILLI ;-)

jilli · 03. Feb. 2006

AW: CSS - scrollen im div-Bereich - Fehler FF

hallo dekadenz und andere,

és hat geklappt. nach einigen versuchen habe ich es hinbekommen. im IE alles wunderbar im FF wird der inhalt des content garnicht dargestellt?????

vielleicht kann mir ja nochmal jemand auf die sprünge helfen?

DANKE - JILLI

Code:

----------------------------------------------
[B]CSS:[/B]

* {
padding:0px;
margin:0px;
overflow:hidden;
}

body
{
font-family:verdana;
font-size:12px;
background-color: #FFFFFF;
text-align:center;
line-height:0.47cm;
scrollbar-base-color:#ff6900;
scrollbar-track-color:#ffffff;
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#ff6900;
scrollbar-3dlight-color:#ffffff;
scrollbar-darkshadow-color:#ffffff;
scrollbar-shadow-color:#ff6900;
scrollbar-arrow-color:#ff6900;
}
h1 {font-size:13px;color:#000000;margin:0px;}

 
#rahmen {
width:790px;
height:550px;
border:2px solid #ff6900;
margin:25px auto;
text-align:left;
background-color:#FFFFFF;
}

#header {
height:175px;
background-color:#ff6900;
}

#bild1 {
float:left;
}

#bild2 {
float:left;
padding-left:6px;
}

#bild3 {
float:right;
}

#nav {
float:left;
width:190px;
height:375px;
background-color:#FDD6B1;
}

---------Navigation*/ -------------------

#content {
background-image: url(images/grafiken/bg_logo.gif);
repeat:no-repeat;
background-attachment:fixed;
float:left;
width:570px;
height:371px;
padding-left:35px;
padding-right:5px;
padding-top:26px;
overflow-y:auto;
Overflow-x: hidden;
}

#content p {
padding-bottom:15px;
padding-right:15;
margin:none;
text-align:justify;
}

#pfeile {
font-weight:bold;
float:left;
color:#ff6900;
font-size:13px;
}
	
#link {
padding-left:30px;
font-weight:bold;
font-size:13px;
color:#000000;
margin:0px;
}


-----------------------------------------------
[B]HTML:[/B]

<!-- saved from url=(0022)[url]http://internet.e-mail[/url] -->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Liane Kita</title>
<link rel=stylesheet type="text/css" href="kita.css">
</head>

<body>
    
   <div id="rahmen">
   <div id="header">
   <div id="bild1"><img src="images/fotos/garten1.jpg"></div>
   <div id="bild2"><img src="images/fotos/kind_tuer.jpg"></div>
   <div id="bild3"><img src="images/grafiken/logo.gif"></div>
   </div>
   
   <div id="nav">
   		<div class="nav_1"><p><a href=""></a></p></div>
		<div class="nav_2"><p><a href=""></a></p></div>
   </div>

	   <div id="content">
	   <div align="right">grafik</div><br>
	   <p>Bewegung ist Grundlage einer gesunden Entwicklung der Sinne, der Wahrnehmungsverarbeitung, des Denkens, der Sprache und
	   der Emotionalität. Im Wechselspiel mit der Bewegung entwickeln und integrieren sich die drei grundlegenden Sinne: Bewegungs- 
	   und Stellungssinn, Gleichgewichtssinn und Tastsinn. Durch Bewegung erschließen sich Kinder ihre Umwelt, sammeln Erfahrungen und
	   Einsichten und erkennen eigene Stärken und Schwächen. Wir bieten den Kindern vielfältige Bewegungsreize, um spielerische 
	   und fantasievolle Bewegungsabläufe zu fördern.<br>
	   Das große Freigelände und die günstige Lage der Kindertagesstätte, direkt am Feld und dem Naturschutzgebiet Platzenberg, sowie die Nähe
	   zum Schlosspark laden uns zu viel bewegung und Exkursionen in die nähere Umgebung ein.<br>
	   Der Stadtbus hält unmittelbar vor dem Gemeindezentrum und bringt uns zu Ausflügen auch in den Wald und zu anderen Spielflächen
	   innerhalb des Stadtgebietes.
</p>
	   <p><div id="pfeile">>></div><div id="link">Freigelände</div>   
	   <div id="pfeile">>></div><div id="link">Kinderhaus</div>   
	   <div id="pfeile">>></div><div id="link">Gymnastikraum</div>   
		<div id="pfeile">>></div><div id="link">Innenräume</div>   
		<div id="pfeile">>></div><div id="link">Gymnastikraum</div>   
		<div id="pfeile">>></div><div id="link">Innenräume</div></p>
		  
		</div>
		

</div>
   
</body>

</html>

dkdenz · 03. Feb. 2006

Zwei Möglichkeiten:
Folgende Elemente gibt es nicht in css, weswegen der FF das richtig macht und nix darstellt

Code:

overflow-y:auto;
Overflow-x: hidden;

oder er stört sich an dem zweiten grossen O...

CSS - scrollen im div-Bereich NICHT Tabelle

jilli

New member

dkdenz

New member

jilli

New member

dkdenz

New member

jilli

New member

jilli

New member

dkdenz

New member