Zur Navigation

kein scrollbalken [2]

11 trudi

java script hab geschaut ist in IE aktiviert. verstehe nicht wieso so anders erscheint....mmmm

24.03.2007 19:35

12 Jörg Kruse

Hast du den IE auch schon mit anderen Bildschirmauflösungen getestet?

Nochmal ein Screenshot wie die derzeitige Seite http://www.valcama.ch/geschichte_de.html in meinem IE 7 bei 1024 * 768 aussieht:

https://joergs-forum.de/bilder/mu-1-66-trudi-scrollbalken-gif

Man sieht dort ein zwei Pixel vom Scrollbalken, der Rest scheint abgeschnitten. Bei width: 750px; für #contentarea ist er ganz sichtbar. Probier den Wert bei dir mal noch kleiner zu machen, vielleicht siehst du ihn dann auch irgendwann

24.03.2007 20:38

13 trudi

hallo jörg,
verstehe jetzt was du meinst....

aber wie kann man machen das die internetseiteprogrammierung nicht von der bildschirmauflösung abhängig ist...sonst geht es ja nie gut für alle...

...

24.03.2007 21:02

14 Rudy

aber wie kann man machen das die internetseiteprogrammierung nicht von der bildschirmauflösung abhängig ist

Dann mach die gesamte Seite scrollbar, nicht nur die contentarea.

Find ich übrigens gut die Seite, schönes Design, guter Code.

24.03.2007 21:12

15 trudi

hallo , bleibt mit also nichts anders übrig als der scrollbalken für die contentarea wegzumachen und der "body" contentarea wieder zu aktivieren? ist aber schade? bei firefox passt ja alles gut auch bei andere auflösung...


ah schon alles kompliziert....


24.03.2007 21:13

16 Rudy

Find ich gar nicht schade, es ist doch gängige Praxis, Seiten so aufzubauen. Man hat eine größere Auflösung, um mehr Inhalt auf einmal überblicken zu können. Mit der fixen Höhe des content-divs nimmst Du diesen Vorteil weg. Es würde mich überhaupt nicht stören, einen Scrollbalken an der Seite zu haben - im Gegenteil fände ich es sogar schöner als neben der Infobox.

24.03.2007 21:21

17 trudi

hallo,

hab jetzt der scrollbalken an der seite gebracht und der scrollbalken am Rand der Inhalt weggetan. jetzt taucht noch ein problem auf und zwar geht das schattierung am rand der seite nicht mit runter sondern bis eine bestimmt höhe obwohl beim css height =100% drin hab.

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: auto;
}


	
/*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 {
	font-size: 11px;
	color: #6F6256;
	margin-top: 265px;
	margin-left: 250px;
	width: 750px;
	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" />

  <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>

  </head>


<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>

aber ich fand mit dem scrollbalken direkt neben dem inhalt schöner, da hat man die bilder , navigazion leiste, oben immer fix gehabt zum anschauen.....

trudi

24.03.2007 21:31

18 Jörg Kruse

Bei mir zeigt der IE 7 beim neuen Code zwei Scrollbalken an und scrollt den Inhalt nach oben in den Header?! Der IE 6 verhält sich aber normal, so wie Opera und Firefox..

Ich hab die Ursache: das Script resizecontentarea() muss im neuen Code wieder rausgenommen werde - dann verhält sich auch der IE 7 wieder normal

jetzt taucht noch ein problem auf und zwar geht das schattierung am rand der seite nicht mit runter sondern bis eine bestimmt höhe obwohl beim css height =100% drin hab.

Wenn du den Schatten einem übergeordneten div, in welchem sich die andern divs befinden, als Hintergrund zuordnest, sollte der Schatten bis nach unten durchgehen

24.03.2007 22:12 | geändert: 24.03.2007 22:14

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]