hai zusammen
habn problem: ich habe diese seite (Anhang) und möchte gerne einen Text unter das Menu hinschreiben. Aber irgendwie geht das nicht...
das bild im Anhang zeigt die Homeseite mit dem Textplatzhalter also da wo der text dann hin sollte...
hier der Code:
Vielen Dank
lg cedi44
habn problem: ich habe diese seite (Anhang) und möchte gerne einen Text unter das Menu hinschreiben. Aber irgendwie geht das nicht...
das bild im Anhang zeigt die Homeseite mit dem Textplatzhalter also da wo der text dann hin sollte...
hier der Code:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Home</title>
<link rel="shortcut icon" href="http://www.html.de/images/icon.jpg" type="image/png">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Slide Down Box Menu with jQuery and CSS3" />
<meta name="keywords" content="jquery, css3, sliding, box, menu, cube, navigation, portfolio, thumbnails"/>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<style>
body{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
span.reference{
position:fixed;
left:10px;
bottom:10px;
font-size:12px;
}
span.reference a{
color:#aaa;
text-transform:uppercase;
text-decoration:none;
text-shadow:1px 1px 1px #000;
margin-right:30px;
}
span.reference a:hover{
color:#ddd;
}
ul.sdt_menu{
margin-top:150px;
}
h1.title{
text-indent:-9000px;
background:transparent url(title.png) no-repeat top left;
width:633px;
height:69px;
}
html {
background: url(images/clouds_type.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>
<div class="content">
<ul id="sdt_menu" class="sdt_menu">
<li>
<a href="Home.html">
<img src="http://www.html.de/images/bgklein_home.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Home</span>
<span class="sdt_descr">Beginning</span>
</span>
</a>
</li>
<li>
<a href="about me.html">
<img src="http://www.html.de/images/übermich.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">About Me</span>
<span class="sdt_descr">All what you've to know about me</span>
</span>
</a>
</li>
<li>
<a href="job.html">
<img src="http://www.html.de/images/sbwlogo.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Job</span>
<span class="sdt_descr">Ausbildung</span>
</span>
</a>
<div class="sdt_box">
<a href="SBWNMAG.html">SBW Neue Medien AG</a>
<a href="Beruf.html">Beruf</a>
<a href="Works.html">Works</a>
</div>
</li>
<li>
<a href="gallery.html">
<img src="http://www.html.de/images/lifestorypics.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Gallery</span>
<span class="sdt_descr">Pics from me and my life</span>
</span>
</a>
</li>
<li>
<a href="skills.html">
<img src="http://www.html.de/images/skills-pic.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Skills</span>
<span class="sdt_descr">My Abilities</span>
</span>
</a>
</li>
<li>
<a href="contact.html">
<img src="http://www.html.de/images/contactIconTop.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Contact</span>
<span class="sdt_descr">Kontaktangaben</span>
</span>
</a>
</li>
</ul>
</div>
<div>
<span class="reference">
</span>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
/**
* for each menu element, on mouseenter,
* we enlarge the image, and show both sdt_active span and
* sdt_wrap span. If the element has a sub menu (sdt_box),
* then we slide it - if the element is the last one in the menu
* we slide it to the left, otherwise to the right
*/
$('#sdt_menu > li').bind('mouseenter',function(){
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width':'170px',
'height':'170px',
'left':'0px'
},400,'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'140px'},500,'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({'height':'170px'},300,function(){
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length){
var left = '170px';
if($elem.parent().children().length == $elem.index()+1)
left = '-170px';
$sub_menu.show().animate({'left':left},200);
}
});
}).bind('mouseleave',function(){
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length)
$sub_menu.hide().css('left','0px');
$elem.find('.sdt_active')
.stop(true)
.animate({'height':'0px'},300)
.andSelf().find('img')
.stop(true)
.animate({
'width':'0px',
'height':'0px',
'left':'85px'},400)
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'25px'},500);
});
});
</script>
<footer>
<p align="center" class="white"><span class="white">© 2012 - Konzeption und Realisierung <a href="mailto:Cedric.Moore@sbw-media-ch">Cedric Moore</a></span><a href="mailto:Cedric.Moore@sbw-media-ch"></a> </p>
</footer>
</body>
</html>Vielen Dank
lg cedi44
