zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Drop Down navi und CSS

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.09.2006, 11:08
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.09.2006
Beiträge: 18
caos befindet sich auf einem aufstrebenden Ast
Standard Drop Down navi und CSS

Ich habe ein Problem mit der Drop Down navi. Ich bekomme alles schön eingebunden und es funktioniert auch soweit alles okay.

Aber wenn ich probiere bilder als Hintergrund einzubauen dann werden diese einfach nicht angezeigt. Denn CSS Teil habe ich ausgelagert. Er wird auch akzetiert (wenn ich Farben ändere sehe ich auch die neuen Farben.)

Oder ist es einfacher den Verlauf des Hintergrundbildes in CSS anzugeben.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Dynamische Navigationsleiste</title>

<style type="text/css">
  div#Tmenu {
    font-size: 94%;
    width: 39.8em;
    padding: 0.8em;
    border: 1px solid white;
    background-color: #eee;
  }
  * html div#Tmenu {
    width: 41.4em;
    w\idth: 39.8em;  /* IE 6 in standards-compliant mode */
  }
  div#Tmenu div {
    clear: left;
  }
  ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }

  ul#Navigation li {
    list-style: none;
    float: left;
    position: relative;
    margin: 0.4em; padding: 0;
  }
  * html ul#Navigation li {
    margin-bottom: -0.4em;
  }

  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 1.8em; left: -0.4em;
  }
  * html ul#Navigation li ul {
    left: -1.5em;
    lef\t: -0.4em;
  }
  ul#Navigation li ul li {
    float: none;
    display: block;
    margin-top: 0.2em; margin-bottom: 0.2em;
  }

  ul#Navigation a, ul#Navigation span {
    display: block;
    width: 7em;
    font-family: "Trebuchet MS", "Century Gothic", Helvetica, Arial, sans-serif;
    text-decoration: none; font-weight: bold;
    padding: 0.23em 0.97em 0.17em 1.03em;
    border: 1px solid #600;
    border-left-color: #ea0; border-top-color: #ea0;
    color: white; background-color: #c00;
  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 9.2em;
    w\idth: 7em;  /* IE 6 in standards-compliant mode */
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell:hover {
    padding: 0.17em 1.03em 0.23em 0.97em;
    border-color: #ea0;
    border-left-color: #900; border-top-color: #900;
    background-color: #e00;
  }
  ul#Navigation li ul a:hover {
    border-color: #900;
  }
  li a#aktuell {
    border-right-color: #300; border-bottom-color: #300;
    background-color: #900;
  }
  ul#Navigation li ul span {
    border-right-color: #c96; border-bottom-color: #c96;
    color: #900; background-color: white;
  }
  ul#Navigation li a:active, ul#Navigation li:hover a:active {
    color: black; background-color: #f00;
  }

/* dynamisches Ein-/Ausblenden */
  ul#Navigation li ul {
    display: none;
  }
  ul#Navigation li:hover ul {
    display: block;
    background: #eee;
  }
</style>

<!--[if IE]>
<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
  function hoverIE() {
    var LI = document.getElementById("Navigation").firstChild;
    do {
      if (sucheUL(LI.firstChild)) {
        LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
      }
      LI = LI.nextSibling;
    }
    while(LI);
  }

  function sucheUL(UL) {
    do {
      if(UL) UL = UL.nextSibling;
      if(UL && UL.nodeName == "UL") return UL;
    }
    while(UL);
    return false;
  }

  function einblenden() {
    var UL = sucheUL(this.firstChild);
    UL.style.display = "block"; UL.style.backgroundColor = "#eee";
  }
  function ausblenden() {
    sucheUL(this.firstChild).style.display = "none";
  }

  window.onload=hoverIE;
}
</script>
<![endif]-->

</head>
<body>

<div id="Tmenu">
  <ul id="Navigation">
    <li><a id="aktuell" href="#Beispiel">Seite 1</a>
      <ul>
        <li><span>aktuelle Seite</span></li>
        <li><a href="#Beispiel">Seite 1b</a></li>
        <li><a href="#Beispiel">Seite 1c</a></li>
        <li><a href="#Beispiel">Seite 1d</a></li>
      </ul>
    </li>
    <li><a href="#Beispiel">Seite 2</a></li>
    <li><a href="#Beispiel">Seite 3</a>
      <ul>
        <li><a href="#Beispiel">Seite 3a</a></li>
        <li><a href="#Beispiel">Seite 3b</a></li>
        <li><a href="#Beispiel">Seite 3c</a></li>
      </ul>
    </li>
    <li><a href="#Beispiel">Seite 4</a></li>
  </ul>
  <div></div>
</div>

</body>
</html>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.09.2006, 12:05
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von caos
Aber wenn ich probiere bilder als Hintergrund einzubauen
Zeig bitte genau diesen Code - und zwar als Link. Probleme mit Hintergrundbildern sind ohne Hintergrundbilder nicht nachvollziehbar.

Zitat:
Oder ist es einfacher den Verlauf des Hintergrundbildes in CSS anzugeben.
Diesen Satz (oder ist es eine Frage?) verstehe ich nicht.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.09.2006, 12:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.09.2006
Beiträge: 18
caos befindet sich auf einem aufstrebenden Ast
Standard

Problem 1 Page läuft offline unter Xampp.


und zu 2 ich weiß nicht ob sich wie background-color:#000000; auch so ein Verlauf bilden lässt.
Mit Zitat antworten
  #4 (permalink)  
Alt 20.09.2006, 12:15
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von caos
Problem 1 Page läuft offline unter Xampp.
Und jetzt? Willst du auf einen Hellseher warten? Stell's online.

Du zeigst oben nicht einmal den Code, der das Problem zeigt, sondern einen "funktionierenden".
Es ist anzunehmen, dass du etwas falsch machst. Solange du aber nicht zeigst, was du machst, kann dir auch niemand sagen, was du falsch machst.
Du verstehst?


Zitat:
ich weiß nicht ob sich wie background-color:#000000; auch so ein Verlauf bilden lässt.
Nein.
Mit Zitat antworten
  #5 (permalink)  
Alt 20.09.2006, 12:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.09.2006
Beiträge: 18
caos befindet sich auf einem aufstrebenden Ast
Standard

hmm ich weiß es ja. Mal sehen wie ich es online bekomme. Axo ja so gehts wohl mom
Mit Zitat antworten
  #6 (permalink)  
Alt 20.09.2006, 13:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.09.2006
Beiträge: 18
caos befindet sich auf einem aufstrebenden Ast
Standard

http://www.sport-greifenberg.de/drop/index.html

So hier ist der link.

Nun das was ich nicht hinbekommen habe. IE macht das Menü nicht auf!! Wird am Java liegen. Das sollte ich selber hinbekommen.

Nun das Problem das beim aufmachen des Drop Menus der Hintergrund nur grau sein soll und nicht das Hintergrundbild behalten soll. Und die Größe soll sich dem Text anpassen. Leider bekomme ich das einfach nicht hin.

Schonmal einen riesen Dank an alle.
Mit Zitat antworten
  #7 (permalink)  
Alt 20.09.2006, 13:40
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von caos
Nun das Problem das beim aufmachen des Drop Menus der Hintergrund nur grau sein soll und nicht das Hintergrundbild behalten soll.
Dann leg das für die Listenelemente der zweiten Listenebene so fest.
ul#Navigation li ul li {[...] background-image:none;}

Zitat:
Und die Größe soll sich dem Text anpassen.
Die Größe von was soll sich an welchen Text anpassen?
Mit Zitat antworten
  #8 (permalink)  
Alt 20.09.2006, 14:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.09.2006
Beiträge: 18
caos befindet sich auf einem aufstrebenden Ast
Standard

Naja wenn das Drop Menü aufgeht und da stehen zu lange begriffe wie Stollenschuhe. Dann sollte das Feld diese Länge haben.
Mit Zitat antworten
  #9 (permalink)  
Alt 20.09.2006, 20:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.09.2006
Beiträge: 18
caos befindet sich auf einem aufstrebenden Ast
Standard

So ich denke mal ich bin ganz gut voran gekommen.

Habe den aktuellen Stand hochgeladen. Nur beim öffen des Menüs ist die Textlänge noch nicht langgenug. hat hier wer einen Lösungsvorschlag.

mfg
CaoS
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Drop Down zestückelt... Darkness1 (X)HTML 1 19.10.2009 10:41
IE 6 & 7 Drop Down Navigation Fehler Zak CSS 9 09.07.2009 11:50
CSS: Menü, IE 6 und Drop down Probleme HaraldMenza (X)HTML 14 09.10.2007 10:01
Drop down Menü aus Gif Bild Calistus CSS 1 16.10.2006 10:49
Drop Down Menü Laiwan CSS 3 01.09.2005 15:08


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:17 Uhr.