Menu en acordeon + CSS

NeB1

jejeje, relajad animos:P

A ver, siq ue tienes la web como toca más o menos, mira ahora prueba a "menuContainer" ponerle en el CSS float:left; y a "noticias" float:right;

Cuando lo hagas verás que se te colocan uno al lado del otro y noticias no se meneará cuando pulses algún elemento del menú, pero también verás que "pie" se te sobrepondrá a estos dos divs, como si estuviese por encima. Entonces a "contenido" le pones display:table, y funcionará.

Como no te pase nada de lo que digo quedaré muy mal xDD

#29 Eso suele estar muy bien pero para webs que no tienen que crecer a lo largo, ya que posicionas cada elemento donde tu quieres exactamente, es especialmente útil, cuando la web es un fotomontaje donde tu faena se limita a colocar los textos y las imagenes en ubicaciones determinadas, pero en este caso no le serviría del todo.

Master_0n3

No pasa nada, pero me ha sonado a: "este inutil de qué va!" y realmente no estoy intentando que hagais mi trabajo. Lo que intento es hacerlo yo, y creeme que antes de preguntar aquí he buscando en otros sitios, ya que no me dedico a esto profesionalmente y me gustaría aprender. De hecho estoy estudiando informatica y una vez acabe me gustaria dedicarme al desarrollo web, que no he tocado nada nunca... Pero bueno, disculpame a mi tambien por haberme puesto asi, pero es que no es la primera vez que me dicen algo asi, y si diciendomelo a malas xD

Crawler

Al mundo mundial de los maquetadores web:

Pegaros una buena empollada sobre positions y floats, y perded el miedo (y la ignorancia) de una vez!

Position (y mucho más)
http://www.quirksmode.org/css/position.html

Floats y otros:
http://css.maxdesign.com.au/

Para #4 y otros miles de personas que están igual:

Un elemento con position: absolute sale de su posición normal en pagina y se posiciona en las coordenadas deseadas, relativas a su bloque contenedor

Un elemento con position: fixed sale de su posición normal en pagina y se posiciona en las coordenadas deseadas, relativas a la ventana del navegador

NeB1

#33 En realidad, el position:absolute, se posiciona en relación al primer padre con "position:relative". Esto es muy importante, ya que si no lo especificas, en IE, esto será "body" y en firefox, opera y otros, será el div contenedor, o el primer elemento, ya que en IE (7 e inferior creo), creo que el position por default es "static" y en los otros "relative"

#35 pues no me dió por el saco, hasta que lo descubrí en su día xDD de normal nada más empezar una web, al principio del CSS: div{position:relative;margin:0;paddin:0; } XDD

Crawler

Y seguimos:

con position: absolute se posiciona con respecto a su primer padre que no tenga position: static.

Si no hay ningún elemento que cumpla con ello, se posiciona desde el elemento <html> (elemento <body> para ie6 y otras antigüedades)

El position por defecto según el standar css es position: static, y nuevamente se cumple en todos los navegadores "decentes."

"About Element Positioning (Microsoft)":
http://msdn.microsoft.com/en-us/library/ms533005%28VS.85%29.aspx

Tutorial sencillito con lo básico:
http://www.barelyfitz.com/screencast/html-training/css/positioning/

bLaKnI

No se/entiendo donde quereis llegar...

Para cada cosa, lo que toque, esta claro.
Pero para un funcionamiento normal, estándard y esperanzadoramente homogéneo en diversos navegadores, los DIV, con sus propiedades NORMALES.

Cuando empiezo una web NORMAL, lo que suelo hacer es:

body{
margin:0;
padding:0;
}

Y punto.
Los divisores y demás, no se tocan.

Creo una classe o un id particular, y se lo asigno al DIV que toque, y ahí, es donde hacemos lo que queramos.

Diferente es si jugamos con "los divisores dentro de un ID particular": #blabla div{...}

Para mi, si doy siempre un consejo de diseño a la gente es: NO TOQUEIS EL POSITION PARA NADA!
NUNCA. Dejadlo tal cual viene, estándard (static) y nada mas.
Diseñad SIEMPRE con margins, paddings y floats. Y en los peores momentos, con clears.
Y lo que si podeis hacer para jugar con "efectos", es jugar con la propiedad overflow:hidden.

Nada mas.

Ahí os asegurais un maquetado 100% compatible, hasta con IE6 y sin problemas.

Jugar con relative, REALMENTE solo da el poder usar unas "nuevas" características que son el TOP y LEFT.
Jugar con el absolute, es exactaente igual que con el relative, pero pasadose por el forro cojonil el flujo y precedencias.
Son ambos, malas praxias de forma natural. Deben usarse SOLO cuando deben usarse, y eso son pocas veces.

Otra cosa importante, es distinguir entre el tipo de maquetado estático, líquido y elástico. Y para cada caso, podremos O NO usar un tipo u otro de posicionamiento.

Acostumbraos a maquetar sin position, y será como empezar a conducir con un Clio del 89, y estar con el 10 años o mas, y después pasar a un coche con ABS, SP, direccion asistida y climatizador.
Empezad con un Megane de los de hoy, con marchas automáticas, y NUNCA podreis llamaros conductores (espero que se entienda la metáfora).

Por eso digo que no entiendo muy bien el mensaje que quieres transmitir, Crawler. Porque no se si estamos o no deacuerdo.

Pero en cualquier caso, son años en el tajo, y ya lo he probado todo. De hecho como ya dije, trabajo de ello, y concretamente, me dedico a la creación de "virguerias" en el sector web. Y he tenido que hacerme daño en los dedos para acabar entendiendo como funciona esto... xD

Por cierto, os recomiendo encarecidamente a los que tengais ganas, que os encerreis un puto fin de semana en casa sin salir, y os machaqueis la web de W3Schools desde el primer hasta el ultimo tutorial en la seccion CSS, y hagais todos los "Do it yourself".
Aprendereis REALMENTE como funciona el CSS, y el porqué es o no compatible en unos u otros navegadores...

Parece mentira que haya tanta gente que se llene la boca de "yo se maquetar", y no tengan ni la mas remota idea de porque una cosa funciona u otra no funciona. El famoso "bah! yo eso lo pongo porque siempre va bien...".

Hacks, trucos, excepciones, etc... aparte, que todos las hemos usado y de hecho, yo las uso diariamente, ya que no hay mas cojones. Y porsupuesto, cada dia aprendo cosas nuevas. El tema de las flotabilidades y posicionamiento, es precisamente algo que tengo que mirar 1000 veces cada vez, para recordar EXACTAMENTE como funcionaba y el porqué.

PD: A si! Y lo mas importante: ¿para que usar posicionamiento absoluto o relativo, si un maquetado CORRECTO (remarco CORRECTO) se soluciona sin problemas con posicionamiento estático y diseño líquido?

Estamos de acuerdo que, un maquetado de "esvástica" que lo llamo yo, no puede ser solventado mediante posicionamiento estático y flotabilidad. Ahí es el UNICO caso, en que el posicionamiento absolute es necesario. Pero, sencillamente, es un MAL diseño.

Crawler

Resumiendo:

Como tu bien dices, en casi todas las ocasiones no he tenido que tocar los positions de static, y que eso hace que se vea prácticamente idéntico en todos los navegadores, pero hay veces que es inevitable.

El problema es que cuando hace falta usarlo realmente, los foros están llenos de preguntas por el estilo y nadie da contestaciones correctas.

Y apoyo la idea de "os recomiendo que ...machaqueis la web de W3Schools"

Teoría, teoría y luego, práctica con la teoría sobre la mesa, nada de ir probando por probar...

Usuarios habituales