slidetabsmenu lässt sich einfach nicht positionieren
Hallo Forum, wieder mal ne Frage von einem Newbie,
ich bekomme einfach das dropdown menue nicht positioniert.
Der umfassende Rahmen div #alles ist relativ, damit die Seite immer
in der Mitte ist, wie kann ich das "slidetabsmenu " anpassen, damit es
sich im div #header am unteren Rand anschmiegt und 200 pixel von links liegt.
Auch wenn sich das menu auklappt, erscheinen die untermenues irgendwo auf der Seite. Ich versuche schon eine Woche das Problem zu lösen.
Hier der link zu der Seite:
:: vita-PUB ebaY-Shop Überlingen am Bodensee - Home::
und 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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>:: vita-PUB ebaY-Shop Überlingen am Bodensee - Home::</title>
<meta name="Description" content="Vita-PUB Shop wir kaufen und verkaufen für Sie über ebaY" />
<meta name="page-type" content="Information" />
<meta name="author" content="Marcus Stöhr" />
<meta name="publisher" content="GPZ Überlingen gemeinützige GmbH" />
<meta name="copyright" content="GPZ Überlingen gemeinützige GmbH" />
<meta name="KEYWORDS" content="Kein lästiges Inserieren Kein zeitraubendes Erstellen von Auktionsangeboten Keine eMails oder Anrufe von Kaufinteressenten Keine Probleme mit der finanziellen Abwicklung Kein umständliches Verpacken und Versenden In der Regel höhere Erlöse als bei Inseratverkäufen Sie brauchen keinerlei Erfahrung mit eBay oder mit dem Computer Zuverlässig und gewinnbringend Ladengeschäft in Überlingen Abholservice eBay als Vertriebskanal für Ihr Unternehmen nutzen">
<meta name="Content-Language" content="de" />
<script type="text/javascript" src="dropdowntabfiles/dropdowntabs.js"></script>
<meta http-equiv="Content-Style-Type" content="text/css" />
<!-- CSS for Drop Down Tabs Menu #3 -->
<link rel="stylesheet" type="text/css" href="dropdowntabfiles/slidingdoors.css" />
<link rel="stylesheet" type="text/css" href="css/vita_pub.css" media="screen, projection" />
<script type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body>
<div id="alles">
<div id="header">
<div id="nebennavi"><a href="gewinnrechner_01.html">Gewinnrechner</a> | <a href="impress.html">Impressum</a> | <a href="spende.html">Spende</a> | <a href="agb.html">AGB's </a> | <a href="#">Drucken</a> </div>
<div id="slidemenu" class="slidetabsmenu">
<ul>
<li><a href="index_02.html" rel="dropmenu1_c"><span>Home</span></a></li>
<li><a href="service_01.html" rel="dropmenu2_c"><span>Service</span></a></li>
<li><a href="gewinnrechner_01.html" rel="dropmenu3_c"><span>Gebühren</span></a></li>
<li><a href="gewinnrechner_01.html"><span>Auktionen</span></a></li>
<li><a href="gewinnrechner_01.html" rel="dropmenu4_c"><span>Kontakt</span></a></li>
</ul>
</div>
<br style="clear: left;" />
<br class="IEonlybr" />
<!--1st drop down menu -->
<div id="dropmenu1_c" class="dropmenudiv_c" style="width:100px;"> <a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Über uns</a> </div>
<!--2nd drop down menu -->
<div id="dropmenu2_c" class="dropmenudiv_c" style="width: 150px;"> <a href="verkaufen.html">Wir verkaufen für Sie</a> <a href="ersteigern.html">Wir ersteigern für Sie </a> <a href="http://stores.ebay.de/vita-shop-Bodensee" target="_blank" >Sie können bei uns kaufen </a> <a href="abhol.html">Abholservice</a> <a href="oeffnung.html">Öffnungszeiten</a> <a href="vorraus.html">Vorraussetzungen</a> </div>
<!-- 3rd drop down menu -->
<div id="dropmenu3_c" class="dropmenudiv_c"> <a href="#">Unsere Gebühren</a> <a href="#">ebaY Gebühren</a> </div>
<!-- 4th drop down menu -->
<div id="dropmenu4_c" class="dropmenudiv_c"> <a href="wegb.html">Wegbeschreibung</a> <a href="bank.html">Bankverbindung</a> </div>
<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("slidemenu",0)
</script>
<!-- header --> </div>
<div id="main">
<div id="banner"><img src="jpeg/angebotsbanner.jpg" alt="Unsere Angebote" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="385,12,634,50" href="verkaufen.html" alt="Wir verkaufen z.B. Ihre Dachbodenfunde" />
<area shape="rect" coords="390,63,634,100" href="ersteigern.html" alt="Wir können auch Artikel ersteigern" />
<area shape="rect" coords="347,111,666,138" href="http://stores.ebay.de/vita-shop-Bodensee" target="_blank" alt="Zu unserem ebaY-Shop" />
</map>
<!-- banner -->
</div>
<div id="logo"> <img src="gif/vita_pub_logo_02.gif" />
<!-- logo wird nur im printsheet anzeigt -->
</div>
<div id="linkespalte">
<h1>vita-PUB </h1>
<p>eBay Agentur<br />
GpZ Überlingen gGmbH<br />
Obere Bahnhofstraße 18<br />
Fon 07551-30118-29<br />
Fax 07551-30118-89<br /></p>
<a href="kontakt.html">ebay@vita-PUB.de</a>
<!-- linkepalte -->
</div>
<div id="inhalt_text">
<h1>Home</h1>
<p>vita-PUB ist die Internet-Verkaufsagentur in der Abteilung Bürodienst-leistung des GpZ Überlingen, die eine gemeinnützige GmbH ist.<br />
<br />
Menschen mit seelischen Erkrankungen wird die Möglichkeit einer beruflichen Rehabilitation angeboten um wieder auf den ersten Arbeitsmarkt tätig zu werden. </p>
<p> </p>
<p>Haben Sie als Privatperson oder Unternehmer in Ihrem Haushalt oder Geschäft Gegenstände, welche Sie schon immer über das Internet versteigern wollten?t<br />
<br />
</p>
<h3> Wir werden für Sie tätig!!</h3>
<h3>Ihre Vorteile dabei im Überblick:</h3>
<p> </p>
<ul>
<li>Kein lästiges Inserieren</li>
<li>Kein zeitraubendes Erstellen von Auktionsangeboten</li>
<li>Keine e-Mails oder Anrufe von Kaufinteressenten</li>
<li>Keine Probleme bei der finanziellen Abwicklung</li>
<li>Kein Verpacken und Versenden der Ware</li>
<li>In der Regel höhere Erlöse als bei Inseratsverkäufen</li>
<li>Sie brauchen keinerlei Erfahrung mit Auktionen oder mit dem Computer</li>
</ul>
<p> </p>
<h3>Viel Spaß auf unserer Website! </h3>
<p> </p>
<p> </p>
<p> </p>
</div><div class="clear"> </div>
<!-- main -->
</div>
<p class="footer">Copyright © 2008 GpZ Überlingen. Alle Rechte vorbehalten</p>
<div id="rechtespalte">
<script language="JavaScript" src="http://ilapi.ebay.com/ws/eBayISAPI.dll?EKServer&ai=va%7Ci%25x%7Dj&bdrcolor=AFD469&encode=UTF-8&maxprice=&minprice=&num=50&prvd=2&query=&sekaccentcolor=AFD469&sekcatid=&sekfootercolor=FFFFFF&sekfooterdisplay=1&sekformat=0&sekfsfooter=1+2+0&sekfsitem=1+2+0&sekfstitle=1+4+1&sekitemlayout=1&sektitledisplay=1&si=vita-pub&sort=MetaEndSort&sortby=endtime&sortdir=asc&tbgcolor=AFD469&title=Unsere+Angebote&tlecolor=AFD469&tlfcolor=FFFFFF"></script>
<!-- rechtespalte -->
</div>
<!-- alles -->
</div>
</body>
</html>
die css datei:
Code:
* {
margin: 0;
padding: 0;
}
body {
color: #000000;
text-align: center;
background-image: url(../gif/bg.gif);
background-repeat: repeat-x;
background-position: 50% 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 80%;
padding: 0px;
}
#logo
{
background-attachment: fixed;
background-image: url(../gif/vita_pub_logo_02.gif);
background-repeat: no-repeat;
background-color: #00FF00;
display: none;
float: left;
}
p {
font-size: 80%;
}
a, a:link, a:visited {
color: #4090A2;
text-decoration: none;
font-size: 1em;
}
a:hover, a:active, a:focus {
color: #000000;
}
h1 {
color: #AFD469;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.8em;
padding-top: 10px;
padding-bottom: 20px;
}
#ohnespalte h1 {
margin-right: 200px;
}
h2 {
font: 1.4em Georgia, 'Times New Roman', serif;
padding: 5px 0;
color: #979596;
background: transparent;
margin: 0.5em 0;
}
h3, h4 {
font-size: 1.1em;
color: #000000;
padding-bottom: 0.5em;
font-weight: bold;
}
table h3, table h4 {
color: #000000;
background: #c5c0aa;
border: 0 none;
padding: 2px;
margin: 0 0 7px 0;
}
h4 {
font-style: italic;
}
h5, h6 {
font-size: 1.2em;
margin: 0.5em 0;
}
h6 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1.3em;
font-weight: bold;
}
li a, p a, td a, td p, td h2, td h3, td h4, td h5, li li {
font-size: 100%;
}
#alles {
width: 1000px;
text-align: left;
background: #AFD469;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: auto;
position: relative;
}
#alles p.footer {
background: #AFD469
height: 1.5em;
padding-top: 2px;
padding-bottom: 2;
padding-left: 205px;
font-size: 0.9em;
background-color: #4090A2;
color: #FFFFFF;
}
#alles .footer a {
text-decoration: none;
}
#alles .footer a:link,
#alles .footer a:visited {
color: #2c2c2c;
background: transparent;
}
#alles .footer a:hover,
#alles .footer a:active,
#alles .footer a:focus {
color: #2c2c2c;
background: #666666;
}
#nebennavi {
height : 20px;
font-family : Arial, Helvetica, sans-serif;
text-align : right;
color: #FFFFFF;
z-index: 5;
padding-top: 5px;
top: 5px;
float: right;
clear: both;
}
#nebennavi a {
text-decoration : none;
height : 15px;
color : #ffffff;
vertical-align : middle;
font-size : 1.0em;
font-weight : normal;
display: inline;
padding-right: 10px;
}
#nebennavi a:hover {
color : #FFFFFF;
font-weight : normal;
background-color: transparent;
border-bottom-color: #FFFFFF;
border-bottom-width: 3px;
border-bottom-style: solid;
text-align: center;
}
#nebennavi a:active {
font-weight : normal;
color : #FFFFFF;
display: inline;
text-align: center;
}
#navoben {
list-style-type: none;
z-index: 5;
font-size: 1.5em;
font-weight: bold;
text-align: center;
padding-left: 200px;
height: 46px;
padding-bottom: 5px;
clear: both;
padding-top: 69px;
background-color: transparent;
}
#navoben li {
display: inline;
}
#navoben a {
width: 100px;
height: 34px;
display: inline;
background-color: transparent;
background-image: url(../gif/button_hg_02.gif);
float: left;
color: #FFFFFF;
text-decoration: none;
border-bottom-width: 0px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
padding-top: 10px;
background-repeat: no-repeat;
margin: 0px;
font-size: 0.8em;
font-weight: bold;
}
#navoben a:hover {
color: #000099;
}
#navoben a.akt {
color: #FFFFFF;
font-weight: bold;
background-color: transparent;
background-image: url(../gif/button_aktiv_04.gif);
background-position: 0 0px;
height: 34px;
width: 100px;
padding-top: 10px;
background-repeat: no-repeat;
}
#header {
width: 1000px;
height: 130px;
background-color: transparent;
background-image: url(../gif/homepagebanner_02.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
padding: 0px;
margin: 0px;
z-index: 1;
position: absolute;
}
#main {
width: 1000px;
padding-top: 130px;
margin: 0;
background-color: #AFD469;
height: auto;
}
#linkespalte {
width: 200px;
color: #000000;
float: left;
padding-left: 5px;
}
#linkespalte p{
color: #FFFFFF;
margin: 2px;
font-size: 1.2em;
line-height: 1.4em;
}
#linkespalte h1{
color: #FFFFFF;
font-family: Forte;
font-size: 2.5em;
font-weight: bold;
text-decoration: underline;
padding-left: 5px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
}
#rechtespalte {
width: 297px;
overflow-x: hidden;
overflow-y: auto;
visibility: visible;
z-index: 15;
height: 650px;
background-color: #AFD469;
float: right;
top: 130px;
right: 0px;
position: absolute;
padding-top: 20px;
}
#rechtespalte_table {
margin-top: 0px;
margin-right: 0;
margin-bottom: 0px;
margin-left: 0;
padding-left: 20px;
}
#rechtespalte th, td {
text-align: left;
vertical-align: top;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 4px;
}
#rechtespalte th img, td img {
vertical-align: baseline;
text-align: center;
}
#rechtespalte table.nopadding td {
padding: 0;
margin: 0px;
}
#rechtespalte a{
color: #FFFFFF;
font-size: 1em;
}#rechtespalte a:hover{
color: #FFFFFF;
font-size: 1em;
}
#rechtespalte img{
border: 0px solid #FFFFFF;
}
#banner {
height: 150px;
background-position: 0px 0px;
width: 700px;
}
#inhalt_text {
color: #000000;
text-align: left;
background-color: #FFFFFF;
margin-right: 300px;
padding: 10px;
margin-left: 205px;
}
#inhalt_text p{
color: #000000;
text-align: left;
font-size: 1.2em;
}
#inhalt_text h1{
color: #AFD469;
text-align: left;
font-size: 1.8em;
}
#inhalt_text img{
float: left;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 5px;
}
#inhalt_text ul{
list-style-type: square;
list-style-position: inside;
display: inline;
font-size: 1.2em;
}
#inhalt_text li{
display: list-item;
list-style-position: outside;
list-style-type: disc;
margin-left: 10px;
}
.google a{
float: left;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.google_img{
float: right;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
position: absolute;
left: 542px;
top: 325px;
}
.clear{
clear: both;
visibility: hidden;
}
die slindingdoors css datei:
Code:
.slidetabsmenu{
float:left;
width:100%;
font-size: 1.0em;
line-height:normal;
border-bottom: 1px solid gray;
color: #FFFFFF;
}
* html .slidetabsmenu{ /*IE only. Add 1em spacing between menu and rest of content*/
margin-bottom: 1em;
}
.slidetabsmenu ul{
list-style-type: none;
margin:0;
padding:0;
}
.slidetabsmenu li{
display:inline;
margin:0;
padding:0;
}
.slidetabsmenu a{
float:left;
background:url(media/slide-left.gif) no-repeat left top;
margin:0;
margin-right: 5px;
padding:0 0 0 9px;
text-decoration:none;
}
.slidetabsmenu a span {
float:left;
display:block;
background:url(media/slide-right.gif) no-repeat right top;
padding:2px 13px 2px 4px;
font-weight:bold;
color:#3B3B3B;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
.slidetabsmenu a span {float:none;}
/* End IE5-Mac hack */
.slidetabsmenu a:hover span, .slidetabsmenu li.selected a span{
color: black;
}
.slidetabsmenu a:hover, .slidetabsmenu li.selected a{
background-position:0% -125px;
}
.slidetabsmenu a:hover span, .slidetabsmenu li.selected a span{
background-position:100% -125px;
}
html>/**/body .IEonlybr{ /*None IE browsers hack*/
display: none; /*Hide BR tag in non IE browsers, since it's not needed*/
}
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv_c{
position:absolute;
top: 0;
border: 1px solid #918d8d; /*THEME CHANGE HERE*/
border-width: 0 1px;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}
.dropmenudiv_c a{
width: auto;
display: block;
text-indent: 5px;
border: 0 solid #918d8d; /*THEME CHANGE HERE*/
border-bottom-width: 1px;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}
* html .dropmenudiv_c a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv_c a:hover{ /*THEME CHANGE HERE*/
background-color: #eaeaea;
}
Vielen Dank für Eure Hilfe, odo
|