hawkmaster: Positionierung mit CSS, float??

SELF-Forum

Positionierung mit CSS, float??

hawkmaster
– Informationen zu den Bewertungsregeln

Hallo,
ich versuche zum ersten mal CSS auch für die Positionierung von Elementen.
Ich möchte gerne das die Menüs, Textfeld und die Button so aussehen wie in der Tabellenversion unten.
Ich habe mal versucht was mit "float" zu machen.
Was mir nicht ganz klar ist.
Das erste Select Menü oben und das Textfeld haben beide den Style "left1"
mit einer Weite von 130px. Trotzdem hören sie nicht gleich auf, bzw. sind unterschiedlich lang.

Und, wie könnte man die beiden Buttons nah beieinander bekommen so wie in der Tabelle mit "rowspan"?

<style type="text/css">
/* <![CDATA[ */
 body {
  margin:0; padding:0;
  font: 77% sans-serif;
  }

#main3 {
  margin:3; padding:3;
  background: #DDEE77 url(bg_links1.gif) repeat-y left top;
  width:650px;
 }
 #left1 {
  float:left;
  width:130px;
  margin:0;
  padding: 2px;
  font-size:0.9em;
  }
 #middle1 {
  float:left;
  margin:0;
  padding: 2px;
  font-size:0.9em;
  width:130px;
  }
 #right1 {
  /*float:right;*/
  width:130px;
  margin:0;
  padding: 2px;
  font-size:0.9em;
  }

#select {
  width:130px;
  /*margin:0;  padding: 2px;
  font-size:0.9em;*/
  }
 #middle {
  margin:0 10px;
  padding: 10px;
  background:#FFCC99;
  font-size:0.9em;
  }
 .cleaner {
  clear:both;
  height:5px;
  font-size:1px;
  border:0px none;
  margin:2; padding:2;
  background:transparent;
    }

/* ]]> */
</style>
</head>
<body>

<div id="main3">
<div id="left1">
<select name="select" size="5">
  <option value="xxxxxxxxxxxxxxxxxxxx" selected="selected">xxxxxxxxxxxxxxxxxx</option>
</select>
</div>

<div id="middle1">
  <select name="select2" size="5" id="">
    <option value="xxxxxxxxxxxxxxxxxxxx">xxxxxxxxxxxxxxxxxx</option>
  </select>
</div>
<div id="right1">
<input type="submit" name="Submit" value="einf&uuml;gen" />
</div>

<div class="cleaner">&nbsp;</div>
<div id="left1">
  <input type="text" name="textfield" />
 </div>

<div id="middle1">
  <select name="select3" id="select" >
  </select>
 </div>

<div id="right1">
  <input type="submit" name="Submit2" value="Entfernen" />
</div>

</div>

<p>
<p>Tabellenversion
<table width="300" cellspacing="2" cellpadding="2">
 <tr>
     <td width="96">Men&uuml;1<br />
    <select name="select1" size="3" id="select1">
      <option value="xxxxxxxxxxxxxxxxxx ">xxxxxxxxxxxxxxxxxx </option>
    </select> </td>
  <td width="68">Men&uuml;2<br /><select name="select2" size="3">
    <option value="xxxxxxxxxxxxxxxxxx ">xxxxxxxxxxxxxxxxxx </option>
     </select> </td>
  <td width="114" rowspan="2"><input name="einf&uuml;gen" type="submit" id="einf&uuml;gen" value="Einf&uuml;gen" />    <input name="l&ouml;schen" type="submit" id="l&ouml;schen" value="L&ouml;schen" /></td>
  </tr>
   <tr>
   <td><input type="text" name="textfield" /></td>
    <td><select name="select3"> </select></td>
   </tr>
    </table>

bin für jeden Tipp dankbar
Gruss
hawk

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Positionierung mit CSS, float??

    dey Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo,

    Wenn du submit und submit2 untereinander haben willst warum packst du die in 2 verschiedene divs. In der Tabelle sind die doch auch in einer Zelle.

    bydey

    --
    -- bydey ist die Signatur und Verabschiedung, nicht der Nick --
    -- Navigate all your PHP web projects with  PHP Project Browser--
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln