2

I am new to HTML and am creating a website for my family/self project and I am running into a small issue. I am trying to insert a logo inside of a header on both sides of the text. I have been able to get the image on the left side of the text thanks to:

Logo image and H1 heading on the same line

However, I am running into issues putting the image onto the other side of the text.

header.solid
{
  border-style: solid;
  border-width: 2px;
}

.header img
{
  float: left;
  width:75px;
  height:75px;
}

.header h1
{
  position: relative;
  top: 0px;
  left: 18px;
}


 <div class="header">
  <header class="solid">
  <img src="Pictures/Star_Img.png" alt="star"/>
  <h1 style="color:white;" align="center"><b>P &nbsp;R &nbsp;O &nbsp;V &nbsp;E &nbsp; N &nbsp; &nbsp; &nbsp;  &nbsp;L &nbsp;E &nbsp;A &nbsp;D &nbsp;E &nbsp;R &nbsp;S &nbsp;H &nbsp;I &nbsp; P</b></h1>
  </header>
 </div>

Any help is greatly appreciated, apologies if it's a simple fix

EDIT: Apologies all, when I had posted the code, I had removed the second img tag

Here is what it is currently.

<div class="header">
<header class="solid">
  <img class="leftimg" src="Pictures/Star_Img.png" alt="star"/>
  <h1 style="color:white;" align="center"><b>TEST</b></h1>
  <img class="rightimg" src="Pictures/Star_Img.png" alt="star"/>
</header>
</div>

And the id tags for leftimg and rightimg:

.leftimg
{
  float: left;
  width:75px;
  height:75px;
}

.rightimg
{
  float: right;
  width:75px;
  height:75px;
}

This however, is giving me these results:

http://s1160.photobucket.com/user/WickedSniper03/media/Header_Img_zpsqzve4jf6.png.html

Community
  • 1
  • 1
Anavas
  • 55
  • 1
  • 8

4 Answers4

5

You can use flexbox to achieve this with the following steps:

  1. Make your header element a flex-container by using the CSS property display: flex;
  2. Once you declare your <header> as a flex-container, the direct
    children, in this case your h1 element and img elements, are now flex items. To align these flex-items you will add the CSS properties justify-content and align-items to your <header> element.

Example:

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

CODE SNIPPET:

.solid {
  border-style: solid;
  border-width: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header img {
  width: 75px;
  height: 75px;
  flex-shrink: 0;
}
header h1 {
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 15px;
  word-spacing: 35px;
}
@media (max-width: 520px) {
  header h1 {
    font-size: 1em;
  }
}
<header class="solid">
  <img src="http://placehold.it/75x75" alt="star" />
  <h1>Proven Leadership</h1>
  <img src="http://placehold.it/75x75" alt="star" />
</header>

EDIT:

If you are using a star you can take advantage of an SVG, which will save you HTTP requests.

-- SVG taken from IcoMoon Free.

Code Snippet:

.solid {
  border-style: solid;
  border-width: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header img {
  width: 75px;
  height: 75px;
  flex-shrink: 0;
}
header h1 {
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 15px;
  word-spacing: 35px;
}
.icon-star-full {
  color: gold;
  font-size: 4em;
}
#symbols {
  display: none;
}
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}
@media (max-width: 520px) {
  header h1 {
    font-size: 1em;
  }
}
<header class="solid">
  <svg class="icon icon-star-full">
    <use xlink:href="#icon-star-full"></use>
  </svg>
  <h1>Proven Leadership</h1>
  <svg class="icon icon-star-full">
    <use xlink:href="#icon-star-full"></use>
  </svg>
</header>

<svg id="symbols">
  <symbol id="icon-star-full" viewBox="0 0 32 32">
    <title>star-full</title>
    <path class="path1" d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
  </symbol>
</svg>

NOTES

  • You should use the CSS properties letter-spacing and word-spacing for separation instead of the character entity &nbsp;
  • Do not wrap your <header> in a semantically meaningless <div>, <header> tag by itself is fine.
  • I added a CSS media query to handle h1 font-size on small devices.
  • The SVG alternative saves you HTTP requests and you can also add some animations to it if you like.
  • Do not use the <b> tag since it is just a styling tag, in this case I removed it completely because it is not needed, but when you do need it, you should be using <strong> instead. Here's why.

ADDITIONAL RESOURCE

I have previously posted an answer here explaining justify-content values, which may help you further understand that property, along with additional information on flexbox in the more info section.

Community
  • 1
  • 1
Ricky Ruiz
  • 25,455
  • 6
  • 44
  • 53
1

header.solid
{
  border-style: solid;
  border-width: 2px;
}

header * {
  display: inline-block;
}

header img
{
  width: 75px;
  height: 75px;
}

header h1
{
  position: relative;
  top: 0px;
  left: 18px;
}
 <div class="header">
  <header class="solid">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Stj%C3%A4rna.svg/2000px-Stj%C3%A4rna.svg.png" alt="star"/>
  <h1 align="center"><b>TEST</b></h1>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Stj%C3%A4rna.svg/2000px-Stj%C3%A4rna.svg.png" alt="star"/>
  </header>
 </div>

Does this work, or do you need the right star along the edge?

EDIT: This is another solution, now with the stars to the outside.

header {
  display: flex;
}
  
header.solid
{
  border-style: solid;
  border-width: 2px;
}

header img
{
  width: 20%;
  height: 20%;
}

header h1 {
  width: 60%;
}
<div class="header">
  <header class="solid">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Stj%C3%A4rna.svg/2000px-Stj%C3%A4rna.svg.png" alt="star"/>
  <h1 align="center"><b>T E S T I N G<br>I S<br>F U N</b></h1>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Stj%C3%A4rna.svg/2000px-Stj%C3%A4rna.svg.png" alt="star"/>
  </header>
 </div>
StardustGogeta
  • 3,331
  • 2
  • 18
  • 32
  • It didn't work unfortunately. It set the second star right next to the first one in front of all the text. – Anavas Sep 26 '16 at 00:23
  • I should have kept it in; apologies, I had it underneath the

    header but removed it because it was giving the rest of my webpage issues and I copied my coed when I had it removed

     – Anavas Sep 26 '16 at 00:34
0

Because there is only one image...

To fix this, add another image and add an id. Like image2 Then on the first image put an id, too. Like image1.

And then position them both where they're on both sides of the text.

Nach
  • 58
  • 8
0

Here you go:

https://jsfiddle.net/u60bg9tn/3/

HTML CODE

<div id="Main">
<div id="Left"><img src="Pictures/Star_Img.png" alt="star"/></div><div id="Middle"><h1><b>P &nbsp;R &nbsp;O &nbsp;V &nbsp;E &nbsp; N &nbsp; &nbsp; &nbsp;  &nbsp;L &nbsp;E &nbsp;A &nbsp;D &nbsp;E &nbsp;R &nbsp;S &nbsp;H &nbsp;I &nbsp; P</b></h1></div><div id="Right"><img src="Pictures/Star_Img.png" alt="star"/></div>
</div>

CSS CODE

#Main
{
height: 25vh;
width: 100vw;
border: 1px solid black;
position: relative;
}

#Left
{
height: 100%;
width: 15%;
position: relative;
vertical-align: top;
display: inline-block;
border: 1px red solid;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

#Middle
{
height: 100%;
width: 70%;
display: inline-block;
vertical-align: top;
border: 1px solid green;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

#Right
{
height: 100%;
width: 15%;
position: relative;
display: inline-block;
vertical-align: top;
border: 1px red solid;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

#Left img
{
height: 100%;
width: 100%;
}

#Right img
{
height: 100%;
width: 100%;
}
Shen Hui Zhang
  • 23
  • 1
  • 10