Problema tonto y chorras de márgenes

[samy4ever]

Hola!

Me estoy volviendo loco. Tengo un div que es el container de todo. Dentro, tengo uno que es el header y un subcontainer.

El subcontainer tiene un subcontaineraux (porqué quiero hacerle las esquinas redondeadas al container visible, es decir, a todo el container excluyendo el header), un div para el banner y más cosas.

PROBLEMA: Cuando muevo un poco abajo el banner, para que me deje un espacio entre el header y éste (de manera que el header no estaría pegado al banner sinó que tendría una breve línea separatória), se me mueve tambien el subsubcontainer, así que cuando intento redondear este, no se ve nada.

Os dejo el link y quizá lo veis más claro:

http://tecnotortest.site50.net

Yo lo que quiero es que el subcontaineraux esté enganchado al header, y el banner un poquito más abajo. (13.5px más abajo). Así, el banner no lo tengo enganchado al header y puedo redondear las esquinas del subcontaineraux.

Espero que se haya entendido. Tiene que ser una chorrada pero no veo la luz.

Gracias!

[Mikmoro]

Ahora no se ve tu página, pero puedes ponerle al banner position: relative; y top 13.5px;

[kseso?]

Hay un problema con tu página:

Website under Review

Hay varias técnicas para ello, casualmente termino de abrir este tema

Y Mikmoro en Araudi.net tiene algún ejemplo también, creo recordar.

Edito: por un minuto, encontronazo

[samy4ever]

Vaya hombre, justo me la ponen ahora en revisión... Maldito free hosting xD

Bueno, os comento. Probé el position: relative en el banner (antes de postear) y el problema es que me dejaba el espacio deseado... pero un div que había más abajo (que era un menu horizontal) me subía para arriba. Y entonces claro, no iba bien. No se si es que tengo que añadir algo más en el div del menu para que no se me vaya arriba? Le puse más margin-top pero bajó el menú junto al banner :S:P!

Gracias por la ayuda!

EDITO: Sí, esquinas redondeadas así estarían bien, creo que buscaré algun manual de fireworks a ver... De mientras dejaré lo que tengo, aunque cuando aprenda a hacer una simple redonda miraré de cambiarlo :)

[Mikmoro]

Pero juraría que el problema no es cómo redondear las esqunas, sino como dar un margen superior para una separación a un elemento sin que el elemento padre se desplace con él, algo que sabemos que ocurre en FF habitualmente.

[samy4ever]

Iniciado por Mikmoro

Pero juraría que el problema no es cómo redondear las esqunas, sino como dar un margen superior para una separación a un elemento sin que el elemento padre se desplace con él, algo que sabemos que ocurre en FF habitualmente.

Exacto, ese es mi problema :S Qué significa FF?

[Mikmoro]

Hemos chocado los tres.

Pues samy4ever, es tan sencillo como dar posición relativa al menú y desplazarlo también a tu gusto.

FF= Firefox

[samy4ever]

Oks, gracias... Voy a instalar apache y probar allí, ya que el hosting se me ha puesto en huelga unas horas xD

Aún me quedo el camino de Santiago para aprender bien CSS :P

[samy4ever]

Bueno, he ido probando desde mi ordenador, ahora servidor.

Al final lo que he hecho ha sido poner el banner en posición relativa Y el subcontainer que tenía a este en absoluta.

#subContainerAux{
position: absolute;
width: 996px;
-moz-border-radius: 12px;
background-color:green;
}

#banner{
position: relative;
width: 964px;
height: 220px;
background-color:red;
margin: auto;
margin-top: 13.5px;
-moz-border-radius: 50px; /* Per navegadors motors gecko arrodonim... */
}


Hay dios mio, cuesta más el diseño que la web! jejejej

[samy4ever]

Chicos, sigo con problemas.

A ver, he cambiado la estructura de divs (me he dado cuenta que sobraba uno), y al quitarlo me pasa esto...

http://img72.imageshack.us/my.php?image=dibujoyh8.jpg

El banner está en posición relativa. Pero para que no se me enganche a su contenedor (aún y tener margin-top: 13.5px) la ÚNICA forma que he encontrado es ponerle position: absolute; al contenedor del banner. El problema me viene en qué ese contenedor deja de estar en el centro y no logro centrarlo :( En Mozilla/Chrome se me tira para la izquierda, en IE para la derecha...

Código:

body {
	text-align:center;
	color: silver;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #333344;
	background-image: url(./final.png); 
	background-repeat:repeat-x;
}

#container{
	width: 996px;
	height: 562px;
	background-color: black;
	margin: 0 auto;
	-moz-border-radius: 12px; /*Per navegadors motors gecko arrodonim... */
	position: absolute;
	text-align:center;
}

#header{
	width: 996px;
	height: 61px;
	background-color: white;
	margin: 0 auto;
}

#banner{
	position: relative;
	width: 964px;
	height: 220px;
	background-color:red;
	margin: auto;
	margin-top: 13.5px;
	-moz-border-radius: 20px; /* Per navegadors motors gecko arrodonim... */
}

Alguna idea de cómo sacar el absolute para que quede centrado, o de cómo puedo centrarlo teniendo el absolute?:S

[samy4ever]

A ver si alguien me puede dar una mano! La web ya funciona:P

http://tecnotortest.site50.net !