kostenloser Webspace werbefrei: lima-city

reines css pulldown

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

blocken code cursor display drucker index konfiguration laufwerk leistung monitor partner position produkt referenz reparatur schulung server service speichern text
  1. Autor dieses Themas

    a************n

    18:36, 26.8.2008
    ich hab ein bissel gegooglet und hab dann diesen link gefunden http://barrierefrei.e-workers.de/workshops/tricks/menues.php tja jetzt wurde ich neidich und wollte auch unbedingt mein navmenu so machen,wie das erste. aber ich bin zu blöd.
    die drei dateien sehen hinterher so aus
    nav.htm
    <html>
<head>
<link rel="stylesheet" type="text/css" href="dropdown.css"  />
<!--[if IE ]>
<link rel="stylesheet" type="text/css" href="fix-ie.css" />
<![endif]-->

</head>
<body>
<div id="menuebox">

	<div id="menue">
		<div class="aussen">
<span class="menutag">Produkte</span>
<a class="innen-1" href="#">Systeme</a>
<a class="innen" href="#">Speicher</a>
<a class="innen" href="#">Laufwerke</a>
<a class="innen" href="#">Monitore</a>
<a class="innen" href="#">Drucker</a>
<a class="innen" href="#">Zubehör</a>
		</div>
		<div class="aussen">
<span class="menutag">Leistungen</span>
<a class="innen-1" href="#">Netzwerke</a>
<a class="innen" href="#">Server</a>
<a class="innen" href="#">Wartung</a>
		</div>
		<div class="aussen">
<span class="menutag">Service</span>
<a class="innen-1" href="#">Reparatur</a>
<a class="innen" href="#">Konfiguration</a>
<a class="innen" href="#">Software</a>
<a class="innen" href="#">Schulung</a>
		</div>
		<div class="aussen">
<span class="menutag">Links</span>
<a class="innen-1" href="#">About Us</a>
<a class="innen" href="#">Partner</a>
<a class="innen" href="#">Referenzen</a>
		</div>
	</div><!-- menue -->

<!-- Der folgende Block bedient nur IEs! 
	 Durch diese Redundanz vermeiden wir den Einsatz von Javascript. -->

<!--[if IE]>
	<div class="stupidie">
<a class="auss" href="#"><span class="menutag">Produkte</span>
<table><tr><td>
<a class="inn" href="#">Systeme</a>
<a class="inn" href="#">Speicher</a>
<a class="inn" href="#">Laufwerke</a>
<a class="inn" href="#">Monitore</a>
<a class="inn" href="#">Drucker</a>
<a class="inn" href="#">Zubehör</a>
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Leistungen</span>
<table><tr><td>
<a class="inn" href="#">Netzwerke</a>
<a class="inn" href="#">Server</a>
<a class="inn" href="#">Wartung</a>
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Service</span>
<table><tr><td>
<a class="inn" href="#">Reparatur</a>
<a class="inn" href="#">Konfiguration</a>
<a class="inn" href="#">Software</a>
<a class="inn" href="#">Schulung</a>
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Links</span>
<table><tr><td>
<a class="inn" href="#">About Us</a>
<a class="inn" href="#">Partner</a>
<a class="inn" href="#">Referenzen</a>
</td></tr></table>
</a>
	</div><!-- stupidie -->
<![endif]-->

</div><!-- menuebox -->

</body></html>

    dropdown.css
    #menuebox {
position: relative;
height: 30px;
}
.stupidie {
display: none;
}
#menue {
position:absolute;
top: 5px;
left: 0;
z-index: 200;
}

#menue .aussen {
float: left;
display: block;
overflow: hidden;
width: 8em;
height: 1.3em;
font-weight: bold;
text-align: center;
background-color: #dec79a;
color: #513913;
border: 1px solid;
border-color: #d0843e #78561d #78561d #d0843e;
}
#menue .aussen:hover {
height: auto;
background-color: #624617;
color: #fff;
}

a.innen-1 {
margin-top: 2px;
}
a.innen,
a.innen-1 {
display: block;
width: 7.9em;
padding: 2px 0;
text-decoration: none;
font-weight: normal;
border-bottom: 1px solid #78561d;
background-color: #ecd8ae;
color: #600;
}
a:visited.innen,
a:visited.innen-1 {
background-color: #ecd8ae;
color:#555;
}
a:hover.innen,
a:hover.innen-1 {
background-color: #f7eedb;
color: #900;
}

span.menutag {
display: block;
cursor: default;
}

    fix-ie.css
    #menue {
display:none;
}
.stupidie {
display: block;
position: absolute;
top: 5px;
left: 0;
z-index: 200;
}

a.auss {
float: left;
width: 8em;
height: 1.4em;
overflow: hidden;
display: block;
font-weight: bold;
text-align: center;
text-decoration: none;
background-color: #dec79a;
color: #513913; 
border: 1px solid;
border-color: #d0843e #78561d #78561d #d0843e;
}
a:hover.auss {
overflow: visible;
background-color: #624617;
color: #fff;
}
a:hover.auss table {
display: block;
margin-top: 3px;
background-color: #dec79a;
color: #400;
border-collapse: collapse;
}

a.inn {
display: block;
width: 7.9em; /* fuer 5er IEs anpassen, sonst 'zuckt' es */
padding: 2px 0;
font-size: 100%; /* fuer 5er IEs auf 80% reduzieren */
font-weight: normal;
text-align: center;
text-decoration: none;
border-bottom: 1px solid #78561d;
background-color: #ecd8ae;
color: #600;
}
a:visited.inn {
background-color: #ecd8ae;
color:#444;
}
a:hover.inn {
position: relative;
background-color: #f7eedb;
color: #900;
}
span.menutag {
display: block;
cursor: default;
}

    eigentlich müsste es auch stimmen aber es geht nicht.
    könntet ihr mir helfen?

    mfg andré

  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. e**n

    18:46, 26.8.2008
    DU bist nicht zu blöd, sondern nur zu faul, selber rumzuprobieren.
    Jetzt hoffst du darauf, dass sich ein Dummer findet und es dir codet;)

    Vergleiche mal deinen Code mit dem COde dort auf der Seite.

    Was genau funktioniert denn nicht?
  4. Autor dieses Themas

    a************n

    18:54, 26.8.2008
    also nicht klappen tut
    im Mozilla firefox:
    wenn ich mit der maus drauf gehe "dropt" er kein menu.
    im IE:
    es wird zwar "gedropt" aber sobalt ich dann einen lik anklicken möchte "löst sich das ganze wieder auf".
    (sorry für die blöde beschreibung aber mir fällt es nicht anders ein)

    und diese unterstellung ich hätte nicht rumprobiert ist einfach haltlos, außer natürlich über 1h daran zu arbeiten zählt nicht.Und der code ist derselbe wie auf der orginal page, weil ich ihn wieder hergestellt habe da ich es nur noch schlimmer gemcht habe.
    hier ist dann auch der link dazu
    http://andre-morillon.lima-city.de/index/test/nav.php

    mfg andré

  5. e**n

    23:11, 26.8.2008
    Hab nochmal über deinen geposteten COde geschaut.

    Im Großen und ganzen kann ich keine Fehler erkennen.

    An manchen Stellen verstehe ich allerdings nicht, was manche Befehle bezwecken sollen. Kann natürlich auch sein dass dort etwas wie ein "#" vergessen wurde.

    Solltest du mal überprüfen.

  6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

Login zum Webhosting ohne Werbung!

Hast Du schon kostenlosen Webspace oder bist Du auf der Suche nach WordPress-Hosting mit Staging-Funktion und wp-cli? Jetzt günstige Prepaid Domains registrieren!