Gernot Back: alles "in line"

Beitrag lesen

SELF-Forum

alles "in line"

Gernot Back Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo Flo,

Ich bekomme es einfach nicht hin, dass die Elemente (Textfeld für Anzahl, der Aktualisieren-Button, und der restliche Text auf einer Linie sind. Die "3 Euro" kommen später noch an den rechten Rand.

<div style="width:220px;float:left">

Wenn du etwas mit float aus dem Textfluss nimmst, musst du dich nicht wundern, wenn es nicht mehr "in line" ist;

<input type="text" class="rp_markt_popup_item_quantitybox" value="1" maxlength="2" />&nbsp;St&uuml;ck
<input name="Aktualisieren" type="image" src="markt/reload.gif" style="border:none; margin:0px;" />

INPUT-Elemente, egal ob sie vom Typ "text" oder "image" oder sonstwas sind, sind von Hause aus Inline-Elemente und sprechen daher auf die CSS-Eigenschaft "vertical-align" an, solange du ihnen diese Eigenschaft mit CSS nicht wegnimmst. Wenn das image nicht exakt so hoch ist wie die Lineheight des umgebenden Texts, kannst du mit "middle" beim Input-Typ "image" evtl. noch was richten. Das Problem bei den INPUT-Elementen vom Typ "text" ist, dass sie sich nicht mit der Grundlinie des Inhaltstextes zur Grundlinie des umgebenden Textes ausrichten, denn sie haben ja auch normalerweise noch einen Rahmen drumherum, der auch ein paar Pixel der Zeilenhöhe beansprucht. Mit unterschiedlicher Zeilenhöhe (line-height) kann man das bei diesen Elementen daher auch kompensieren, am besten mit der relativen Größe em.

Im Übrigen (was die teilweise Links-, teilweise Rechtsbündigkeit angeht)verweise ich auf die Brachialtechnik, bei der mit overflow:hidden, height:1em und einer zweiten, daher nicht sichtbaren Zeile der Blocksatz auch bei "Einzeilern" erzwungen werden kann:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
<title>Unbenanntes Dokument</title>  
<link rel="stylesheet" type="text/css" href="http://www.radiopilot.de/v4/style.css" />  
<style type="text/css">  
[code lang=css]  
.rp_markt_popup_item {  
   text-align:justify;  
   height:1em;  
   width:370px;  
   overflow:hidden;  
   margin-bottom:3em;  
}  
  
.rp_markt_popup_item_quantitybox {  
   line-height:1.3em;  
}  
  
.imgSubmit {  
   border:none;  
   margin:0px;  
   vertical-align:middle;  
}

</style>
</head>
<body>
<div class="rp_popup"><img src="markt/warenkorb.gif" alt="Warenkorb" width="154" height="15" style="border:none" />
 <p>Du hast drei Artikel im Gesamtwert von 7 Euro in deinem Warenkorb. Um weitere Artikel
  hinzuzuf&uuml;gen, klicke links auf &quot;Will ich haben&quot;!
 </p>
 <div class="rp_markt_popup_item">
  <strong>EP 'Radiopilot kommt'</strong>
  <a href="#">(l&ouml;schen)</a>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <input type="text" class="rp_markt_popup_item_quantitybox" value="1" maxlength="2" />
  St&uuml;ck
  <input class="imgSubmit" name="Aktualisieren" type="image" src="http://www.radiopilot.de/v4/markt/reload.gif" />
  <strong>3 &euro;</strong>
  MMMM
 </div>
</div>
</body>
</html>
[/code]

Gruß Gernot

Beitrag melden
–
Informationen zu den Bewertungsregeln