Text einrücken

[Intersect]

Hi Leute.

Ich bin dabei eine Webseite zu coden, dabei habe ich ein Problem. Das lässt sich besser anhand eines Bildes erklären.

http://www.bildercache.de/bild/20120914-160307-664.jpg
Die Nummer und das darüber die Schrift sollen etwas nach rechts, weg von der Hintergrundfarbe.


Vielen dank,
Intersect

 

[Trüffelkrieger]

Danke auch dir für den Code, an Hand dessen wir dir helfen können
Aber padding sollte dein Stichwort sein.

 

[Intersect]

<div class="Callusone">
<p class="Callusoneone">Immer für Sie erreichbar:</p>
<p class="Callusonetwo">0800 123456</p>
</div>

.Callusone
    {
    font-weight: bold;
    float: right;
    height: 30px;
    margin-top: 120px;
    margin-left: 100px;
}

.Callusoneone
    {
    font-size: 14px;
    color: white;
    background-color: black;
    margin-top: -15px;
    width: 180px;
}

.Callusonetwo
    {
    font-size: 26px;
    color: white;
    background-color: #8A0D14;    
    width: 170px;
    margin-top: -15px;        
}

Mit Padding komm ich da nicht weit. Damit kriege ich es nicht hin.

mfg,
Intersect

 

[Tronjer]

Padding sollte schon gehen, aber es gibt noch eine andere Möglichkeit. Pack den Text in ein <span> Tag und formatiere das dann etwa so:

#callusone p span [
    position: relative;
    left: 10px;
}

 

[threadi]

Besser noch:

<p class="Callusone">
<span class="Callusoneone">Immer für Sie erreichbar:</span>
<span class="Callusonetwo">0800 123456</span>
</p>

und dann noch

.Callusone { padding-left: 14px; }

 

[Intersect]

Danke für euer Antworten.

Das Problem lies sich nicht mit Dadding regeln, darauf bin auch schon bevor ich euch geschrieben habe gekommen.
Wir haben einfach zu kompliziert gedacht ^^. Die Lösung ist Simple wie auch logisch "&nbsp;".

Und das Ergebniss:

Danke :).

 

[Trüffelkrieger]

Wir haben einfach zu kompliziert gedacht ^^. Die Lösung ist Simple wie auch logisch "&nbsp;".

Aber das einfachste ist nicht immer am schönsten (Und es MUSS mit padding gehen):mrgreen: