WordPress Icons und Textlinks in Navigation kombinieren

[Melli]

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:

<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.

/* 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;
  }

 

[rellek]

Da fehlt dir wohl eine kleine CSS-Zeile:

#nav img {
     vertical-align: middle;
}

(ungetestet)

 

[Melli]

Danke das wars schon.