Scrollbares Textfeld mit purem CSS

Dancer · #1 (**permalink**) 24.01.2005, 01:37

Hallo ,

ich mache grade meine ersten CSS gehversuche und bin auch gleich auf ein problem gestoßen.

Ist es möglich eine Box zu definieren deren position feststeht :

Code:

#content{
	padding: 5px;
	margin-top: 100px;
	margin-left: 25px;
	margin-bottom: 100px;
	margin-right: 50%;
	background-color: #F4F4F4;
}

ABER ! , wenn der Text in content dieses Feld sprengen würde eine Scrollbalken erscheint ? Änlich dem Überlauf der Dreamweaver Layers ?

Boris · #2 (**permalink**) 24.01.2005, 02:48

Wenn Du das hinzufügst:

overflow: auto;

Dann erscheint automatisch ein Scrollbalken.

wahsaga · #3 (**permalink**) 24.01.2005, 10:09

Zitat:

Zitat von Adagio

Dann erscheint automatisch ein Scrollbalken.

eine angabe zur höhe sollte er dann aber auch noch machen ...

Dancer · #4 (**permalink**) 24.01.2005, 10:50

Hallo ,

das mit der höhe hab ich schon gemerkt. Leider klapt das immer noch nicht so wie ich mir das vorstelle.

Die Box soll halt knapp vor ende der Seite aufhören. Sagen wir mal 50px. Eine feste höhe ist da unpraktisch das dann bei höhen auflösun doof aussieht. Bei height: auto; kommt aber kein scrollbalken.

Code:

/* CSS Document */
body{
    padding : 0 0px ;
	 background-image : url(hp_images/bg2.gif);
	 background-repeat: no-repeat;
	 background-position: bottom right;
	 margin : 0;
	
}

#navigation{
    position: absolute;
    bottom:10px;
    right:10px;
	 	
}

#header{
	position: absolute;
	left: 12px;
	top: 12px;
}

#content{ 
   padding: 5px; 
   margin-top: 100px; 
   margin-left: 25px; 
   margin-bottom: 100px; 
   margin-right: 50%; 
   background-color: #F4F4F4;
   overflow: auto; 
   height: auto;
}

Das funktioniert so garnicht. Kommt kein Scrollbalken wie gesagt.
Ihr könnte euch das ganze ja mal ansehen : www.dancers-place.de
Bei etwas merh als 1024 sieht es so aus wie ich mir das gedacht habe. Aber dann mach das fenster mal kleiner

mazzo · #5 (**permalink**) 24.01.2005, 11:17

da fehlt das schliessende ">" im öffnenden DIV-Tag mit der id="content".

Dancer · #6 (**permalink**) 24.01.2005, 15:40

Danke für den hinweis , hilfte aber leider nicht weiter.

mazzo · #7 (**permalink**) 24.01.2005, 15:58

In Deinem Quellcode steht keine Styleangabe zu dem DIV Container "content".

Das hier funzt bei mir mit scrollbarer DIV-Box:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dancers Place - Index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="main.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body,td,th {
	color: #000000;
}
body {
	background-color: #FFFFFF;
}
#content{
	background-color: #c1c1c1;
	overflow: auto;
	width: 500px;
	height: 150px;
}
-->
</style></head>

<body>
	
	<div id="header">
		[img]hp_images/mainheader.jpg[/img]
	</div>
	
	<div id="navigation">
 		

about | photografie | galerie | aquaristik | links </p>
 	</div>
	<div id="content">
		<h1>Wilkommen zu Dancer-Place.de</h1>
		

Hier wird der Text zu dem entsprechenden Thema stehen.Hier wird der Text zu dem entsprechenden Thema stehen.
		Hier wird der Text zu dem entsprechenden Thema stehen.Hier wird der Text zu dem entsprechenden Thema stehen.
		Hier wird der Text zu dem entsprechenden Thema stehen.Hier wird der Text zu dem entsprechenden Thema stehen.
		Hier wird der Text zu dem entsprechenden Thema stehen.Hier wird der Text zu dem entsprechenden Thema stehen.
		Hier wird der Text zu dem entsprechenden Thema stehen.Hier wird der Text zu dem entsprechenden Thema stehen.</p>
		Hier wird der Text zu dem entsprechenden Thema stehen.Hier wird der Text zu dem entsprechenden Thema stehen.
		Hier wird der Text zu dem entsprechenden Thema stehen.Hier wird der Text zu dem entsprechenden Thema stehen.
		Hier wird der Text zu dem entsprechenden Thema stehen.Hier wird der Text zu dem entsprechenden Thema stehen.
		Hier wird der Text zu dem entsprechenden Thema stehen.Hier wird der Text zu dem entsprechenden Thema stehen.</p>
		Hier wird der Text zu dem entsprechenden Thema stehen.Hier wird der Text zu dem entsprechenden Thema stehen.
		Hier wird der Text zu dem entsprechenden Thema stehen.Hier wird der Text zu dem entsprechenden Thema stehen.
		Hier wird der Text zu dem entsprechenden Thema stehen.Hier wird der Text zu dem entsprechenden Thema stehen.
		Hier wird der Text zu dem entsprechenden Thema stehen.Hier wird der Text zu dem entsprechenden Thema stehen.</p>
		Hier wird der Text zu dem entsprechenden Thema stehen.Hier wird der Text zu dem entsprechenden Thema stehen.
		Hier wird der Text zu dem entsprechenden Thema stehen.Hier wird der Text zu dem entsprechenden Thema stehen.
		Hier wird der Text zu dem entsprechenden Thema stehen.Hier wird der Text zu dem entsprechenden Thema stehen.
		Hier wird der Text zu dem entsprechenden Thema stehen.Hier wird der Text zu dem entsprechenden Thema stehen.</p>
		
	</div>
	

</body>
</html>

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Redesign für Steiner Cycling Team	pkipper	Site- und Layoutcheck	11	09.02.2011 12:25
Einbindung von frei erhältlichen Scripten - CSS Problem	DonL	CSS	1	22.01.2011 16:09
MYspace mehr als nur CSS oder ?	Vinceone	CSS	0	12.07.2007 02:21
Eric Meyer's CSS	Petty	Ressourcen	0	21.11.2005 08:18
Mozilla ignoriert externes css	DarkWanderer	CSS	9	22.09.2005 11:39