tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
6
ZUGRIFFE
270
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. #1
    ascawath ascawath ist offline Mitglied Bronze
    Registriert seit
    Aug 2011
    Beiträge
    27
    Hallo lieber Expertin, Experte,

    Ich habe versucht ein Menü mit css zu erstellen ( listen)
    Das klappt auch soweit so gut, nur wenn ich das ganze jetzt mit relativen angaben versehen möchte, verschiebt sich das ganze und man kann nichts mehr erkennen:
    hier ein link: http://newrockstation.dyndns.org/kst...er/ul_test.php

    css datei:
    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    
    #navMenu {
        margin: 0;
        padding:0;
    }
    #navMenu ul {
        margin:0;
        padding:0;
        line-height:18px;
    }
     
    #navMenu li {
        margin:0;
        padding:0;
        list-style:none;
        float:left;
        position:relative;
        background-image: url(./bilder/Mn.png);
    }
     
    #navMenu ul li a {
        text-align:center;
        font-family: Comic Sans MS;
        text-decoration: none;
        height: 18px;
        max-width:189.91px;
        width: 19.7%;
        display: block;
        color: white;
        border: 1px solid white;
        text-shadow: 3px 3px 3px black;
    }
     
    #navMenu ul ul {
        position: absolute;
        visibility: hidden;
        top: 20.9px;
    }
     
    #navMenu ul li:hover ul {
        visibility:visible;
    }
     
    #navMenu li:hover {
        background-image: url(./bilder/Mh.png);
    }
     
    #navMenu ul li:hover ul li a:hover {
        background-image: url(./bilder/Mh.png);
        color: black;
    }
     
    #navMenu a:hover {
        color:black;
    }

    Und Quellcode von Ul_test.php
    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    
    <html>
    <head>
    <title>Ul-Test</title>
    <link rel="stylesheet" href="menu-kopie.css" type="text/css" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    </head>
    <body>
    <div id="wrapper">
    <div id="navMenuu">
    <ul><!-- Anfang Menu -->
    <li id="start">Start
    </li>
    </ul>
    </div>
    <div id="navMenu">
    <ul>
    <li><a href="#"> Test</a>
    <ul>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    </ul>
    </li>
    <li><a href="#"> Test</a>
    <ul>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    </ul>
    </li>
    <li><a href="#">Test</a>
    </li>
    <li><a href="#">Test</a>
    </li>
    </ul>
    </div>
    </div>
    </body>
    </html>
    Danke für deine/ eure Hilfe
     

  2. #2
    Avatar von spicelab
    spicelab spicelab ist offline ZENmechanic
    Registriert seit
    Feb 2010
    Beiträge
    1.744
    Ist mit relativer Angabe die width:19.7%-Regel gemeint?

    Wenn ja, deklariere sie und max-width:189.91px nicht für <a>, sondern für das <li>-Element.
     

  3. #3
    ascawath ascawath ist offline Mitglied Bronze
    Registriert seit
    Aug 2011
    Beiträge
    27
    Ja das meinte ich mit der relativen Angabe. Der Link geht erst ab heute Nachmittag, so gegen 16:00 ( läuft über Xampp. Ok werde ich ändern, ich melde mich dann nochmal.

    Danke für deine schnelle Antwort.

    LG Ascawath
     

  4. #4
    Avatar von hela
    hela hela ist offline Mitglied Smaragd
    tutorials.de Premium-User
    Registriert seit
    Oct 2004
    Beiträge
    1.123
    Hallo,

    Pixel sind diskrete Werte, hier z.B. Bildpunkte. Es gibt kein Gerät, das 189.91px darstellen kann und deshalb ist die Angabe von Pixelwerten auch nur als ganzzahlige Größe sinnvoll.
     

  5. #5
    ascawath ascawath ist offline Mitglied Bronze
    Registriert seit
    Aug 2011
    Beiträge
    27
    Danke, der Link funktioniert jetzt, habe das jetzt auch die width und max-width bei li eingetrangen, sieht aber bei den untermenüs komisch aus. menu.css
    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    
    #navMenu {
        margin: 0;
        padding:0;
    }
    #navMenu ul {
        margin:0;
        padding:0;
        line-height:18px;
    }
     
    #navMenu li{
        margin:0;
        padding:0;
        list-style:none;
        float:left;
        position:relative;
        background-image: url(./bilder/Mn.png);
        max-width:189.91px;
        width: 19.7%;
    }   
        
    #navMenu ul li a {
        text-align:center;
        font-family: Comic Sans MS;
        text-decoration: none;
        height: 18px;
        display: block;
        color: white;
        border: 1px solid white;
        text-shadow: 3px 3px 3px black;
    }
     
    #navMenu ul ul {
        position: absolute;
        visibility: hidden;
        top: 20.9px;
    }
     
    #navMenu ul li:hover ul {
        visibility:visible;
    }
     
    #navMenu li:hover {
        background-image: url(./bilder/Mh.png);
    }
     
    #navMenu ul li:hover ul li a:hover {
        background-image: url(./bilder/Mh.png);
        color: black;
    }
     
    #navMenu a:hover {
        color:black;
    }
    Geändert von ascawath (24.08.11 um 17:04 Uhr)
     

  6. #6
    Avatar von spicelab
    spicelab spicelab ist offline ZENmechanic
    Registriert seit
    Feb 2010
    Beiträge
    1.744
    Zitat Zitat von ascawath Beitrag anzeigen
    habe das jetzt auch die width und max-width bei li eingetrangen, sieht aber bei den untermenüs komisch aus.
    Und was hindert dich, für das <li> der Untermenüs eine gesonderte Breitenregelung aufzustellen?!

    Code css:
    1
    2
    3
    4
    5
    6
    7
    8
    
    #navMenu li /* <li> der oberen Menüebene */
    {
        ...
    }
    #navMenu ul ul li /* <li> der unteren Menüebene */
    {
        ...
    }
    Geändert von spicelab (25.08.11 um 07:20 Uhr) Grund: Tipp-Ex
     

  7. #7
    ascawath ascawath ist offline Mitglied Bronze
    Registriert seit
    Aug 2011
    Beiträge
    27
    danke, habe es geändert funktioniert jetzt auch, danke sehr
    Geändert von ascawath (25.08.11 um 16:27 Uhr)
     

Ähnliche Themen

  1. Frage zu relativen Pfadangaben
    Von Jan-Frederik Stieler im Forum HTML & XHTML
    Antworten: 3
    Letzter Beitrag: 13.01.09, 20:46
  2. includen mit relativen positionsangaben
    Von knolldo im Forum PHP
    Antworten: 2
    Letzter Beitrag: 23.05.08, 11:20
  3. Problem mit Relativen Links in Funktion LoadFromFile();
    Von Rubilak im Forum Borland CBuilder und VCL
    Antworten: 2
    Letzter Beitrag: 07.08.07, 16:06
  4. include von relativen pfaden
    Von ShooterMS im Forum PHP
    Antworten: 5
    Letzter Beitrag: 03.05.04, 17:40
  5. Relativen Pfad ermitteln
    Von Razorhawk im Forum PHP
    Antworten: 5
    Letzter Beitrag: 16.11.03, 14:22

Stichworte