Navigation mit display
smepal
- css
Ich habe eine Navigation nach folgendem Vorbild gemacht:
http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern
Leider funktioniert sie nur im FF korrekt und im IE erscheinen die Untermenüs nicht!
Wer kann helfen???? Verzweifle langsam!!!!
Meine CSS:
.white-header {
background-color:#336699;
border-bottom:1px solid #000000;
border-top:2px solid #000000;
color:#000000;
font-family:Freestyle Script;
font-size:24px;
font-weight:bold;
padding:4px;
}
body {
}
a {
color:black;
text-decoration:none;
}
a:hover {
color:white;
text-decoration:none;
}
a.side:hover {
color:#000000;
}
a.white:hover {
color:#DDDDDD;
text-decoration:none;
}
body {
background-color:#CCCCCC;
font-family:Arial;
font-size:12px;
}
form {
margin:0;
}
hr {
border:1px solid black;
height:1px;
width:75%;
}
hr.side-hr {
border:1px solid #000000;
height:1px;
}
td {
font-family:Arial;
font-size:14px;
}
pre {
font-family:Arial;
font-size:11px;
}
.alt {
color:#005599;
}
rand ganz außen-- > .outer-border {
}
.sub-header {
border-bottom:1px solid #000000;
border-top:1px solid #000000;
color:#000000;
font-family:Arial;
font-size:10px;
padding:5px;
}
.full-header {
background-color:#444444;
color:#DDDDDD;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:10px;
padding:0;
}
.footer {
background-color:#99CC33;
border:1px solid #CCCCCC;
color:#555555;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:10px;
padding:5px;
}
.button {
background-color:#FFFFFF;
border:1px solid #CCCCCC;
color:#555555;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:10px;
height:20px;
margin-top:2px;
}
.textbox {
background-color:#F8F8F8;
border:1px solid #CCCCCC;
color:#555555;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:10px;
}
.main-body {
color:#555555;
font-size:14px;
padding:4px 0 5px;
}
.side-body {
background-color:#336699;
color:white;
margin-left:10px;
margin-right:10px;
padding-left:7px;
padding-right:7px;
}
.main-bg {
color:#555555;
padding:10px 5px;
}
.border {
}
.side-border-left {
background-color:#336699;
color:#777777;
}
.side-border-right {
background-color:#336699;
color:#777777;
}
.news-footer {
background-color:#F1F1F1;
color:#555555;
font-size:10px;
padding:3px 4px 4px;
}
.capmain {
background-color:#CCCCCC;
color:black;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:14px;
font-weight:bold;
padding:2px 0 4px;
}
.scapmain {
background-color:#336699;
color:#000000;
font-family:Arial;
font-size:14px;
font-weight:bold;
padding:4px;
text-align:center;
}
.tbl-border {
background-color:#E1E1E1;
color:#555555;
}
.tbl {
background-color:#FFFFFF;
color:#555555;
font-size:11px;
padding:4px;
}
.tbl1 {
background-color:#FFFFFF;
color:#555555;
font-size:11px;
padding:4px;
}
.tbl2 {
background-color:#F1F1F1;
color:#555555;
font-size:11px;
padding:4px;
}
.forum-caption {
background-color:#F1F1F1;
color:#888888;
font-size:11px;
font-weight:bold;
padding:2px 4px 4px;
}
.quote {
background-color:#F8F8F8;
border:1px solid #BBBBBB;
color:#555555;
font-size:11px;
margin:0 20px;
padding:4px;
}
.poll {
border:1px solid #BBBBBB;
height:12px;
}
.comment-name {
color:#005599;
font-weight:bold;
}
.shoutboxname {
color:#005599;
font-weight:bold;
}
.shoutbox {
color:black;
display:block;
}
.shoutboxdate {
color:black;
font-size:10px;
}
.small {
font-size:12px;
font-weight:normal;
}
.small2 {
color:#555555;
font-size:12px;
font-weight:normal;
}
.side-small {
color:#555555;
font-size:10px;
font-weight:normal;
}
.side-label {
color:#555555;
padding:2px 2px 3px;
}
#aktiv {
background:#3366ff;
font-variant:small-caps;
font-weight:bold;
}
#aktiv_sub span{
background:#3366cc;
font-variant:small-caps;
font-weight:bold;
display: block;
text-align: center;
border-left: none;
}
table.awec_calendar th {
font-weight:normal;
}
table.awec_calendar td.current {
border:1px solid yellow;
}
table.awec_calendar td.content {
background-color:red;
}
table.awec_calendar td.empty {
background-color:gray;
}
table.awec_calendar td.weekend {
background-color:blue;
}
table.awec_list tr.odd {
background-color:green;
}
table.awec_list tr.even {
background-color:red;
}
table.awec_list tr.current {
background-color:yellow;
}
ul#Navigation {
margin-left: -5px;
}
ul#Navigation li {
background-color:#336699;
border-color:#99CC33;
border-style:solid;
border-width:0 0 1px 15px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin-left:-35px;
float: none;
position: relative;
}
ul#Navigation li ul {
position: absolute;
display:none;
}
ul#Navigation li:hover {
border-color:orange;
}
ul#Navigation li:hover ul {
background-color:#336699;
border:2px solid white;
display:block;
position:absolute;
width:100px;
}
ul#Navigation li ul li {
display:block;
float:none;
font-family:freestyle script;
list-style-type:none;
}
ul#Navigation li a {
color:white;
display:block;
font-family:freestyle script;
font-size:24px;
padding:4px 2px 2px 15px;
}
ul#Navigation li a:hover {
display:block;
font-weight:bold;
height:100%;
padding:4px 2px 2px 15px;
text-decoration:none;
}
ul#Navigation li ul li a {
border:medium none;
color:white;
}
ul#Navigation li h3 {
border:medium none;
}
ul#Navigation li ul li {
border:medium none;
}
ul#Navigation li ul li:hover {
border-bottom:1px solid orange;
}
ul#Navigation li ul li a:hover {
font-weight:bold;
text-decoration:none;
}
* html ul#Navigation li {
margin-left: 0px;
}
:first-child + html ul#Navigation li {
}
* html ul#Navigation li ul {
}
:first-child + html ul#Navigation ul {
background-color:silver;
padding-bottom:0.4em;
}
* html ul#Navigation a, * html ul#Navigation span {
}
ul#Navigation a {
display: block;
}
der quellcode der Seite:
<ul id='Navigation'><li><a href="index.php?menu=Aktionen">Aktionen</a></li>
<li><a href="viewpage.php?page_id=10&menu=Über uns">Über uns</a>
<ul>
<li><a href="viewpage.php?page_id=9&menu=Über uns&sub=Leiterrunde">Leiterrunde</a></li>
<li><a href="viewpage.php?page_id=1&menu=Über uns&sub=Vorstand">Vorstand</a></li>
<li><a href="articles.php?menu=Über uns&sub=Chronik">Chronik</a></li>
<li><a href="viewpage.php?page_id=16&menu=Über uns&sub=Presse">Presse</a></li>
</ul>
</li>
<li><a href="viewpage.php?page_id=8&menu=Kälbchen">Kälbchen</a></li>
<li><a href="infusions/slooz_expose/index.php?menu=Bildergallerie">Bildergallerie</a></li>
<li><a href="contact.php?menu=Kontakt">Kontakt</a>
<ul>
<li><a href="weblinks.php?menu=Kontakt&sub=Links">Links</a></li>
<li><a href="anfrage.php?menu=Kontakt&sub=Verleih">Verleih</a>
</li>
</ul>
</li>
<li><a href="infusions/guest_book/guest_book.php?menu=Gästebuch">Gästebuch</a></li></ul>
Hi,
Ich habe eine Navigation nach folgendem Vorbild gemacht:
http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern
Leider funktioniert sie nur im FF korrekt und im IE erscheinen die Untermenüs nicht!
aus dieser Seite:
"Um ein dynamisches Einblenden der Unternavigation auch im Internet Explorer 5 und 6 und anderen Browsern ohne ausreichende CSS-Implementierung zu ermöglichen, bleibt Ihnen derzeit nur eine Realisierung über JavaScript."
Wer kann helfen???? Verzweifle langsam!!!!
Nein, Du vervierfelst - anders ist die Vervierfachung der Satzzeichen nicht zu erklären. Aber auch eine Vervierfelung ist keine Legitimierung für das Posten von ca. dreihundertsechzig Zeilen Code.
Cheatah
Achso...
schon klar!
Ich brauche das ja auch bloß für den IE 7!
Hi smepal!
Ich brauche das ja auch bloß für den IE 7!
Dann musst du aber eine konkrete Problembeschreibung dazuliefern. Die Wenigsten haben die Zeit, deinen Quellcode abzukopieren und auszuprobieren. Zumal er nicht mal valide ist. Minimiere dein Problem auf einen wenige Zeilen großen Beispielcode und beschreibe die gewünschte Wirkung und was noch nicht klappt. Dann bekommst du sicher auch eine hilfreiche Antwort.
Und validiere deinen HTML-Code!
MfG H☼psel
Hi smepal!
Ich brauche das ja auch bloß für den IE 7!
Dann musst du aber eine konkrete Problembeschreibung dazuliefern. Die Wenigsten haben die Zeit, deinen Quellcode abzukopieren und auszuprobieren. Zumal er nicht mal valide ist. Minimiere dein Problem auf einen wenige Zeilen großen Beispielcode und beschreibe die gewünschte Wirkung und was noch nicht klappt. Dann bekommst du sicher auch eine hilfreiche Antwort.Und validiere deinen HTML-Code!
MfG H☼psel
Bitte schön:
Also es wird alles korrekt angezeigt, nur leider funktioniert beim IE das display: block
beim ul#Navigation li:hover ul
nicht!
Hier nochmal der relevante css code:
ul#Navigation {
margin-left:-5px;
}
ul#Navigation li {
background-color:#336699;
border-color:#99CC33;
border-style:solid;
border-width:0 0 1px 15px;
float:none;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin-left:-35px;
}
ul#Navigation li ul {
display:none;
position:absolute;
}
ul#Navigation li:hover {
border-color:orange;
}
ul#Navigation li:hover ul {
background-color:#336699;
border:2px solid white;
display:block;
position:absolute;
width:100px;
}
ul#Navigation li ul li {
display:block;
float:none;
font-family:freestyle script;
list-style-type:none;
}
ul#Navigation li a {
color:white;
display:block;
font-family:freestyle script;
font-size:24px;
padding:4px 2px 2px 15px;
}
ul#Navigation li a:hover {
display:block;
font-weight:bold;
height:100%;
padding:4px 2px 2px 15px;
text-decoration:none;
}
ul#Navigation li ul li a {
border:medium none;
color:white;
}
ul#Navigation li h3 {
border:medium none;
}
ul#Navigation li ul li {
border:medium none;
}
ul#Navigation li ul li:hover {
border-bottom:1px solid orange;
}
ul#Navigation li ul li a:hover {
font-weight:bold;
text-decoration:none;
}
* html ul#Navigation li {
margin-left:0;
}
:first-child + html ul#Navigation li {
}
* html ul#Navigation li ul {
}
:first-child + html ul#Navigation ul {
background-color:silver;
padding-bottom:0.4em;
}
* html ul#Navigation a, * html ul#Navigation span {
}
ul#Navigation a {
display:block;
}
Und der dazugehörige HTML Code:
<UL ID='Navigation'>
<LI>
<A HREF="index.php?menu=Aktionen">Aktionen</A>
</LI>
<LI>
<A HREF="viewpage.php?page_id=10&menu=Wir">Wir</A>
<UL>
<LI>
<A HREF=
"viewpage.php?page_id=9&menu=Wir&sub=Leiterrunde">Leiterrunde</A>
</LI>
<LI>
<A HREF=
"viewpage.php?page_id=1&menu=Wir&sub=Vorstand">Vorstand</A>
</LI>
<LI>
<A HREF="articles.php?menu=Wir&sub=Chronik">Chronik</A>
</LI>
<LI>
<A HREF=
"viewpage.php?page_id=16&menu=Wir&sub=Presse">Presse</A>
</LI>
</UL>
</LI>
<LI>
<A HREF="viewpage.php?page_id=8&menu=Kaelbchen">Kaelbchen</A>
</LI>
<LI>
<A HREF=
"infusions/slooz_expose/index.php?menu=Bildergallerie">Bildergallerie</A>
</LI>
<LI>
<A HREF="contact.php?menu=Kontakt">Kontakt</A>
<UL>
<LI>
<A HREF="weblinks.php?menu=Kontakt&sub=Links">Links</A>
</LI>
<LI>
<A HREF="anfrage.php?menu=Kontakt&sub=Verleih">Verleih</A>
</LI>
</UL>
</LI>
<LI>
<A HREF=
"infusions/guest_book/guest_book.php?menu=Gaestebuch">Gaestebuch</A>
</LI>
<LI STYLE='border: none;'>
<H3>
Intern
</H3>
</LI>
<LI>
<A HREF="forum/index.php?menu=Forum">Forum</A>
</LI>
<LI>
<A HREF="viewpage.php?page_id=14&menu=Materialdb">Materialdb</A>
</LI>
<LI>
<A HREF="infusions/site_map/site_map.php?menu=SiteMap">SiteMap</A>
</LI>
</UL>
Hallo,
vervierfelst
!? ... was isn das für ein neues Wort. Hast du das schon patentieren lassen ^^
MfG. Christoph
Hi,
vervierfelst
!? ... was isn das für ein neues Wort.
ein kreauntiefes ;-)
Hast du das schon patentieren lassen ^^
Nein, ich arbeite derzeit am Patent für ein System und Verfahren, welches mittels der Anmeldung von Trivialideen zum Patent Geld aufgrund von Patentrechtsverletzungsklagen generiert. Es ist verdammt schwierig, die Patentschrift so zu formulieren, dass es kein Prior Art gibt!
Cheatah
Nein, Du vervierfelst - anders ist die Vervierfachung der Satzzeichen nicht zu erklären. Aber auch eine Vervierfelung ist keine Legitimierung für das Posten von ca. dreihundertsechzig Zeilen Code.
Wenn man bei der Verwendung eines einzigen Satzzeichens schon verzweifelt ist, müsste man dann bei einer Vervierfachung der Satzzeichen nicht verachtfelt sein?
Hi,
Wenn man bei der Verwendung eines einzigen Satzzeichens schon verzweifelt ist, müsste man dann bei einer Vervierfachung der Satzzeichen nicht verachtfelt sein?
eher verfünftelt. Aber warum sollte man bei der Verwendung eines einzigen Satzzeichens schon verzweifelt sein?
Cheatah
Wenn man bei der Verwendung eines einzigen Satzzeichens schon verzweifelt ist, müsste man dann bei einer Vervierfachung der Satzzeichen nicht verachtfelt sein?
eher verfünftelt.
Mir gefällt Multiplikation besser als Addition. :-)
Aber warum sollte man bei der Verwendung eines einzigen Satzzeichens schon verzweifelt sein?
Ich habe gehört, es soll (in einem fernen Land) Leute geben, deren Friseur von Kunden weiß, deren Bekannte entfernte Verwandte haben, die auch bei Verzweiflung nur ein einziges Satzzeichen verwenden.