CODEWITHSUNDEEP
htmlcsssvg
Hideto
Hideto

Reputation: 309

Div with SVG, column-lined two-row text, and underline, without inline code

I'm trying to create a universal "header-like" div that can be changed entirely within an external stylesheet. My website info is rather static and I just want the style/look to be dynamic, such that all I have to do is swap out the CSS linked and *bam*, the site is different.

I need my first version of this header-like div to look like this:

Sakura Gakuen Header

It's designed to look like your typical school letter head. The logo is an SVG and I'd prefer to use it thusly so it's easy to manipulate on the fly.

I originally had the image as an <img src=... line in the HTML file but realized that it's not very dynamic. It also made using an HR for my line kind of wacky, no doubt due to me doing it wrong. I tried making a div using the background-image property but it wasn't showing at all. I literally want the two lines of text to be separately configurable, re size and/or font weight/font family. I'd really, really, really love this to be done entirely within an external stylesheet, so, as I said, I could easily change this on the fly. I'd hope to be able to even include the text, as here "Sakura Gakuen", so the whole darned thing is dynamically changeable.

Is my idea possible fully? If not, what's the closest we can get to my idea? I don't care if @imports or whatever are required. I just want something statically dynamic, if that makes sense. Basically, a template page of my very basic and relatively unchanging text, and images/headers that change as the stylesheet called is swapped out.

The font I used there is EB Garamond and my SVG can be found here and is sized to 100px width, and I want a padding on each side between the margin and "letter head" of 20px.

Upvotes: 0

Views: 623

Answers (2)

Paul LeBeau
Paul LeBeau

Reputation: 101918

Is this the sort of thing you were after?

.letterhead {
  font-family: Times, "Times New Roman", Georgia, serif;
  width: 500px;
  margin: 0 auto;
}

.letterhead::before {
  content: ' ';
  display: block;
  float: left;
  width: 120px;
  height: 100px;
  background-image: url(http://cafenocturne.com/images/svg/SakGakSVG.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

.line1 {
  display: block;
  font-size: 44px;
  font-weight: bold;
  margin-left: 130px;
}

.line2 {
  font-size: 40px;
  display: block;
  margin-left: 130px;
  border-bottom: solid 5px grey;
}
<div class="letterhead">
  <span class="line1">Sakura</span>
  <span class="line2">Gakuen</span>
</div>

Update:

OP asked if the was:

a way to get the text "Sakura Gakuen" into the external sheet?

Here's a version where the text is in the stylesheet. Note that is generally not recommended. It is usually best if content and styling are kept separate.

.letterhead {
  font-family: Times, "Times New Roman", Georgia, serif;
  width: 500px;
  margin: 0 auto;
}

.letterhead::before {
  content: ' ';
  display: block;
  float: left;
  width: 120px;
  height: 100px;
  background-image: url(http://cafenocturne.com/images/svg/SakGakSVG.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

.line1 {
  display: block;
  font-size: 44px;
  font-weight: bold;
  margin-left: 130px;
}

.line2 {
  font-size: 40px;
  display: block;
  margin-left: 130px;
  border-bottom: solid 5px grey;
}

.line1::before {
  content: 'Sakura'
}

.line2::before {
  content: 'Gakuen'
}
<div class="letterhead">
  <span class="line1"></span>
  <span class="line2"></span>
</div>

Upvotes: 1

Bobby Orndorff
Bobby Orndorff

Reputation: 3335

There are various ways to achieve your goal. Here is one possible solution.

HTML code...

<div>
    <div class="logo">
        <svg class="logo-svg" viewBox="0 0 734 589" version="1.1" xmlns="http://www.w3.org/2000/svg">
            ....
        </svg>
    </div>
    <div class="letter-head">
        <div class="letter-head-text1">Sakura</div>
        <div class="letter-head-text2">Gakuen</div>
        <div class="letter-head-line"></div>
    </div>
</div>

CSS code...

.logo {
    display: inline-block;
    vertical-align: bottom;
    padding-left: 10pt;
    padding-right: 10pt;
}

.logo-svg {
    width: 72pt;
    height: 72pt;
}

.letter-head {
    display: inline-block;
    font-size: 28pt;
}

.letter-head-text1 {
    font-weight: bold;
}

.letter-head-text2 {
    font-weight: normal;
}

.letter-head-line {
    border-top: 4pt solid gray;
    width: 300pt;
}

Upvotes: 0

Related Questions