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.sstatic.net/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.
div
con id "fb", ¿está dentro o fuera deldiv id="header"
? Al código que compartes le falta un cierre dediv
y no queda claro dónde iría.href
del enlace que contiene la imagen del logo? ¿No tienes control sobre el HTML?