CSS Ausrichtung von Blockelementen

[Mr. Snoot]

Hio,

ich habe hier rechts am Rand zwei Buttons (Drucken und PDF).

​

Für den Mausovereffekt hab ich die beiden Links als Blockelemente formatiert, bzw. damit ich die beiden Elemente nebeneinander platzieren kann mit float. Leider reagieren die Buttons damit aber nicht mehr auf padding oder margin. Ich würde die Buttons aber gerne gleichmäßig in der Spalte verteilen (d.h. links, dazwischen und rechts jeweils gleich viel Platz).

Im Moment hab ich das ganze so gelöst, dass ich dort eine Tabelle mit zwei Zellen erstellt habe, und in jeder Zelle sitzt ein Button. Da aber auch align:center nicht mehr greift, hab ich in der linken Zelle padding-left:15px angegeben. Damit rutscht der linke button nach innen, und der rechte sitzt zufällig so, dass es passt.

Gibts dafür auch eine elegantere Lösung, die beiden Buttons schön verteilt zu platzieren? Es passt zwar vom Aussehen, aber von "programmiertechnischer Seite" gefällt mir das nicht.

<div id="druck">
  <table style="width:100%">
    <tr>
      <td style="padding-left:15px"><a class="druck" href="/grundlagen/druck/"></a></td>
      <td><a class="dokument" href="/downloads/pdf.php?pdf=2"></a></td>
    </tr>
  </table>
</div>

/* Druck-Button */

div#druck a.druck
{
  float:left;
  width:55px;
  height:58px;
  background-image:url(/bilder/druck.png);
}

div#druck a.dokument
{
  float:left;
  width:55px;
  height:58px;
  background-image:url(/bilder/dokument.png);
}

 

[TchiboMann]

Wo nichts ist, kann auch nichts gefloatet werden. Ist eine grundsätzliche Regel^^

Deine a-Tags sind leer, die haben keinen Inhalt. Außerdem sind a-Tags keine Blockelemente, sie sind es erst dann, wenn sie ein display:block; erhalten - ergo kann da auch nichts gefloatet werden. Zudem dürfen a-Tags auch nicht leer sein. Naja, "dürfen" schon, ist aber nicht Sinn des a-Elements und die W3C sieht das auch nicht vor. Und an der Stelle eine Tabelle zu nutzen ist irgendwie auch schön, sagste ja selbst^^

Es macht auch keinen Sinn diese Buttons als Background in einem Pseudo-Blockelement einzusetzen. Wozu hast du die img-Tags? Nutze ein transparentes 1x1px-Gif (oder png, wenn dir der IE6 egal ist) und leg dein sprite dahinter. Dann musste auch nicht floaten, weil bilder automatisch nebeneinander auftauchen - und denen kannste ein Margin verpassen.

Also - ums kurz zu machen:

<div id="druck">
     <a href="link.html"><img class="print" src="/bilder/blank.gif" alt="drucken"/></a>
     <a href="link.html"><img class="doc" src="/bilder/blank.gif" alt="PDF"/></a>
</div>

CSS:

div#druck img {
     width: 55px
     height: 58px;
     margin: 10px;
}
div#druck img.print { background: url(/bilder/druck.png);}
div#druck img.print:hover { background: url(/bilder/druck.png) 0px -58px;}

div#druck img.doc { background: url(/bilder/doc.png);}
div#druck img.doc:hover { background: url(/bilder/doc.png) 0px -58px;}

Und btw, wenn du Sprites nutzt, dann nutz des intensiver. doc.png und druck.png kannste ebenfalls zusammenfassen - ist eine Anfrage weniger, die dein Webserver bearbeiten muss

Fertig.

 

[Mr. Snoot]

Fertig - mit dem Ergebnis, dass gar nichts zu sehen ist

Jedenfalls finde ich immer für einen Bildwechsel mit CSS die Lösung, <a>-Tags als Blockelement einzusetzen. Da ich aber zwei Blockelemente nebeneinander brauche muss ich float benutzen - mit dem Nebeneffekt, dass sich die Elemente auch wie display:block verhalten.


Die leeren <a>-Tags wollt ich noch beseitigen, aber irgendwie hat das mit text-indent nicht geklappt um den Text außer Reichweite zu bringen so dass er immer sichtbar war; muss ich nochmal schauen.

 

[TchiboMann]

Dann schau dir mal des CSS-Gedöhns an, dann wirste vll auch sehn, woran es liegt...

Naja, ich maches kurz: ich hab lediglich ein ; hinter der Width-Deklaration vergessen. Das hätteste eigentlich sehen können/müssen - nich einfach sagen "nö geht nich".

<style type="text/css">
div#druck a img {
     width: 55px;
     height: 58px;
     margin-left: 20px;
}
div#druck img.print { background: url(http://www.halbleiter.org/bilder/druck.png);}
div#druck img.print:hover { background: url(http://www.halbleiter.org/bilder/druck.png) 0px -58px;}

div#druck img.doc { background: url(http://www.halbleiter.org/bilder/dokument.png);}
div#druck img.doc:hover { background: url(http://www.halbleiter.org/bilder/dokument.png) 0px -58px;}
</style>

<div id="druck">
     <a href="link.html"><img class="print" src="http://tchibomann.de/esgn/design/images/pxl.png" alt="drucken"/></a><a href="link.html"><img class="doc" src="http://tchibomann.de/esgn/design/images/pxl.png" alt="PDF"/></a>
</div>

Meine Links bitte rausnehmen und durch eigene pixel-gif/png ersetzen.

 

[Mr. Snoot]

Aja in der Tat. Dann sag ich mal brav danke

 

[TchiboMann]

gerne. Man merke - man brauch nicht für alles Block-Elemente