1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

WordPress Icons und Textlinks in Navigation kombinieren

Dieses Thema im Forum "Weblogs, Wikis und andere Wissenspeicher" wurde erstellt von Melli, 5 Februar 2011.

  1. Melli

    Melli Neuer Benutzer

    Hi zusammen,

    ich benutze WordPress 3.0.4. und hab mich dran gegeben den Textlinks in der Navigationsleiste im Header jedes ein eigenes Icon zu verpassen.
    Nach ner weile herum experimentieren gelang es mir schließlich die Icons so einzubinden dass die Seite noch valide ist.

    Aber .... die Grafiken sehen ein wenig in der Zeile verrutscht aus ( siehe Screen 1) ich hätte es gerne so wie in meinem Forum WBB3 (Screen 2 ) dass die Schrift mittig der Grafik gesetzt ist.

    Ist dies irgendwie möglich?

    Sehe im moment den Wald vor lauter Bäumen nicht.

    Hier mal der Code den ich dazu verwendet habe:

    Code:
    <div id="catnav">
    <ul id="nav">
      [*][url="http://www.maintz.org"][img]/blog_icons/home.png[/img]Home[/url]
    [*][url="http://www.maintz.org/impressum"][img]/blog_icons/impress.png[/img]Impressum[/url]  
    [*][url="http://www.maintz.org/datenschutzerklarung"][img]/blog_icons/data.png[/img]Datenschutzerklärung[/url]  
    [*][url="http://www.maintz.org/tuts"][img]/blog_icons/tutorials.png[/img]Mellis Tutorials[/url]  
    [*][url="http://www.maintz.org/linkliste"][img]/blog_icons/world.png[/img]Linkliste[/url]
    [*][url="http://www.maintz.org/forum"][img]/blog_icons/forum.png[/img]Forum[/url]  
    [/list]
    </div>  

    Edit;

    Ich setze auch mal die Stelle aus der Style CSS hier rein vllt. hilft euch das auh weiter.

    Code:
    /* Menu */
    
    #catnav {
      margin: 57px 0 20px -10px;
      padding:0;
      clear: both;
      height: 50px;
      width: 960px;
      }
    
    #nav {
      list-style: none;
      margin: 0;
      padding: -10px 0 0 0;
      }
    	
    #nav ul {
      margin: 0;
      padding: 0;
      }
    
    #nav li {
      float: left;
      margin: 0;
      padding: 0;
      }
    
    #nav a {
      display: block;
      line-height: 44px;
      margin: 5px 5px 0 10px;
      padding: -5px 20px 5px 15px;
      fontsize: 10pt Arial;
      color: #000;
      
      }
    
    #nav li a:hover {
      color: #000;
      text-decoration: none;
      display: block;
      }
    
    #nav li ul {
      list-style: none;
      position: absolute;
      width: 100px;
      left: -999em;
      }
    
    #nav li:hover ul, #nav li.sfhover ul {
      left: auto;
      }
    	
    #nav li li {
      float: left;
      margin: 0;
      padding: 0;
      width: 100px;
      }
    	
    #nav li li a {
      width: 100px;
      height: 24px;
      line-height: 24px;
      color: #d5f0fe;
      border-top: 1px solid #131f27;
      background: #040404;
      margin: 0;
      padding: 1px 10px 1px 10px;
      }
    	
    #nav li li a:hover {
      border-top: 1px solid #131f27;
     margin: 0;
      background: #000;
      padding: 1px 10px 1px 10px;
      }
    
    #nav li:hover, #nav li.sfhover { /* prevents IE7 drop-down menu bug (focus on a page element prevents nested menus from disappearing) */
      position: static;
      }
    
    
     

    Anhänge:

  2. rellek

    rellek relativ sensationell Mitarbeiter

    Da fehlt dir wohl eine kleine CSS-Zeile:
    Code:
    #nav img {
         vertical-align: middle;
    }
    (ungetestet)
     
  3. Melli

    Melli Neuer Benutzer

    Danke das wars schon. ;)
     

Diese Seite empfehlen