E
el noob
Alfa
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
hola que tal. hace poco que me metí en el cuento del diseño web y estoy en el proceso de crear una pagina, pero tengo un pequeño problema y es que no logro posicionar el logo donde quiero, les dejo una captura:
El logo es el que esta en el centro. Lo que quiero hacer es desplazar el logo un poco hacia abajo, pero cuando lo intento también se desplazan los links que están al lado.
Aquí les dejo el HTML Y CSS de la pagina:
El logo es el que esta en el centro. Lo que quiero hacer es desplazar el logo un poco hacia abajo, pero cuando lo intento también se desplazan los links que están al lado.Aquí les dejo el HTML Y CSS de la pagina:
HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximun-scale=1.0, minimum-scale=1.0">
<title>viajes</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,600,700" rel="stylesheet">
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<header>
<div class="contenedor">
<nav class="menu">
<a href="" id="btn-acerca-de">Acerca de</a>
<a href="" id="btn-acerca-de">Destinos</a>
<a href="" id="btn-inicio"><img src="img/logo2.png"></a>
<a href="" id="btn-acerca-de">Precios</a>
<a href="" id="btn-acerca-de">Contactanos</a>
</nav>
</div>
</header>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Insertar CODE, HTML o PHP:
*{
margin: 0;
padding: 0;
}
body{
font-family: 'Open sans', sans-serif;
}
.contenedor{
width: 90%;
max-width: 1600px;
margin: auto;
overflow: hidden;
}
header{
width: 100%;
background: url('../img/bg.jpg') no-repeat;
-webkit-background-size: cover;
background-size: cover;
background-attachment: fixed;
-ms-background-position: center 0;
background-position: center 0;
}
header .contenedor{
position: relative;
height: 600px;
}
header .menu{
width: 100%;
text-align: center;
}
header .menu a{
color: #fff;
font-size: 20px;
font-weight: 400;
display: inline-block;
margin: 10px 70px;
text-decoration: none;
position: relative;
}
header .menu a img{
width: 140px;
margin: -20px 0;
}
