bildwechsel in banner (=png) einbauen

**lobo3000** · 18.11.2009 11:53

Schönen Vormittag!

Muss für Schule eine HP erstellen, da unser Informatik-Kustode dafür keine Lust hat *gg*!

Nun gut, baue die ganze HP in Dreamweaver mit CSS auf und nun folgendes Problem:

Muss im Banner, der eine png Grafik ist einen Bildwechsel einbauen!
Leider fehlt mir hierbei die Erfahrung wie ich das im html bzw css verwirklichen kann...

Anbei der Code bisher

HTML-Code:

</head>
<body>
 

<div id="container">

	<!-- anfang banner -->
	<div id="banner" >
		<img src="pics/banner1.png" />
	</div>
	
	<!-- ende banner -->
	
	<div id="mainnavi" >
		<a href="index.html">Home </a>| <a href="schulprofil.html">Schulprofil</a> |  <a href="direktion.html">Direkton</a> |  <a href="aktuelles.html">Aktuelles</a> | 
		<a href="lehrerinnen.html">LehrerInnen</a> |  <a href="kontakt.html">Kontakt </a>
	</div>
	
	<!-- ende mainnavi -->
	
	<div id="left">
	<h2>Hauptnavi</h2>
		<ul class="borderbottom">
			
			<ul>
				<ul>
						<li><a href="">Wir über uns</a></li>

hier noch CSS:

HTML-Code:

body {
	/*background-color: #e1ddd9;*/
	font-size: 0.8em;
	font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
	color:#564b47;
	padding:0;
	margin:0;
	background: url(pics/links.png) repeat-y ;
}

a {
	color: #000000;
	text-decoration:none
	}
a:visited {color:#000000;}
a:hover {color: #FFFFFF;}
a:active { color:#FFFFFF;}


h1 {
	font-size: 2em; 
	font-weight: normal;
 }

h2 {
	font-size: 1.7em;
	font-weight: normal;
	margin-left:30px;
}

img.download {vertical-align:middle;}

/* ----------container zentriert das layout-------------- */
#container {
	width: 900px;
	margin: 0 auto;
	padding: 0;
	background-color: #564b47;
	/*border:1px #000000 solid;*/
	}

/* ----------banner für logo und bilderwechsel-------------- */
#banner {
	margin: 0;
	padding: 0;
	background-color: #EBD3E0;
	
}

#mainnavi {
	margin: 3px;
	padding: 2px 0;
	background-color: #E0A3B7;
	height: 20px;
	font-size:14px;
	text-align:center;
	
	}


/* -----------------Inhalt--------------------- */
#content {
	min-height:600px;
	background-color: #FFCCFF;
	padding: 0;
	margin: 0 15em;
}
usw.

Vielleicht hat wer einen Ansatz, möchte den Bildwechsel ja auch via CSS machen, hab dafür im Netz schon Möglichkeiten gefunden...

LG
lobo3000

**MichaG** · 18.11.2009 12:43

Kannst du die Lösungen mal verlinken? Würde mich interessieren, wie man mit statischen Sprachen dynamische Funktionen bewerkstelligen kann.

Ich würde dir dafür eher zu Javascript empfehlen.

**max.m** · 18.11.2009 13:06

Da hat MichaG recht.

Vielleicht wäre diese Slideshow etwas? (Demo)

**lobo3000** · 18.11.2009 14:26

Hallo!

Ich schäme mich für meine Frage...

Hab mir den Quelltext der Seite (http://www.ikf-kobudo.org/) nochmals genauer angesehen, ist doch Javascript...

Aber genau auf diese Art und Weise würd ich es gerne in der SchulHP sehen!

Sorry mein Versehen!

LG
lobo3000

**max.m** · 18.11.2009 15:13

Ist das InnerFade-Plugin für jquery:

http://medienfreunde.com/lab/innerfade/

**lobo3000** · 18.11.2009 15:22

DAS ist ja mehr als genial!!!!!

Herzlichen Dank!!!!

Mal sehen wie weit ich komme und obs überhaupt etwas wird *gg*!

LG
lobo3000

**lobo3000** · 20.11.2009 21:08

Guten Abend!

Habs eigentlich geschafft den Bildwechsel im Banner mit Hilfe einer Tabelle einzubauen, leider jedoch mit sehr viel Rand nach oben und unten...

zur Verdeutlichung hier der Link:

http://hphasner.hp.funpic.de

hier der code:

HTML-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>
<link type="text/css" href="formate.css" rel="stylesheet" media="screen" />

<title>Hasnerschule</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.innerfade.js"></script>
	<script type="text/javascript">
	   $(document).ready(
				function(){
								
					$('ul#portfolio').innerfade({
						speed: 5000,
						timeout: 5000,
						type: 'sequence',
						containerheight: '120px'
					});
					
					$('.fade').innerfade({
						speed: 1000,
						timeout: 6000,
						type: 'random_start',
						containerheight: '120px'
					});
					
					

			});
  	</script>
		<link rel="stylesheet" href="css/painter.css"  type="text/css" media="all" />
		<style type="text/css" media="screen, projection">
					@import url(css/jq_fade.css);
		</style>		
</head>
<body>
<div id="container">

	<!-- anfang banner -->
	<table width="100%" height="120px" cellpadding="0" cellspacing="0" border="0">
		<td width="110px" align="left"><img src="pics/logo _nms_ ohne_kleiner.jpg" alt="logo" /></td>
		<td width="75%">&nbsp;</td>
		<td width="25%">
			<ul id="portfolio">
				<li>
						<img src="../pics/bilder/resized/1.JPG"/>
					</li>
					<li>
						<img src="../pics/bilder/resized/2.JPG"  />
					</li>					
					<li>
						<img src="../pics/bilder/resized/3.JPG" />
					</li>					
					<li>
						<img src="../pics/bilder/resized/4.JPG" />
					</li>		
					<li>
						<img src="../pics/bilder/resized/5.JPG" />
					</li>
					<li>
						<img src="../pics/bilder/resized/6.JPG" />
					</li>
					<li>
						<img src="../pics/bilder/resized/7.JPG" />
					</li>
					<li>
						<img src="../pics/bilder/resized/8.JPG" />
					</li>
					<li>
						<img src="../pics/bilder/resized/9.JPG" />
					</li>
					<li>
						<img src="../pics/bilder/resized/10.JPG" />
					</li>
					<li>
						<img src="../pics/bilder/resized/11.JPG" />
					</li>
					<li>
						<img src="../pics/bilder/resized/12.JPG" />
					</li>					
				</ul>
		</td>
		</table>
	
				
			
		
	<!--<div id="banner" >
		<img src="pics/banner1.png" />
	</div>-->
	
	<!-- ende banner -->
	
	<div id="mainnavi" >
		<a href="index.html">Home </a>| <a href="schulprofil.html">Schulprofil</a> |  <a href="direktion.html">Direkton</a> |  <a href="aktuelles.html">Aktuelles</a> | 
		<a href="lehrerinnen.html">LehrerInnen</a> |  <a href="kontakt.html">Kontakt </a>
	</div>
	
	<!-- ende mainnavi -->
	
	<div id="left">
	<h2>Hauptnavi</h2>
		<ul class="borderbottom">
			
			<ul>
				
						<li><a href="wirueberuns.html">Wir &uuml;ber uns</a></li>
						<li><a href="">Kreativer Schwerpunkt</a></li>
						<li><a href="">Musischer Schwerpunkt</a></li>
						<li><a href="http://www.edumoodle.at/hasnerschule" target="_blank">Lernplattform</a></li>
						<li><a href="">Links</a></li>
				
			</ul>
		</ul>
		<h2>Informelles</h2>
		<ul class="borderbottom">
			<ul>
				
						<li><a href="">Stundenplan 2009/10</a></li>
						<li><a href="">Webmail</a></li>
						<li><a href="">Archiv 2007/08</a></li>
						<li><a href="">Archiv 2006/07</a></li>
						<li><a href="">Archiv 2005/06</a></li>
				
			</ul>
		
	</div> 
	
	<!-- ende linkes menü -->
	
	<div id="right">

		<div id="news">News:</div>
		
	</div> 
	
	<!-- ende rechtes menü -->
	
	<div id="content">
		<h1>Unser Team</h1>
		<div id="text">
			<h3 style="left:30px; top:10px;text-decoration:underline;">W&auml;hlen Sie bitte eine Klasse aus:</h3>
				<table border="0" width="auto" style="padding:2px 8px;">
					<th>Klasse</th>
					<th>Klassensprecher</th>
					<th>KlassensprecherStv.</th>
					

						<tr>
							<td>Foto</td>
							<td>Name</td>
							<td>Gegenstände</td>
						</tr>
						<tr>
							<td>Foto</td>
							<td>Name</td>
							<td>Gegenstände</td>
						</tr>
						<tr>
							<td>Foto</td>
							<td>Name</td>
							<td>Gegenstände</td>
						</tr>
						<tr>
							<td>Foto</td>
							<td>Name</td>
							<td>Gegenstände</td>
						</tr>
						
						
				</table>
					
			
 		</div>
	</div>
	
 	<div id="footer">
		Fussleiste
	</div>
	
</div>
</body>
</html>

und CSS:

HTML-Code:

body {
	background-color: #e1ddd9;
	font-size: 0.8em;
	font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
	color:#564b47;
	padding:0;
	margin:0;

}

a {
	color: #000000;
	text-decoration:none
	}
a:visited {color:#000000;}
a:hover {color: #FFFFFF;}
a:active { color:#FFFFFF;}


h1 {
	font-size: 2em; 
	font-weight: normal;
 }

h2 {
	font-size: 1.7em;
	font-weight: normal;
	/*margin-left:10px;*/
}


img.download {vertical-align:middle;}

/* ----------container zentriert das layout-------------- */
#container {
	width: 990px;
	margin: 0 auto;
	padding: 0;
	background-color: #564b47;
	border:1px #000000 solid;
	}

/* ----------banner für logo und bilderwechsel-------------- */
#banner {
	margin: 0;
	padding: 0;
	background-color: #EBD3E0;
	
}

#mainnavi {
	margin: 3px;
	padding: 2px 0;
	background-color: #E0A3B7;
	height: 20px;
	font-size:14px;
	text-align:center;
	border-bottom: 1px #FFFFFF solid;
	border-top: 1px #FFFFFF solid;
	
	}
	
ul#portfolio li img{
	border: 1px solid #ccc;
	padding: 4px;
}


.fade{
	margin-bottom: 2em;
}

.fade p{
	margin-bottom: 2em;
	text-align: center;
	width: 100%;
	background: #fff;
}

li{
	list-style:none;
	}


/* -----------------Inhalt--------------------- */
#content {
	min-height:600px;
	background-color: #FFCCFF;
	padding: 0;
	margin: 0 15em;

}

#text{
	color:#000000;
	margin-left:30px;
	margin-top: 20px;
	margin-right:30px;
	line-height: 1.5;
	
	}
	
#stundenplan{
	color:#000000;
	margin-left:30px;
	margin-top:20px;
	}

th{
	text-decoration:underline;
	}
	
tr{
	text-align:center;
	}

h1 {
	padding: 10px;
	margin:0;
}

h2 {
	padding: 10px;
	margin:0;
}

.gross {
	width: 5.71em;
	height: 1.07em;}
	

#news{
	font-size: 1.7em;
	font-weight: normal;
	text-decoration:underline;
	padding:15px 0 0 0;
}

/* --------------linke navigavtion------------- */
#left {
	float: left;
	width: 180px;
	margin: 0;
	padding:15px 0 0 0;
	color:#ffffff;
}
#right {
	float: right;
	width: 180px;
	margin: 0;
	padding: 0;
	color:#ffffff;
}
#left ul{
	list-style-type: none ;
	padding: 0 0 0 10px;
	margin: 0;
}
#left ul.borderbottom{
	border-bottom:1px solid #ffffff;
	padding: 0 0 10px 4px;
}

#left li a {
	display:block;
	background-color:#666666;
	font-size: 12px;
	color:#FFFFFF;
	text-decoration:none;
	/*border-right: 1px #DB7093 solid;*/
	/*border-left: 1px #DB7093 solid;*/
	padding:3px;
	}

#left li a:hover {
	
	text-decoration:none;
	background-color:#E0A3B7;
	border-right: 1px #FFFFFF solid;
	border-left: 1px #FFFFFF solid;
	color:#000000;
	}

#left li{
	margin: 0;
	padding: 0 0 4px 0;
}

#left li li{
	margin: 0;
	padding: 0 0 3px 0;
}

#left li a.selected {
	margin: 0;
	padding: 0 0 0 10px;
	color:#ffffff;
}

#left li li a.selected {
	margin: 0;
	padding: 0;
}




/* -----------fussleiste--------------------------- */
#footer {
	clear: both;
	background-color: #ffffff;
	padding: 0;
	margin: 0;
	margin: 0 15em;
}

/*------------Kontakt-------------------*/
input, textarea { 
	background-color: #ffd9ff; 
	color: #701616;
	
	}

Vielleicht weiß wieder jemand Rat?

LG und Danke
lobo3000

zur Startseite vom TP

Thema: bildwechsel in banner (=png) einbauen

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

bildwechsel in banner (=png) einbauen

habs nun zum teil geschafft...

Ähnliche Themen

Rotierenden Banner in Vorlage einbauen

scratch banner und expandable banner

Gif-banner in eine Swf-Datei einbauen

Aktive Benutzer

Aktive Benutzer