Beitrag zur Merkliste hinzufügen
Hier kann eine Notiz zum Merk-Eintrag hinzugefügt werden (optional)
| [ Anmelden zum schreiben ] |
| Webdesign | |||
|---|---|---|---|
| Hassmann Mitglied 
Posts: 1486  |
Hey leutz, kurze frage, habe hier ein dropdownmenu eingebunden,
wie mach ich das, das es nicht das design verschiebt sondern über den rest des designs drüber geht ? <html>
<head>
<title>shr</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="nivo-slider/themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider/themes/pascal/pascal.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider/themes/orman/orman.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider/demo/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
//Hide SubLevel Menus
$('#header ul li ul').hide();
//OnHover Show SubLevel Menus
$('#header ul li').hover(
//OnHover
function(){
//Hide Other Menus
$('#header ul li').not($('ul', this)).stop();
//Add the Arrow
$('ul li:first-child', this).before(
'<li class="arrow">arrow</li>'
);
//Remove the Border
$('ul li.arrow', this).css('border-bottom', '0');
// Show Hoved Menu
$('ul', this).slideDown();
},
//OnOut
function(){
// Hide Other Menus
$('ul', this).slideUp();
//Remove the Arrow
$('ul li.arrow', this).remove();
}
);
});
</script>
<style type="text/css">
<!--
body {
background-image: url(Bilder/bg.jpg);
background-color: #005fa0;
}
body,td,th {
color: #000;
}
/* Header */
#header {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(117,18,41)), color-stop(1, rgb(79,7,24)));
height: 86px;
}
/* Top Level Menu */
#header ul {
margin: 0 auto;
width: 400px;
}
#header ul li {
display: block;
float: left;
margin: 40px 0 0;
width: 100px;
}
#header ul li a {
color: #FFF;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
/* Sub Level Nav */
#header ul li ul {
background: #F4F4F4;
border: 0px solid #000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
margin: 10px 0 0 -46px;
padding: 0 10px 0;
position: relative;
width: 126px;
}
#header ul li ul li {
border-bottom: 1px solid #CCC;
display: block;
float: none;
height: 14px;
padding: 8px 0;
text-align: center;
width: 126px;
margin: 0;
}
#header ul li ul li a {
color: #620d20;
text-shadow: none;
}
#header ul li ul li a:hover {
color: #000;
}
#header ul li ul li:last-child:not(li.arrow) {
border: 0;
}
/* Arrow */
.arrow {
background: url(arrow.png) no-repeat;
border: 0;
display: none;
position: absolute;
top: -10px;
left: 63px;
height: 11px;
width: 20px;
text-indent: -9999px;
}
-->
</style></head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (shr.psd) -->
<table id="Tabelle_01" width="1152" height="865" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="10">
<img src="Bilder/index_01.jpg" width="597" height="112" alt=""></td>
<td colspan="2">
<img src="Bilder/index_02.jpg" width="555" height="112" alt=""></td>
</tr>
<tr>
<td>
<img src="Bilder/index_03.jpg" width="48" height="27" alt=""></td>
<td colspan="2"><div id="header">
<ul>
<li><a href="#"><img src="Bilder/index_04.jpg" width="69" height="27" alt=""></a>
<ul>
<li><a href="#">list item</a></li>
<li><a href="#">list item</a></li>
<li><a href="#">list item</a></li>
<li><a href="#">list item</a></li>
</ul>
</li>
</ul>
</div>
</td>
<td>
<img src="Bilder/index_05.jpg" width="38" height="27" alt=""></td>
<td>
<img src="Bilder/index_06.jpg" width="77" height="27" alt=""></td>
<td>
<img src="Bilder/index_07.jpg" width="31" height="27" alt=""></td>
<td>
<img src="Bilder/index_08.jpg" width="58" height="27" alt=""></td>
<td>
<img src="Bilder/index_09.jpg" width="49" height="27" alt=""></td>
<td>
<img src="Bilder/index_10.jpg" width="79" height="27" alt=""></td>
<td colspan="3">
<img src="Bilder/index_11.jpg" width="703" height="27" alt=""></td>
</tr>
<tr>
<td colspan="12" background="Bilder/index_12.jpg" style="padding-top:35px;" align="center" width="1152" height="285">
<div id="wrapper" align="center" style="vertical-align:top">
<div class="slider-wrapper theme-default" style="vertical-align:top">
<div id="slider" class="nivoSlider">
<img src="nivo-slider/demo/images/toystory.jpg" alt="" />
<img src="nivo-slider/demo/images/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="nivo-slider/demo/images/nemo.jpg" alt="" title="#htmlcaption" />
</div>
<div class="ribbon"></div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
</div>
</div>
<script type="text/javascript" src="nivo-slider/demo/scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="nivo-slider/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</td>
</tr>
<tr>
<td colspan="12">
<img src="Bilder/index_13.jpg" width="1152" height="51" alt=""></td>
</tr>
<tr>
<td colspan="2" style="background:url(Bilder/i2.jpg);" height="100%" width="60">
<img src="Bilder/index_14.jpg" height="389" alt=""></td>
<td colspan="9" style="background:url(Bilder/index_15.jpg);" height="100%" width="1026">
<img src="Bilder/index_15.jpg" height="389" alt=""></td>
<td height="100%">
<img src="Bilder/index_16.jpg" width="66" alt=""></td>
</tr>
<tr>
<td>
<img src="Bilder/Abstandhalter.gif" width="48" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="12" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="57" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="38" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="77" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="31" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="58" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="49" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="79" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="148" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="489" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="66" height="1" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>Voice-Sponsor | Seit August 2011 wieder Online! Neues Angebot enthält auch > Domains, Gameserver, Teamspeak, Ventrilo und vieles mehr, Kostenfrei! |
||
| Lord|Schirmer Administrator 
Posts: 4606  |
Teste mal evtl. position:absolute;
"In mir schlummert ein Genie, leider wacht es nicht auf!" my portfolio | my community | important link |
||
| Hassmann Mitglied
Posts: 1486 |
Also habs mal hochgeladen, das ihr auch ein Überblick davon habt, mit position absolute funkts garnid mehr, bzw. ich sehe nichts mehr :;'D
Voice-Sponsor | Seit August 2011 wieder Online! Neues Angebot enthält auch > Domains, Gameserver, Teamspeak, Ventrilo und vieles mehr, Kostenfrei! |
||
| T3BAss Mitglied
Posts: 133 |
Als erstes das doppelte jQuery mal entfernen
Und dann evtl einfachn alles mit CSS machen? dropdown in js ist veraltet. css ist angesagt position: absolute und schon sollte es gehen |
||
| [ Anmelden zum schreiben ] |