nicht angemeldet
Hi ihr,
ich weiß beim Floaten nicht mehr weiter, um das Folgende geht's:
Für eine Umfrage möchte ich je Zeile eine Aussage und einen Balken, mit dessen Hilfe der Gefragte seine Zustimmung von 1-10 angeben kann, darstellen. Der Balken enthält außerdem noch die Beschriftung "stimme überhaupt nicht zu" "stimme voll und ganz zu".
In etwa sieht eine Zeile der Umfrage dann so aus:
[Aussage xy: "stimme überhaupt nicht zu" ooooooOooo "stimme voll und ganz zu"]
Hier eine Beispiel-URI:
http://netvibration.com/floatProblem/index.php
Hier der Code:
:: HTML ::
<div id="HauptWrapper"> <!--hier sind alle Zeilen drin-->
<div id="ZeilenWrapper"> <!--hier sind alle Zeilen-Elemente drin-->
<div id="Aussage">
1. Aussage xy:
</div>
<div id="BalkenMitMarkierungen">
<div id="LinkeMarke">stimme überhaupt nicht zu</div>
<div id="Balken">
<ul id="Werte">
<li><a href="index.php?q1=1"></a></li>
<li><a href="index.php?q1=2"></a></li>
<li><a href="index.php?q1=3"></a></li>
<li><a href="index.php?q1=4"></a></li>
<li><a href="index.php?q1=5"></a></li>
<li><a href="index.php?q1=6"></a></li>
<li><a href="index.php?q1=7"></a></li>
<li><a href="index.php?q1=8"></a></li>
<li><a href="index.php?q1=9"></a></li>
<li><a href="index.php?q1=10"></a></li>
</ul>
</div>
<div id="RechteMarke">stimme voll und ganz zu</div>
</div>
</div>
...
</div>
<...
:: CSS ::
* {
padding: 0;
margin: 0;
color: #000;
text-align: justify;
font-family: sans-serif;
}
#Balken {
background-color: #EEE;
height: 2em;
width: 14em;
padding: 0;
margin: 0 0 0 22em;
}
#Werte {
height: 2em;
width: 14em;
padding: 0.4em 0.1em 0.1em 0.4em;
}
li {
list-style: none;
display: inline;
height: 1em;
width: 1em;
}
a {
background-color: #ccc;
padding: 0.1em 0.5em;
margin-right: 0.05em;
}
a:hover {
padding: 0.5em;
background-color: #F00;
margin-right: 0.05em;
}
#Aussage {
width: 10em;
margin: 0;
border: 0;
float: left;
}
#ZeilenWrapper {
padding: 0.5em;
border-color: #DDD;
border-style: solid;
border-width: 0.01em;
width: 50em;
height: 2em;
}
LinkeMarke {
float: left;
}
RechteMarke {
padding: 0 0 0 30em;
float: right;
}
Ich hab hier im Forum gelesen und Tipps wie "div mit style:"clear: both; margin:0; height: 0; width:0; padding:0;"" schon probiert. Habe auch alles left floaten lassen, die rechte Markierung rechts floaten lassen, so dass sich der Balken zwischen die Markierungen einpassen sollte, divs gegen spans ausgetauscht und überhaupt...ich bekomme aber nie alles wirklich in eine Zeile, also so dass es vernünftig aussieht.
Ich hoffe ihr könnt mir weiterhelfen.
Gruss,
T