zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden slidetabsmenu lässt sich einfach nicht positionieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.10.2008, 10:33
odo odo ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.05.2007
Beiträge: 12
odo befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 29.10.2008, 11:17
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.042
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Frage zu einem Gedanken (DIV positionieren) charlie CSS 1 06.09.2008 11:36
Relatives Positionieren von Elementen zu beliebigen anderen Elementen im Dokument dimension CSS 1 25.07.2008 13:49
Bild absolut positionieren (bottom) ZuMe CSS 2 03.07.2008 08:14
mit Link hinterlegte Grafik in Tabellenzelle absolut positionieren... jhartlep CSS 0 01.11.2007 13:46
2 Spaltenlayoutbeispiel/wie im Inhalt frei positionieren Fidi CSS 1 21.02.2004 16:15


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:15 Uhr.