XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   slidetabsmenu lässt sich einfach nicht positionieren (http://xhtmlforum.de/showthread.php?t=54308)

odo 29.10.2008 11:33

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 &Uuml;berlingen am Bodensee - Home::</title>
<meta name="Description"      content="Vita-PUB Shop wir kaufen und verkaufen f&uuml;r Sie &uuml;ber ebaY" />
<meta name="page-type"        content="Information" />
<meta name="author"          content="Marcus St&ouml;hr" />
<meta name="publisher"        content="GPZ &Uuml;berlingen gemein&uuml;tzige GmbH" />
<meta name="copyright"        content="GPZ &Uuml;berlingen gemein&uuml;tzige GmbH" />
<meta name="KEYWORDS" content="Kein l&auml;stiges Inserieren Kein zeitraubendes Erstellen von Auktionsangeboten Keine eMails oder Anrufe von Kaufinteressenten Keine Probleme mit der finanziellen Abwicklung Kein umst&auml;ndliches Verpacken und Versenden In der Regel h&ouml;here Erl&ouml;se als bei Inseratverk&auml;ufen Sie brauchen keinerlei Erfahrung mit eBay oder mit dem Computer Zuverl&auml;ssig und gewinnbringend Ladengesch&auml;ft in &Uuml;berlingen Abholservice eBay als Vertriebskanal f&uuml;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&uuml;r Sie</a> <a href="ersteigern.html">Wir ersteigern f&uuml;r Sie </a> <a href="http://stores.ebay.de/vita-shop-Bodensee" target="_blank" >Sie k&ouml;nnen bei uns kaufen </a> <a href="abhol.html">Abholservice</a> <a href="oeffnung.html">&Ouml;ffnungszeiten</a> <a href="vorraus.html">Vorraussetzungen</a> </div>
    <!-- 3rd drop down menu -->
    <div id="dropmenu3_c" class="dropmenudiv_c"> <a href="#">Unsere Geb&uuml;hren</a> <a href="#">ebaY Geb&uuml;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&ouml;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 &Uuml;berlingen gGmbH<br />
        Obere Bahnhofstra&szlig;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&uuml;rodienst-leistung des GpZ  &Uuml;berlingen, die eine gemeinn&uuml;tzige GmbH ist.<br />
          <br />
        Menschen mit seelischen Erkrankungen wird die M&ouml;glichkeit einer  beruflichen Rehabilitation angeboten um wieder auf den ersten Arbeitsmarkt t&auml;tig zu werden. </p>
      <p>&nbsp;</p>
      <p>Haben Sie als Privatperson oder Unternehmer in Ihrem Haushalt oder Gesch&auml;ft Gegenst&auml;nde, welche Sie schon immer &uuml;ber das Internet versteigern wollten?t<br />
          <br />
      </p>
      <h3> Wir  werden f&uuml;r Sie t&auml;tig!!</h3>
      <h3>Ihre Vorteile dabei im &Uuml;berblick:</h3>
      <p>&nbsp;</p>
        <ul>
          <li>Kein l&auml;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&ouml;here Erl&ouml;se als bei Inseratsverk&auml;ufen</li>
          <li>Sie brauchen keinerlei Erfahrung mit Auktionen oder mit dem Computer</li>
        </ul>
      <p>&nbsp;</p>
        <h3>Viel Spa&szlig; auf unserer Website! </h3>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</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

andir 29.10.2008 12:17

Hallo auch,

bei Dir ist das Menü nicht geschachtelt: Deine aufklappen sollenden Unterpunkte müssen Teil der Menüstruktur sein.

Wie das geht, steht in der Faq:

Aufklappende Menüs mit CSS


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:58 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023