✔ Text in <div> links und Bild rechts aber wie?

[Chilled86]

Hi Leute, ich hab folgendes problem. Ich habe diesen Quellcode:

<div class="maintabs"><a href="?main=admin&section=benutzerverwaltung&subsection=editUser&action=edit">Testmann</a><img src="./images/edit.gif" border="0"></div>

und diesen CSS Code:

.maintabs { 
    display:block;
		margin:10px 0 5px 0;	
		padding: 5px 8px;
		border: 1px solid #ccc;
		color: #444;
	}
  .maintabs img { margin-left:200px; }

würde jetzt gerne das Bild rechtsbündig in dem div haben und den Text linksbündig, diese divs werden dann untereinander erscheinen und listen zB alle User auf. Wenn man dann rechts auf das Img klickt kommt das Formular zum editieren. Würde mich über Hilfe freuen.

 

[Maik]

Hi,

arbeite hierfür mit der float-Eigenschaft:

.maintabs {
display:block;
margin:10px 0 5px 0;
padding: 5px 8px;
border: 1px solid #ccc;
color: #444;
}

.maintabs a {
float:left;
}

.maintabs img {
float:right;
}

div.clear {
clear:both;
}

<div class="maintabs">
        <a href="?main=admin&section=benutzerverwaltung&subsection=editUser&action=edit">Testmann</a><img src="./images/edit.gif" border="0">
        <div class="clear"></div>
</div>

 

[Chilled86]

Super danke! Funktioniert einwandfrei, jetzt aber das nächste Problem
Das Bild das wir jetzt anschaulich rechts platziert haben soll natürlich auch noch ein Link sein. Geht das irgendwie? Weil wenn ich das jetzt mache, is wieder alles im ar****

 

[Maik]

Okay, dann erweitern wir das Stylesheet mal folgendermaßen:

.maintabs {
display:block;
margin:10px 0 5px 0;
padding: 5px 8px;
border: 1px solid #ccc;
color: #444;
}

.maintabs a {
float:left;
}

.maintabs a.imgLink {
float:right;
}

div.clear {
clear:both;
}

und rufen in dem Grafik-Link die Klasse imgLink auf:

<div class="maintabs">
        <a href="?main=admin&section=benutzerverwaltung&subsection=editUser&action=edit">Testmann</a><a href=#" class="imgLink"><img src="./images/edit.gif" border="0"></a>
        <div class="clear"></div>
</div>

 

[Chilled86]

Absolut perfekt! Danke!