Menü: 2. Ebene kann nicht als Block dargestellt werden @ tutorials.de: Tutorials, Forum & Hilfe

mruiss · 03.10.07 18:15

Hallo liebes "letzte Hilfe" Forum,

ich bastele jetzt schon einige Zeit an einem vertikalen Menü mit zwei ebenen, welches jedoch nach rechts aufklappen sol. Soweit so gut. Das habe ich nach langem versuchen hinbekommen.

Das einzige woran ich verzweifele ist, daß ich es nicht hinbekomme, daß die 2. Ebene der Liste (ul, ul) als block dargestellt wird.

Ich hoffe, daß mir einer von Euch Profis kurz helfen kann.

Das ganze steh in einem div class="menu"

Code :

.menu {
    text-align: left; 
    float: left;
    width: 200px;
    height: auto;
    margin-top: 0px;
    font:bold 12px verdana, sans-serif;
}
 
.menu ul {
    background:#fff;
    border-bottom:1px solid #666;
    border-left:1px solid #666;
    border-right:1px solid #666;
    list-style:none;
    padding-left:0px;
    list-style-position:outside;
    margin-top: 0px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
}
 
.menu li {
position:relative;
}
 
.menu a, .menu a:visited {
    color:#666;
    display:block;
    text-decoration:none;
    font-variant:small-caps;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #666;
    padding-top: 5px;
    padding-right: 8px;
    padding-bottom: 5px;
    padding-left: 5px;
    height:25px;
    line-height:25px;
}
 
.menu :hover > a {
    background:#860011;
    color:#fff;
}
 
.menu ul ul {
    visibility:hidden;
    position:absolute;
    top:0;
    left:168px;
}
 
.menu ul li:hover ul,  .menu ul a:hover ul {
    visibility:visible;

Herzlichen Dank vorab für eine schnelle Hilfe...

Matthias

Maik · 03.10.07 19:08

Hi,

ich kann dir nicht ganz folgen, worauf du hinaus willst.

mruiss · 03.10.07 19:20

Also:

Das Menü funktioniert einwandfrei. Der Hover funktioniert auch problemlos.

Das einzige was nicht funktioniert ist, daß die Links der Menüpunkte über die ganze Fläche des Feldes verlinkt sind. Sprich. Der Hover-Effekt geht im ganzen Feld, der Link allerdings nicht. Der geht nur direkt auf dem Text...

Das ist sowohl in der erste als auch in der zweiten Ebene der Fall...

Jemand eine Idee?

Hier nochmals ein etwas veränderter Code:

Code :

.menu {
    text-align: left; 
    float: left;
    width: 200px;
    height: auto;
    margin-top: 0px;
    font:bold 12px verdana, sans-serif;
}
 
.menu ul {
    background:#fff;
    border-bottom:1px solid #666;
    border-left:1px solid #666;
    border-right:1px solid #666;
    list-style:none;
    padding-left:0px;
    list-style-position:outside;
    margin-top: 0px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
}
 
.menu li {
position:relative;
}
 
.menu a, .menu a:visited {
    color:#666;
    display:block;
    text-decoration:none;
    font-variant:small-caps;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #666;
    padding-top: 5px;
    padding-right: 8px;
    padding-bottom: 5px;
    padding-left: 5px;
}
 
.menu :hover > a {
    background:#860011;
    color:#fff;
}
 
.menu ul ul {
    visibility:hidden;
    position:absolute;
    top:0;
    left:168px;
    }
 
.menu ul li:hover ul,  .menu ul a:hover ul {
    visibility:visible;

Maik · 03.10.07 19:26

Kann ich bei mir nicht bestätigen - siehe den gepunkteten Rahmen um den Link:

Menü: 2. Ebene kann nicht als Block dargestellt werden-demo_mruiss.jpg

mruiss · 03.10.07 19:45

Hier mal der ganze Code:

Ich hab ihn eben mal auf einen Testserver geladen und es ist leider nicht die ganze (rote) Fläche verlinkt... sondern eben nur der entsprechende Text verlinkt auf die entsprechende Seite....

Kannst Du nochmal schauen?

Vielen Dank

CSS:

Code :

.menu {
    text-align: left; 
    float: left;
    width: 200px;
    height: auto;
    margin-top: 0px;
    font:bold 12px verdana, sans-serif;
}
 
.menu ul {
    background:#fff;
    border-bottom:1px solid #666;
    border-left:1px solid #666;
    border-right:1px solid #666;
    list-style:none;
    padding-left:0px;
    list-style-position:outside;
    margin-top: 0px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
}
 
.menu li {
position:relative;
}
 
.menu a, .menu a:visited {
    color:#666;
    display:block;
    text-decoration:none;
    font-variant:small-caps;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #666;
    padding-top: 5px;
    padding-right: 8px;
    padding-bottom: 5px;
    padding-left: 5px;
}
 
.menu :hover > a {
    background:#860011;
    color:#fff;
}
 
.menu ul ul {
    visibility:hidden;
    position:absolute;
    top:0;
    left:168px;
    }
 
.menu ul li:hover ul,  .menu ul a:hover ul {
    visibility:visible;

HTML:

Code :

<body>
 
<div class="menu">
    <ul style="margin-top": 0>
      <li><a href="index.html">Start</a></li>
      <li><a href="Konzept.html">TOP Konzept</a></li>
      <li><a href="aktuell.html">TOP Inhalt</a></li>
        <ul>
            <li><a href="Events.html">Events</a></li>
            <li><a href="Business.html">Business</a></li>
            <li><a href="Lifestyle.html">Lifestyle</a></li>
            <li><a href="Travel.html">Travel</a></li>
            <li><a href="Health.html">Health & Beauty</a></li>
            <li><a href="Gourmet.html">Gourmet</a></li>
            <li><a href="Arts.html">Art</a></li>
        </ul>
      <li><a href="Media.html">Mediadaten</a></li>
        <ul>
            <li><a href="Preise.html">Preise</a></li>
            <li><a href="Technik.html">Technische Angaben</a></li>
            <li><a href="Vertrieb.html">Vertriebsgebiet</a></li>
            <li><a href="Anzeige.html">Anzeige buchen</a></li>
        </ul>
      <li><a href="Veranstaltungen.html">Veranstaltungen</a></li>
      <li><a href="Ansprechpartner.html">Ansprechpartner</a></li>
      <li><a href="agb.html">agb</a></li>
    </ul>
  </div>
 
</body>

Achso:

Hier mal der Link zum Testserver...

Vielleicht seht Ihr hier was ich meine...

TESTSERVER

Gruß
Matthias

Maik · 03.10.07 19:52

Es hat sich bei mir nichts geändert.

Dafür wird aber das Submenü nicht angezeigt, da du die verschachtelte Liste falsch konstruiert hast:

Code :

<div class="menu">
    <ul style="margin-top": 0>
      <li><a href="index.html">Start</a></li>
      <li><a href="Konzept.html">TOP Konzept</a></li>
      [b]<li>[/b]<a href="aktuell.html">TOP Inhalt</a>[color=red]<!--</li>-->[/color]
              <ul>
            <li><a href="Events.html">Events</a></li>
            <li><a href="Business.html">Business</a></li>
            <li><a href="Lifestyle.html">Lifestyle</a></li>
            <li><a href="Travel.html">Travel</a></li>
            <li><a href="Health.html">Health & Beauty</a></li>
            <li><a href="Gourmet.html">Gourmet</a></li>
            <li><a href="Arts.html">Art</a></li>
        </ul>
      [b]</li>[/b]
      [b]<li>[/b]<a href="Media.html">Mediadaten</a>[color=red]<!--</li>-->[/color]
        <ul>
            <li><a href="Preise.html">Preise</a></li>
            <li><a href="Technik.html">Technische Angaben</a></li>
            <li><a href="Vertrieb.html">Vertriebsgebiet</a></li>
            <li><a href="Anzeige.html">Anzeige buchen</a></li>
        </ul>
      [b]</li>[/b]
      <li><a href="Veranstaltungen.html">Veranstaltungen</a></li>
      <li><a href="Ansprechpartner.html">Ansprechpartner</a></li>
      <li><a href="agb.html">agb</a></li>
    </ul>
</div>

Zudem hast du hier den Wert außerhalb der Eigenschaft gesetzt:

Code :

1	<ul style="margin-top"[color=red]: 0[/color]>

mruiss · 03.10.07 20:07

Ich glaube ich weiß, warum es bei Dir geht und bei mir nicht...

Du benutzt Mozilla und ich "Asche auf mein Haupt" IE7...

Stimmts.

Vielleicht hast Du noch eine Idee zu 2 Problemen

1. Warum geht das im IE 7 nicht

und 2.

2. Wie bekomme ich die Blockgröße in den ausklappenden Untermenüs so hin, daß sie genauso groß ist wie die Root Ebene... Ich gehe mal davon aus, daß die ul ul bei Dir auch kleiner als die 1. Ebene ist !?

Testserver ist aktualisier...

Danke für Deine Mühe

Matthias

Maik · 03.10.07 20:23

Code :

.menu ul ul {
        visibility:hidden;
        position:absolute;
        top:0;
        left:168px;
        [b]width:168px;[/b]
}

Und nach dem "normalen" Stylesheet implementierst du folgenden "Conditional Comment" für den IE:

Code :

<style type="text/css">
...
</style>
[b]<!--[if lte IE 7]>
<style type="text/css">
.menu ul li a { width:166px; }
.menu ul li ul li a { width:155px; }
</style>
<![endif]-->[/b]

mruiss · 03.10.07 20:38

Großartig

Das löst zumindest das Problem mit der Breite.

hast Du auch noch eine Idee, daß der gesamte Block und nicht nur der Text im IE7 verlinkt wird.

So wie eben auch im Mozilla...

Gruß
Matthias

Tyg3r · 03.10.07 20:41

Hi,

weise doch dem Link direkt die Eigenschaft display:block zu und definiere Breite und Höhe dort. Dann dürftest Du auch keine Probleme mit den Größenunterschieden im IE/FF haben.

Gruß tyg3r

mruiss · 03.10.07 20:56

Hi Tyg3r,

danke für den Tip. Allerdings habe ich das schon leider erfolglos ausprobiert.

Aus irgendeinem Grund nimmt der IE7 den Block beim Link nicht an...
Weder im geposteten CSS noch im html...

noch jemand Ideen

Gruß
Matthias

Maik · 03.10.07 21:02

Code :

<!--[if lte IE 7]>
<style type="text/css">
[b].menu a { height:1%; }[/b]
.menu ul li a { width:166px; }
.menu ul li ul li a { width:155px; }
</style>
<![endif]-->

Zudem hast du hier noch drei Fehler im Markup:

Code :

<div class="menu">
    <ul style="margin-top"[color=red]: 0[/color]>
      <li><a href="index.html">Start</a></li>
 
      <li><a href="Konzept.html">TOP Konzept</a></li>
      <li><a href="aktuell.html">TOP Inhalt</a>
        <ul>
            <li><a href="Events.html">Events</a></li>
            <li><a href="Business.html">Business</a></li>
            <li><a href="Lifestyle.html">Lifestyle</a></li>
            <li><a href="Travel.html">Travel</a></li>
            <li><a href="Health.html">Health & Beauty</a></li>
            <li><a href="Gourmet.html">Gourmet</a></li>
            <li><a href="Arts.html">Art</a></li>
        </ul>
      [b]</li>[/b][color=red]<!-- fehlt! -->[/color]
      <li><a href="Media.html">Mediadaten</a>
        <ul>
            <li><a href="Preise.html">Preise</a></li>
            <li><a href="Technik.html">Technische Angaben</a></li>
            <li><a href="Vertrieb.html">Vertriebsgebiet</a></li>
            <li><a href="Anzeige.html">Anzeige buchen</a></li>
        </ul>
      [b]</li>[/b][color=red]<!-- fehlt! -->[/color]
      <li><a href="Veranstaltungen.html">Veranstaltungen</a></li>
      <li><a href="Ansprechpartner.html">Ansprechpartner</a></li>
      <li><a href="agb.html">agb</a></li>
    </ul>
  </div>

mruiss · 03.10.07 21:47

Jetzt läufts

Vielen lieben Dank vorallem an Mike!

auch wenn ich die "if" Geschichte nicht ganz verstehe...

Nochmals besten Dank und schönen Abend noch!

Matthias

Maik · 03.10.07 21:53

Zitat von mruiss

auch wenn ich die "if" Geschichte nicht ganz verstehe...

Bei der Syntax  handelt es sich um einen sog. "Conditional Comment", der nur vom IE (Win) gelesen und ausgeführt wird.

Auf diese Weise wird im Dokument nach dem "normalen" Stylesheet eine CSS-Browserweiche gesetzt, und im IE-spezifischen Stylesheet die erforderlichen Ergänzungen oder Wert-Korrekturen vorgenommen, die die Eigenschaftswerte des vorangegangenen Stylesheets überschreiben.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Nicht erkannte Zeichen werden als ? dargestellt, jedoch nicht so behandelt

Photoshop - Ebene kann nicht kopiwert werden

Umlaute werden nicht dargestellt

SuSe: Sonderzeichen werden nicht dargestellt

inhaltd er ebene kann nicht direkt bearbeitet werden?

E-Mail:

Abonnieren Abbestellen