SCO-Design
Threadersteller
Dabei seit: 21.09.2004
Ort: BLK
Alter: 41
Geschlecht:
|
Verfasst Di 15.04.2008 15:22
Titel css horizontales Menü ausrichten |
|
|
Hallo,
ich hab ein kleines Problem mit der Ausrichtung eines horizontalen Menüs im Firefox.
Das Menü hat 6 Punkte wobei den Links jeweils eine feste Breite und dem letzen eine Breite von 100%
zugeordnet ist.
Im IE soweit kein Problem aber leider bricht er mir im FF die Liste um und setzt mir den letzen Menüpunkt
bei 100% in eine neue Zeile.
Ich hoffe ich habe mich verständlich ausgedrückt, hier der entsprechende Code.
Code: |
<!-- .html -->
<div id="tabsB">
<ul>
<li><a href="#><span>Punkt 1</span></a></li>
<li><a href="#><span>Punkt 2</span></a></li>
<li><a href="#"><span>Punkt 3</span></a></li>
<li><a href="#"><span>Punkt 4</span></a></li>
<li><a href="#"><span>Punkt 5</span></a></li>
<li><a href="#"><span>Punkt 6</span></a></li>
</ul>
</div>
<!-- .css -->
img {
border: none;
}
#box_menue{
margin:10 0 0 0;
}
#tabsB {
height:23;
background:#ffffff;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height:normal;
}
#tabsB ul {
position: relative;
margin:0;
padding:0px 0px 0 0px;
list-style:none;
height: 23;
}
#tabsB li {
position: relative;
float:left;
margin:0;
padding:0 0 0 0;
}
#tabsB a {
display:block;
float:left;
background:url("tableftB.jpg") no-repeat left top;
margin:0;
padding:0 0 0 0px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-decoration:none;
text-align:center;
border-bottom: 1px solid #bebebe;
}
#tabsB a.punkt1 {
width:110;
background:url(".tableftB.jpg") no-repeat left top;
margin:0;
padding:0 0 0 0px;
text-decoration:none;
}
#tabsB a.punkt2 {
width:120;
background:url("tableftB.jpg") no-repeat left top;
margin:0;
padding:0 0 0 0px;
text-decoration:none;
}
#tabsB a.punkt3 {
width:120;
background:url("tableftB.jpg") no-repeat left top;
margin:0;
padding:0 0 0 0px;
text-decoration:none;
}
#tabsB a.punkt4 {
width:120;
background:url("tableftB.jpg") no-repeat left top;
margin:0;
padding:0 0 0 0px;
text-decoration:none;
}
#tabsB a.punkt5 {
float:left;
display:block;
width:100%;
background:url("tableftB.jpg") no-repeat left top;
margin:0;
padding:0 0 0 0px;
text-decoration:none;
}
#tabsB a.punkt6 {
float:left;
display:block;
width:100%;
background:url("tableftB.jpg") no-repeat left top;
margin:0;
padding:0 0 0 0px;
text-decoration:none;
}
#tabsB a span {
display:block;
background:url("tabrightB.jpg") no-repeat right top;
padding:5px 15px 4px 0px;
color:#000000;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsB a span {float:none;}
/* End IE5-Mac hack */
#tabsB a:hover span {
color:#000;
}
#tabsB a:hover {
background-position:0% -42px;
}
#tabsB a:hover span {
background-position:100% -42px;
}
|
Vielen Dank schonmal
Gruß
sco
|
|