Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 17

Thema: Menü per css

  1. #1
    Teeny
    Registriert seit
    29.06.2007
    Beiträge
    28
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Menü per css

    Hallo,

    hab da mal wieder etwas gefunden, wo ich net wirklich weiter komm, drum bitte ich Euch um Hilfe. Habe mal ansatzweise ein Menü erstellt (fast abgetippt), dass i-wie net richtig funktioniert: http://don1909.lima-city.de/sonstiges/Test_css.htm
    Die Vorlage dazu habe ich von hier: http://barrierefrei.e-workers.de/wor...cks/menues.php

    Ich möchte eben ein Menü haben das aus einer Spalte und 7 Zeilen besteht, die ersten 5 Zeilen sollen auch weiterlinken, die letzten beiden sind noch nicht fertig.
    Die Farben anzupassen dürften für mich net das großte Problem sein, sie nach meinen Vorstellungen zu verändern.
    Jedoch wie man sieht, kommt man nicht ins Untermenü, außerdem weiß ich nicht wie ich es nach meinen wünschen positionieren kann...

    Hier noch das ganze Script:

    Code:
    <html>
    
    <head>
    <meta name="GENERATOR" content="Microsoft FrontPage 5.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Menü Letztes Spiel Nächstes Spiel Ergebnisse Tabelle Kreuztabelle 
    Fieberkurve Informationen</title>
    <style type="text/css">
    
    #menuebox &#123;
    position&#58; relative;
    height&#58; 30px;
    &#125;
    .stupidie &#123;
    display&#58; none;
    &#125;
    #menue &#123;
    position&#58;absolute;
    top&#58; 2px;
    left&#58; 0;
    z-index&#58; 200;
    &#125;
    
    #menue .aussen &#123;
    float&#58; left;
    display&#58; block;
    overflow&#58; hidden;
    width&#58; 8em;
    height&#58; 1.3em;
    font-weight&#58; bold;
    text-align&#58; center;
    background-color&#58; #dec79a;
    color&#58; #513913;
    border&#58; 1px solid;
    border-color&#58; #d0843e #78561d #78561d #d0843e;
    &#125;
    #menue .aussen&#58;hover &#123;
    heigth&#58; auto;
    background-color&#58; #624617;
    color&#58; #fff;
    &#125;
    
    a.innen-1 &#123;
    margin-top&#58; 2px;
    &#125;
    a.innen,
    a.innen-1 &#123;
    display&#58; block;
    width&#58; 7.9em;
    padding&#58; 2px 0;
    text-decoration&#58; none;
    font-weight&#58; normal;
    border-bottom&#58; 1px solid #78561d;
    background-color&#58; #ecd8ae;
    color&#58; #600;
    &#125;
    a&#58;visited.innen,
    a&#58;visited.innen-1 &#123;
    background-color&#58; #ecd8ae;
    color&#58;#555;
    &#125;
    a&#58;hover.innen,
    a&#58;hover.innen-1 &#123;
    background-color&#58; #f7eedb;
    color&#58; #900;
    &#125;
    
    span.menutag &#123;
    display&#58; block;
    cursor&#58; default;
    &#125;
    
    
    #menue &#123;
    display&#58; none;
    &#125;
    .stupidie &#123;
    display&#58; block;
    postion&#58; absolute;
    top&#58; 5px;
    left&#58; 0;
    z-index&#58; 200;
    &#125;
    
    a.auss &#123;
    float&#58; left;
    width&#58; 8em;
    height&#58; 1.4em;
    overflow&#58; hidden;
    display&#58; block;
    font-weight&#58; bold;
    text-align&#58; center;
    text-decoration&#58; none;
    background-color&#58; #dec79a;
    color&#58; #513913;
    border&#58; 1px solid;
    border-color&#58; #d0843e #78561d #78561d #d0843e;
    &#125;
    a&#58;hover.auss &#123;
    overflow&#58; visible;
    background-color&#58; #624617;
    color&#58; #fff;
    &#125;
    a&#58;hover.auss table &#123;
    display&#58; block;
    margin-top&#58; 3px;
    background-color&#58; #dec79a;
    color&#58; #400;
    border-collapse&#58; collapse;
    &#125;
    
    a.inn &#123;
    display&#58; block;
    width&#58; 7.9em;
    padding&#58; 2px 0;
    font-size&#58; 100%;
    font-weight&#58; normal;
    text-align&#58; center;
    text-decoration&#58; none;
    border-bottom&#58; 1px solid #78561d;
    background-color&#58; #ecd8ae;
    color&#58; #600;
    &#125;
    a&#58;visited.inn &#123;
    background-color&#58; #ecd8ae;
    color&#58;#444;
    &#125;
    a&#58;hover.inn &#123;
    position&#58; relative;
    background-color&#58; #f7eedb;
    color&#58; #900;
    &#125;
    span.menutag &#123;
    display&#58; block;
    cursor&#58; default;
    &#125;
    
    </style>
    </head>
    
    <body>
    <div id="menuebox">
    
    		<div id="menue">
    				<div class="aussen">
    <span class="menutag">Menü</span>
    Letztes Spiel
    Nächstes Spiel
    Ergebnisse
    Tabelle
    Kreuztabelle
    Fieberkurve 
    Informationen 
    				</div>
    		</div>
    		
    
    
    <!--&#91;if IE&#93;>
    		<div class"stupidie">
    <a class="auss" href="#"><span class="menutag">Menü</span>
    <table><tr><td>
    Letztes Spiel
    Nächstes Spiel
    Ergebnisse
    Tabelle
    Kreuztabelle
    Fieberkurve 
    Informationen 
    </td></tr></table>
    </a>
    		</div>
    <!&#91;endif&#93;-->
    
    </div>
    		
    		
    </body>
    
    </html>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Dein Link klappt leider nicht, aber dein Code funktioniert.

    Soll das dein ganzes Menue sein oder wolltest du ein "Ausklappmenue"? Als Ausklappmenue funktioniert es.

    Wenn's nur ein einfaches Menue sein soll, wo die einzelnen Links untereinander dargestellt und generell angezeigt werden sollen, dann hättest du dir nicht so viel Code-Mühe machen brauchen. Dein Beispiel dienst nämlich lediglich dazu, den IE<7 CSS-Klapp-Menue-fähig zu machen.

    Für ein einfaches Menue (ohne Klapp-Effekt beim Hover) reicht ein Code wie
    hier oder siehe
    weitere Beispiele

  3. #3
    Teeny
    Themenstarter

    Registriert seit
    29.06.2007
    Beiträge
    28
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    hmm, komisch...

    Also 1. bei mir funktioniert der link, warum auch immer^^

    Ja, ich möchte ein ausklapp Menü, nur bei mir ist es zwar da, so wie ich mir das vorstelle, wenn ich dann auf menü gehe, dass sich das aufklappt und dann so wie es sein soll runter gehe dann zieht sich das schon wieder zusammen. Ich hab sozusagen keine Chance auf den 1.-letzten unterpunkt zu kommen...

    Edit:

    Wirklich merkwürdig: Also als Standart-Browser verwende ich den IE 7, womit ich auch das oben genannte Problem hab und der Link funktioniert, war aber gerad auch nochmal mit dem Mozilla Firefox drin und siehe da, link funktioniert - seite bleibt weiß, aber warum??

    Wenn jemand was weiß, bitte schreiben, die Saison fängt bald an

    MfG
    Daniel F.

  4. #4
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Im IE 6 geht der Link und auch das Menue. Im FF geht weder Link noch Menue.

    FF erkennt den HTML-Code überhaupt nicht.
    Wenn du mal nach <body> irgendeinen Text eingibst, dann wird die Seite mit diesem Text angezeigt. Also geht auch der Link, nur wird aufgrund deines Navi-Codes nichts angezeigt.

    Ich glaub den Fehler gefunden zu haben:

    Du hast von dem barrierefreien Menue den kompletten code doppelt übernommen:
    Zunächst für die CSS-konformen Browser (FF, IE7) und darunter hast du die Style-Angaben für IE<7 geschrieben.

    Folge: Die ersten Angaben werden von denen für IE<7 überschrieben und funktionieren dann nicht mehr.

    Abhilfe:
    Verwende zwei unterschiedliche CSS-Dateien:
    eine für FF &Co und benenne die dropdown.css

    Für die Angaben für IE<7 packe die Angaben in die Datei fix-ie.css

    Das ist auf der Code-Seite des barrierefreien Menues erklärt.

    Dann binde das wie beim Quelltext der Beispielseite des barrierefreien Menues so ein:

    Code:
    <style type="text/css" media="screen">
    /*<!&#91;CDATA&#91;*/
    	@import url&#40;"css/basis.css"&#41;;
    	@import url&#40;"css/menues.css"&#41;;
    	@import url&#40;"css/dropdown/dropdown.css"&#41;;
    	@import url&#40;"css/sitemap.css"&#41;;
    	@import url&#40;"css/sitemap_baum.css"&#41;;
    /*&#93;&#93;>*/
    </style>
    <!--&#91;if IE 6&#93;>
    <link rel="stylesheet" type="text/css" href="css/dropdown/fix-ie.css" />
    <!&#91;endif&#93;-->
    <!--&#91;if lt IE 6&#93;>
    <link rel="stylesheet" type="text/css" href="css/dropdown/fix-ie55.css" />
    <!&#91;endif&#93;-->

  5. #5
    Teeny
    Themenstarter

    Registriert seit
    29.06.2007
    Beiträge
    28
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Ja danke erstmal, ich habe das im Quelltext auch schon gesehen, dass die das i-wie anders gemacht haben als ich gepostet hatte, doch ich habe noch immer keine Ahnung, wie die das meinen mit "redu[d/n]anzen", etc.

    Ich habe jetzt einfach mal angenommen, dass ich sozusagen 2 css Teile in einem gepackt habe und die voneinander trennen muss, richtig soweit?

    So, ich habe, da ich niergens auf der Seite weitere beschreibung dazu gefunden hab erstmal eine Textdatei erstellt und die dann unter dropdown.css abgespeichert mit dem innhalt des ersten Teils, dann eine weitere unter fix-ie.css mit dem zweiten Teil und das was du mir geantwortet hattest hab ich dann abgetippt im Quelltext (den Code aus dem ersten Post oben entfernt aus dem Quelltext).

    Also im Endeffekt war das ausklapp Menü net mehr da, einzig es standen die Links nebeneinander aufgereit (in beiden Browsern die ich benutze, s.o.)

    Bin noch nicht so der Experte, wie du siehst , hoffe du hast die Zeit mir dass nochmal ein bisschen näher zu erläutern...

    MfG
    Daniel F.

  6. #6
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Kannst du das alles bitte nochmal online stellen und Link angeben.
    Ist sonst schwer bzw. gar nicht zu beurteilen.
    Vermutlich stimmen jetzt noch nicht die Pfadangaben zur CSS-Datei, da du die Ordner css/dropdown evtl. nicht hast.

  7. #7
    Teeny
    Themenstarter

    Registriert seit
    29.06.2007
    Beiträge
    28
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

  8. #8
    Teeny
    Themenstarter

    Registriert seit
    29.06.2007
    Beiträge
    28
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    ok 1. Zeile oben hab ich weg, warn tippfehler, aber ab Menü bleibt alles so wie du siehst...

    am Pfad liegts auch net, hab ich auf dropdown.css und fix-ie.css verkürzt...

  9. #9
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Scheint doch am Pfad zu liegen:
    Code:
    http&#58;//don1909.lima-city.de/sonstiges/Test_css2.htm
    Deine HTML-Datei "Test_css2.htm" ist im Ordner "sonstiges"

    Jetzt lade mal die Dateien "dropdown.css" und "fix-ie55.css" ebenso in den Ordner "sonstiges".

    Dann ändere mal das
    Code:
    @import url&#40;"css/dropdown/dropdown.css"&#41;;
    in das

    Code:
    @import url&#40;"dropdown.css"&#41;;

    und das
    Code:
    <!--&#91;if IE 6&#93;>
    <link rel="stylesheet" type="text/css" href="css/dropdown/fix-ie.css" />
    <!&#91;endif&#93;-->
    <!--&#91;if lt IE 6&#93;>
    <link rel="stylesheet" type="text/css" href="css/dropdown/fix-ie55.css" />
    <!&#91;endif&#93;-->
    in das
    Code:
    <!--&#91;if IE 6&#93;>
    <link rel="stylesheet" type="text/css" href="fix-ie.css" />
    <!&#91;endif&#93;-->
    <!--&#91;if lt IE 6&#93;>
    <link rel="stylesheet" type="text/css" href="fix-ie55.css" />
    <!&#91;endif&#93;-->

  10. #10
    Teeny
    Themenstarter

    Registriert seit
    29.06.2007
    Beiträge
    28
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hehe, dass sieht immer besser aus, aber ich glaub wir kommen der Sache schon näher...

    http://don1909.lima-city.de/sonstiges/Test_css2.htm

    MfG
    Daniel F.

Ähnliche Themen

  1. CSS - Menü
    Von Questionmark im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 18.06.2008, 22:29
  2. CSS-Menü im IE?
    Von HiQ im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 29.05.2007, 22:11
  3. menü
    Von viper3000 im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 13.01.2007, 16:29
  4. CSS Menü
    Von Schodn im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 12.11.2006, 00:15
  5. menü
    Von gamecracker im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 25
    Letzter Beitrag: 17.07.2004, 22:57

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •