• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Darstellungsproblem mit Div

Status
Für weitere Antworten geschlossen.
G

Gokel

Neues Mitglied
Servus,

Ja, erstmal:

Das hier ist das erste mal seit Anfang 2008, das ich bei einem PRoblem mit HTML nicht weiterkomme ^^....

Wie auch immer, ich habe ein kleines Aufklapp Menü erstellt:

Seht selbst:
Aufklapp Menü

Ich denke das problem ist klar, ich möchte das wenn ich bei Klasse 1 mit der maus rübergehe, dass die Höhe dann auch so erweitert wird das man alles erkennt, ich denke es ist klar was gemeint ist ....

Quelltext:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="" />

    <title>Aufklapp Menü</title>
    <style type='text/css'>
    
    .part_1 {
        visibility:visible;
        width:120px;
        height:25px;
        border-style:solid;
        border-width:1px;
        border-color:black;
        text-align:left;
        background-color:red;
    }
    .part_2 {
        visibility:hidden;
    }
    
    .part_1:hover .part_2 {
        width:120px;
        height:75px;
        border-style:solid;
        border-width:1px;
        border-color:black;
        visibility:visible;
        background-color:blue;
        margin-top:6px;
        margin-left:-1px;
    }
    
    </style>
</head>

<body style='background-color:green;'>

<div class='part_1'> Klasse 1 
<div class='part_2'> Punkt 1 <br /> Punkt 2 <br /> Punkt 3 </div>
</div>
<div class='part_1'> Klasse 2 
<div class='part_2'> Punkt 4 <br /> Punkt 5 <br /> Punkt 6 </div>
</div>
<div class='part_1'> Klasse 3 
<div class='part_2'> Punkt 7 <br /> Punkt 8 <br /> Punkt 9 </div>
</div>

</body>
</html>

lg
 
Also zunächst muss ich Dich mal in Sachen HTML korrigieren:
1. "Darstellungsproblem mit div" stößt mir unangenehm auf. <div> ist ein HTML-Element. Mit HTML erreicht man keine Darstellung, sondern nur mit CSS. Daher ist der Titel irreführend und verleitet viele Anfänger dazu, zu glauben, mit <div> könnte man irgendwas besonderes anstellen.
2. Das leitet gut über zum nächsten Problem: Deiner HTML-Auszeichnung. Die ist unzureichend. Mit <div> gruppiert man mehrere Elemente zwecks gemeinsamer Formatierung. Ein Menü zeichnet man als Liste aus, weil eine Liste das ist, was ein Menü am ehesten beschreibt. Das solltest Du auch tun.

Gruß,
-Efchen
 
Ähmm, ja okay.

Wenn man es so genau nehmen will.....

Egal, also du hast keine konkrete Lösung, richtig?

Du hast zwar eine Lösung, mit Listenpunkten, aber das ist mir zu Oldschool, sry ;)
 
Gokel schrieb:
Du hast zwar eine Lösung, mit Listenpunkten, aber das ist mir zu Oldschool, sry ;)
Zum Vergrößern anklicken....
Du verwechselst da irgendwas. Das ist nicht "old school", das ist "modern school". Denn heute (also genauer schon seit vielen vielen Jahren) - seitdem es CSS gibt - kann man HTML endlich wieder so benutzen, wie es schon immer gedacht war. Und das bedeutet, man gibt seinem Inhalt eine Bedeutung. Ein Menü wird demnach als Liste ausgezeichnet, nicht als Ansammlung von Links in einem allgemeinen Block-Element. Semantisch gesehen ist Dein Code falsch und dementsprechend schlecht wird er von Clients interpretiert, die auf die Semantik angewiesen sind (u.a. auch Suchmaschinen).
Falls Du glaubst, "alles mit <div>" zu machen sei "modern school" (also nur FALLS, weil es viele gibt, die so denken, was Du denkst, weiß ich natürlich nicht), dann muss ich Dir auch da sagen, dass das schlicht Unfug ist. Das ist ein weit verbreiteter Irrtum, man mache heutzutage "alles mit <div>". Das ist genauso schlecht wie Tabellenlayouts.

Das nur mal so als kleiner Exkurs für Dich, was heutzutage (also schon seit bestimmt 10 Jahren) aktueller Stand der Web-Entwicklung ist.

Nein, eine konkrete Lösung zu Deinem Problem habe ich jetzt nicht, aber das verschiebt sich ja alles noch, wenn Du erstmal verschachtelte Listen draus gemacht hast.

Grüße,
-Efchen
 
Die Lösung des Problems ist danach ganz einfach. Dein Menü sieht ja etwa so aus:

Hauptmenüpunkt 1
--Untermenüpunkt 1
Hauptmenüpunkt 2
--Untermenüpunkt 2
Hauptmenüpunkt 3
--Untermenüpunkt 3

Die nicht aktiven Untermenüpunkte kannst Du einfach mit display: none; ausblenden. Damit erreichst Du, dass die Untermenüpunkte nicht nur unsichtbar sind, sondern gar nicht dargestellt werden (also auch keinen Platz benötigen).

Gruß
Junny
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben