[thrawn]

Moin,

habe ein kleines Problemchen, an dem ich mir gerade die Zähne ausbeiße.

Folgendes möchte ich realisieren:



Irgendwie bekomme ich das ohne Tabellen nicht hin.

Die komplette struktur steck in einem Div-Container:

<div class="reiter">
    <a href="#"><img src="img/reiter_n_l.gif" alt="" style="width: 4px; height: 19px;" />Erster Link</a>
</div> 

bzw

<div class="reiter">
    <img src="img/reiter_n_l.gif" alt="" style="width: 4px; height: 19px;" />    
    <a href="#">Erster Link</a>
</div> 

Style

PHP-Code:

#content div.reiter {
    border-bottom:3px solid #FDB841;
    height:19px;
    padding:0;
    margin:0;
}
#content div.reiter a img {
    display:inline;
}
#content div.reiter a:link, #content div.reiter a:visited,
#content div.reiter a:hover, #content div.reiter a:active {
    background:url(../img/reiter_n_bg.gif) repeat-x;
    padding:0px 2px 3px 2px !important;
    padding:0px 2px 5px 0px;
    border-right:1px solid #B4B4B4;
    color:#666;
    text-decoration:none;
    font-size:11px;
    white-space:no-wrap;
}
#content div.reiter a:hover, #content div.reiter a:active {
    text-decoration:underline;
} 


Ihr seht also, dass ich versuche, das "abgeknickte" Linke Elemente direkt als Bild einzufuegen. Dem Link gebe ich dann einen Hintergrund (1px breit - 19px hoch)

Die Eigenschaften sollen wie folgt aussehen:

- beliebig viele Reiter nebeneinander
- länge der Reiter soll sich am Linktext orientieren
- möglichst im IE & FF gleich aussehen

Evtl hatte ja jemand hier schonmal ein ähnliches Problem. Möchte dies - sofern möglich - nur ungern mit einer Tabelle lösen.

Achja - nochmal nen Link:

http://www.bolzmanager.de/test/test.html

[xfer]

Versuch das mal:

#content div.reiter {
border-bottom:3px solid #FDB841;
height:19px;
padding:0;
margin:0;
float:left
}

Bei mir sieht das in etwa so aus:

<div style="float:left;height:20px">
<img src="templates/default/img/tabs/cTab.left.gif"></div>
<div style="float:left;height:17px:padding-top:3px;background-image: url(templates/default/img/tabs/cTab.center.gif)">&nbsp;Reitertitel&nbsp;</div>
<div style="float:left:padding:0px;height:20px"><img src="templates/default/img/tabs/cTab.right.gif" border="0"></div> 

Dabei ist in dem ersten und letzten Div-Container jeweils nur ein Bild um das ganze mit abgerundeten Ecken zu versehen.

cu
Xfer

[PaterNoster]

Ergänzend dazu:

Guck Dir mal das hier an.

[Lars]

Alternativ zu float:left display:inline.

[thrawn]

Danke Leute, die Links waren allesamt hilfreich