Brauche Hilfe.

^w11

Ich brauche bei dieser Homepage Hilfe.
Die Buttons (Drop down menu's) wollen einfach nich Horizontal gerade in eriner linie stehen und verschieben alles.

http://tegu.te.ohost.de/Drop-down-menu-test/CDRS.html

Der HTML Code:

HTML

<html>
<head>
<title>CDRS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="dropdownmenu.css"/>
<script language="JavaScript" 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_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_nbGroup(event, grpName) { //v6.0
  var i,img,nbArr,args=MM_nbGroup.arguments;
  if (event == "init" && args.length > 2) {
    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
      nbArr[nbArr.length] = img;
      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
        if (!img.MM_up) img.MM_up = img.src;
        img.src = img.MM_dn = args[i+1];
        nbArr[nbArr.length] = img;
    } }
  } else if (event == "over") {
    document.MM_nbOver = nbArr = new Array();
    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
      nbArr[nbArr.length] = img;
    }
  } else if (event == "out" ) {
    for (i=0; i < document.MM_nbOver.length; i++) {
      img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
  } else if (event == "down") {
    nbArr = document[grpName];
    if (nbArr)
      for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
      nbArr[nbArr.length] = img;
  } }
}
//-->
</script>
</head>
<script type="text/javascript" src="css_dropdown.js"></script>


<style>




body
{
    font-family:verdana;
}


ul.dropdown a
{
    background-color:#f0f0f0;
    color:#444;
    padding:4px;
    text-decoration:none;
}


ul.dropdown a:hover
{
    background-color:#444;
    color:#fff;
}


ul.dropdown ul
{
    border:1px outset;


}


ul.dropdown ul a
{
    background-color:#ccc;
    color:#000;
    padding:4px;
    text-decoration:none;
}


ul.dropdown ul a:hover
{
    background-color:#f0f0f0;
    color:#000;
}


ul.dropdown ul li
{
    background-color:#ccc;
}
</style>


<!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left; width: 100%;}
</style>
<![endif]-->


<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {behavior: url(csshover.htc); font-size: 100%;}
#menu ul li a {height: 1%;}
}
</style>
<![endif]-->


<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="MM_preloadImages('Bilder/CDRS_07.jpg','Bilder/CDRS_07_b.jpg','Bilder/CDRS_08.jpg','Bilder/CDRS_08_b.jpg','Bilder/CDRS_09.jpg','Bilder/CDRS_09_b.jpg','Bilder/CDRS_10.jpg','Bilder/CDRS_10_b.jpg','Bilder/CDRS_11.jpg','Bilder/CDRS_11_b.jpg','Bilder/CDRS_12.jpg','Bilder/CDRS_12_b.jpg','Bilder/CDRS_13.jpg','Bilder/CDRS_13_b.jpg')">


		




				








<table id="Tabelle_01" width="820" height="504" border="0" cellpadding="0" cellspacing="0">

  <tr> 
    <td height="11" colspan="13"> [img]Bilder/CDRS_01.jpg[/img]</td>
  </tr>
  <tr> 
    <td width="10" rowspan="7" valign="top" background="Bilder/CDRS_02.jpg"> </td>
    <td height="204" colspan="9" background="../Bilder/CDRS_03.jpg"> </td>
    <td colspan="2" background="../Bilder/CDRS_04.jpg"> [img]Bilder/CDRS_04.jpg[/img]</td>
    <td width="10" rowspan="7" valign="top" background="Bilder/CDRS_05.jpg"> </td>
  </tr>
  <tr> 
    <td width="15" rowspan="3" align="left" valign="top">[img]Bilder/CDRS_06.jpg[/img] 
    </td>
	<td>


	


 <body onload="enableDropdownMenuForIE();">


 <ul class="dropdown" id="mainmenu">
        [*]
            [url='#'][img]Bilder/CDRS_07.jpg[/img][/url]

    <ul>
      [*][url='Schule/index.html']Nummer1[/url]
      [*][url='Schule/index.html']Nummer2[/url]
      [*][url='Schule/index.html']Nummer3[/url]
      [*][url='Schule/index.html']Nummer4[/url]
    [/list]



    </td>
    <td>


<ul class="dropdown" id="mainmenu">
		[*]
            [url='#'][img]Bilder/CDRS_09.jpg[/img][/url]

    <ul>
      [*][url='SMV/index.html']Nummer1[/url]
      [*][url='SMV/index.html']Nummer2[/url]
      [*][url='SMV/index.html']Nummer3[/url]
      [*][url='SMV/index.html']Nummer4[/url]
    [/list]



    </td>
    <td>


<ul class="dropdown" id="mainmenu">
		[*]
            [url='#'][img]Bilder/CDRS_10.jpg[/img][/url]

    <ul>
      [*][url='Projekte/index.html']Nummer1[/url]
      [*][url='Projekte/index.html']Nummer2[/url]
      [*][url='Projekte/index.html']Nummer3[/url]
      [*][url='Projekte/index.html']Nummer4[/url]
    [/list]



    </td>
    <td> 


<ul class="dropdown" id="mainmenu">
		[*]
            [url='#'][img]Bilder/CDRS_11.jpg[/img][/url]

    <ul>
      [*][url='Schulfeste/index.html']Nummer1[/url]
      [*][url='Schulfeste/index.html']Nummer2[/url]
      [*][url='Schulfeste/index.html']Nummer3[/url]
      [*][url='Schulfeste/index.html']Nummer4[/url]
    [/list]




    </td>
    <td> 


<ul class="dropdown" id="mainmenu">
		[*]
            [url='#'][img]Bilder/CDRS_12.jpg[/img][/url]

    <ul>
      [*][url='Sport/index.html']Nummer1[/url]
      [*][url='Sport/index.html']Nummer2[/url]
      [*][url='Sport/index.html']Nummer3[/url]
      [*][url='Sport/index.html']Nummer4[/url]
    [/list]



    </td>
    <td> 

<ul class="dropdown" id="mainmenu">
		[*]
            [url='#'][img]Bilder/CDRS_13.jpg[/img][/url]

    <ul>
      [*][url='Schule_und_Wirtschaft/index.html']Nummer1[/url]
      [*][url='Schule_und_Wirtschaft/index.html']Nummer2[/url]
      [*][url='Schule_und_Wirtschaft/index.html']Nummer3[/url]
      [*][url='Schule_und_Wirtschaft/index.html']Nummer4[/url]
    [/list]





    </td>
    <td width="17" rowspan="4" align="left" valign="top"> [img]Bilder/CDRS_14.jpg[/img]</td>
    <td width="8" rowspan="4" align="left" valign="top"> [img]Bilder/CDRS_15.jpg[/img]</td>
    <td width="190" align="left" valign="top">[img]Bilder/CDRS_16.jpg[/img] 
    </td>
  </tr>
  <tr> 
    <td height="9" colspan="7"> [img]Bilder/CDRS_17.jpg[/img]</td>
    <td> <div align="left">[img]Bilder/CDRS_18.jpg[/img]</div></td>
  </tr>
  <tr> 
    <td colspan="7" rowspan="2" align="left" valign="top"> <div id="box1"> 
        <table border="0" cellpadding="0" cellspacing="0">
          <tr> 
            <td></td>
            <td></td>
          </tr>
        </table>
      </div></td>
    <td rowspan="2" align="left" valign="top" background="Bilder/CDRS_20_b.jpg"></td>
  </tr>
  <tr> 
    <td height="194" valign="top" background="Bilder/CDRS_linke_verlaengerung.jpg"></td>
  </tr>
  <tr> 
    <td height="32" colspan="11"> [img]Bilder/CDRS_21.jpg[/img]</td>
  </tr>
  <tr> 
    <td height="12" colspan="11" valign="top"> [img]Bilder/CDRS_22.jpg[/img]</td>
  </tr>
</table>


</body>
</html>

Alles anzeigen

CSS-code:

Code

ul.dropdown
{
    list-style: none;
    margin:0;
    padding:0;
    width:100%;
    z-index:99;
}


ul.dropdown * ul
{
    list-style: none;
    margin:0;
    padding: 0;
	display:none;
	position:absolute;
	z-index:99;
	width:20em;
}


ul.dropdown li
{
    float:left;
}


ul.dropdown li * li
{
    border:1px solid #fff;
    float:none;


    position: relative;
}


ul.dropdown ul * ul
{
    left:98%;
    top:0;


}


ul.dropdown a
{
    display:block;


}


ul.dropdown ul * a
{
    height:100%;
}


ul.dropdown li:hover ul ul, ul.dropdown li:hover ul ul ul, ul.dropdown li:hover ul ul ul ul
{
    display:none;
}


ul.dropdown li:hover ul, ul.dropdown ul li:hover ul, ul.dropdown ul ul li:hover ul
{
    display:block;
}

Alles anzeigen

Und JAVA:

Zitat

function enableDropdownMenuForIE()
{
if (document.all)
{
uls = document.getElementsByTagName('UL');

for(i = 0; i < uls.length; i++)
{
if (uls[i].className == 'dropdown')
{
var lis = uls[i].getElementsByTagName('li');

for (j = 0; j < lis.length; j++)
{
if(lis[j].lastChild.tagName == 'UL')
{
lis[j].onmouseover = function() { this.lastChild.style.display = 'block'; }
lis[j].onmouseout = function() { this.lastChild.style.display = 'none'; }
}
}
}
}
}
}

Alles anzeigen

Hilft mir bitte

jojo87

Ich kann nicht sehen was du meinst. Mal etwas genauer, bitte.

Shinarya

Meine Tipps dazu:

o Layout mit Divs erstellen (einfacher zu handhaben, s. Punkt 2)
o die Divs dann entsprechend absolut positionieren
o eine ID dokumentenweit nicht mehr als 1 mal benutzen!

Edit:
Aber echt kewles Design!
Wenn du es komplett selbstgemacht hast, dann Respekt!

^w11

@ jojo87.

Diese Drop Down Menu's (Schule/SMV/Projekte/etc.) verschieben die ganze Homepage.

Jetzt sieht das so aus: http://tegu.te.ohost.de/1.jpg

Und ich will, dass es so aussieht: http://tegu.te.ohost.de/2.jpg

@Shinaraya: Geht das nicht leichter? Meiner Meinung nach liegt es am Rahmen, der Erscheint wenn man auf einen Button kommt. Kann man den irgendwie entfernen?

^w11

Edit:
Aber echt kewles Design!
Wenn du es komplett selbstgemacht hast, dann Respekt!

Ja hab ich selber gemacht (Adobe photoshop CS3)

danke

^w11

Wegen den Bildern -.-

http://tegu.te.ohost.de/Drop-down-menu-test/1.jpg
http://tegu.te.ohost.de/Drop-down-menu-test/2.jpg

Shinarya

Ja, also nochmal so betrachtet scheint mir das ein klarer Fall von margin: 3px o.ä zu sein.
Wenn du also bei allen Bildern (oder so, ich komm mit dem Seitenlayout nicht ganz klar ) style="margin: 0px" einstellst, könnte sich das Problem schon aufgelöst haben.

^w11

ich probiere es gleich mal aus

^w11

nope. Hab nichts gefunden. Alle magin's stehen auf 0

Shinarya

Ich meine die margins der Bilder, die man von vornherein sieht und nicht die dropdownmenüs, ne?

^w11

kannst du vll gucken. Ich kapier das nich was du meinst.

Shinarya

Ich hab gerade gesehen, dass ich mich im Quelltext verguckt hab.

Muss ebend noch schauen, wie das Layout eigentlich funktioniert.

Lösung kommt (hoffentlich) gleich

Doch jetzt hab ichs, ich Heini ^^:

Zitat

[*]

<ul>
[*]Nummer1
[*]Nummer2
[*]Nummer3
[*]Nummer4
[/list]

Alles anzeigen

Im <img>-Tag, das als Link fungiert ganz oben musst du mal margin="0" eintragen und schauen ob es klappt.

^w11

no, geht nicht. Ich denke es liegt am Drop Down menu. Kennst du vielleicht ein anderes Drop Down Menu? Dieses DDMenu besteht aus CSS, Java und HTML.

Shinarya

Jap.
Die von Stu Nicholls sind meines Wissens und meinen Erfahrungen nach die besten:
http://www.cssplay.co.uk/menus/
Die auf der rechten Seite sind Dropdown-Menüs (wie der Domainname auch schon andeutet 100% CSS).

Meine Empfehlung:
http://www.cssplay.co.uk/menus/final_drop.html

Die Einfache Variante zum freien selbstgestalten:
http://www.cssplay.co.uk/menus/basic_dd.html
(mit etwas Gefummel und den entsprechenden Vorkenntnissen, kannst du auch das zweite noch farblich etwas abwechlungsreicher gestalten)

Edit:
Wenn du nach Menüs suchst, die von vornherrein schon auf Grafiken basieren, kannst du ja noch ein wenig auf der Seite rumsuchen

^w11

danke ich such mal was

Tags