LI und Grafix richtig ausrichten

Warez Dino

Hallo ich mache grade ein Design bin auch fast fertig aber die navi damit habe ich mal wida probleme

Also so sieht sie aus
[Blockierte Grafik: http://img3.imagebanana.com/img/flw9qeef/Zwischenablage02.png]

So soll sie aussehen
[Blockierte Grafik: http://img3.imagebanana.com/img/7xi0qhj1/Zwischenablage02.png]

HTML Code

Code

<div id="navi_head"><div id="navi">
    <ul>
      [*]Home
      [*]Board
      [*]Downloads
      [*]Kontakt
      [*]Impressum
    [/list]
     </div>
  </div>

CSS Code

Code

#navi li {
	background-image:url(../image/nav_button.png);
	height:43px;
	width:197px;
	display:block;
	font-size:15px;
	text-align:center;
	font-weight:bold;
	margin-top:5px;
	font-variant:small-caps;
}
#navi_head {
	background-image:url(../image/navi_head.png);
	width:197px;
	height:47px;
	float:right;
	margin-right:12px;
}

Alles anzeigen

Die Schrift auf denn Buttons muss noch ein stück runter weil sie so einfach zu hoch ist und ja das soll am ende halt wie auf dem 2ten Picture aussehen.

Ich hoffe jemand kann mir helfen wie ich das richten kann.

Dodo

Code

#navi ul
{ margin:47px 0px 0px;
  padding:0px;
}
#navi li { 
   background-image:url(../image/nav_button.png); 
   height:43px; 
   width:197px; 
   display:block; 
   font-size:15px; 
   text-align:center; 
   font-weight:bold;
   padding:10px 0px 0px;
   margin-top:5px 0px 0px; 
   font-variant:small-caps; 
} 
#navi_head { 
   background-image:url(../image/navi_head.png); 
   width:197px; 
   height:47px; 
   float:right; 
   margin-right:12px; 
}

Alles anzeigen

Warez Dino

[Blockierte Grafik: http://img3.imagebanana.com/img/yson767s/Zwischenablage02.png]

So sieht es nun aus weil so wie du gesagt hast haben sie die Buttons Repeatet

Wie bekomme ich denn font runda ohne das die buttons mit rutschen oder sich repeaten ?

Dodo

Code

#navi ul 
{ margin:47px 0px 0px; 
  padding:0px; 
} 
#navi li { 
   background-image:url(../image/nav_button.png);
   background-repeat:no-repeat; 
   height:43px; 
   width:197px; 
   display:block; 
   font-size:15px; 
   text-align:center; 
   font-weight:bold; 
   padding:5px 0px 0px; 
   margin-top:5px 0px 0px; 
   font-variant:small-caps; 
} 
#navi_head { 
   background-image:url(../image/navi_head.png); 
   width:197px; 
   height:47px; 
   float:right; 
   margin-right:12px; 
}

Alles anzeigen

sejuma

Im IE 6 verursacht float: right im Zusammenhang mit margin-right den IE-Doubled-Float-Margin-Bug

Gib deshalb dem #navi_head noch ein

Code

display: inline;

Tags