Problem mit Drop Down Menu

Huhu,

ich habe hier einen Code, den ich im Forum eingesetzt habe, mein Problem ist nun aber, dass dadurch irgendwie das Forum deformiert wird. Aber einen Fehler finde ich nicht >:



Wie auf dem Bild markiert ist im roten Rechteck eigentlich der Inhalt des Forums, der gesamte Body mit Chatbox.

Der Code folgt:

Code:

<table cellpadding="4" cellspacing="1" border="0" width="600" bgcolor="#87888e">
<tbody>
<tr bgcolor="#b7b7b6">
<td width="200">
<font face="Verdana,Helvetica" size="1">
<div id="d1" align="center">
<ul>
<li>
<h4>VOTE FOR US</h4>
<ul>
<li>
BUTTONS
</li>
</ul>
</li>
</ul>
</div>
<div id="d1" align="center">
<ul>
<li>
<h4>RPG INFORMATIONEN</h4>
<ul>
<li>
<h4>Die Zeit</h4>
</li>
<li>
Montag der 20.08. Es ist 08:45 Uhr.
</li>
<li>
<h4>Das Wetter</h4>
</li>
<li>
<table><tr>
<td>MORGENS
<img src="http://i1181.photobucket.com/albums/x435/MariahMilkshake/Forum/sonneregen.png~original" align="center"></img> <BR>
<center><img src="http://i1181.photobucket.com/albums/x435/MariahMilkshake/Forum/rain_zps3885cd12.png~original"></img> 40% <BR><img src="http://i1181.photobucket.com/albums/x435/MariahMilkshake/Forum/hot_zpsb8d8a884.png~original"></img> 12°C</center>
</td>
<td>MITTAGS
<img src="http://i1181.photobucket.com/albums/x435/MariahMilkshake/Forum/starkregen.png~original" align="center"></img> <BR>
<center><img src="http://i1181.photobucket.com/albums/x435/MariahMilkshake/Forum/rain_zps3885cd12.png~original"></img> 67% <BR><img src="http://i1181.photobucket.com/albums/x435/MariahMilkshake/Forum/hot_zpsb8d8a884.png~original"></img> 11°C</center>
</td>
<td>ABENDS
<img src="http://i1181.photobucket.com/albums/x435/MariahMilkshake/Forum/starkesgewitter.png~original" align="center"></img> <BR>
<center><img src="http://i1181.photobucket.com/albums/x435/MariahMilkshake/Forum/rain_zps3885cd12.png~original"></img> 93%<BR> <img src="http://i1181.photobucket.com/albums/x435/MariahMilkshake/Forum/hot_zpsb8d8a884.png~original"></img> 12°C</center>
</td>
</tr></table>
</li>
</ul>
</li>
</ul>
</div>
<div id="d1" align="center">
<ul>
<li>
<h4>GESUCHE</h4>
<ul>
<li>
<h4>Es sind 2 Gesuche vorhanden</h4>
</li>
<li>
<a href="http://www.bloody-rose.org/t1612-postpartner">Postpartner</a>
</li>
<li>
<a href="thread.php?threadid=37&sid=">Charakter</a>
</li>
</ul>
<ul>
<li>
<h4>ANMELDUNG</h4>
</li>
<li>
<a href="http://www.bloody-rose.org/register">Registrieren/ Anmelden</a>
</li>
<li>
<a href="http://www.bloody-rose.org/f25-regeln">Regeln</a>
</li>
<li>
<a href="http://www.bloody-rose.org/t242-die-geschichte">Storyline</a>
</li>
<li>
<a href="http://www.bloody-rose.org/f6-bitte-gib-hier-dein-anmeldeformular-ab">Steckbrief/Anmeldebogen</a>
</li>
</ul>
</li>
</ul>
</div>
<div id="d1" align="center">
<ul>
<li>
<h4>ABWESENHEITEN</h4>
</li>
<li>
<a href="thread.php?threadid=20&sid=">Abwesenheitsregister</a>
</li>
</ul>
</li>
</ul>
</td>
<td width="400">
<div style="margin-left: 10px; margin-right: 10px; text-align: justify;">
<font face="Verdana,Helvetica" size="1">
<embed pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.youtube.com/v/92EaFTLultw" width="400" height="300" type="application/x-shockwave-flash" wmode="transparent" quality="high" scale="exactfit"></embed>
<br/>
<br/>
</font>
</div>
</td>
</tr>
<tr bgcolor="#b7b7b6" align="center">
<td colspan="2">
<font face="Verdana,Helvetica" size="1">
Wir zählen insgesamt
<b>00 First Year Students</b>,
<b> 00 Second Year Students </b>und
<b> 00 Third Year Students</b>, davon sind
<b>00</b> weiblich und
<b>00</b> männlich. Außerdem haben wir
<b>00</b> eingetragene
<b>Lehrer</b>
</font>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

Hoffentlich kann mir da jemand helfen. Liebe Grüße ♥

Am besten nimmst du den ganzen Summs erst mal wieder raus, damit dein Forum erst mal wieder Funktioniert.

Keine Sorge, DAS habe ich schon längst gemacht, aber das Problem lässt mich einfach nicht los

Schön, aber ich denke, das du da noch einige andere Böcke in deinem Forum hast.
Ich kann dein Forum (zur Zeit mit dem IPad) nur in der Mobilen Version aufrufen, weil da einiges bei dir fehlt.
Aber o. K. Wenn dir dieser Code das ganze Forum zerstört, dann muss es doch wohl an einem Fehler in diesem Code liegen.
Eigentlich gehört ja zu diesem Code auch noch ein CSS.
Hast du den auch eingesetzt und wenn ja, wie sieht dieser denn aus?
Auch da kann das Problem liegen.

Aber da ich davon ausgehe, das du diesen Code nicht selber erstellt hast, frage ich mich, warum du dann nicht denjenigen fragst, der diesen zur Verfügung gestellt hat.

Denn im Gründe sind wir eigentlich nicht dazu da, das wir eure Falschen und nicht Funktionsfähigen HTML Versuche berichtigen. Dazu gibt es im Netz eine Vielzahl von entsprechenden Foren.

Ich denke, du solltest das ganze noch mal genau durchsehen und der Anweisung auf der Seite vin der du das hast, genau folgen.

Das ist mir auch aufgefallen, aber ich wusste nicht, wo ich einen Fehler gemacht haben muss. Meinst du man kann da noch irgendetwas retten?

Ich habe diesen Code natürlich nicht selbst geschrieben, sonst hätte ich vermutlich nicht um Hilfe gebeten, weil mir irgendwo ein Fehler unterlaufen sein muss, sonst würde das Forum schließlich nicht so deformiert werden.
Da die Person die mir Tipps gegeben hat nicht mehr in meinem Forum aktiv ist und ich mich in diesem Bereich nicht so gut auskenne dachte ich, frage ich mal hier, es hätte ja sein können, dass jemand auf den ersten Blick sieht, dass irgendwo ein Fehler ist.

Aber ich denke du hast schon recht, ich kann immerhin auch im Internet noch ein paar Tutorials durchgehen und mir das ansehen, wie es dort gemacht wurde, vielleicht erkenne ich den Fehler dann auch allein. Oder ich schreibe das einfach selbstständig nocheinmal nach und hoffe auf mein Glück

Für solcher Art von Menüs musst du auch entsprechende CSS Einträge haben, sonst Funktioniert es sowieso nicht richtig.
Und was wird wohl das Problem sein, wenn du nach dem Einsetzen deines Codes alles andere zerschießt.
Ich kann mir Vorstellen, das es irgendwo einen Tag gibt, der nicht wieder geschlossen wurde.
Das kann manchmal schon eine Kleinigkeit sein. Man müsste sich den Gesammten Code noch mal Zeile für Zeile ansehen. Nur dazu habe ich heute Abend nicht mehr die Zeit und auch nicht die Möglichkeit.
Am iPad ist das nicht ganz so einfach. Am besten geht das wen du dein Code mal in einen Editor lädst und den dann noch mal entsprechend gruppierst, so das du eine bessere Übersicht hast. Ich würde jetzt Wetten, das irgendwo ein fehlerhafter Tag ist, der dafür sorgt, das der Rest vom Forum nicht mehr angezeigt wird.

Letztens hatte ich auch so ein Probkem wo ein </div> zu viel war und das dann zur folge hatte, das der ganze ander Rest zerschossen war.
Ich will damit sagen, das gerade bei einem Fehlerhaften HTML Code eine Kleinigkeit eine große Wirkung hat.

Ich verstehe, ich habe heute mal alle meine Codes durchprobiert und durchgeschaut, bisher habe ich das Problem zwar nicht entdeckt, aber vielleicht ergibt sich das ja mit etwas Glück

Ich habe übrigens nun ein recht schönes Drop Down Menu, leider wird es bei meinen Usern transparent angezeigt und bei mir nicht...

Vielen Dank für deine Hilfe!

Du musst deinem CSS für das Menü noch einen Hintergrundfarbe zuweisen. Bei mir ist es auch transparent.
Ich denke das du schnell raus finden wirst, wo du diese Farbe einsetzen musst.

Seltsamerweise habe ich bereits überall wo es nur ging Farben eingesetzt.

Hast du auch background-clolor eingesetzt?
Diese Einträge sehe ich nicht in deinem CSS.

Edit am 27.07.2013 um 10:53:46:
Ich sehe, das du immer noch deinem Menü keine Hintergrundfarbe hinzugefügt hast.
Bitte füge diesem CSS Eintrag:

Code:

.dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: -moz-use-text-color #777777 #777777;
    border-image: none;
    border-radius: 0 5px 5px 5px;
    border-right: 1px solid #777777;
    border-style: none solid solid;
    border-width: medium 1px 1px;
    float: left;
    left: -999em;
    margin: 4px auto;
    padding: 10px 5px;
    position: absolute;
    text-align: left;
}

Noch die Eigenschaft:
background-color: #FF6600;
hinzu.
Dann wird auch deinen Usern das Menü vernünftig angezeigt und ist auch lesbar.

Um ehrlich zu sein, klappt es nicht...
Könntest du dir bei Gelegenheit mal den code ansehen? Vielleicht ist da ja irgendetwas falsch...

Code:

/* Navigation Bar */ 
 
#menu {
    list-style:none;
  text-align: center;
    width:360px; 
height: 30px;
 
    /* Rounded Corners */ 
     
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
 
    /* Background color and gradients */ 
     
    background-color: #161616; 
    background-color: -moz-linear-gradient(top, #161616, #212121); 
    background-color: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#161616), to(#212121));
     
    /* Borders */ 
     
    border: 1px solid #002232; 
 
    -moz-box-shadow: inset 0px 0px 1px #edf9ff; 
    -webkit-box-shadow: inset 0px 0px 1px #edf9ff; 
    box-shadow: inset 0px 0px 1px #edf9ff; 
} 
 
#menu li { 
    float: left; 
    text-align: left; 
    position: relative; 
    padding: 4px 10px 4px 10px; 
    margin-right: 30px; 
    margin-top: 7px; 
    border: none; 
} 
 
#menu li:hover { 
    border: 1px solid #161616; 
    padding: 4px 9px 4px 9px; 
     
    /* Background color and gradients */ 
     
    background-color: #212121; 
    background-color: -moz-linear-gradient(top, #161616, #212121); 
    background-color: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#161616), to(#212121)); 
     
    /* Rounded corners */ 
     
    -moz-border-radius: 5px 5px 0px 0px; 
    -webkit-border-radius: 5px 5px 0px 0px; 
    border-radius: 5px 5px 0px 0px; 
} 
 
#menu li a { 
    font-family:Arial, Helvetica, sans-serif; 
    font-size: 14px; 
    color: #EEEEEE; 
    display: block; 
    outline: 0; 
    text-decoration: none; 
} 
 
#menu li:hover a { 
    background-color: #161616; 
} 
#menu li .drop { 
    padding-right:21px; 
    background-color: #212121; 
} 
#menu li:hover .drop { 
    background-color: #212121; 
} 
 
/* Drop Down */
.dropdown_1column, 
.dropdown_2columns, 
.dropdown_3columns, 
.dropdown_4columns, 
.dropdown_5columns {
  background-color: #FF6600;
    margin:4px auto; 
    float:left; 
    position:absolute; 
    left:-999em; /* Hides the drop down */ 
    text-align:left; 
    padding:10px 5px 10px 5px; 
    border:1px solid #777777; 
    border-top:none; 
     
    /* Gradient background */ 
    background-color: #212121; 
    background-color: -moz-linear-gradient(top, #161616, #212121); 
    background-color: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#161616), to(#212121)); 
 
    /* Rounded Corners */ 
    -moz-border-radius: 0px 5px 5px 5px; 
    -webkit-border-radius: 0px 5px 5px 5px; 
    border-radius: 0px 5px 5px 5px; 
} 
 
.dropdown_1column {width: 140px;} 
.dropdown_2columns {width: 280px;} 
.dropdown_3columns {width: 420px;} 
.dropdown_4columns {width: 440px;} 
.dropdown_5columns {width: 700px;} 
 
#menu li:hover .dropdown_1column, 
#menu li:hover .dropdown_2columns, 
#menu li:hover .dropdown_3columns, 
#menu li:hover .dropdown_4columns, 
#menu li:hover .dropdown_5columns { 
    left:-1px; 
    top:auto; 
} 
 
/* Columns */ 
 
.col_1, 
.col_2, 
.col_3, 
.col_4, 
.col_5 { 
    display: inline; 
    float: left; 
    position: relative; 
    margin-left: 5px; 
    margin-right: 5px; 
} 
.col_1 {width:200px;} 
.col_2 {width:270px;} 
.col_3 {width:410px;} 
.col_4 {width:550px;} 
.col_5 {width:690px;} 
 
/* Right alignment */ 
 
#menu .menu_right { 
    float: rightright; 
    margin-right: 0px; 
} 
#menu li .align_right { 
    /* Rounded Corners */ 
    -moz-border-radius: 5px 0px 5px 5px; 
    -webkit-border-radius: 5px 0px 5px 5px; 
    border-radius: 5px 0px 5px 5px; 
} 
#menu li:hover .align_right { 
    left: auto; 
    rightright: -1px; 
    top: auto; 
} 
 
/* Drop Down Content Stylings */ 
 
#menu p, #menu h2, #menu h3, #menu ul li { 
    font-family: Arial, Helvetica, sans-serif; 
    line-height: 21px; 
    font-size: 12px; 
    text-align: left; 
} 
#menu h2 { 
    font-size: 21px; 
    font-weight: 400; 
    letter-spacing: -1px; 
    margin: 7px 0 14px 0; 
    padding-bottom: 14px; 
    border-bottom: 1px solid #666666; 
} 
#menu h3 { 
    font-size: 14px; 
    margin: 7px 0 14px 0; 
    padding-bottom: 7px; 
    border-bottom: 1px solid #888888; 
} 
#menu p { 
    line-height: 18px; 
    margin: 0 0 10px 0; 
} 
 
#menu li:hover div a { 
    font-size:12px; 
    color:#C41820; 
} 
#menu li:hover div a:hover { 
    color:#C41820; 
} 
.strong { 
    font-weight:bold; 
} 
.italic { 
    font-style:italic; 
} 
.imgshadow { 
    background-color: #FFFFFF; 
    padding: 4px; 
    border:1px solid #777777; 
    margin-top: 5px; 
    -moz-box-shadow: 0px 0px 5px #666666; 
    -webkit-box-shadow: 0px 0px 5px #666666; 
    box-shadow: 0px 0px 5px #666666; 
} 
.img_left { /* Image sticks to the left */ 
    width: auto; 
    float: left; 
    margin: 5px 15px 5px 5px; 
} 
#menu li .black_box { 
    background-color: #333333; 
    color: #eeeeee; 
    text-shadow: 1px 1px 1px #000; 
    padding: 4px 6px 4px 6px; 
 
    /* Rounded Corners */ 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
 
    /* Shadow */ 
    -webkit-box-shadow: inset 0 0 3px #000000; 
    -moz-box-shadow: inset 0 0 3px #000000; 
    box-shadow: inset 0 0 3px #000000; 
} 
#menu li ul { 
    list-style: none; 
    padding: 0; 
    margin: 0 0 12px 0; 
} 
#menu li ul li { 
    font-size: 12px; 
    line-height: 24px; 
    position: relative; 
    padding: 0; 
    margin: 0; 
    float: none; 
    text-align: left; 
    width: 190px; 
} 
#menu li ul li:hover { 
    background: none; 
    border: none; 
    padding: 0; 
    margin: 0; 
} 
#menu li .greybox li { 
    background-color: #F4F4F4; 
    border: 1px solid #bbbbbb; 
    margin: 0px 0px 4px 0px; 
    padding: 4px 6px 4px 6px; 
    width: 116px; 
 
    /* Rounded Corners */ 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
} 
#menu li .greybox li:hover { 
    background-color: #ffffff; 
    border: 1px solid #aaaaaa; 
    padding: 4px 6px 4px 6px; 
    margin: 0px 0px 4px 0px; 
}

Du müsstest dir mal diesen Abschnitt genau anschauen:

Code:

/* Gradient background */
   background-color: #212121;
   background-color: -moz-linear-gradient(top, #161616, #212121);
   background-color: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#161616), to(#212121));  

Da liegt der Hase im Pfeffer. Ich müsste jetzt erst mal nachsehen, was das im einzelnen bewirken soll, aber wenn ich es richtig sehe, dann willst du damit einen Farbverlauf erreichen.
Es kann sein, das dort der Fehler liegt und du mal nachsehen musst, ob diese Einstellungen so richtig sind.

edit:
Ich bin mir jetzt  fast sicher, das das das Problem ist. Es sieht so aus, als das die neuen Browser diese Befehle nicht mehr unterstützen.
Es muss da neue Befehle für geben, die ich aber noch nicht gefunden habe.
Kannst du mir bitte mal verraten, welchen Browser du benutzt und welche Version das ist, wo es noch Funktioniert?

Edit2:
Ich glaube ich weiß jetzt wo der Fehler liegt. Du hast immer geschrieben "background-color" das ist aber falsch.
Richtig heißt der Eintrag:

Code:

background: -moz-linear-gradient(center top , #161616, #212121) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#161616), to(#212121));

Ändere das mal bitte ab und nimm die einfachen Einträge mit background-color mal raus. Du musst das bitte überall in deinem CSS ändern, wo du diesen Farbverlauf eingesetzt hast. Ich denke dann wird es auch passen.

Vielen Dank für deine Hilfe. Ich benutze sowohl Firefox als auch Google Chrome, welche Versionen das allerdings sind weiß ich nicht

Ich habe nun alles editiert, bei Chrome funktioniert es einwandfrei bei Firefox hingegen nicht...

Da ich die Woche nicht da bin, kann sich hier gerne jemand anders noch mal einschalten.

Ich hab es nicht eilig

Für die neuen FF-Versionen darf kein moz-Präfix mehr verwendet werden.

Das Schema muss grundsätzlich so aussehen:

Code:

background: linear-gradient(to bottom, blue, white);

Die genauen Anpassungsmöglichkeiten werden dort beschrieben:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_gradients

Yeah, ich setze mich gleich mal daran. Danke für die Hilfe!