HTML - Superimpose an ul to an img

Question

HTML - Superimpose an ul to an img

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

Is there any way to overlap one ul of links to an image? Home The header of the page I'm working on is done by image but the links must be made by html .. how to overlap? Home It is a simple header, with a menu that redirects to other pages aligned to the right and the logo aligned to the left .. nothing very unusual, just do not know how to superimpose the links the image.
Any ideas?

EDIT: It's as if my header has a background-color property, but this background-color is an entire image, the size of the header (and it will be the header). The links will be placed inside the header as well, but should appear on the image, forming part of the header.

html css img

asked by anonymous 14.08.2017 / 15:35

2 answers

1

I think your question really comes down to css background-image

background: url("imagem-exibida-background.jpg") no-repeat 100%;

14.08.2017 / 16:24

How to modify an item at a specific point on the page? (HTML, CSS) I can not use accents in Code Blocks

score 1 · Accepted Answer

Basically what I did below was to create a div for the header, put an image in relative to be able to position ul in absolute and position centralized. Here's the example:

#header {
  position: relative;
}
img {
  width: 100%;
}
a {
  text-decoration: none;
  font-family: Tahoma, sans-seriff;
  color: gold;
  font-weight: bold;
}
#list {
  position: absolute;
  bottom: 1rem;
  text-align: center;
  width: 100%;
}
ul {
  list-style: none;
  display: inline-block;
  margin: 0;
  padding: 0;
  line-height: 1rem;
}
li {
  display: inline;
  margin: 0 1rem;
}

<div id="header">
  <img src="http://www.debteraser.co.za/wp-content/uploads/2017/03/DE_banner-header.jpg"/><divid="list">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Exemplo 1</a></li>
      <li><a href="#">Exemplo 2</a></li>
      <li><a href="#">Contato</a></li>
    </ul>
  </div>
</div>