Position der Badges ändern

TomPiXX · 8. April 2014

Hey,

ich habe die Postion der Badges fürs Hauptmenü im WoW Style angepasst.
Leider wandert der Text nicht mit an die neue Position sondern nur der Hintergrund.

Könntest du mir da weiter helfen?

Code

.mainMenu > ul > li {
 position: relative;
 
 > a > span.badge {
  position: absolute;
  right: 2px;
  top: 2px;
  height: 16px;
 }
}

Cr@@gle · 8. April 2014

Hi,

eigentlich reicht bei den Badges ein margin-top... zum positionieren aus.

Zumindest mache ich es immer so

CSS

.mainMenu > ul > li  > a > .badge {
   margin-top: -2px;
}

Mfg Cr@@gle

TomPiXX · 8. April 2014

Haut nicht hin. Zumal ich den Menünamen auch vom Badge trennen will.

Tom · 8. April 2014

CSS

.mainMenu > ul > li {


	position: relative;


	> a > span.badge {
		position: absolute;
		right: 4px;
		top: 4px;
		height: 16px;
		line-height: 16px;		
 	}
}

Alles anzeigen

TomPiXX · 8. April 2014

Krass. Es lag tatsächlich nur am line-height.

Besten Dank!

Tom · 8. April 2014

Das wird in der nächsten Version enthalten sein:

CSS

.mainMenu > ul > li {
	position: relative;
}


.mainMenu > ul > li	> a > span.badge {
	position: absolute;
	right: 5px;
	top: 5px;
	height: 16px;
	line-height: 16px;
	box-shadow:0 -1px 1px rgba(0,0,0,0.5);
}


.mainMenu > ul > li.active a > span.badge {
	background-color: #000;
	color: @wcfPageLinkColor;
	box-shadow: 0 1px 1px rgba(255,255,255,0.5);
}

Alles anzeigen

Sieht etwas schöner aus.

Position der Badges ändern

cls-design

Informationen

Demoinstallationen

Hilfe