Menüs, Menüs erscheinen wenn man mit dem.. Einstellungen

[i.b.g]

Hallo,

wenn Du die Beispiele dieser Seite, die übrigens recht interessant ist - auch ich schau ab und an dort vorbei, benutzt, dann musst Du Dir aber auch diese Seite anschauen:

Die Browser.

Nicht alle Browser verstehen alle CSS-Spezifikationen. Einige Browser haben sogar proprietäre Implementationen. Vieles was z.B. im Mozilla funktioniert, wird im IE gar nicht unterstützt. Die Gestaltung der Scrollleisten ist hingegen wieder etwas, das nur im IE arbeitet. Gehört auch nicht zum Standard.

Also wenn Du den CSS-Hover-Effekt haben willst, dann geht das im Moment nach meiner Kenntnis nur im Mozilla. Und genau deshalb müssen sich viele Webgestalter solche Krücken und Verrenkungen - auch mit Javascript oder Serverscripts - einfallen lassen, um einigermaßen ansprechende Navigationen usw. hinzubekommen. Könnten alle Browser diese CSS-Spezifikationen richtig interpretieren, dann hätten wir alle es wesentlich leichter.

[amethyst]

Hallo Ingo,
Widerspruch ;-))

Also wenn Du den CSS-Hover-Effekt haben willst, dann geht das im Moment nach meiner Kenntnis nur im Mozilla.

Hover-Effekte funktionieren im IE 6.0, Firefox, Opera und Mozilla. Allerdings hast Du recht, wenn Du sagst, dass es einige Mühe kostet, dass es überall passt, ich bastel nämlich gerade daran. Topchange hat die Hover-Effekte für alle Browser auf seiner Seite sehr gut umgesetzt und das völlig ohne Java.

Für die alten Browser muss das Menü eben auch ohne CSS ansehbar und praktikabel sein, aber was nützt das Menü, wenn die auch alle anderer CSS-Codes nicht verstehen (seufz).

Lieber Gruß Uschi

[lain]

Ich hab den IE 6.0 , und kann diese Menüs auf anderen Seite sehen. Ich habe auch mal so ein Menü hinbekommen , nur will ich es wie auf dieser , dieser und/oder dieser Seite hinbekommen. Ich würde halt gern den Code dafür wissen.

Der Beitrag wurde von lain bearbeitet: 02.05.2004 - 15:28

[amethyst]

Das sind Java-Menüs und die Scripts dazu, müsstest Du auf Java-Script-Seiten suchen.

Gruß Amethyst

[i.b.g]

Hallo,

@lain
also alle von Dir angeführten Seiten arbeiten mit einem mächtig gewaltigen Javascript von Javascript-Altmeister T.Brattli. Der hat schon DHTML fabriziert, da war HTML gerade bei 3.2. Wenn Du mal die Quellcodeansicht aufrufst, wirst Du sehen was Dir da entgegen schlägt ;-( .

Das ist zwar programmtechnisch schon genial, aber nutzerfreundlich weiß Gott nicht, weil es nur funktioniert, wenn Javascript auch eingeschaltet ist.

Wenn Du dazu mehr wissen möchtest musst Du dich bei T. Brattli - Hompage umschauen und das ganze versuchen nachzuvollziehen. Trivial ist es nicht.

Ansonsten hast Du bei Fractulum.net schon wesentlich bessere Anleitungen.

@amethyst
Es ging um Hoover-Effekte für ein gutes Navigationsmenü. Wenn Du Dir diese Seite mal mit dem IE und mit dem Mozilla anschaust, dann wirst Du sehen, dass es eben nicht alles im IE funktioniert. Gut ... Opera und den Rest hab ich nicht getestet.

Der Beitrag wurde von i.b.g bearbeitet: 02.05.2004 - 14:43

[lain]

Könnte man Java nicht umgehen und per CSS solch einen Block erstellen ? Ein cooleres Design für eine HP will mir einfach nicht einfallen..

---

Also diesen Block habe ich mit CSS doch noch hingekriegt. Aber jetzt frage ich mich , wie ich mehrere Blöcke bei der Mausberührung erscheinen lassen und diese dann als Link einstellen kann.

hoffe auf baldigen Rat..

Der Beitrag wurde von lain bearbeitet: 02.05.2004 - 23:15

[i.b.g]

Hallo,

du musst für jede Box, die ein- und ausgeblendet werden soll, eine eigene CSS-Definition anlegen. Genau wie das in diesem Beispiel gezeigt wird. Schau den Quelltext an und es wird deutlich. Aber das funktioniert nicht im IE. Leider! ;-(

Du wirst zur Zeit nicht um ein Script für diese Effekte drum rum kommen, es sei denn Du ignorierst den IE, was in bekannten Umgebungen vielleicht funktioniert, für öffentliche Auftritte hingegen der Tod einer Website ist.

Der Beitrag wurde von i.b.g bearbeitet: 03.05.2004 - 6:43

[lain]

Welcher Browser käme dafür in Frage ?
Kannst du mir vielleicht auf die Spürnge helfen und mir den Code für eine weitere box zeigen ? Bis her habe ich das alles eingegeben, was auch einwandferi klappt:

CSS :

<style type="text/css">
<!--

#box a
{color:#003F00;
background:transparent;
font-bold:14 px Times New Roman;
text-decoration:none;
display:block;
width:80px;
padding:0px;
position:absolute; bottom:2;
border:0px solid white;}
#box a:hover
{color:#003F00;
background:transparent;
position:absolute; bottom:2;
border:0px white;
}
#box a span {display:none;}
#box a:hover span
{
position:absolute; bottom:20; left:0px; z-index:0;
display:block;
width:80px;
background:transparent;
color:#003F00;
font:normal 14px Times New Roman;
border:1px solid white;
padding:0px;}
-->
</style>


und als HTML :

<div id="box" style="position:absolute; bottom:2; left:40px;" >
<a href="#">Eins.<span>Zwei.</span></div></a>


Der Text wurde zum Test gewählt. Wenn man "Eins" berührt , kommt dadrüber als Block "Zwei" . So soll es auch sein . Nur müssen mehrere Blöcke übereinander erscheinen , und diese Blöcke sollen Links sein.

[i.b.g]

Hallo,
nur mal vorne weg:
Ich hab da nun schon mehrmals diesen Link angegeben. Den solltest du einfach mal anschauen.

Aber weil ich ja nett bin:

HTML

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

<html>
<head>
<title>CSS Texte einblenden mit Pseudoformaten</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

<style type="text/css">
<!--
body{margin:0;padding:0;font : 14px verdana, geneva, arial, helvetica, sans-serif;text-align:justify;}
a{
color:black;
}
a:hover{
color:#ffffff;
}

#box1{
position: absolute;top:20px;left:20px;
width:250px;
height:100px;
background : #b07041;
padding:10px;
font-size:12px;
color:#ffffff;
border:1px solid black;
cursor:pointer;
}
#box1 .blend1{
display:none;
}
#box1:hover .blend1{
position: absolute;top:-1px;left:271px;z-index:3;display:block;
width:350px;
padding:5px;
margin:0;
background : #f49100;
color:black;
border:1px solid black;
border-left:none;
cursor:default;
}
.blend1 p{
list-style:none;
margin:0px;
padding:10px;
font-weight:bold;
background : #b07041;
border:1px solid black;
}

#box2{
position: absolute;top:200px;left:20px;
width:250px;
height:100px;
background : #f49100;
padding:10px;
font-size:12px;
color:#ffffff;
border:1px solid black;
cursor:pointer;
}
#box2 .blend2{
display:none;
}
#box2:hover .blend2{
position: absolute;top:-1px;left:271px;z-index:3;
display:block;
width:160px;
padding:5px;
margin:0;
background : #b07041;
color:black;
border:1px solid black;
border-left:none;
cursor:default;
}
.blend2 ul{
list-style:none;
margin:0px;
padding:10px;
font-weight:bold;
background : #f49100;
border:1px solid black;
}
.blend2 li{
padding:3px;
}

#text p {
background : #b07041 ;
color:#ffffff;
border:1px solid #9C5A42;
padding:15px;
}

#text{
position:absolute;left:320px;top:0px;
padding-right:30px;
padding-left:30px;
background : #c48351;
margin:0px;
}
-->
</style>
</head>

<body>

<div id="box1">
<p><b>Lorem ipsum dolor sit amet</b></p>

<div class="blend1">
<p><a href="#">Lorem ipsum</a>&nbsp;&nbsp;
<a href="#">Lorem ipsum</a>&nbsp;&nbsp;
<a href="#">Lorem ipsum</a></p>
</div>
</div>

<div id="box2"></div>

<div id="box2">
<p><b>Lorem ipsum dolor sit amet</b></p>
<div class="blend2">
<ul>

<li><a href="#">Lorem ipsum</a></li>

<li><a href="#">Lorem ipsum</a></li>

<li><a href="#">Lorem ipsum</a></li>

<li><a href="#">Lorem ipsum</a></li>

<li><a href="#">Lorem ipsum</a></li>

<li><a href="#">Lorem ipsum</a></li>

<li><a href="#">Lorem ipsum</a></li>

<li><a href="#">Lorem ipsum</a></li>

<li><a href="#">Lorem ipsum</a></li>

<li><a href="#">Lorem ipsum</a></li>

<li><a href="#">Lorem ipsum</a></li>

<li><a href="#">Lorem ipsum</a></li>

</ul>
</div>
</div>

<div id="text">
<h1 style="font-size:20px;text-align:center;color:black;margin-bottom:30px;">Lorem ipsum dolor sit amet</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

</div>

</body>
</html>

So nun sollte es aber wirklich klar sein.

[edit]
Ach ja, Mozilla kann das und Opera.
[/edit]

Der Beitrag wurde von i.b.g bearbeitet: 03.05.2004 - 15:58

[lain]

Ich hatte mir diesen Link schon angeschaut , aber ich konnte damit nicht wirklich was anfangen..weil das Aufspringen mehrerer Boxen im IE gehen muss , da es bei mir ja auch funktioniert.

[Google Bot]