Zur Navigation

2 probleme mit fotogalerie

1 trudi

hallo jörg,

leider komme ich nicht weiter:

1. problem: hab eine einfache fotogalerie angefangen, erstmal mit einen einzigen bild zu testen. in firefox öffnet sich das neue fester mit das vergrösserte bild mit der entsprechende angegebene grösse. bei IE egal welche grösse ich angebe das geöffnete fenster bleibt immer gleich. wie könnte ich das lösen?

<!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/impressum3.jpg); "onload="resizecontentarea() ">
	

	<!-- start main navigation -->
	<div id="navcontainer">
	<ul>
	<li><a href="aktuelles_it.html">Attualit&agrave; </a></li>
	<li><a href="anreise_it.html">Dove si trova </a></li>
	<li><a href="geschichte_it.html">Cenni storici </a></li>
	<li><a href="projekt_it.html">Progetto di sviluppo </a></li>
	<li><a href="alpwirtschaft_it.html">Economia alpestre </a></li>
	<li><a href="waldreservat_it.html">Riserva forestale </a></li>
	<li><a href="seen_it.html">Laghetti alpini </a></li>
	<li><a href="alpinismus_it.html">Escursioni &amp; alpinismo </a></li>
	<li><a href="unterkunft_it.html">Vitto &amp; alloggio </a></li>
	<li class="on">Fotogalerie </li>
	</ul>
	</div>
	<!--end navigation -->
   
	<!-- start top navigation -->
	<div id="topnavi">
	<ul>
	<li><a href="index.htm" class="erste">Home </a></li>
	<li><a href="kontakt_it.html">Contatto </a></li>
	<li><a href="impressum_it.html">Impressum </a></li>
	</ul>
	</div>	
	<!--end topnavigation -->
	
	<!-- start sprachwahl -->
	<div id="language">
	<ul>
	<li><a href="impressum_de.html">Deutsch </a></li>
	<li><a href="impressum_it.html">Italiano </a></li>
	</ul>
	</div>	
	<!--end sprachauswahl -->

	
	
<!--start titelbereich -->
	<div id="Schatten"></div>
	
 	<div id="box1">
	<h1>Eindrücke von Val Cama</h1>
	</div>
<!--end titelbereich -->	
	
	<!-- start content -->
	<div id="contentarea">
	<div id="box2">


<div class="bilder"><a href="sambrogsee_de.html" onclick="window.open('sambrogsee_de.html', 'Popup', 'width=720, height=540, left=200, top=100'); return false;" target="_blank"><img src="images/sambrogsee.jpg" width="120" height="80" alt="sambrogsee" style="border:none" /></a><br />
Lagh de Sambrog</div>
	 </div>
</div>

	<!--end content-->

</body>
</html>

und noch:
<!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>
  <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>


<img src="images/sambrogseegross.jpg" width="720" height="480" alt="laghsambrog" />
<p>Sambrog Bergsee</p>

<div id="galerie">
	<ul>
	<li><a href="impressum_de.html">Vorheriges Bild &laquo; &laquo;</a></li>
	<li><a href="impressum_it.html">Zur Miniaturansicht </a></li>
	<li><a href="fafafa">&raquo; &raquo; Nächstes Bild</a></li>
	</ul>
	</div>	

</div>




</body>
</html>

dazu der css:

html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

body {
font: 80%  Verdana, Arial, Helvetica, sans-serif;
text-align: left;
background: transparent none no-repeat;
}

	
/*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: ;
	font-variant:small-caps;


	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: ;
	font-variant:small-caps;
	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;
}



/*Fotogalerie*/

#galerie  {
	text-align:center;
	list-style-type: none;
	display: inline;
	padding-left: 0px;
	margin-top: 10px;
	margin-left: 0px;
}

#galerie li {
	display: inline;
	padding: 60px 60px;
	
	font-size: 11px;	
}

#galerie li a:link, #galerie li a:visited {
	text-decoration: none;
	color: #6F6256;
}

#galerie 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 ; 
}


#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: 350px;
	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: 350px;
	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;
}


2. problem: ist es möglich zu machen, dass das fenster der sich öffnet mit der vergrosserte bilddarestellung, ohne der gewöhnliche "blaue" balken der jeder internetseite hat erscheint? wie könnte so was machen?


ich hoffe es ist einigermassen klar was ich meine.

vielen dank für jeden typ.

saluti

trudi

07.11.2007 10:02

2 Jörg Kruse

Hallo trudi

bei IE egal welche grösse ich angebe das geöffnete fenster bleibt immer gleich.

Welche Version verwendest du? Mein IE 6 öffnet wie Firefox das Popup in der angegebenen Größe

ist es möglich zu machen, dass das fenster der sich öffnet mit der vergrosserte bilddarestellung, ohne der gewöhnliche "blaue" balken der jeder internetseite hat erscheint?

Du meinst den Rahmen des Popup-Fensters? Ich kenne keine Möglichkeit diesen zu entfernen (außer durch ein Fullscreen-Popup, aber das ist wohl nicht das, was du möchtest). Wenn du die Bilder aber stattdessen in einem Layer öffnest, könntest du den Rahmen selbst bestimmen

07.11.2007 10:57 | geändert: 07.11.2007 11:00

3 trudi

Du meinst den Rahmen des Popup-Fensters? Ich kenne keine Möglichkeit diesen zu entfernen (außer durch ein Fullscreen-Popup, aber das ist wohl nicht das, was du möchtest). Wenn du die Bilder aber stattdessen in einem Layer öffnest, könntest du den Rahmen selbst bestimmen


ja genau der popup fester meine ich.

was meinst du mit "in einem Layer öffnen"?

danke , am liebsten hätte ich gar kein Rahmen...
trudi

07.11.2007 11:10 | geändert: 07.11.2007 11:15

4 Jörg Kruse

Mit dem Layer ist ein einfaches div Element gemeint. Dieses wird als nicht sichtbar definiert (z.B. "display:none"); dann wird eine JavaScript-Funktion erstellt, die bei onclick aufgerufen wird, und die Eigenschaften des Layers neu definiert, d.h. diesen sichbar macht, gegebenenfalls Position umd Größe festlegt, sowie über die Eigenschaft innerHTML einen Inhalt bestimmt. Einige Gallerien verzichten hierbei sogar auf den Einsatz von JavaScript und steuern den Layer lediglich über CSS, indem das Bild bei :hover als Hintergrundbild eingeblendet wird

07.11.2007 11:39 | geändert: 07.11.2007 11:41

5 trudi

danke für die antwort....aber da komme ich einfach an meine grenzen, da komme ich einfach nicht mehr mit...

trotzdem danke

trudi

07.11.2007 12:29

6 Jörg Kruse

Naja, es ist halt etwas aufwendiger als ein Popup zu öffnen. Ich habe beim Googeln leider keine detaillierte Anleitung / Vorlage gefunden, aber vielleicht kennt jemand anders noch ein gutes Tutorial hierzu

07.11.2007 12:42 | geändert: 07.11.2007 12:42

Beitrag schreiben (als Gast)

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





[BBCode-Hilfe]