[mnblank]

Hallo,

ich möchte eine Sidebar erstellen und hänge im Moment ziemlich aussichtslos fest.

Ziel: In jedes <li>-Element soll links eine URL platziert werden, die über die gesamte Sidebar-Breite klickbar ist. Daneben soll am rechten Sidebar-Rand noch eine Zahl erscheinen (Anzahl der Links).

Link 1 (links positioniert)__________(2) (rechts positioniert)
Link 2 (links positioniert)__________(8) (rechts positioniert)
Link 3 (links positioniert)__________(1) (rechts positioniert)
...

Genau diese Zahl rechts (sie befindet sich jeweils in einem div der Klasse .label-count) ist nun mein Problem, da sie mir das Layout zerschießt. Ich habe schon viel mit display: block, display: inline-block und float: left bzw. float: right experimentiert, leider ohne wirklichen Erfolg. Wenn ich die Links theoretisch nicht über die ganze Breite klickbar mache, klappt alles. Sobald ich dann aber auf 100% Breite gehe, überschneiden sich die Link- und Textelemente trotz float: left und float: right, bzw. passen nicht mehr in eine Zeile, weshalb sich das Layout nach unten verschiebt. margin-left: -50px für die Zahl rettet das Layout theoretisch, im Internet Explorer 6 wird das Ganze dann aber falsch angezeigt. Hat jemand eine Idee, wie ich das trotzdem hinbekommen kann?

Hier mein Grundgerüst:

.sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}

.sidebar li {
text-transform: uppercase;
border-left: 1px solid #EEE;
border-right: 1px solid #EEE;
border-bottom: 1px solid #EEE;
margin: 0;
padding: 0;
display: block;
width: 178px;
float: left;
}

.sidebar li a {
display: block;
width: 178px;
float: left;
}

.sidebar li a:hover {
color: #FFF;
background-color: #069;
}

.label-count {
display: block;
width: auto;
float: right;
}

Ich sag schon mal danke ;)

[snuwie]

schick mal bitte ein test case ...

[mnblank]

Das Projekt ist noch nicht online und hängt an einer Datenbank. Insofern kann ich leider kein funktionsfähiges Beispiel veröffentlichen. Ich hatte gehofft, der Code wäre einfach genug, als dass man ihn kurz nachbauen kann. Wäre wirklich sehr nett

[snuwie]

so sieht man aber nicht deinen genauen ansatz ... eine html seite würde schon reichen^^

[mnblank]

Den Ansatz habe ich doch skizziert. Ist die Skizze soweit verständlich? Der HTML-Code ist in einem Widget platziert und es ist jede Menge JavaScript dabei. Ich kann das deshalb leider nicht in HTML-only als Beispiel umsetzen. Habe eben versucht, es standalone und low level nachzubauen, klappt aber nicht.

[snuwie]

[mnblank]

Ich hab den Problemteil jetzt mal mit Inline-Formatierungen in HTML umgesetzt:

http://dl.dropbox.com/u/2455950/test.htm

[snuwie]

.label-count { position: absolute; right: 0; }
li { position: relative; }

soll die zahl klickbar sein, dann könntest du den div mit in den link nehmen und dem a tag { position: relative; } mitgeben.