Zur Navigation

kein scrollbalken

1 trudi

ciao jörg,

ich habe ein letztes grosses problem. die seite ist fertig. auf meinem 15 zoll laptop erscheint die seite perfekt. das problem ist bei grösseren bildschirmen, dort endet die seite nicht am unteren ende (17 Zoll, 19 Zoll Bildschirme). Habe schon probiert: height auf auto zu machen, (davor war 350 px), dann verschwindet allerding der scrollbalken.

kannst du mir da weiterhelfen. die seite findest

body {
	margin: 0;
	padding: 0;
	font: 80%  Verdana, Arial, Helvetica, sans-serif;
	text-align: left;
	background: transparent none no-repeat;
	width: 100%;
	height: 100%;
	overflow: hidden;
}


	
/*Main-Navigation*/

 #navcontainer li a:link, #navcontainer li a:visited, #navcontainer li a:hover, #navcontainer li.on {
	background-image: url(../images/hor_linie_rot1.jpg);
}

 
#navcontainer {
	position: absolute;
	top: 230px;
	left: 6px;
	width: 195px;
	text-align: left;
	margin-left: 0;
	padding-left: 16px;
	margin-right: 0;
	padding-bottom: 2px;
}

#navcontainer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#navcontainer li a:link, #navcontainer li a:visited {
	display: block;
	text-decoration: none;
	font-weight: bold;
	font-size: 11px;
	line-height: 15px;
	padding-bottom: 5px;
	padding-top: 5px;
	color: #6F6256;
	background-position: bottom left;
	background-repeat: no-repeat;
}


#navcontainer li a:hover {
	color: #C4C4C4;
	background-repeat: no-repeat;
}


#navcontainer li.on {
	list-style-type: disc;
	color: #F23311;
	font-weight: bold;
	font-size: 11px;
	background-position: bottom left;
	background-repeat: no-repeat;
	padding-bottom: 5px;
	padding-top: 5px;
	margin-left: 0;

}



/*Main-Navigation Ebene 2*/


#navcontainer ul li.on2 {
	list-style-type: disc;
	color: #F23311;
	font-weight: bold;
	font-size: 11px;
	padding-bottom: 2px;
	padding-top: 2px;
	background-image:none;
}

#navcontainer ul li.on2 ul li a:link, #navcontainer ul li.on2 ul li a:visited {
	font-weight: normal;
	display: block;
	text-decoration: none;
	font-size: 11px;
	line-height: 15px;
	padding-bottom: 2px;
	padding-left: 10px;
	padding-top: 2px;
	color: #6F6256;
	background-image:none;
}

#navcontainer ul li.on2 ul li a:hover {
		color: #C4C4C4;
		font-weight: normal;
		background-image:none;
}
	

#navcontainer ul li.on2 ul li.on3 {
	font-weight: normal;
	font-size: 11px;
	line-height: 15px;
	padding-bottom: 2px;
	padding-left: 10px;
	padding-top: 2px;
	color: #6F6256;
	background-image:none;
}



/*Top-Navigation*/


#topnavi ul {
	position: absolute;
	top : 170px;
	left: 236px;
	list-style-type: none;
	display: inline;
	padding-left: 0;
	margin-top: 10px;
	margin-left: 0;
}

#topnavi li {
	display: inline;
	font-weight: bold;
	font-size: 11px;	
}
 
#topnavi li a:link, #topnavi li a:visited {
	text-decoration: none;
	border-left: 2px solid #F23311;
	padding: 3px 6px;
	color: #6F6256;
}

#topnavi li a.erste {
	border-left: none;
}

#topnavi li a:hover {
	color: #F23311;
}

/*End Top-Navigation*/


/*Sprachauswahl*/
#language ul {
	position: absolute;
	top : 195px;
	left: 850px;
	list-style-type: none;
	display: inline;
	padding-left: 0;
	margin-top: 10px;
	margin-left: 0;
}

#language li {
	display: inline;
	padding: 3px 3px;
	border-left: 1px solid #F23311;
	font-size: 11px;	
}
 
#language li a:link, #language li a:visited {
	text-decoration: none;
	color: #6F6256;
}

#language li a:hover {
	color: #F23311;
}


/*Inhalt*/

#Schatten {
	padding: 0;
	margin: 0;
	position: absolute;
	width: 21px;
	top: 0;
	left: 1016px;
	height: 100%;
	background: url(../images/schatten_verlauf.jpg) repeat-y top left white; 
}


#box1 h1 {
	position: absolute;
	top: 230px;
	left: 250px;
	margin: 0;
	padding-bottom: 20px;
	text-align: left;
}


#contentarea {
	overflow: auto;
	font-size: 11px;
	color: #6F6256;
	margin-top: 265px;
	margin-left: 250px;
	width: 766px;
	height: auto;
	padding-bottom: 10px;
	padding-left: 0;
	text-align:left;
}

#contentarea-index {
	overflow: auto;
	font-size: 11px;
	color: #6F6256;
	margin-top: 250px;
	margin-left: 250px;
	width: 766px;
	height: auto;
	padding-bottom: 10px;
	padding-left: 0;
	text-align:left;
}

	

#box2 {
	padding-bottom: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #6F6256;
	width: 560px;
	float: left;
	text-align: left;
}


#box2-index {
	padding-bottom: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #6F6256;
	width: 730px;
	text-align: left;
}


.lagocama img {
	float: left;
	margin: 3px;
}


.alpwirtschaft img {
	float: left;
	margin-right: 5px;
	padding-right: 5px;
}

#index img {
	float: left;
	margin-right: 5px;
	padding-right: 25px;
}


table {
	padding-left: 4px;

} 

captation {
	font-weight: bold;
	margin-left: 15px;

}

th {
	padding-right: 8px;
	padding-bottom: 6px;
}

td {
	padding-right: 8px;
	padding-bottom: 6px;
}
	

.cl {
	clear: left;
}


.bilder {
	float: left;
	text-align: left;
	margin: 15px;
}	

.lista {
	list-style-type:none;
	color:#6F6256;
	padding-top: 0;
	padding-left: 0;
	padding-bottom: 2px;
	margin-left: 0;
}

#lista_posizione {
	display:inline;
	padding: 0;
	margin: 0;
}

p {
	padding-top: 8px;
	margin: 0;
}


h1 {
	color: #F23311;
	font-weight: bold;
	font-size: 18px;
	padding-bottom: 10px;
}


h2 {
	font-weight: bold;
	font-size: 14px;
}

h3 {
	color: #6F6256;
	font-weight: bold;
	font-size: 11px;
	padding-top: 8px;
	padding-bottom: 8px;
	margin:0;
}

h4 {
	color: #9EC2E3;
	font-weight: bold;
	font-size: 12px;
	margin:0;
}

h5 {
	color: #6F6256;
	font-weight: bold;
	font-size: 12px;
	padding-top: 0;
	padding-bottom: 10px;
	margin: 0;
}	

h6 {
	color: #6F6256;
	font-weight: bold;
	font-size: 11px;
	padding-top: 0;
	padding-bottom: 8px;
	margin:0;
}





.marrone {
	color: #EDC702;
	font-weight: bold;
	padding-top: 6px;
	padding-bottom: 6px;
}

.marrone1 {
	color: #9D9754;
	font-weight: bold;
	padding-top: 6px;
	padding-bottom: 6px;
}



.viola {
	color: #D485A3;
	font-weight: bold;
	padding-top: 6px;
	padding-bottom: 6px;
}

.verdone {
	color: #79CF45;
	font-weight: bold;
	padding-top: 6px;
	padding-bottom: 14px;
	margin: 0;
}



.verde {
	color: #79CF45;
	font-weight: bold;
	font-size: 16px;
	padding-top: 30px;
	padding-bottom: 0px;
	margin:0;
}

.rosa {
	color:#DD9F7B;
	font-weight: bold;
	padding-top: 6px;
	padding-bottom: 6px;
}	

.blu {
	color: #5EBFC2;
	font-weight: bold;
	padding-top: 6px;
	padding-bottom: 6px;
	margin: 0;
}

.blu2 {
	color: #7FB1DF;
	font-weight: bold;
	padding-top: 0;
	padding-bottom: 10px;
	margin: 0;
}

.blu3 {
	color: #7FB1DF;
	font-weight: bold;
	padding-top: 20px;
	padding-bottom: 20px;
	margin: 0;
}

.turchese {
	color: #5EBFC2;
	font-weight: bold;
	padding-top: 20px;
	padding-bottom: 6px;
	margin: 0;
}


/*Seitenspalte*/
		

#box3 {
	text-align: left;
	font-size: 11px;
	float: right;
	position: absolute;
	height:auto;
	overflow: auto;
	top: 265px;
	left: 830px;
	margin-left: 0;
	width: 170px;	
}


ul {
	list-style-type: disc;
	color: #F23311;
	margin-left: 0;
	padding-left: 20px;
	text-decoration: none;
	text-align: left;
}


.testo {
	padding-bottom: 8px;
}



.farbe {
	color: #6F6256;
} 

.testo a {
	text-decoration: none;
	color: #6F6256;
}		

	


und beispiel von html
<!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" xml:lang="de" lang="de">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <meta name="Description" content="val cama e le sue bellezze in italiano e tedesco" />
  <meta name="Keywords" content="val cama, alp de lagh, ProSpecieRara, mesolcina, escursionismo" />
  <title>val cama</title>
  <link rel="stylesheet" type="text/css" href="styles/basic1.css" />

  </head>

<body style="background-image: url('images/geschichte5.jpg'); ">

	

	<!-- start main navigation -->
	<div id="navcontainer">
	<ul>
	<li><a href="aktuelles_de.html">Aktuelles </a></li>
	<li><a href="anreise_de.html">Standort &amp; Anreise </a></li>
	<li class="on">Geschichte </li>
	<li><a href="projekt_de.html">Entwicklungsprojekt </a></li>
	<li><a href="alpwirtschaft_de.html">Alpwirtschaft </a></li>
	<li><a href="waldreservat_de.html">Waldreservat </a></li>
	<li><a href="seen_de.html">Seen </a></li>
	<li><a href="alpinismus_de.html">Wandern &amp; Bergsteigen </a></li>
	<li><a href="unterkunft_de.html">Unterkunft &amp; Verpflegung </a></li>
	</ul>
	</div>
	<!--end navigation -->
   
	<!-- start top navigation -->
	<div id="topnavi">
	<ul>
	<li><a href="index_de.html" class="erste">Home </a></li>
	<li><a href="kontakt_de.html">Kontakt </a></li>
	<li><a href="impressum_de.html">Impressum </a></li>
	</ul>
	</div>	
	<!--end topnavigation -->
	
	<!-- start sprachwahl -->
	<div id="language">
	<ul>
	<li><a href="geschichte_de.html">Deutsch </a></li>
	<li><a href="geschichte_it.html">Italiano </a></li>
	</ul>
	</div>	
	<!--end sprachauswahl -->

<!--start titelbereich -->
	<div id="Schatten"></div>
	
 	<div id="box1">
	<h1>Geschichte des Val Cama</h1>
	</div>
<!--end titelbereich -->		
	
	<!-- start content -->
	<div id="contentarea">
	<div id="box2">
	
	
	<h2 class="verdone">
	Erste historische Aufzeichnung aus dem Jahr 1384</h2>
	<div class="alpwirtschaft"><img src="images/confine.jpg" width="200" height="170" alt="grenzmauer" /></div>
	Die Gemeinden Cama und Verdabbio lagen lange Zeit im Streit um das Val Cama. Im Jahre 1384 wurde dann eine schriftliche Vereinbarung unterzeichnet. Diese beinhaltete, dass Verdabbio ein Teil des Val Cama bekam. Im Gegenzug erhielt Cama gute Felder und Weinreben im Talgrund von Misox. Im 1600 und 1700 Jahrhundert gab es immer wieder Konflikte über die Grenzziehung. Abgesehen von kleineren Veränderungen wurden diese aber beibehalten.
	<p>Mittels Trockenmauer wurde die Gemeindegrenze festgelegt (siehe Bild). Eine Besonderheit ist, dass die Grenze im weiteren Verlauf durch den See gezogen wurde. </p>
	

	
	<p style="clear:left">&nbsp;</p>

	
	<h2 class="verdone">Menschliches Tun in früheren Zeiten</h2>
	<div class="alpwirtschaft"><img src="images/storia1.jpg" width="200" height="510" alt="gebäude" /></div>
	Vor allem die zahlreichen Alpgebäude belegen die Präsenz des Menschen im Val Cama. Es ist dokumentiert, dass im Jahr 1577 "Nicolao da Valdort" mit Hilfe seiner Brüder ein Alpgebäude am Cama Bergsee erbaute. Von den Einwohnern von Verdabbio wurde gegen Mitte des 1700 Jahrhunderts die abgelegene Alp Broieta errichtet.<p>&nbsp;</p>Das Tal wurde auf vielfältige Weise genutzt:

	<ul style="list-style-type:none">
	<li class="testo">&raquo; <span class="farbe"><em>Wälder</em>: 
	
	Alte Dokumente belegen, dass bereits im Jahr 1504 Bergholz aus dem Val Cama verkauft wurde. Sehr wahrscheinlich wurde dieses Holz schon für den Bau der Steinbrücke über die Moesa benutzt, die 1978 durch einen Hochwasser zerstört wurde. </span></li>
	
	 <li class="testo">&raquo; <span class="farbe"><em>Gelber Enzian</em>: 
	Zwischen 1862 und 1865 wurden Wurzeln des Gelben Enzians im Val Cama für die Schnapsherstellung ausgegraben. Die Gemeinde Cama erteilte an einen professionellen Schnapsbrenner hierzu die Erlaubnis.
	
	  </span></li>
	  <li class="testo">&raquo; <span class="farbe"><em>Baumharz</em>: Es ist bekannt, dass die Gemeinde Cama im Jahr 1862 für 20 Franken das Recht verkaufte, im Wald von Besarden Baumharz zu gewinnen. Das Harz wurde für die Herstellung von Holzfässern und Schnüren verwendet. Es wurde aber auch von Apothekern nachgefragt. </span></li>
	  
	  
	<li class="testo">&raquo; <span class="farbe"><em>Holzkohle</em>: Im 19. Jahrhundert hatte die Ära der Holzkohlegewinnung (Köhlerei) begonnen. Heute findet man im Val Cama an unerwarteten Orten geebnete Flächen. Hier wurde Totholz, welches z. B. von Lawinen mitgerissen wurde, verkohlt. Holzkohle hat gegenüber Holz den Vorteil, dass sie ohne Flammen und unter grösserer Hitzerzeugung verbrennt.</span></li>	 
</ul>
	 
	 	<p style="clear:left">&nbsp;</p>
		
		
		<p>Wissen Sie etwas über die Geschichte des Val Cama - auch der letzten Jahrzehnte? Wir würden uns sehr über Beiträge freuen <a style="color: #6F6256" href="kontakt_de.html">(Kontakt)</a>.</p>
	 
	 </div>
	 </div>

	<!--end content-->

	<!--start seitenbalken-->
	
		
	<div id="box3">
	<ul>
	<li style="color: #6F6256; font-weight: bold; list-style-type:none; padding-bottom: 6px">Infos über...</li>
	<li class="testo"><span class="farbe"><a href="http://verdabbio.moesano.ch/" title="Verdabbio" target="_blank">
	Gemeinde Verdabbio</a></span></li>
	<li class="testo"><span class="farbe">Gemeinde Cama</span></li>
	</ul>
	</div>
 
</body>
</html>

die seite findest du unter www.valcama.ch

ciao trudi

24.03.2007 10:31

2 Jörg

Hallo trudi,

das overflow:auto benötigt wohl eine feste Höhe und nicht eine ebenfalls durch einen anderen auto Wert berechnete.

Mir fällt als Lösung auch nur ein, mithilfe von JavaScript die Fensterhöhe zu ermitteln und hiervon die Höhe des Contentareas zu berechnen, also in etwa so:

<script type="text/javascript">
function resizecontentarea()
{
  if (self.innerHeight) {
    windowheight = self.innerHeight;
  } else if (document.documentElement && document.documentElement.clientHeight) {
    windowheight = document.documentElement.clientHeight;
  } else if (document.body) {
    windowheight = document.body.clientHeight;
  }
  contentheight = windowheight - 280;
  document.getElementById('contentarea').style.height = contentheight + 'px';
}
</script>

... und diese Funktion dann beim Onload von body aufzurufen:

<body style="background-image: url('images/geschichte5.jpg'); " onload="resizecontentarea()">

24.03.2007 11:45

3 trudi

ciao jörg,

beim firefox zeigt jetzt den scrollbalken, ob es passt auch für 17 zoll bildschierm dass es genau bis ende der bildschirm hinkommt muss ich noch testen. beim internet explorere ist der scrollbalken aber immer noch nicht sichtbar, nur ganz aussen der normale grosse scrollbalken...

body {
	margin: 0;
	padding: 0;
	font: 80%  Verdana, Arial, Helvetica, sans-serif;
	text-align: left;
	background: transparent none no-repeat;
	width: auto;
	height: auto;
	overflow: hidden;
}


	
/*Main-Navigation*/

 #navcontainer li a:link, #navcontainer li a:visited, #navcontainer li a:hover, #navcontainer li.on {
	background-image: url(../images/hor_linie_rot1.jpg);
}

 
#navcontainer {
	position: absolute;
	top: 230px;
	left: 6px;
	width: 195px;
	text-align: left;
	margin-left: 0;
	padding-left: 16px;
	margin-right: 0;
	padding-bottom: 2px;
}

#navcontainer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#navcontainer li a:link, #navcontainer li a:visited {
	display: block;
	text-decoration: none;
	font-weight: bold;
	font-size: 11px;
	line-height: 15px;
	padding-bottom: 5px;
	padding-top: 5px;
	color: #6F6256;
	background-position: bottom left;
	background-repeat: no-repeat;
}


#navcontainer li a:hover {
	color: #C4C4C4;
	background-repeat: no-repeat;
}


#navcontainer li.on {
	list-style-type: disc;
	color: #F23311;
	font-weight: bold;
	font-size: 11px;
	background-position: bottom left;
	background-repeat: no-repeat;
	padding-bottom: 5px;
	padding-top: 5px;
	margin-left: 0;

}



/*Main-Navigation Ebene 2*/


#navcontainer ul li.on2 {
	list-style-type: disc;
	color: #F23311;
	font-weight: bold;
	font-size: 11px;
	padding-bottom: 2px;
	padding-top: 2px;
	background-image:none;
}

#navcontainer ul li.on2 ul li a:link, #navcontainer ul li.on2 ul li a:visited {
	font-weight: normal;
	display: block;
	text-decoration: none;
	font-size: 11px;
	line-height: 15px;
	padding-bottom: 2px;
	padding-left: 10px;
	padding-top: 2px;
	color: #6F6256;
	background-image:none;
}

#navcontainer ul li.on2 ul li a:hover {
		color: #C4C4C4;
		font-weight: normal;
		background-image:none;
}
	

#navcontainer ul li.on2 ul li.on3 {
	font-weight: normal;
	font-size: 11px;
	line-height: 15px;
	padding-bottom: 2px;
	padding-left: 10px;
	padding-top: 2px;
	color: #6F6256;
	background-image:none;
}



/*Top-Navigation*/


#topnavi ul {
	position: absolute;
	top : 170px;
	left: 236px;
	list-style-type: none;
	display: inline;
	padding-left: 0;
	margin-top: 10px;
	margin-left: 0;
}

#topnavi li {
	display: inline;
	font-weight: bold;
	font-size: 11px;	
}
 
#topnavi li a:link, #topnavi li a:visited {
	text-decoration: none;
	border-left: 2px solid #F23311;
	padding: 3px 6px;
	color: #6F6256;
}

#topnavi li a.erste {
	border-left: none;
}

#topnavi li a:hover {
	color: #F23311;
}

/*End Top-Navigation*/


/*Sprachauswahl*/
#language ul {
	position: absolute;
	top : 195px;
	left: 850px;
	list-style-type: none;
	display: inline;
	padding-left: 0;
	margin-top: 10px;
	margin-left: 0;
}

#language li {
	display: inline;
	padding: 3px 3px;
	border-left: 1px solid #F23311;
	font-size: 11px;	
}
 
#language li a:link, #language li a:visited {
	text-decoration: none;
	color: #6F6256;
}

#language li a:hover {
	color: #F23311;
}


/*Inhalt*/

#Schatten {
	padding: 0;
	margin: 0;
	position: absolute;
	width: 21px;
	top: 0;
	left: 1016px;
	height: 100%;
	background: url(../images/schatten_verlauf.jpg) repeat-y top left white; 
}


#box1 h1 {
	position: absolute;
	top: 230px;
	left: 250px;
	margin: 0;
	padding-bottom: 20px;
	text-align: left;
}


#contentarea {
	overflow: auto;
	font-size: 11px;
	color: #6F6256;
	margin-top: 265px;
	margin-left: 250px;
	width: 766px;
	padding-bottom: 10px;
	padding-left: 0;
	text-align:left;
}

#contentarea-index {
	overflow: auto;
	font-size: 11px;
	color: #6F6256;
	margin-top: 250px;
	margin-left: 250px;
	width: 766px;
	padding-bottom: 10px;
	padding-left: 0;
	text-align:left;
}

	

#box2 {
	padding-bottom: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #6F6256;
	width: 560px;
	float: left;
	text-align: left;
}


#box2-index {
	padding-bottom: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #6F6256;
	width: 730px;
	text-align: left;
}


.lagocama img {
	float: left;
	margin: 3px;
}


.alpwirtschaft img {
	float: left;
	margin-right: 5px;
	padding-right: 5px;
}

#index img {
	float: left;
	margin-right: 5px;
	padding-right: 25px;
}


table {
	padding-left: 4px;

} 

captation {
	font-weight: bold;
	margin-left: 15px;

}

th {
	padding-right: 8px;
	padding-bottom: 6px;
}

td {
	padding-right: 8px;
	padding-bottom: 6px;
}
	

.cl {
	clear: left;
}


.bilder {
	float: left;
	text-align: left;
	margin: 15px;
}	

.lista {
	list-style-type:none;
	color:#6F6256;
	padding-top: 0;
	padding-left: 0;
	padding-bottom: 2px;
	margin-left: 0;
}

#lista_posizione {
	display:inline;
	padding: 0;
	margin: 0;
}

p {
	padding-top: 8px;
	margin: 0;
}


h1 {
	color: #F23311;
	font-weight: bold;
	font-size: 18px;
	padding-bottom: 10px;
}


h2 {
	font-weight: bold;
	font-size: 14px;
}

h3 {
	color: #6F6256;
	font-weight: bold;
	font-size: 11px;
	padding-top: 8px;
	padding-bottom: 8px;
	margin:0;
}

h4 {
	color: #9EC2E3;
	font-weight: bold;
	font-size: 12px;
	margin:0;
}

h5 {
	color: #6F6256;
	font-weight: bold;
	font-size: 12px;
	padding-top: 0;
	padding-bottom: 10px;
	margin: 0;
}	

h6 {
	color: #6F6256;
	font-weight: bold;
	font-size: 11px;
	padding-top: 0;
	padding-bottom: 8px;
	margin:0;
}





.marrone {
	color: #EDC702;
	font-weight: bold;
	padding-top: 6px;
	padding-bottom: 6px;
}

.marrone1 {
	color: #9D9754;
	font-weight: bold;
	padding-top: 6px;
	padding-bottom: 6px;
}



.viola {
	color: #D485A3;
	font-weight: bold;
	padding-top: 6px;
	padding-bottom: 6px;
}

.verdone {
	color: #79CF45;
	font-weight: bold;
	padding-top: 6px;
	padding-bottom: 14px;
	margin: 0;
}



.verde {
	color: #79CF45;
	font-weight: bold;
	font-size: 16px;
	padding-top: 30px;
	padding-bottom: 0px;
	margin:0;
}

.rosa {
	color:#DD9F7B;
	font-weight: bold;
	padding-top: 6px;
	padding-bottom: 6px;
}	

.blu {
	color: #5EBFC2;
	font-weight: bold;
	padding-top: 6px;
	padding-bottom: 6px;
	margin: 0;
}

.blu2 {
	color: #7FB1DF;
	font-weight: bold;
	padding-top: 0;
	padding-bottom: 10px;
	margin: 0;
}

.blu3 {
	color: #7FB1DF;
	font-weight: bold;
	padding-top: 20px;
	padding-bottom: 20px;
	margin: 0;
}

.turchese {
	color: #5EBFC2;
	font-weight: bold;
	padding-top: 20px;
	padding-bottom: 6px;
	margin: 0;
}


/*Seitenspalte*/
		

#box3 {
	text-align: left;
	font-size: 11px;
	float: right;
	position: absolute;

	top: 265px;
	left: 830px;
	margin-left: 0;
	width: 170px;	
}


ul {
	list-style-type: disc;
	color: #F23311;
	margin-left: 0;
	padding-left: 20px;
	text-decoration: none;
	text-align: left;
}


.testo {
	padding-bottom: 8px;
}



.farbe {
	color: #6F6256;
} 

.testo a {
	text-decoration: none;
	color: #6F6256;
}		


<!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" xml:lang="de" lang="de">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <meta name="Description" content="val cama e le sue bellezze in italiano e tedesco" />
  <meta name="Keywords" content="val cama, alp de lagh, ProSpecieRara, mesolcina, escursionismo" />
  <title>val cama</title>
  <link rel="stylesheet" type="text/css" href="styles/basic1.css" />

  </head>
  <script type="text/javascript">
function resizecontentarea()
{
 if (self.innerHeight) {
   windowheight = self.innerHeight;
 } else if (document.documentElement && document.documentElement.clientHeight) {
   windowheight = document.documentElement.clientHeight;
 } else if (document.body) {
   windowheight = document.body.clientHeight;
 }
 contentheight = windowheight - 280;
 document.getElementById('contentarea').style.height = contentheight + 'px';
}
</script>

<body style="background-image: url('images/geschichte5.jpg'); " onload="resizecontentarea()">

	

	<!-- start main navigation -->
	<div id="navcontainer">
	<ul>
	<li><a href="aktuelles_de.html">Aktuelles </a></li>
	<li><a href="anreise_de.html">Standort &amp; Anreise </a></li>
	<li class="on">Geschichte </li>
	<li><a href="projekt_de.html">Entwicklungsprojekt </a></li>
	<li><a href="alpwirtschaft_de.html">Alpwirtschaft </a></li>
	<li><a href="waldreservat_de.html">Waldreservat </a></li>
	<li><a href="seen_de.html">Seen </a></li>
	<li><a href="alpinismus_de.html">Wandern &amp; Bergsteigen </a></li>
	<li><a href="unterkunft_de.html">Unterkunft &amp; Verpflegung </a></li>
	</ul>
	</div>
	<!--end navigation -->
   
	<!-- start top navigation -->
	<div id="topnavi">
	<ul>
	<li><a href="index_de.html" class="erste">Home </a></li>
	<li><a href="kontakt_de.html">Kontakt </a></li>
	<li><a href="impressum_de.html">Impressum </a></li>
	</ul>
	</div>	
	<!--end topnavigation -->
	
	<!-- start sprachwahl -->
	<div id="language">
	<ul>
	<li><a href="geschichte_de.html">Deutsch </a></li>
	<li><a href="geschichte_it.html">Italiano </a></li>
	</ul>
	</div>	
	<!--end sprachauswahl -->

<!--start titelbereich -->
	<div id="Schatten"></div>
	
 	<div id="box1">
	<h1>Geschichte des Val Cama</h1>
	</div>
<!--end titelbereich -->		
	
	<!-- start content -->
	<div id="contentarea">
	<div id="box2">
	
	
	<h2 class="verdone">
	Erste historische Aufzeichnung aus dem Jahr 1384</h2>
	<div class="alpwirtschaft"><img src="images/confine.jpg" width="200" height="170" alt="grenzmauer" /></div>
	Die Gemeinden Cama und Verdabbio lagen lange Zeit im Streit um das Val Cama. Im Jahre 1384 wurde dann eine schriftliche Vereinbarung unterzeichnet. Diese beinhaltete, dass Verdabbio ein Teil des Val Cama bekam. Im Gegenzug erhielt Cama gute Felder und Weinreben im Talgrund von Misox. Im 1600 und 1700 Jahrhundert gab es immer wieder Konflikte über die Grenzziehung. Abgesehen von kleineren Veränderungen wurden diese aber beibehalten.
	<p>Mittels Trockenmauer wurde die Gemeindegrenze festgelegt (siehe Bild). Eine Besonderheit ist, dass die Grenze im weiteren Verlauf durch den See gezogen wurde. </p>
	

	
	<p style="clear:left">&nbsp;</p>

	
	<h2 class="verdone">Menschliches Tun in früheren Zeiten</h2>
	<div class="alpwirtschaft"><img src="images/storia1.jpg" width="200" height="510" alt="gebäude" /></div>
	Vor allem die zahlreichen Alpgebäude belegen die Präsenz des Menschen im Val Cama. Es ist dokumentiert, dass im Jahr 1577 "Nicolao da Valdort" mit Hilfe seiner Brüder ein Alpgebäude am Cama Bergsee erbaute. Von den Einwohnern von Verdabbio wurde gegen Mitte des 1700 Jahrhunderts die abgelegene Alp Broieta errichtet.<p>&nbsp;</p>Das Tal wurde auf vielfältige Weise genutzt:

	<ul style="list-style-type:none">
	<li class="testo">&raquo; <span class="farbe"><em>Wälder</em>: 
	
	Alte Dokumente belegen, dass bereits im Jahr 1504 Bergholz aus dem Val Cama verkauft wurde. Sehr wahrscheinlich wurde dieses Holz schon für den Bau der Steinbrücke über die Moesa benutzt, die 1978 durch einen Hochwasser zerstört wurde. </span></li>
	
	 <li class="testo">&raquo; <span class="farbe"><em>Gelber Enzian</em>: 
	Zwischen 1862 und 1865 wurden Wurzeln des Gelben Enzians im Val Cama für die Schnapsherstellung ausgegraben. Die Gemeinde Cama erteilte an einen professionellen Schnapsbrenner hierzu die Erlaubnis.
	
	  </span></li>
	  <li class="testo">&raquo; <span class="farbe"><em>Baumharz</em>: Es ist bekannt, dass die Gemeinde Cama im Jahr 1862 für 20 Franken das Recht verkaufte, im Wald von Besarden Baumharz zu gewinnen. Das Harz wurde für die Herstellung von Holzfässern und Schnüren verwendet. Es wurde aber auch von Apothekern nachgefragt. </span></li>
	  
	  
	<li class="testo">&raquo; <span class="farbe"><em>Holzkohle</em>: Im 19. Jahrhundert hatte die Ära der Holzkohlegewinnung (Köhlerei) begonnen. Heute findet man im Val Cama an unerwarteten Orten geebnete Flächen. Hier wurde Totholz, welches z. B. von Lawinen mitgerissen wurde, verkohlt. Holzkohle hat gegenüber Holz den Vorteil, dass sie ohne Flammen und unter grösserer Hitzerzeugung verbrennt.</span></li>	 
</ul>
	 
	 	<p style="clear:left">&nbsp;</p>
		
		
		<p>Wissen Sie etwas über die Geschichte des Val Cama - auch der letzten Jahrzehnte? Wir würden uns sehr über Beiträge freuen <a style="color: #6F6256" href="kontakt_de.html">(Kontakt)</a>.</p>
	 
	 </div>
	 </div>

	<!--end content-->

	<!--start seitenbalken-->
	
		
	<div id="box3">
	<ul>
	<li style="color: #6F6256; font-weight: bold; list-style-type:none; padding-bottom: 6px">Infos über...</li>
	<li class="testo"><span class="farbe"><a href="http://verdabbio.moesano.ch/" title="Verdabbio" target="_blank">
	Gemeinde Verdabbio</a></span></li>
	<li class="testo"><span class="farbe">Gemeinde Cama</span></li>
	</ul>
	</div>
 
</body>
</html>


ich hoffe war klar genug....weiss du noch was man noch probieren könnte?

saluti

trudi

24.03.2007 15:50 | geändert: 24.03.2007 15:51

4 Jörg

In meinem IE wird der Scrollbalken rechts abgeschnitten - wenn die Breite von #contentarea erhöht wird, ist er wieder sichtbar

#contentarea {
overflow: auto;
font-size: 11px;
color: #6F6256;
margin-top: 265px;
margin-left: 250px;
width: 756px;
padding-bottom: 10px;
padding-left: 0;
text-align:left;
}

24.03.2007 16:23

5 trudi

hallo jörg,

die seite im firefox betrachtet ist perfekt (auf 17 Zoll habe ichs jetzt getestet).

das problem ist im internet explorer. hier erscheint nur der äussere scrollbalken und der schatten des seiten-endes (rechts) geht nicht ganz nach unten. richtig wäre wie es der firefox anzeigt.

deinen letzten vorschlag habe ich ausprobiert... aber ohne erfolg.

hast du eine lösung?

danke trudi

24.03.2007 16:43

6 Jörg

Sorry, ich seh grad, dass ich mich da verschrieben hatte:

In meinem IE wird der Scrollbalken rechts abgeschnitten - wenn die Breite von #contentarea erhöht wird, ist er wieder sichtbar

Richtig ist: die Breite von #contentarea muss verkleinert werden (wie in dem Beispiel)

JavaScript ist bei dir aktiviert?

Und bei welche Version tritt das Problem bei dir auf? Mit der Korrektur auf width: 756px; kann ich sowohl im IE 7 als auch im IE 6 den Scrollbalken sehen - bei einer Bildschirmauflösung von 1024 * 768

24.03.2007 16:56 | geändert: 24.03.2007 16:56

7 trudi

hallo,

ich hab schon 756 px angegeben in #contentarea, aber es hat in IE kein scrollbalken angezeigt.

bildschirmauflösung ist 1280 X 800.

ich denke java script ist aktiviert, weil die java programmierung in firefox angenommen hat.

unsere scrollbalken ist nicht der ganz am rand vom bildschirm (eigentlich habe ich den bei body mit overflow: hidden unsichtbar gemacht, aber eben jetzt in IE ist er wieder erschienen) sondern am ende des inhaltbereich (bei contentarea habe ich overflow: auto angegeben).

grazie

trudi

24.03.2007 17:08

8 trudi

und noch komisch ist, dass es in IE der schattenrand ganz am rechten rand von der seite nicht bis am seite ende runtergeht sondern abgeschnitten wird (ich hab aber height=100% bei #schatten)

schwierig zu erklären

24.03.2007 17:16

9 Jörg

ich denke java script ist aktiviert, weil die java programmierung in firefox angenommen hat.

Und im Internet Explorer ist JavaScript auch aktiviert?

Die "Schiene" für den vertikalen Scrollbalken am rechten Rand ercheint im Internet Explorer immer - auch wenn der Balken nicht angezeigt wird.

und noch komisch ist, dass es in IE der schattenrand ganz am rechten rand von der seite nicht bis am seite ende runtergeht sondern abgeschnitten wird (ich hab aber height=100% bei #schatten)

In meinem IE geht der Schatten bis an den unteren Rand. Womöglich ist dies aber auch abhängig von der Bildschirmauflösung

24.03.2007 17:40

10 trudi

hallo jörg

wie kann ich schauen ob es in IE das java script aktiviert ist?


was könnte ich machen dass es nicht vom Bildschirmauflösung abhängig ist?


24.03.2007 19:25