Tengo el siguiente código:
HTML:
Cita:
CSS:<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<div id="contenedor">
<a href="index.html"><img src="images/logo.jpg"></a>
<div id="extras"><a href="http://www.youtube.com">youtube</a></div>
<div id="menu">
<ul>
<li><div class="botonera"><a href="empresa.html">Empresa</a></div></li>
<li><div class="botonera"><a href="productos.html">Productos</a></div></li>
<li><div class="botonera"><a href="innovacion.html">Innovación?</a></div></li>
<li><div class="botonera"><a href="noticias.html">Noticias</a></div></li>
<li><div class="botonera"><a href="galeria.html">Galería</a></div></li>
<li><div class="botonera"><a href="equipo.html">Equipo</a></div></li>
<li><div class="botonera"><a href="contacto.html">Contacto</a></div></li>
</ul>
</div>
<br><br><br>
<div id="multimedia" style="background-color:red;">
<img src="" style="width:600px;">
</div>
</div>
</body>
<html>
<head>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<div id="contenedor">
<a href="index.html"><img src="images/logo.jpg"></a>
<div id="extras"><a href="http://www.youtube.com">youtube</a></div>
<div id="menu">
<ul>
<li><div class="botonera"><a href="empresa.html">Empresa</a></div></li>
<li><div class="botonera"><a href="productos.html">Productos</a></div></li>
<li><div class="botonera"><a href="innovacion.html">Innovación?</a></div></li>
<li><div class="botonera"><a href="noticias.html">Noticias</a></div></li>
<li><div class="botonera"><a href="galeria.html">Galería</a></div></li>
<li><div class="botonera"><a href="equipo.html">Equipo</a></div></li>
<li><div class="botonera"><a href="contacto.html">Contacto</a></div></li>
</ul>
</div>
<br><br><br>
<div id="multimedia" style="background-color:red;">
<img src="" style="width:600px;">
</div>
</div>
</body>
Cita:
body{
background-color: grey;
text-align:center;
}
a img{
width:30%;
border:none;
}
a:visited {
text-decoration:none;
}
a:link {
text-decoration:none;
}
a:hover {
text-decoration:underline;
color:blue;
}
ul li a {
display:block;
text-decoration:none;
color:black;
}
ul li {
list-style:none;
float:left
}
#contenedor {
position:absolute;
width:800px;
min-width:800px;
max-width:1200px;
margin:auto;
background-color: white;
text-align:left;
border-style:solid;
border-width:4px;
}
#extras {
position:relative;
text-align:right;
}
#menu {
position:relative;
width:800px;
margin:auto;
background-color: red;
text-align:center;
}
.botonera{
width:80px;
margin-left:10px;
margin-right:10px;
text-align:center;
background-color: white;
}
@media all and (max-width:799px) and (min-width:300px){
#contenedor {
width:300px;
min-width:300px;
max-width:799px;
}
#menu {
width:300px;
}
}
@media all and (max-width:299px){
#contenedor {
width:150px;
min-width:100px;
max-width:299px;
}
#menu {
width:100px;
text-align:left;
}
}
background-color: grey;
text-align:center;
}
a img{
width:30%;
border:none;
}
a:visited {
text-decoration:none;
}
a:link {
text-decoration:none;
}
a:hover {
text-decoration:underline;
color:blue;
}
ul li a {
display:block;
text-decoration:none;
color:black;
}
ul li {
list-style:none;
float:left
}
#contenedor {
position:absolute;
width:800px;
min-width:800px;
max-width:1200px;
margin:auto;
background-color: white;
text-align:left;
border-style:solid;
border-width:4px;
}
#extras {
position:relative;
text-align:right;
}
#menu {
position:relative;
width:800px;
margin:auto;
background-color: red;
text-align:center;
}
.botonera{
width:80px;
margin-left:10px;
margin-right:10px;
text-align:center;
background-color: white;
}
@media all and (max-width:799px) and (min-width:300px){
#contenedor {
width:300px;
min-width:300px;
max-width:799px;
}
#menu {
width:300px;
}
}
@media all and (max-width:299px){
#contenedor {
width:150px;
min-width:100px;
max-width:299px;
}
#menu {
width:100px;
text-align:left;
}
}
