Foros del Web » Creando para Internet » CSS »

ayuda con css

Estas en el tema de ayuda con css en el foro de CSS en Foros del Web. hola, tengo problemas para ubicar tres elementos de la cabecera de una web. Os explico: La cabecera está compuesta por: - una imagen que es ...
  #1 (permalink)  
Antiguo 13/05/2010, 10:33
 
Fecha de Ingreso: enero-2003
Mensajes: 39
Antigüedad: 14 años, 11 meses
Puntos: 0
ayuda con css

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>
  #2 (permalink)  
Antiguo 15/05/2010, 18:11
 
Fecha de Ingreso: agosto-2008
Ubicación: Puebla, Mexico.
Mensajes: 84
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: ayuda con css

creo que resultaria un poco mas facil si a la cabecera le pones una posicion relativa y al banner le pones una posicion absoluta, asi podrias posicionar el banner de manera mas facil usando right y top...suerte !
  #3 (permalink)  
Antiguo 16/05/2010, 10:46
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: ayuda con css

Totalmente de acuerdo con a77icu5, posicion relativa al padre y absoluta a los hijos, y luego controlas la posicion con una presición total.

Aunque si deseas trabajar con flotado te sugiero que "limpies los floats" dando hoverflow:hidden; al padre de los elementos flotados y luego a los elementos flotados le puedes dar position:relative; para manipular las distancias con top-right-left-bottom o bien utilizar para el mismo fin margin y padding.

Saludos!

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:34.