Begründen in HTML/CSS Wort

Question

ich einen Header haben, die ich so aufgebaut:

<header class="top"> 
    <a href=""> 
    <span class="right">Stichting Delftsche Opera Compagnie presenteert</span> 
    <h1 class="right">Carmen</h1> 
    <h2 class="right">Een opera door Krashna Musika en de TU Delft</h2> 
    </a> 
</header> 

Dies sollte so aussehen, wie jemand diese

in Adobe Illustrator gemacht

Dann Ich habe etwas css angewendet und bin dazu gekommen (im Original gibt es einen holländischen Rechtschreibfehler, dieser ist korrigiert, die Skala ist auch nicht ganz gleich):

Die Regeln:

.top { 
    display: block; 
    width: 800px; 
    float: right; 
} 

.top a { 
    background-image: url('../img/logo.jpg'); 
    background-size: 150px 150px; 
    background-repeat: no-repeat; 

    padding-left: 150px; 
    height: 175px; 

    display: block; 
    overflow: hidden; 
} 

.top .right { 
    text-align: justify; 
    width: 650px; 
} 

.top span, .top h2 { 
    color: #E02C33; 
    font-size: 1.8em; 
} 
.top h1 { 
    color: #B02025; 
    font-size: 4.7em; 
    text-transform: uppercase; 
} 

Ich habe zwei Fragen hier:

1. Wie kann ich rechtfertigen sowohl die <span> und <h2> ihre gleichen Längen (meine justify wird nicht wie erwartet funktioniert)
2. Wie kann ich Einschränkung "CARMEN" wie die Breite und Höhe sind vordefiniert, wird der Abstand zwischen den Zeichen vom Browser
gerendert

Answer 1

Das Problem mit justify ist, dass die letzte Zeile normalerweise nicht gerechtfertigt ist, weil der Buchstabenabstand zu lang wäre.

Wenn Sie CSS3 verwenden können, gibt es neue Attribute, die dies möglich machen: http://www.css3.com/css-text-justify/

Wenn der Header immer gleich bleibt, können Sie auch einstellen, die Schriftgröße und Zeichenabstand Attribute, bis es passt.

Answer 2

Eine wichtige Sache ist, dass beim Erstellen von Grafiken zunächst in Adobe Photoshop oder Illustrator etc. ist anders und wenn wir in der tatsächlichen Webseite implementieren die Ausgabe kann in einigen Fällen etwas variieren. Also müssen wir CSS so schreiben, dass wir das gewünschte Design erreichen können. Vielen Dank.

sehen Geige für Code und Demo

Fiddle: http://jsfiddle.net/ybf25/3/

Demo: http://jsfiddle.net/ybf25/3/embedded/result/

Hinweis: Wie ich das Bild Rose nicht so dass ich nicht in der Lage war Demo zu erstellen, wie Ihr gegebenes Bild in Frage.

Siehe Screenshot für die Ausgabe: Bitte öffnen Sie den Screenshot in einem neuen Fenster, um ein klares Bild zu sehen. siehe