Flo: Warenkorb Übersicht

SELF-Forum

Warenkorb Übersicht

Flo
– Informationen zu den Bewertungsregeln

Hallo!

Es geht um folgende Seite:
http://www.radiopilot.de/v4/warenkorb.html

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.

Bis jetzt mache ich das mit folgendem Code:

<div style="width:220px;float:left">
<strong>EP 'Radiopilot kommt'</strong> <a href="#">(l&ouml;schen)</a></div>
<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;" />
<strong>3 &euro;</strong></div>

im stylesheet:

.rp_markt_popup_item_quantitybox {
 width: 18px;
 height:12px;
 text-align:right;
 background-color:#CCCCCC;
 border:none;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 10px;
 color: #666;
}

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. 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