Foros del Web » Creando para Internet » CSS »

Quebraderos de cabea con DIVs y CSS

Estas en el tema de Quebraderos de cabea con DIVs y CSS en el foro de CSS en Foros del Web. Pués vereis, llevo tiempo usando los divs, me he medio acostumbrado a ellos, pero siempre, SIEMPRE, tengo algún problema, que sí los contenedores no están ...
  #1 (permalink)  
Antiguo 22/02/2011, 17:21
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 15 años, 10 meses
Puntos: 2
Quebraderos de cabea con DIVs y CSS

Pués vereis, llevo tiempo usando los divs, me he medio acostumbrado a ellos, pero siempre, SIEMPRE, tengo algún problema, que sí los contenedores no están uno dentro del otro, que si están desnivelados, que sí no flotan uno a la izquierda y otro a la derecha, que si hay que poner un código para que floten, que si el fondo no se me ve en X navegador y en el otro sí, que si en uno se se me ven con saltos de línea y en otro no... En fin, quisiera saber por qué ocurren tantos problemas si yo estructuro bien mis divs. Primero lo diseño en Photoshop y luego lo estructuro en bloc de notas sacando varios códigos del dreamweaver. Me he leido varios tutoriales pero las tablas jamás me dieron dolor de cabeza, en cambio los DIVs sí, y encima siempre tengo mal algún css... Cuando parece que todo va bien siempre tengo que rehacer todo mi trabajo. ¿Por qué tantos errores? ¿algún tutorial o tutoriales que me ayuden? (aunque me he leido bastantes) ¿cómo debería empezar con los divs? ¿centrándolos y pegándolos a los márgenes? ¿alguna manera de recortar las imágenes en photoshop para que los divs no se te hagan tan complicados?

Siento haberos soltado así todo esto pero es que es demasiaddo lío...

Saludos y espero que me ayuden!
  #2 (permalink)  
Antiguo 22/02/2011, 17:45
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 3 meses
Puntos: 36
Respuesta: Quebraderos de cabea con DIVs y CSS

Si dispones de Dreamweaver no le veo la lógica a usar el block de notas en lugar de la vista de código.
Yo no hago maquetaciones rígidas en Photoshop. Los bocetos los utilizo como una orientación y extraigo algunos recortes del mismo para fondos de botones o de algun div.
Si estás acostumbrado a trabajar con tablas y deseas coincidencias exactas del diseño de Photoshop con tu página lo mejor es usar posicionamiento absoluto donde tengas problemas.
Se trataría de utilizar un contenedor de ancho fijo con el ancho que has usado en la maquetación al que le das una posición absoluta o relativa y que en ocasiones querrás centrar usando margin:0 auto.
Dentro de este contenedor puedes situar los distintos recortes dentro de divs (normalmente como fondo), cada uno de los cuales tendrá posición absoluta, dandoles el alto y el ancho del recorte y la posición que ocupaba originalmente definida mediante left y top.
Este método funciona igual que las capas de photoshop, permitiendo incluso superponer unas capas sobre otras usando la propiedad z-index.
Aunque en principio es una máquetación que funciona perfectamente, con la práctica se muestra muy rígida y no es la ideal en todos los casos.
En otras páginas es deseable mayor flexibilidad y otros posicionamentos son más simples cuando las páginas se adaptan de algún modo al ancho de la ventana del navegador.
Con el tiempo llegarás a usar distintos tipos de posicionamiento para distintos elementos de la página. Es sólo cuestión de práctica y de investigar en el código de otros para aprender cómo lo hicieron.
  #3 (permalink)  
Antiguo 22/02/2011, 17:58
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 15 años, 10 meses
Puntos: 2
Respuesta: Quebraderos de cabea con DIVs y CSS

Muchas gracias sanxuan. Tendré que usar el posicionamiento absoluto, pero lo pongo en todos los divs?

De todas formas yo he investigado muchos divs de otros diseños y a ellos les cuadra muy bien, pero yo siempre me equivoco en algo. Un ejemplo que me ocurre es alinear el texto 15px a la izquierda, para alinearlo sin que la magen de abajo (que está dentro del mismo div) se alinee también tengo que hacer otro div y meter el texto dentro. En fin, me cabrea mucho tener tantos fallos si me he leido muchísimas cosas para solventarlos, pero nada...
  #4 (permalink)  
Antiguo 22/02/2011, 18:22
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: Quebraderos de cabea con DIVs y CSS

usar posición absoluta yo no la consideraría una opción, si empiezas mal terminaras mal... porque no mejor nos muestras algo de código como el que mencionas del párrafo para ver en que te estas equivocando y orientarte mejor....

así para la próxima ya no te equivocaras ñ.ñ
estoy seguro que por mas que hayas leído algo se te esta escapando y por eso batallas tanto, ya que usar divs a la larga resulta mucho mas sencillo que usar tablas.
  #5 (permalink)  
Antiguo 22/02/2011, 18:37
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 15 años, 10 meses
Puntos: 2
Respuesta: Quebraderos de cabea con DIVs y CSS

Bueno.. no tengo mucho ahora mismo, pero he empezado algo hace nada, todo en Dreamweaver, solo son 3 o 4 divs con una o dos imágenes.

AVISO, jamás incluyo el CSS en el mismo código, esta vez he hecho una excepción, pero no suelo hacerlo.

Código:
Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
#body {
width: 960px;
}
#body #news #news2 {
width: 744px;
float: left;
}
#menuleft {
float: left;
width: 216px;
}
.noticias {
width: 744px;
background-image: url(webs/bgbody.png);
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
}
</style>
</head>

<body>
<div id="body"><img src="webs/logo.png" width="960" height="245" alt="Logo" /><img src="webs/menu20.png" width="960" height="106" />Colocar aquí el contenido para id "body"
<div id="news">
<div id="news2">Colocar aquí el contenido para id "news2"<img src="webs/body1.png" width="744" height="42" />
<div class="noticias">Colocar aquí el contenido para class "noticias"<img src="webs/ftbody.png" width="744" height="53" /></div>
</div>
</div>
<div id="menuleft">Colocar aquí el contenido para id &quot;menuleft&quot;</div>
</div>
</body>
</html>
Os iré diciendo, ningún error, salvo algo que quería hacer y no pude; El texto "Colocar aquí el contenido para class "noticias"" (lo máximo que conseguí fue alinearlo la primera línea, las demás, no) quería colocarlo 15 píxeles hacia la derecha sin que la misma imagen de dentro que está en el mismo div se alinee esos 15px, solo el texto, pero nada... Tampoco puedo colocar la imagen fuera de ese div porque los contenedores que estan flotando en izq-der se quitarían.

Los errores que normalmente me empezarían a ocurrir serían los siguientes:

1. Los divs que están alineados uno en la izquierda y otro en la derecha acabarían por desestructurarse (colocándose uno de los divs debajo del otro respectivamente).

2. Cuando quisiese colocar un fondo en 'X' div se me vería blanco, en uno o ambos navegadores.

3. Habría saltos de línea y eso haría que las imágenes se separasen.

4. A veces el texto se me desnivela y se coloca en una posición que yo no he ordenado.

5. El div contenedor se queda del tamaño predeterminado y los otros se saldrían fuera de él (esto lo resuelvo solo a veces).

Etc... Todos esos errores me acabarían ocurriendo sí o sí.

Saludos y gracias!
  #6 (permalink)  
Antiguo 22/02/2011, 18:44
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 3 meses
Puntos: 36
Respuesta: Quebraderos de cabea con DIVs y CSS

Todo es cuestión de práctica y no hay mejor manera de aprender que experimentando lo que se va aprendiendo.
En el caso del texto es mucho mejor idea usar las etiquetas de párrafo <p> para encerrar el texto y darles a éstos párrafos un margen para separarlas de los bordes del div. Supón que el div tiene de nombre padre (id="padre"). Basta con crear la regla #padre p{margi-left:15px;} o bien #padre p{padding-left:15px}.
Respecto a los div con posición absoluta, no hay nada que impida que los uses en todas las ocasiones, pero no va ser lo normal. Por lo general vas a necesitar diseños que se adapten al contenido al menos en altura, y para esa situación la posición absoluta no es la más aconsejable. La maquetación más habitual incluye cabeceras y pies de página que pueden ser de tamaño fijo y columnas de contenido intermedias que son de ancho fijo o que varían en función del ancho de la página. El alto de estas columnas es variable y es dentro de ellas donde se sitúan los elementos de la página.
Puede ser una buena idea usar posición relativa para cada uno de los elementos anteriores y posiciones absolutas dentro de ellos cuando sean necesarias. De esa manera la página se adapta al alto de las columnas y se puede variar el alto de pie y cabecera sin descomponer la página.
La solución ideal no existe más que para cada uno de nosotros. Lo habitual será utilizar combinaciones de distintos tipos de posicionamiento.
  #7 (permalink)  
Antiguo 22/02/2011, 19:26
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 15 años, 10 meses
Puntos: 2
Respuesta: Quebraderos de cabea con DIVs y CSS

Normalmente mi modus operandi es el siguiente: Diseño en photoshop todo, botones, menús, header y footer. Los recorto y los guardo para web.

Es decir, mi web consta de:

---HEADER---
---MENU---
MENU-CONTENIDO-MENU(OPCIONAL)
---FOOTER---

Los divs como el div contenedor en pos. relativa y los que necesite que cuadren en absoluta, no?

Pero es no evitará que muchos de los errores que me suelen pasar sigan, no?

Saludos y gracias por responder
  #8 (permalink)  
Antiguo 23/02/2011, 09:37
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 3 meses
Puntos: 36
Respuesta: Quebraderos de cabea con DIVs y CSS

Creo que cada uno tenemos maneras diferentes maneras de hacer las cosas y todas son igual de válidas.
Supón un ejemplo simple. Tenemos la cabecera con tres elementos dentro. Un título, un párrafo y una imagen.
Tu has colocado los tres elementos en Photoshop a distintas alturas y quieres que queden exactamente igual.
Una persona decidirá que es buena idea hacer flotar los elementos, quizás usando algún margen que puede ser negativo para corregir desplazamientos verticales.
Otra persona prefiere usar posicionamiento relativo para esos elementos indicando el desplazamiento respecto a la posición "natural" en que aparecen.
Creo que en casos como ese es buena idea hacer uso del posicionamento absoluto.
No es que sea ni mejor ni peor, es que requiere de muy poco esfuerzo mental para trasladar el diseño. Daría a la cabecera la posición reltiva y a los tres elementos que contiene posición absoluta. Basta con comprobar la posición en píxeles de cada elemento y trasladar esos valores mediante propiedades top y left (por ejemplo).
Las posibilidades no acaban ahí. Sin mucho esfuerzo se me ocurrirían otras cuantas maneras menos habituales de posicionar. Supongo que otros habrán llegado a desarrollar métodos que ni se me ocurrirán jamás.
La misma cuestión se plantea cuando queremos colocar varias columnas una al lado de la otra. Hacer flotar las columnas es una posibilidad muy habitual. Usar posicionamiento absoluto para fijar las columnas en su contenedor es igual de válido en ese caso.
El contenido de cada una de estas columnas, sin embargo, parece mejor idea que sea el código HTML y el flujo habitual quien marque la posición haciendo uso de márgenes y padding para mantener espacios.
  #9 (permalink)  
Antiguo 23/02/2011, 18:55
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 15 años, 10 meses
Puntos: 2
Respuesta: Quebraderos de cabea con DIVs y CSS

Ves... mira, ya tengo dos errores y eso que hice los pasos que me dijiste...

Te pego el código para que veas:

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
#contenedor {
width: 960px;
margin-top: -20px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border-right-width: 2px;
border-left-width: 2px;
border-right-style: dotted;
border-left-style: dotted;
border-right-color: #333;
border-left-color: #333;
}
.contenido {
width: 744px;
float: left;
}
.menu2 {
float: right;
width: 216px;
}
#news3 {
width: 744px;
p{padding-left:15px;
background-image: url(webs/bgbody.png);
}
</style>
</head>

<body>
<div id="contenedor"><img src="webs/logo.png" width="960" height="245" /><img src="webs/menu20.png" width="960" height="106" />
<div class="contenido">Colocar aquí el contenido para class "contenido"<br />
<img src="webs/body1.png" width="744" height="42" />
<div class="news3"><p>Colocar aquí el contenido para class "news3"</p></div>
<img src="webs/ftbody.png" width="744" height="53" /> </div>
<div class="menu2">Colocar aquí el contenido para class "menu"</div>
<div id="footer"><img src="webs/footer1.jpg" width="960" height="93" /><img src="webs/footer2.jpg" width="960" height="96" /></div>
</div>
</body>
</html>
Los errores son los siguientes:

1. El fondo en news3 no se me ve, se sigue viendo blanco y no hay manera de que se modifique..

2. He usado lo de encerrar el texto en <p> y luego ponerle estilo como has dicho y no se coloca esos 15px a la izquierda, sigue dónde está :\

¿Qué hago mal?

Saludos y gracias por responder!
  #10 (permalink)  
Antiguo 23/02/2011, 19:18
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 3 meses
Puntos: 36
Respuesta: Quebraderos de cabea con DIVs y CSS

En lugar de usar
Código CSS:
Ver original
  1. #news3 {
  2. width: 744px;
  3. p{padding-left:15px; /* Esta línea no es válida y provoca que la siguiente tampoco lo sea */
  4. background-image: url(webs/bgbody.png); /*es lo impide que se vea la imagen de fondo */
  5. }
Puedes usar:
Código CSS:
Ver original
  1. #news3 {
  2. width: 744px;
  3. background-image: url(webs/bgbody.png);
  4. }
  5. #news3 p { /*cada uno de los párrafos dentro del elemento de id #news3 */
  6. margin-left:15px;
  7. }

Seguro que un manual de CSS te ayudará a mejorar el número de aciertos y a evitar bastantes errores.
Este es muy recomendado en este foro: http://www.librosweb.es/css/index.html

Última edición por sanxuan; 23/02/2011 a las 19:28
  #11 (permalink)  
Antiguo 24/02/2011, 07:12
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 15 años, 10 meses
Puntos: 2
Respuesta: Quebraderos de cabea con DIVs y CSS

Muchas gracias por el manual, lo leeré.

Pero lo que me has dicho sigue sin funcionar, el texto sigue anclado a la izquieerda del todo (no se mueve 15px) y el fondo sigue viéndose blanco, en qué me equivoco? A esto me refería con los errores que me pasan...

Saludos y gracias!
  #12 (permalink)  
Antiguo 24/02/2011, 07:30
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 3 meses
Puntos: 36
Respuesta: Quebraderos de cabea con DIVs y CSS

Creo haberlo explicado ya. En el código que pegaste hay un error que he comentado dentro de estos símbolos: /* comentario */. O bien olvidaste cerrar la regla #news3 con la llave"}" o bien se te coló una línea donde no debía.
Ese error impide que esa parte del CSS sea leída por el navegador. Corrige ese error y tu página debería verse correctamente, suponiendo que la imagen exista y está situada donde indica la propiedad background-image.
He probado ese código en mi ordenador antes de contestar. No porque sea complicado sino por que en ocasiones uno quiere escribir h pero termina tecleando q. No es el caso.
Asegúrate de validar tus páginas para encontrar errores.
http://www.validator.w3.org/unicorn te mostrará tanto los errores de HTML como los de CSS.
Saludos.
  #13 (permalink)  
Antiguo 24/02/2011, 08:15
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 15 años, 10 meses
Puntos: 2
Respuesta: Quebraderos de cabea con DIVs y CSS

Nada, probablemente no lo entienda, pero he hecho lo que me has dicho, he verificado que todo esté bien, línea por línea, y lo está, pero ni el fondo se me ve ni el text del mismo div se mueve, lo he validado en la web que me has dicho y solo me ha dado los errores del espacio " />", pero ninguno relacionado con ninguna línea en particular, además lo he hecho todo desde los menús del Dreamweaver por lo tanto no debería haber errores ya que es automatizado :\.. Sigo sin entender por qué no se visualizan, pero me pasa siempre con cualquier cosa que haga..

EDITO: Vale, error mío, el más tonto de todos, he puesto un estilo para una class cuando lo que había hecho era un ID... Ahora parece que sí va. De todas formas iré poniendo errores del proceso.

Muchas gracias por responder sanxuan!

Última edición por kiM-; 24/02/2011 a las 08:20
  #14 (permalink)  
Antiguo 24/02/2011, 08:23
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 15 años, 10 meses
Puntos: 2
Respuesta: Quebraderos de cabea con DIVs y CSS

Siento hacer doblepost pero ahora tengo otro problemilla que al parecer no tiene lógica alguna, debbajo de la imagen "body1" y encima de la imagen "ftbody" hay un espacio (hacia el fondo, y dónde está el text news3") en blanco, como un salto de línea, que no consigo quitar :\
  #15 (permalink)  
Antiguo 24/02/2011, 08:48
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 3 meses
Puntos: 36
Respuesta: Quebraderos de cabea con DIVs y CSS

Son los márgenes del párrafo que contiene news3. Puedes usar margin:0 0 0 15px en la regla correspondiente entre otras posibles soluciones. Los 15 píxeles son los del margen izquierdo.
En tu caso, que usabas padding-left:15px, símplemente añade margin:0.

Yo uso Firefox con el complemento Firebug. Te ayudará a localizar y corregir los errores de tus páginas y entender cómo hacen otros las suyas.
otros navegadores también tienen sus propias herramientas de desarrollo.
Errores tontos como el confundir un punto(.) con una almohadilla(#) creo que nos ocurren a todos. No somos infalibles. Lo importante es saber localizar dónde hemos cometido el fallo y saber corregirlo. Es sólo cuestión de práctica.
  #16 (permalink)  
Antiguo 24/02/2011, 09:39
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 15 años, 10 meses
Puntos: 2
Respuesta: Quebraderos de cabea con DIVs y CSS

Bueno, por ahora va bien la verdad, pero me han surgido unas dudas de última ahora, porque ahora que caigo, si hago la web usaré includes para que la carga vaya más rápida, mis dudas son las siguientes:

1. En las includes, ¿habría que pegar el div completo? Yo solo las usaré para el contenido en sí, por lo tanto tendría que mover enteramente el div "contenido" a una sola página aparte para hacerla include? Supongo que esto no supondría ningún problema para las css, no?

2. Para que los párrafos se alineen según yo quiera hay que encerrarlos en <p>, hasta ahí bien. Pero, ¿hay alguna otra forma de que reconozca la etiqueta <p> que no sea encerrando el texto en la misma? Es decir, en los ejemplos de arriba, le quito la etiqueta <p> al texto de news3, desde la hoja css se podría alinear ese texto sin encerrarlo en <p> o haciendo que se encerrara desde la misma CSS o similar?

Edito con una tercera duda que se me había pasado:

3. Supongo que es unaa duda un tanto estúpida, los estilos de los menús y textos los pongo en el mismo css del div, es decir, si quiero que el contenido de news3 sea blanco y en verdana lo hago desde el css del div ".news3", no? con los menús igual, no? o para ellos mejor usar listas?

Me he liado un poco, lo siento

Gracias por responder!

Última edición por kiM-; 24/02/2011 a las 09:47
  #17 (permalink)  
Antiguo 24/02/2011, 15:59
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 15 años, 10 meses
Puntos: 2
Respuesta: Quebraderos de cabea con DIVs y CSS

Siento ser pesado otra vez y hacer doblepost pero resulta que ahora, al poner dos divs en float left y right respectivamente dentro de un div contenedor, el div contenedor que está en fondo blanco no se estira y los que tienen float se quedan fuera, cosa que no me pasaba antes, alguna solución?

Saludos y gracias

P.D: Perdón por ser algo pesado
  #18 (permalink)  
Antiguo 24/02/2011, 16:31
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 3 meses
Puntos: 36
Respuesta: Quebraderos de cabea con DIVs y CSS

Ponte todo lo pesado que quieras, pero mejor inicia un nuevo tema para una nueva pregunta. De esa manera otro que tenga la misma duda podrá encontrar la solución más facilmente.

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 15:01.