Dolores de cabeza con DIVs y CSS

kRain-

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!

NeB1

Con lo fácil y sencillo que es trabajar con divs...

Yo de tí seguiría esto www.960.gs, creo que es el futuro de la maquetación.

1 respuesta
fNtS

#1 Tal vez la estructura que escribas no sea la correcta, postea algún ejemplo y lo que sucede en cada navegador que testeas (entiendo que son 2 para comprobar que está okey), así te podremos ayudar mejor!

1 respuesta
kRain-

#2 Sigo ese método..

#3 A ver... 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:

<!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!

fNtS

¿El div con id news es necesario? Mi sugerencia es que crees otra clase que se llame .news2 para el 2 div, así borramos el primero, esto estaría correcto si tubieses varios div por debajo de news que necesitassen las caracteristicas de news2, pero sino lo encuentro un poco inservible.

1.- Le has de poner al estilo el lugar donde lo quieres alinear

2.- Una vez corrijas todo esto se verá más claramente por que falla

3.- Te digo lo mismo que con el 2, y el problema parece ser algun que otro div que molesta.

4.- Alineación en el css del div, si lo alineas te debería de ir okey.

5.- Por que le habrás puesto un valor al div interno que sale del div externo, y el div interno &gt; div externo en el contenido del div interno, no sé si me explico.

Aunque viendo el ejercicio tiene toda la pinta de ser un ejercicio de clase u algo parecido.

¿Tienes algún diseño parecido a lo que quieres hacer?

PD: En clase le doy un vistazo, ahora estoy en el curro, pero estoy seguro de que si abres DW y vas probando te acabará saliendo, como problema veo que hay alguna que otra norma básica de html que no aprecias.

kRain-

A ver, antes que nada, yo lo suelo hacer así: [Div contenedor [div header] [div menu (debajo del header, misma anchura que el mismo)] [div menu derecho] [div news (cuerpo, contenido)] [div menu izquierdo (opcional)] [div footer].

No es un trabajo de clase es simplemente que hacía tiempo que no tocaba este tema y claro de tablas a divs.. me he leido muchos tutoriales pero siempre hay algún error por alguna parte, o no efectúo bien las css.. Ahora no tengo un diseño en concreto, estoy probando a ver si completo alguno sin errores. De todas formas, qué es eso de que me salto algunas reglas de html? cuáles?

Saludos y gracias!

Usuarios habituales

  • kRain-
  • fNtS
  • NeB1