-1

I'm trying to make a html header with a title and an image on the right side of the title. But when the screen size alters the image moves over sliding over the title. How do a make it stay in its place? I've tried all I can think of with no luck. Best that I have come up with is when the image is under the title. Then it keeps its place. But I'd rather have it on the side.

Here is my code:

<body>
  <header>
        <h1>Title text</h1>
        <p>some text</p>
        <div class="picture">
          <img src="assets/images/xxxx.png">
        </div>
      </header>
some code ....
</body>

and the header part in style.css:

header { padding: 25px 20px 40px 20px; margin: 0; position: fixed; top: 0; left: 0; right: 0; width: 100%; text-align: center; background: #15253e; box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.75); z-index: 99; -webkit-font-smoothing: antialiased; min-height: 76px; }
header h1 { font: 42px/50px 'Copse', "Helvetica Neue", Helvetica, Arial, sans-serif; color: #f3f3f3; text-shadow: 0px 2px 0px #235796; margin: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; }
header p { color: #f3f3f3; text-shadow: rgba(0, 0, 0, 0.2) 0 1px 0; font-size: 20px; margin: 10px; }
header img { width: 60px; height: 100px; position: fixed; right: 900px; top: 15px; text-align: right; }
header .picture { display: block; }

I would have added a picture but I haven't got the rights to do so. So here is a page an example that might give an undestanding of what I'm trying to do. There is a picture of a header and an arrowimage. My goal is to get the image on the right side of the header text. And keep it there if the screen size alters.

tryingToLearnSomething
  • 5
  • 1
  • 5

2 Answers2

0

You have a property set for your header text-align: center; it aligns your image to center because it's inline element. You have many options to change it:

  • set text-align: right;
  • put your image into a block element like <div>
  • change property of your image to block or flex... ex: display: block; and change position of your div with float:right
  • other stuff

Look examples W3school

Use Sandbox like Codepen

Niko
  • 373
  • 3
  • 13
0

I really hope that's it now:

I put the whole content in a flexbox, so it's easy to align. You can modify the header's justify-content or align-items to change the layout a bit.

Inside of #title the text-align can also be changed to center or left for example.

I know in code preview it looks quite big, but in fullscreen it works. You can change the height in the header to eliminate that problem.

html,
body {
  margin: 0;
}

header {
  padding: 20px 40px;
  background-color: gray;
  width: 100%;
  top: 0;
  position: sticky;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  max-height: 30vh;
}

#title {
  text-align: right;
}

header h1 {
  font: 42px/50px 'Copse', "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #f3f3f3;
  text-shadow: 0px 2px 0px #235796;
  white-space: nowrap;
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
}

header p {
  color: #f3f3f3;
  text-shadow: rgba(0, 0, 0, 0.2) 0 1px 0;
  font-size: 20px;
  margin: 0;
}

header img {
  height: 20vh;
}
<html>

<body>

  <header>
    <div id="title">
      <h1>Title text</h1>
      <p>some text</p>
    </div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/768px-Stack_Overflow_icon.svg.png">
  </header>
  <div>
    spacefiller
    <br> spacefiller
    <br> spacefiller
    <br> spacefiller
    <br> spacefiller
    <br> spacefiller
    <br> spacefiller
    <br> spacefiller
    <br> spacefiller
    <br> spacefiller
    <br> spacefiller
    <br> spacefiller
  </div>
</body>

</html>
BeanBoy
  • 326
  • 2
  • 10