✔ Menü mit Icons rechts

D

Darian

Erfahrenes Mitglied
Hallo Leute,

habe ein Menü gemacht, was text-align:right gesetzt ist.

Rechts der Menüpunkte möchte ich ein Icon, das bei MousOver erscheint.

Leider habe ich jetzt schon mit dem Design Probleme. (siehe Bild)

HTML-Code:
HTML: 
 <div id="left">
<a class="menu" onclick="javascript:contentload('')" href="#">test1</a><div class="menu_icon"></div>

<a class="menu" onclick="javascript:contentload('')" href="#">testtestest1</a><div class="menu_icon"></div>
<a class="menu" onclick="javascript:contentload('')" href="#">test1</a><div class="menu_icon"></div>
<a class="menu" onclick="javascript:contentload('')" href="#">test1</a><div class="menu_icon"></div>
<a class="menu" onclick="javascript:contentload('')" href="#">test1</a><div class="menu_icon"></div>			
</div>

CSS-Code:

Code: 
#left {
position:absolute;
top: 150px;
padding-top:15px;
left:30px;
width:140px;
height:455px;
border: solid 1px #dbdbdc;
}

.menu {
border:solid 1px red;
display:block;
margin-right:5px;
margin-bottom:20px;
text-align:right;
color:#707172;
font-size:14px;
}

.menu_icon {
position:relative;
width:13px;
height:13px;
border:1px solid green;
margin-left:142px;
margin-bottom:-20px;
background-image:url(../images/icon.gif);
}

Wie würdet ihr die Sache angehen, damit die Icons genau rechts und sogar über die div Box "left" hinaus gehen. Habe schon einiges probiert, bin aber noch nicht zum erwünschten Ergebnis gekommen.

lg und danke für Infos
Darian
 

Anhänge

  • menu.jpg
    menu.jpg
    5,6 KB · Aufrufe: 245
Hi,

du könntest die Elemente mit der Klasse menu_icon als relative Container verwenden. Darin finden die Links sowie absolut positionierte Grafiken Platz. Die Grafiken werden anhand einer negativen right-Eigenschaften um ihre Breite über das Element hinaus verschoben.

Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<style type="text/css">
  <!--
#left {
	position:absolute;
	top: 150px;
	padding-top:15px;
	left:30px;
        width: 140px;
	height:455px;
	border: solid 1px #dbdbdc;
}

.menu_icon {
  position: relative;
  height:13px;
  border:1px solid green;
}

.menu {
	border:solid 1px red;
	display:block;
	margin-right:5px;
	text-align:right;
	color:#707172;
	font-size:14px;
}

.menu_icon img{
  position: absolute;
  display: block;
  right: -13px;  /* Um die Breite der Grafik nach rechts über Element hinaus verschieben */
  top: 0;
}
 //-->
</style>
</head>
<body>
<div id="left">
  <div class="menu_icon">
    <a class="menu" onclick="javascript:contentload('')" href="#">test1</a>
    <img src="bild.gif" width="13" height="13">
  </div>
  <div class="menu_icon">
    <a class="menu" onclick="javascript:contentload('')" href="#">test2</a>
    <img src="bild.gif" width="13" height="13">
  </div>
</div>
</body>
</html>

Vielleicht hilft dir das weiter.

Ciao
Quaese
 
Super danke, hat so auch funktioniert. Dachte zwar dass das eine unschöne Lösung ist, aber solange es funktioniert, soll es mir egal sein.

thx und lg
Darian
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück