Html Question posted in
Some basic documentation can be found here.

Html – How to add a top left logo link in a header, that is not affected by text-align: centre in the header

I want to add a logo hyper-link to the top left of my header, but my header has text-align:centre to centre the title of the page making anything I try very awkward

This is what I currently have, and it almost works but the image sticks out the top of the header. Changing the ‘top: 0;’ value makes it jump far down the header rather than moving it slightly.

        <header>
            <h1>Homepage</h1>
            <style type="text/css">
                #topleft {
                    position: absolute;
                    left: 10;
                    top: 0;
                    display: block;
                    height: 140px;
                    width: 140px;
                    background: url(images/DSC_0416-1.jpg) no-repeat;
                    text-indent: -999em;
                    text-decoration: none;
                }
                </style>
                
                <a id="topleft" href="index.html" title="TopLeft">Top Left Link Text</a>
            </div>
Tags:

2

Answers


  1. 0

    You need to restructure your layout. I will suggest you use semantic html and apply css accordingly.

    .header {
  position: relative;
}

#topleft {
  position: absolute;
  left: 0;
  top: 100%;
  display: block;
  height: 80px;
  width: 80px;
  background: url(https://w7.pngwing.com/pngs/848/762/png-transparent-computer-icons-home-house-home-angle-building-rectangle-thumbnail.png) no-repeat;
  text-indent: -999em;
  text-decoration: none;
  background-size: contain;
}
    <h1>Homepage</h1>
<div class='header'>
  <a id="topleft" href="index.html" title="TopLeft">Top Left Link Text</a>
</div>

    Hope this helps.

    Login or Signup to reply.
  2. 0

    At the moment it looks as though the header element hasn’t been given any positioning.

    This means the system will default to placing the absolute positioned image relative to the nearest ancestor that does have a position set – probably body in your case as a header element is likely to be quite far up the tree.

    This snippet gives the header element position relative.

    <header>
  <h1>Homepage</h1>
  <style type="text/css">
    header {
      text-align: center;
      margin-top: 100px;
      /* for demo */
      position: relative;
    }
    
    #topleft {
      position: absolute;
      left: 10px;
      top: 0;
      display: block;
      height: 140px;
      width: 140px;
      background: linear-gradient(red, yellow, green, blue) no-repeat;
      text-indent: -999em;
      text-decoration: none;
      top: 50%;
      /* to center vertically within header element. Remove this and next line if not required */
      transform: translateY(-50%);
    }
  </style>

  <a id="topleft" href="index.html" title="TopLeft">Top Left Link Text</a>
  </div>
</header>

    Note: the image has been given a linear gradient image just for this demo. Also it has been placed centrally vertically in the header element. Remove if not wanted. You may actually be wanting to give the header some height so the positioning of the top of the image can be exactly where you want it. This snippet moves the header down a bit to show the effect of the absolute positioning – another thing to remove if not wanted of course.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search