Stichting...">

Designate one word in html / css

I have a header which I have built like this:

<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>

      

It should look like someone did it in Adobe Illustrator.

Original

Then I applied some css and got to this (there is a Dutch spelling error in the original, this one is fixed, the scale is not fully equal either):

HTML version

Rules:

.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;
}

      

I have two questions:

  • How can I justify both <span>

    and <h2>

    their equal length (my excuse doesn't work as expected)
  • How can I limit "CARMEN" such width and height are predefined, the spacing between characters is displayed by the browser
+3


source to share


2 answers


The problem with justifying is that the last line is usually not justified because the space between letters is too great.

If you can use CSS3, there are new attributes that make this possible: http://www.css3.com/css-text-justify/



If the title always stays the same, you can also tweak the font size and letter spacing attributes until it fits.

+2


source


The important thing is that when creating graphics initially in adobe photo shop or Illustrator, etc. are different, and when we implement on a real web page, in some cases the result may be slightly different. Therefore, we have to write css so that we can achieve the desired design. Thank.

see fiddle for code and demo

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

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



Note: Since I don't have a Rose image, so I could not create a Demo as your given image.

See screenshot for output. Please open the screenshot in a new window to see a clear image.

enter image description here

0


source







All Articles