Bilder unterhalb von Input

[WernerK]

Hallo,

es gibt 5 Radio Buttons die nebeneinander platziert sind.
Für jeden Radiobutton gibt es ein IMG (ok.gif).
Momentan sind diese IMG immer neben dem Radio.
Ich hätte sie aber gerne direkt unterhalb des Radio.
Ich habe es nur geschafft, indem ich die IMG alle rausnehme und ein eigenes DIV unterhalb
<div id="priocontainer"> anlege.
Mich würde aber interessieren, ob man es auch so hinbekommt?

  
<style type="text/css">  
<!--  
#priocontainer {  
	  
	width:600px;  
	height: 65px;  
	padding: 3px;  
}  
input[type=radio] + label {  
    display:inline-block;  
    margin:-2px;  
    padding: 4px;  
    background-color: #e7e7e7;  
    border-color: #ddd;  
}  
.priolabel {  
	width:45px;  
	float: left;  
	color: #FFF;  
}  
.priocontent {  
	width:500px;  
	float: left;  
}  
.priocontent span {  
	width: 24px;  
	height: 24px;  
  text-align: center;  
   float:left;  
 }  
  
  
-->  
</style>  

  
<div id="priocontainer">  
<div class="priolabel">Level</div>  
<div class="priocontent">  
<input id="radio1" type="radio" value="1" name="radios">  
<label for="radio1">  
<span id="prio1">1</span>  
</label><img id="priook1" src="bilder/ok.gif">  
<input id="radio2" type="radio" value="2" name="radios">  
<label for="radio2">  
<span id="prio2">2</span>  
</label>  
<img id="priook2" src="bilder/ok.gif">  
<input id="radio3" type="radio" value="3" name="radios">  
<label for="radio3">  
<span id="prio3">3</span>  
</label>  
<img id="priook3" src="bilder/ok.gif">  
<input id="radio4" type="radio" value="4" name="radios">  
<label for="radio4">  
<span id="prio4">4</span>  
</label>  
<img id="priook4" src="bilder/ok.gif">  
<input id="radio5" type="radio" value="5" name="radios">  
<label for="radio5">  
<span id="prio5">5</span>  
</label>  
<img id="priook5" src="bilder/ok.gif">  
</div>  

Gruss
Werner

[Matthias Apsel]

Om nah hoo pez nyeetz, WernerK!

es gibt 5 Radio Buttons die nebeneinander platziert sind.
Für jeden Radiobutton gibt es ein IMG (ok.gif).
Momentan sind diese IMG immer neben dem Radio.
Ich hätte sie aber gerne direkt unterhalb des Radio.
Ich habe es nur geschafft, indem ich die IMG alle rausnehme und ein eigenes DIV unterhalb

<input><img>  
<input><img>  
…

input + img {  
  display: inline-block; /* damit margin-bottom funktioniert */  
  margin-bottom: /* negativer Wert */;  
  margin-left: /* negativer Wert */;  
}  

ungetestet

Matthias

[WernerK]

Hallo

also wenn ich es z.b. mit diesem CSS zusätzlich versuche:

input + img {
  display: inline-block; /* damit margin-bottom funktioniert */
  margin-bottom: -40px; /* negativer Wert */;
  margin-left: -20px; /* negativer Wert */;
}

ändert sich nichts an der Ansicht.

Gruss
Werner

[Matthias Apsel]

Om nah hoo pez nyeetz, WernerK!

also wenn ich es z.b. mit diesem CSS zusätzlich versuche:
ändert sich nichts an der Ansicht.

Das wundert mich nicht. Das CSS muss zum HTML passen. Deshalb habe ich dir auch eine HTML-Struktur angegeben. Im übrigen könntest du mal schauen, ob du wirklich so viele Klassen und Elemente benötigst.

Matthias

[Linuchs]

Momentan sind diese IMG immer neben dem Radio.

Mit Zeilenumbruch nicht: <input ...><br><img ...>

Ich hätte sie aber gerne direkt unterhalb des Radio.
Ich habe es nur geschafft, indem ich die IMG alle rausnehme

Wie? Man schafft IMG unter Radio-Buttons, indem man sie rausnimmt?

Setze einfach mehrere divs mit float nebeneinander und innerhalb des div IMG unter Radio.

.clear {  
  clear: both;  
}  
.radio {  
  height: 2em;  
  float: left;  
}  

<div class=radio>  
  <input type=radio ...><br><img ...>  
</div>  
<div class=radio>  
  <input type=radio ...><br><img ...>  
</div>  
<div class=clear></div>

Linuchs