Ergebnis 1 bis 3 von 3

Thema: Headnavigation Problem

  1. #1
    Norman_01
    Gast

    Standard Headnavigation Problem

    Hi, ich habe folgendes Problem: Ich möchte eine headnavigation auf meiner Seite haben, dies allerdings OHNE Tabellen Layout hinbekommen.
    Nun habe ich das mit den buttons und so schon alles hinekommen, mein einziges Problem ist jezt nur nohc wir ich ne hintergrundleiste hinter die buttons bekomme. Mein Code sieht wie folgt aus:

    Code:
    <html>
    <head>
    <title>Test</title>
    <style type="text/css">
    <!--
    a#menu &#123;display&#58;block; text-algin&#58;center; text-decoration&#58;none; width&#58;200px; padding-top&#58;16.5px; padding-bottom&#58;16.5px;
           font-size&#58;14px; font-family&#58;Verdana, Arial, sans-serif; background-image&#58;url&#40;images/button_n.gif&#41;;&#125;
    
    a#menu&#58;hover   &#123;background-image&#58;url&#40;images/button_hov.gif&#41;;&#125;
    a#menu&#58;active  &#123;background-image&#58;url&#40;images/button_hov.gif&#41;;&#125;
    a#menu&#58;visited &#123;background-image&#58;url&#40;images/button_hov.gif&#41;;&#125;
    
    a#active &#123;display&#58;block; text-algin&#58;center; text-decoration&#58;none; width&#58;200px; padding-top&#58;16.5px; padding-bottom&#58;16.5px;
             font-size&#58;14px; font-family&#58;Verdana, Arial, sans-serif; background-image&#58;url&#40;images/button_after.gif&#41;;&#125;
    
    a#active&#58;hover   &#123;background-image&#58;url&#40;images/button_after.gif&#41;;&#125;
    a#active&#58;active  &#123;background-image&#58;url&#40;images/button_after.gif&#41;;&#125;
    a#active&#58;visited &#123;background-image&#58;url&#40;images/button_after.gif&#41;;&#125;
    
    A&#58;link &#123;
    COLOR&#58; #FFFFFF; TEXT-DECORATION&#58; underline; FONT-STYLE&#58; normal
    &#125;
    A&#58;visited &#123;
    COLOR&#58; #FFFFFF; TEXT-DECORATION&#58; underline; FONT-STYLE&#58; normal
    &#125;
    A&#58;active &#123;
    COLOR&#58; #FFFFFF; TEXT-DECORATION&#58; underline; FONT-STYLE&#58; normal
    &#125;
    A&#58;hover &#123;
    COLOR&#58; #D00000; TEXT-DECORATION&#58; underline; FONT-STYLE&#58; normal
    &#125;
    
    #header &#123;
    float&#58;left;
    width&#58;100%;
    line-height&#58;normal;
    &#125;
    
    #header ul &#123;
    margin&#58;0;
    padding&#58;0;
    list-style&#58;none;
    &#125;
    
    #header li &#123;
    float&#58;left;
    margin&#58;0;
    padding&#58;0;
    &#125;
    
    #header a &#123;
    display&#58;block;
    &#125;
    
    -->
    </style>
    </head>
    <div id="header">
     <ul>[*]<center>Home</center>[*]<center>Extras</center>[*]<center>Links</center>[/list]
    </div>
    </html>
    Nun möchte ich, dass in der oberen Leiste im Hintergrund noch eine Grafik namesn button_pl.gif auftaucht, die eine Leiste bildet und über die gesamte bildschrimbreite geht (width="100%"). Dazu habe ich mit bereits folgendes Totorial angesehn: http://www.thestyleworks.de/tut-art/listnav3.shtml
    So ungefähr soll es dann mal aussehen. Aber eben nicht ganz genau so, denn wenn ich es mache, wie dort erklärt funktioniert es nicht richtig.

    Ausserdem wäre es nett, wenn mir jemand sagen könnte, wie ich den buttontext horizontal und vertikal Zentriere. (mit text-algin:center; und text-valgin:middle; habe ichs schon versucht, jedoch funktionierte dies nicht sonderlich gut, und daher benutze ich momentan für die horizontale <center> und für die vertikale padding-top und padding-bottom statt height, was allerdings keine besonders elegante methode ist.)

    Wäre echt supernett, wenn ihr mir helfen könntet. Danke schonmal im Voraus.
    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
    Gast

    Standard

    das hier kommt in die style-Anweisung

    Code:
    #header &#123;background-image&#58;url&#40;images/...........gif&#41;;&#125;
    Das zentrieren kann so nicht klappen, Du schreibst die Befehle
    falsch. Es heißt VALIGN und nicht VALgiN

  3. #3
    Forum Guru
    Registriert seit
    14.06.2004
    Ort
    Schleswig-Holstein
    Beiträge
    5.439
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Moin!

    Nimm mal statt der padding-(bottom/top) die Höhe des Button als "line-height:24px" (wenn der Button 24px hoch ist) - damit erreichst du die vertikale Zentrierung.

    Für die horizontale Zentrierung wie der Gast schon sagte "text-align:center".

    G.a.d.M.

    Ronald

Stichworte

Berechtigungen

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