Buenas compañeros.
Estoy intentando aprender CSS y me encuentro con algunos problemillas que no consigo resolver.
Primero he realizado un header con la barra de navegación, en el header he insertado el logo, y en la barra una lista la cual es el menú.
Ahora intento realizar un div el cual irá en la parte superior derecha, pero de la forma que lo he realizado me descoloca la barra de navegación.
El código css que tengo para ese Div es el siguiente:
Código CSS:
Ver original.llama {
float: right;
display: inline;
background:-webkit-linear-gradient(top, #22272b, #2a2d30);
border-top: solid 1px #4a5157;
position: relative;
top: -50px;
left: -7px;
}
y tengo otro el cual modifica el interior de ese Div
Código CSS:
Ver original#interiorllama {
font-size: 30px;
color: #fff;
text-shadow: black 0.1em 0.1em 0.2em;
margin-left: 20px;
margin-right: 20px;
margin-top: 5px;
margin-bottom: 5px;
}
He conseguido realizarlo cambiando el position relative por fixed y cambiando el top y left para situarlo bien . pero obviamente al reducir el tamaño de la pantalla al llegar al div, este no se desplaza.
La idea es que quede de esta forma:
Adjunto también todo el código css que tengo hasta ahora por si algo entra en conflicto lo tengáis a mano. Un saludo y gracias de antemano
Código CSS:
Ver originalbody {
background: url("http://www.pciviljumilla.es/wp-content/uploads/2014/08/Concierto.jpg") no-repeat fixed center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: #7db9e8;
font-family: Verdana;
}
h2 {
font-size: 14px;
vertical-align: middle;
text-align: left;
margin-top: -2px;
margin-bottom: -5px;
margin-left: 6px;
color: #FFF;
text-shadow: black 0.1em 0.1em 0.2em;
}
header {
text-align: left;
margin: 1px auto;
padding: 10px 10px 10px 25px;
width: 1175px;
margin-bottom: -10px;
}
.llama {
float: right;
display: inline;
background:-webkit-linear-gradient(top, #22272b, #2a2d30);
border-top: solid 1px #4a5157;
position: relative;
top: -40px;
left: -7px;
}
#interiorllama {
font-size: 30px;
color: #fff;
text-shadow: black 0.1em 0.1em 0.2em;
margin-left: 20px;
margin-right: 20px;
margin-top: 5px;
margin-bottom: 5px;
}
nav {
background:-webkit-linear-gradient(top, #22272b, #2a2d30);
border-top: solid 1px #4a5157;
text-align: center;
margin: 15px auto;
padding: 1px 0;
width: 1175px;
}
section {
margin: -17px auto;
width: 1175px;
height: 600px;
background-color: #fff;
}
li {
font-size: 20px;
display: inline;
margin-right: 35px;
border-radius: 10px;
border-radius: 10px;
padding: 6px 10px 6px 10px;
}
li:hover {
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}
a:link {
text-decoration: none;
color:#ffffff;
}
a:visited {
text-decoration: none;
color:#ffffff;
}
a:active {
text-decoration: none;
color:#ffffff;
}
a:hover {
text-decoration: none;
color:#ffffff;
}
Me gustaría si es posible también que me expliquéis en que se basa el error para que pueda entenderlo yo mismo y no me vuelva a pasar en el futuro. Un abrazo