hola,
tengo problemas para ubicar tres elementos de la cabecera de una web. Os explico:
La cabecera está compuesta por:
- una imagen que es el logo
- una lista de elementos que debe aparecer separada del logo unos 25 px
- un banner que se carga de forma aleatoria y debe aparecer puesto a la derecha...
La imagen del logo la pongo que flote a la izquierda y le doy su tamaño. El banner le indico que flote a la derecha indicando tambien lo que ocupa... Sin embargo me queda todo bastante mal...
Alguien me puede decir cómo solucionarlo?
<title>Ejemplo</title>
<style type="text/css">
* {margin:0; padding:0}
div#todo{
width:960px;
margin:0 auto;
background-color:#FFF;
}
div#cabecera{
background-color:#0F6;
}
div#cabecera h1 {
background-image:url(img/logo.png);
width:170px;
height:125px;
float: left;
}
div#cabecera h1 span {
display:none;
}
div#cabecera h2 {
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
}
div#cabecera img {
width:400px;
height:125px;
float:right;
}
</style>
<script type="text/javascript">
var rutasBanner = new Array ("img/banner1.png", "img/banner2.png", "img/banner3.png", "img/banner4.png");
var altsBanner = new Array ("banner 1", "banner2", "banner3", "banner4");
function cargarCabecera(){
var aleatorio = Math.floor (Math.random()*4);
if (aleatorio == 4) cargarCabecera();
document.images["banner"].src=rutasBanner[aleatorio]
document.images["banner"].alt=altsBanner[aleatorio]
}
</script>
</head>
<body onload="cargarCabecera()">
<!-- Ejemplo de página con menú de navegación y maquetación columnas con capas -->
<div id="todo">
<div id="cabecera">
<h1><span>mi logo </span></h1>
<h2>
<ul>
<li>elemento 1</li>
<li>elemento 2</li>
<li>elemento 3</li>
</ul>
</h2>
<img name="banner"/>
</div>
</div>
</body>
</html>