Hi Folks, bin schon wieder am verzweifeln am Projekt Header.
Folgende Sache ich hab im Header über jquery ne slideshow laufen. klappt auch wunderbar, positionierung passt. Jetzt hab ich vor darüber noch das Logo zu platzieren. Ist abgespeichert als .png und hat einen transperenten Hintergund.
Jetzt kireg ich das blöde ding aber nicht positioniert. entweder er verschiebt allen anderen Inhalt nach unten, oder legt sich hinter die slideshow. Mach ich das div ausserhalb des headers und versuche ihn zu positionieren ebenso.
Kommen wir zum Code:
und die css:
dieser Tag muss jetzt darein:
Folgende Sache ich hab im Header über jquery ne slideshow laufen. klappt auch wunderbar, positionierung passt. Jetzt hab ich vor darüber noch das Logo zu platzieren. Ist abgespeichert als .png und hat einen transperenten Hintergund.
Jetzt kireg ich das blöde ding aber nicht positioniert. entweder er verschiebt allen anderen Inhalt nach unten, oder legt sich hinter die slideshow. Mach ich das div ausserhalb des headers und versuche ihn zu positionieren ebenso.
Kommen wir zum Code:
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>
<!-- initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade',
speed: 4500,
timeout: 3000,
});
});
</script>
</head>
<body>
<script type="text/javascript" src="http://sc.lofer.at/stat/track.php?mode=js"></script>
<noscript><img src="http://sc.lofer.at/stat/track_noscript.php" border="0" alt="" width="1" height="1"/></noscript>
<!--- Beginn Header Container /--->
<div id="HeaderContainer">
<!--- Beginn Header /--->
<div id="Header">
<div class="slideshow">
<img src="http://www.psd-tutorials.de/forum/images/slide_1.png"/>
<img src="http://www.psd-tutorials.de/forum/images/slide_2.png"/>
<img src="http://www.psd-tutorials.de/forum/images/slide_3.png"/>
<img src="http://www.psd-tutorials.de/forum/images/slide_4.png"/>
</div>
<!-- End Slideschow /-->
</div>
<!---End Header /--->
</div><!--- End Header Container /--->
</body>
</html>und die css:
HTML:
@charset "utf-8";
/* CSS Document */
*{
margin: 0;
padding:0;
border: 0;
}
.body{
background: #faf9f9;
font:62,5%/1.8em "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#807f7f;}
.noBorder {
border:0!important;
}
.noMargin {
margin: 0!important;
}
.notetxt {
text-indent: -9999px;
font-size:1px;
overflow:hidden;
color:#CCC
top: 40px;
}
.clear {
float:none;
clear:both;
}
h1 a {
position: absolute;
height: 76px;
width: 355px;
top: 180px;
left: 40px;}
/*----- Header ---*/
div#HeaderContainer {
width: 100%;
margin: 0 0 0 0;
}
div#HeaderContainer div#Header {
width: 960px;
height: 255px;
background-image:url(../images/header_bg.jpg);
margin: auto ;
position:absoulute;
}
div#HeaderContainer div#Header .logo {
position:absolute;
background-image:url(../images/logo.png) no-repeat;
width: 355px;
height:76px;
margin-top: -40px;}
div#HeaderContainer div#Header .slideshow img{
border:none;
width: 946px;
height: 218px;
padding: 0 0 0 7px;
}dieser Tag muss jetzt darein:
Code:
<div class="logo">
<h1><a href="http://sc.lofer.at" title="sc.lofer.at" class="notetxt">www.sc.lofer.at</a></h1></div>
Zuletzt bearbeitet:
