0

Tengo este código y quiero que el div id="fb" se posicione encima de la imagen que uso como banner (img src="baner3.png") para que redireccione a una página de Facebook al hacerle click. Sin embargo siempre aparece bajo el banner.

Código:

body {
  background-color: rgb(220, 220, 220);
}

* {
  padding: 0;
  margin: 0;
}

#header {
  margin: 0px;
  width: 1365px;
  font-family: century;
  font-size: 20.05px;
}

ul,
il {
  list-style: none;
}

.nave li a {
  position: relative;
  bottom: 5px;
  background-color: rgb( 0, 0, 0);
  color: white;
  width: 100%;
  text-decoration: none;
  display: inline-block;
  padding: 10px 10px;
}

.nave>li {
  float: left;
}

.nave li a:hover {
  background-color: rgb( 242, 179, 44);
}

p {
  background: white;
  width: 300px;
  margin: 50px;
  display: inline-block;
  padding: 20px;
}

.loren {
  position: relative;
  top: 227px;
  left: 850px;
  padding: 20px;
}

li ul li {
  display: block;
}

.header ul li a ul li {
  display: none
}

.fb {
  position: relative top: 150px;
}
<a href="codigo 1,inicio.html">
  <img src="baner3.png" height="200px" width="1366px" title="inicio" />
</a>

<div id="header">
  <ul class="nave">
    <li> <a href="codigo 1,inicio.html"> INICIO </a> </li>
    <li> <a href="seccion 1.xml"> NOSOTROS</a> </li>
    <li> <a href="new 1.html">CONTRA EDITORIAL PRIMATE </a>
      <ul>
        <li> <a href="articulos.html."> ARTICULOS </a> </li>
        <li> <a href? "publicaciones.html">PUBLICACIONES </a> </li>
        <li> <a href="columnas.html">COLUMNAS </a></li>
      </ul>
    </li>
    <li> <a href="primatetv.html">  PRIMATE TV </a> </li>
    <li> <a href="radio primate.html"> RADIO PRIMATE </a> </li>
    <li> <a href="tienda.html"> TIENDA </a> </li>
    <li> <a href="donaciones.html">DONACIONES </a> </li>
    <li> <a href="contactanos.html">CONTACTANOS </a> </li>
  </ul>
</div>
<div id="fb">
  <a href="https://www.facebook.com/Tr%C3%ADada-Primate-1006588336127088/?ref=aymt_homepage_panel">
    <img src="facebook-icon-preview-1-400x400.png" height="30px" width="30px" title="fb primate">
  </a>
</div>

6
  • El div con id "fb", ¿está dentro o fuera del div id="header"? Al código que compartes le falta un cierre de div y no queda claro dónde iría.
    – Alvaro Montoro
    el 3 jul. 2017 a las 2:24
  • Aparte, ¿por qué no directamente cambiar el href del enlace que contiene la imagen del logo? ¿No tienes control sobre el HTML?
    – Alvaro Montoro
    el 3 jul. 2017 a las 2:26
  • esta fuera del id="header"
    – pedro
    el 3 jul. 2017 a las 2:27
  • al hacer click en el banner busco que se redireccione a la pagina de inicio, pero ademas, deseo , encima del banner poner un logo de fb que redireccione a una pagina de fb . soy nuevo en esto, siento las molestias
    – pedro
    el 3 jul. 2017 a las 2:29
  • ¿Entonces quieres que al pulsar sobre el banner ocurran dos acciones (ir a inicio + ir a facebook)? Porque si es eso, vas a necesitar JavaScript
    – Alvaro Montoro
    el 3 jul. 2017 a las 2:35

3 respuestas 3

0

Por lo que veo, tienes tres bloques: El banner El header El logo

Si pones al logo position:relative, seguira en el mismo flujo. Osea mantendrá la posición y se le respetara su espacio. Por lo que seguirá estando debajo del header.

Por otra parte en el css para llamar a los id se hace con # y a las clases con "." por lo que sería #fb{ ... }

También he cambiado el bloque de posición para que este justo antes que el banner.

De todos modos, quizas un position:absolute; te vendría mejor para evitar que se le tenga en cuenta en el flujo.

(http://es.learnlayout.com/position.html)

Por otra parte, te voy a recomendar el uso de Display:flex; para casi todo. No te sirve para el caso en concreto, pero por el tema del menu, que lo tienes con floats, muchas veces dan problemas con las pantallas responsive. Mira https://css-tricks.com/snippets/css/a-guide-to-flexbox/ en 4 lineas habrás hecho lo mimso, sin que nada sea flotante.

(En el padre que contiene los items a ordenar) display:flex; flex-direcction: row;

Y ya los tienes todos en una linea.

Un saludo, y espero haber podido ayudar.

body {
  background-color: rgb(220, 220, 220);
}

* {
  padding: 0;
  margin: 0;
}

#header {
  margin: 0px;
  width: 1365px;
  font-family: century;
  font-size: 20.05px;
}

ul,
il {
  list-style: none;
}

.nave li a {
  position: relative;
  bottom: 5px;
  background-color: rgb( 0, 0, 0);
  color: white;
  width: 100%;
  text-decoration: none;
  display: inline-block;
  padding: 10px 10px;
}

.nave>li {
  float: left;
}

.nave li a:hover {
  background-color: rgb( 242, 179, 44);
}

p {
  background: white;
  width: 300px;
  margin: 50px;
  display: inline-block;
  padding: 20px;
}

.loren {
  position: relative;
  top: 227px;
  left: 850px;
  padding: 20px;
}

li ul li {
  display: block;
}

.header ul li a ul li {
  display: none
}

#fb {
  position: relative;
  top: -150px;
}
<a href="codigo 1,inicio.html">
  <img src="baner3.png" height="200px" width="1366px" title="inicio" />
</a>

<div id="fb">
  <a href="https://www.facebook.com/Tr%C3%ADada-Primate-1006588336127088/?ref=aymt_homepage_panel">
    <img src="facebook-icon-preview-1-400x400.png" height="30px" width="30px" title="fb primate">
  </a>
</div>

<div id="header">
  <ul class="nave">
    <li> <a href="codigo 1,inicio.html"> INICIO </a> </li>
    <li> <a href="seccion 1.xml"> NOSOTROS</a> </li>
    <li> <a href="new 1.html">CONTRA EDITORIAL PRIMATE </a>
      <ul>
        <li> <a href="articulos.html."> ARTICULOS </a> </li>
        <li> <a href? "publicaciones.html">PUBLICACIONES </a> </li>
        <li> <a href="columnas.html">COLUMNAS </a></li>
      </ul>
    </li>
    <li> <a href="primatetv.html">  PRIMATE TV </a> </li>
    <li> <a href="radio primate.html"> RADIO PRIMATE </a> </li>
    <li> <a href="tienda.html"> TIENDA </a> </li>
    <li> <a href="donaciones.html">DONACIONES </a> </li>
    <li> <a href="contactanos.html">CONTACTANOS </a> </li>
  </ul>
</div>

0

Buenas, lo que tienes que hacer son varias cosas:

  1. Tu div fb, es un id no una clas, en el css tienes que llamarle con #.
  2. En cada propiedad CSS debes poner ; al final.
  3. En mi opinión usaría position: relative;

La parte a modificar sería esta, quedando así:

#fb {
  position: absolute; top: 150px;
}

Espero haber sido de ayuda, saludos!!

body {
  background-color: rgb(220, 220, 220);
}

* {
  padding: 0;
  margin: 0;
}

#header {
  margin: 0px;
  width: 1365px;
  font-family: century;
  font-size: 20.05px;
}

ul,
il {
  list-style: none;
}

.nave li a {
  position: relative;
  bottom: 5px;
  background-color: rgb( 0, 0, 0);
  color: white;
  width: 100%;
  text-decoration: none;
  display: inline-block;
  padding: 10px 10px;
}

.nave>li {
  float: left;
}

.nave li a:hover {
  background-color: rgb( 242, 179, 44);
}

p {
  background: white;
  width: 300px;
  margin: 50px;
  display: inline-block;
  padding: 20px;
}

.loren {
  position: relative;
  top: 227px;
  left: 850px;
  padding: 20px;
}

li ul li {
  display: block;
}

.header ul li a ul li {
  display: none
}

#fb {
  position: absolute; top: 150px;
}
<a href="codigo 1,inicio.html">
  <img src="baner3.png" height="200px" width="1366px" title="inicio" />
</a>

<div id="header">
  <ul class="nave">
    <li> <a href="codigo 1,inicio.html"> INICIO </a> </li>
    <li> <a href="seccion 1.xml"> NOSOTROS</a> </li>
    <li> <a href="new 1.html">CONTRA EDITORIAL PRIMATE </a>
      <ul>
        <li> <a href="articulos.html."> ARTICULOS </a> </li>
        <li> <a href? "publicaciones.html">PUBLICACIONES </a> </li>
        <li> <a href="columnas.html">COLUMNAS </a></li>
      </ul>
    </li>
    <li> <a href="primatetv.html">  PRIMATE TV </a> </li>
    <li> <a href="radio primate.html"> RADIO PRIMATE </a> </li>
    <li> <a href="tienda.html"> TIENDA </a> </li>
    <li> <a href="donaciones.html">DONACIONES </a> </li>
    <li> <a href="contactanos.html">CONTACTANOS </a> </li>
  </ul>
</div>
<div id="fb">
  <a href="https://www.facebook.com/Tr%C3%ADada-Primate-1006588336127088/?ref=aymt_homepage_panel">
    <img src="facebook-icon-preview-1-400x400.png" height="30px" width="30px" title="fb primate">
  </a>
</div>

0

Por reputación no puedo comentar, así que aquí solución:

Si no tienes acceso al HTML, aquí está la posible solución:

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		body {
  background-color: rgb(220, 220, 220);
}

* {
  padding: 0;
  margin: 0;
}

#header {
  margin: 0px;
  width: 1365px;
  font-family: century;
  font-size: 20.05px;
}

ul,li {
  list-style: none;
}

.nave li a {
  position: relative;
  bottom: 5px;
  background-color: rgb( 0, 0, 0);
  color: white;
  width: 100%;
  text-decoration: none;
  display: inline-block;
  padding: 10px 10px;
}

.nave>li {
  float: left;
}

.nave li a:hover {
  background-color: rgb( 242, 179, 44);
}

p {
  background: white;
  width: 300px;
  margin: 50px;
  display: inline-block;
  padding: 20px;
}

.loren {
  position: relative;
  top: 227px;
  left: 850px;
  padding: 20px;
}

li ul li {
  display: block;
}

.header ul li a ul li {
  display: none
}

#fb {
  position: relative;
  top: -200px;
}
	</style>
</head>
<body>
<a href="codigo 1,inicio.html">
  <img src="baner3.png" height="200px" width="1366px" title="inicio" />
</a>
<div id="header">
  <ul class="nave">
    <li> <a href="codigo 1,inicio.html"> INICIO </a> </li>
    <li> <a href="seccion 1.xml"> NOSOTROS</a> </li>
    <li> <a href="new 1.html">CONTRA EDITORIAL PRIMATE </a>
      <ul>
        <li> <a href="articulos.html."> ARTICULOS </a> </li>
        <li> <a href? "publicaciones.html">PUBLICACIONES </a> </li>
        <li> <a href="columnas.html">COLUMNAS </a></li>
      </ul>
    </li>
    <li> <a href="primatetv.html">  PRIMATE TV </a> </li>
    <li> <a href="radio primate.html"> RADIO PRIMATE </a> </li>
    <li> <a href="tienda.html"> TIENDA </a> </li>
    <li> <a href="donaciones.html">DONACIONES </a> </li>
    <li> <a href="contactanos.html">CONTACTANOS </a> </li>
  </ul>
</div>
<div id="fb">
  <a href="https://www.facebook.com/Tr%C3%ADada-Primate-1006588336127088/?ref=aymt_homepage_panel">
    <img src="facebook-icon-preview-1-400x400.png" height="30px" width="30px" title="fb primate">
  </a>
</div>
</body>
</html>

Lo que cambié fue:

#fb {
  position: relative;
  top: -150px;
}

# es para id, mientras que . es para class por ello si pones div id="fb" usas #

Y top: -150px marca qué tan separado estará el elemento del tope superior, que en este caso es negativo, también podrías usar margin-top checa aquí las diferencias.

Luego, es importante que después de una declaración se agrega el famoso ; porque marca el final de la declaración, poner position: relative top: 150px; se leería:

  • Propiedad: position
  • Valor(es): relative top: 150px

Y no daría el resultado deseado. Aunque también es válido position: relative; top: 150px; pues la computadora es indiferente a los espacios en estos casos (inclusive podrías escribir toda una página web en una sola línea, pero usualmente no se hace así por la legibilidad).

Una recomendación es que px no es responsive design, algo que es casi esencial actualmente, es mejor usar % ó vw-vh viewportwidth y viewportheight

Por último, acá está otra solución un poco más elaborada y con mejoras a toda la página:

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		body {
  background-color: rgb(220, 220, 220);
}

* {
  padding: 0;
  margin: 0;
}

#header {
  width: 100%;
  font-family: century;
  font-size: 20.05px;/*Usar vw o vh viewportwidth o viewportheight para responsive*/
}

ul,li {
	list-style: none;
}

.nave li a {
  position: relative;
  bottom: 5px;
  background-color: rgb( 0, 0, 0);
  color: white;
  width: 100%;
  text-decoration: none;
  display: inline-block;
  padding: 10px 10px;
}

.nave > li {
  float: left;
}

.nave li a:hover {
  background-color: rgb( 242, 179, 44);
}

li ul li {
  display: block;
}

.nave > li > ul{display: none;}
.nave > li:hover ul{display: block;}

#fb {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
	</style>
</head>
<body>
<div style="position: relative;">
<a href="codigo 1,inicio.html">
  <img src="https://i.stack.imgur.com/oURrw.png" style="width:100%" title="inicio"> 
</a>
<div id="fb" style="width:15%">
  <a href="https://www.facebook.com/Tr%C3%ADada-Primate-1006588336127088/?ref=aymt_homepage_panel">
    <img src="https://cdn4.iconfinder.com/data/icons/iconsimple-logotypes/512/github-512.png" title="fb primate" style="width: 100%">
  </a>
</div>
</div>
<div id="header">
  <ul class="nave">
    <li> <a href="codigo 1,inicio.html"> INICIO </a> </li>
    <li> <a href="seccion 1.xml"> NOSOTROS</a> </li>
    <li> <a href="new 1.html">CONTRA EDITORIAL PRIMATE </a>
      <ul>
        <li> <a href="articulos.html."> ARTÍCULOS </a> </li>
        <li> <a href="publicaciones.html">PUBLICACIONES </a> </li>
        <li> <a href="columnas.html">COLUMNAS </a></li>
      </ul>
    </li>
    <li> <a href="primatetv.html">  PRIMATE TV </a> </li>
    <li> <a href="radio primate.html"> RADIO PRIMATE </a> </li>
    <li> <a href="tienda.html"> TIENDA </a> </li>
    <li> <a href="donaciones.html">DONACIONES </a> </li>
    <li> <a href="contactanos.html">CONTÁCTANOS </a> </li>
  </ul>
</div>
</body>
</html>

En el redireccionamiento de las imágenes, se podría poner un onclick="window.open()" y quitarle el a href, pero eso no sé qué tan recomendable sea.

Agregué un div más con position: relative (div padre) para que el div con position: absolute (div hijo) se pudiera ajustar bien al padre.

Las imágenes son simplemente de prueba, el ponerle width: 100% a la imagen automáticamente la asigna un height de modo que no se vea distorsionada, por ello aquí se omite eso, además de ser responsive.

P.D. Los atributos height y width ya son obsoletos, puedes pasar tu página por la w3c para revisar si tienes algo así o algún error. También, HTML5 trae nuevas etiquetas como nav para la barra de navegación y otras cosas.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.