Text nach oben verschieben

[bert123]

Hallo,

ich benutze Wordpress und ein Plugin um Bewertungen anzuzeigen.
Nun möchte ich allerdings die Prozentzahl nach oben verschieben, so dass diese rechts neben der Bewertungsbox ist.

Hier ein Bild:
http://img12.imageshack.us/img12/3751/verschieben.png

Folgenden Code benutze ich derzeit:

[xrrgroup][xrr label="Funktionalität" rating="4/5" group="s1" ] [xrr label="Benutzerfreundlichkeit" rating="3/5" group="s1"] [xrr label="Design" rating="5/5" group="s1"] [xrr label="Spaß" rating="2.5/5" group="s1"][xrr label="Gesamt:" overall=true group="s1"][/xrrgroup]

<div style="padding-bottom: 80x; padding-left: 400px; position: absolute;">
[xrr label="" overall=true group="s1" display_as=percentage]
</div>

So verschiebt es sich allerdings nur innerhalb des DIV-Containers und nicht weiter.
Es soll halt so sein, das die Prozentzahl immer neben der Bewertungsbox erscheint.

Und hinter der Prozentzahl soll auch noch ein Bild sein - z.B. ein runder Kreis - wie bekommt man das hin?
- mit background-position: Xpx Xpx; klappt es nicht so gut, da man nicht weiß in welchem Container sich das Bild befindet.

z.B. bei background-position: 100% 100%; sieht es so aus:
http://img109.imageshack.us/img109/5307/backgroundzb.jpg

Vielen Dank für Antworten!

 

[Wustersoss]

Hallo,
und willkommen im Forum.
Gib dem div ein margin-top mit negativem wert. Ist zwar nicht besonders sauber, aber sollte den gewünschten Effekt bringen.

Und hinter der Prozentzahl soll auch noch ein Bild sein - z.B. ein runder Kreis - wie bekommt man das hin?

Meinst du das Durchschnittssymbol? ø
& # 3 4 5 ; // ohne die Leerzeichen oder mit Copy und Paste
Du schreibst es direkt dahinter:

<div style="padding-bottom: 80x; padding-left: 400px; position: absolute;"> 
    [xrr label="" overall=true group="s1" display_as=percentage] ø
</div>

 

[bert123]

Hallo,
das margin-top hat schonmal bestens funktioniert!

Mit dem Kreis meine ich folgendermaßen:
http://img29.imageshack.us/img29/5073/kreisn.jpg

Also ich habe ein Hintergrundbild, das hinter die Prozentzahl soll - um diese hervorzuheben.

So habe ich es bisher versucht:

#prozent {
font-size:18px;
background: url(test.png) no-repeat;
background-position:100% 100%;
margin-top: -80px;
padding-left: 400px;
position: absolute;
height:100px; <-- DIV an die Höhe des Kreises angepasst
width:89px; <-- DIV an die Breite des Kreises angepasst

Wie bekomme ich diesen Kreis genau hinter die Zahl?

Danke!

 

[Wustersoss]

Du brauchst den Durchmesser des Kreises, zum Beispiel 30px.
Du brauchst ein Blockelement zum Beispiel Div.
Das Blockelement bekommt nun die Höhe und Breite des Kreises, bei unserem Beispiel jeweils 30Pixel.
Das Div erhält als Hintergrundbild den Kreis zugewiesen mit fester Position und zentriert.
Innerhalb des Div ordnest du deine Prozentzahl an die du zentrierst. Als Zeilenhöhe nimmst die die Höhe des Durchmessers des Kreises.

 

[bert123]

Ich habe das jetzt mal so probiert:

#prozent {
font-size:18px;
margin-top: -80px;
padding-left: 400px;
position: absolute;
}

#kreis {
background: url(test.png) no-repeat;
margin-top: -114px;
margin-left: 374px;
position: absolute;
height:100px;
width:100px;
}

und im Wordpress-Editor:

<div id="kreis"></div>
<div id="prozent">
[xrr label="" overall=true group="s1" display_as=percentage]
</div>

So ist auf jedenfall der Kreis hinter der Prozentzahl.

Allerdings ist es nicht so wie du beschrieben hast, deshalb habe ich es nochmal folgendermaßen probiert:

#prozent {
font-size:18px;
height: 100px;
margin-left: auto;
margin-right: auto;
}

#kreis {
background: url(test.png) no-repeat fixed center;
margin-top: -80px;
margin-left: 400px;
position: absolute;
height:100px;
width:100px;
}

und im Wordpress-Editor:

<div id="kreis">
<div id="prozent">
[xrr label="" overall=true group="s1" display_as=percentage]
</div>
</div>

So funktioniert es allerdings nicht.
Was muss ich verändern?

Danke.

 

[Wustersoss]

Der folgende CSS-Code ist ungetestet, sollte aber so gehen, wenn ich kein Denkfehler drin habe.

<div id="kreis">     
    <div id="prozent">         [xrr label="" overall=true group="s1" display_as=percentage]     
    </div> 
</div>

#kreis {
    background: url(test.png) no-repeat;
    margin-top: -114px;
    margin-left: 374px;
    position: absolute;
    height: 100px;
    width: 100px;
}
#prozent {
    font-size: 18px;
    text-align: center;
    line-height: 98px;
}

 

[bert123]

Danke, das funktioniert!
Habe allerdings die Höhe des Kreises auf 89px verändert.
Wie berechnet man daraus die line-height? Ich habe dort 88px eingetragen und das passt soweit. Aber ist es so nun 100% mittig?

 

[Wustersoss]

Eigentlich schon, du musst es in allen Browsern testen, vor allem IE. 1-2 Pixel weniger in der Zeilenhöhe ist auf jeden Fall richtig.
Es ist dann automatisch vertikal mittig.

 

[mermshaus]

Um Elemente nebeneinander zu positionieren, ist natürlich auch immer Float ein Stichwort.

- SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen
- Float