Maketando sin tablas... me sale a medias

#1 (**permalink**) 14/08/2005, 13:27

hola recientemente he descubierto gracias a varios de vosotros que se puede maketar sin usar tablas y dado que yo abusaba de ellas y ademas estas hacian mas lenta la web me he decidido a lanzarme con la maketacion en css.

baccxus un compañero de forosdelweb me ha ayudado creando una parte en css para la hoja de estilos que actualmente tengo, la cuestion es que el ha conseguido maketar mi rediseño de la web tal como yo queria pero a la hora de empezar a ir aplicando los cambios los resultados no me son del todo correctos ya que firefox aplica bien los cambios pero el explorer no...

Bueno resumiendo, necesito un poco de ayuda o orientacion para conseguir maketar el rediseño de la web tal como lo estaba haciendo con las tablas, por ahora tengo problemas con ello.

aki podeis ver como va el rediseño www.mindpanic.com/index2.php y aqui podeis ver la hoja de estilos http://www.mindpanic.com/foros/templ...chunkstyle.css

Fijaros en los resultados con los navegadores firefox y explorer... el explorer me da muchos problemas y necesito corregirlos. busco que entre todas las partes haya un padding de 5px y que este todo bien centrado pero no me sale bien.

que esta mal???

Un saludo para todos y muchas gracias por anticipado.

fullmental · #2 (**permalink**) 14/08/2005, 13:35

hu yo he tenido el mismo problema;

http://www.golfgreg.com/pgam/indexlayout.html
si alguien nos pudiera iluminar!!!!

la hoja de estilos esta aqui:
http://www.golfgreg.com/pgam/pantallapgam.css

#3 (**permalink**) 14/08/2005, 13:41

Cita:

Iniciado por fullmental

hu yo he tenido el mismo problema;

http://www.golfgreg.com/pgam/indexlayout.html
si alguien nos pudiera iluminar!!!!

A ver si conseguimos solucionar estos pequeños problemas, por ahora lo que no me esta gustando de maketar con css es el problema de interpretacion de los diferentes navegadores, con las tablas eso no sucede y tener que comerse tanto el coco para que los resultados sean buenos es un punto en contra.

oye fullmental pon la dirección de tu css para hecharle un vistazo, ademas asi la gente al tenerla mas a mano seguro que lo mira, ya se sabe lo vagos que somos los humanos en general.

saludos

Durgeoble · #4 (**permalink**) 14/08/2005, 17:31

No tienes especificado el doctype, The doctype tag

Ambos adoleceis de divitis
<div id="body"> ¿? es <body> lo cierras pero no lo abres

Código HTML:

<div class="titulo2">lalalalalala ala lala al</div>

¿No seria mejor?

Código HTML:

<h2>lalalalalala ala lala al</h2>

Y aplicarle formato al h2

Mindpanic tienes parrafos "P" cerrados que jamas has abierto, usas "br" para simular su efecto, muy mal
Fullmetal tu nisiquiera usas parrafos.....

Fullmetal abres un form y no lo cierras

Deberias pensar en usar listas en lugar de saltos de linea para ordenar los enlaces del menu.

Fullmetal pones que la codificación de caracteres es utf-8 pero el documento no esta guardado en ese formato, definir una codificación no tiene mas efecto que indicar al navegador en que formato se encuentra, si, como es el cso, este difiere del real se veran fallos.

Validar las paginas, es sencillo y la mayoria de estos errores os saldrian sin mas :)

No me he metido con el css visto lo visto, teneis mucho que solucionar en el html para ir solucionando ¿problemas? en css

#5 (**permalink**) 14/08/2005, 17:44

Hay me gusta a mi Durgeoble!!!

Muy buena tu ayuda, me sirve para mucho todo lo que me has comentado y tambien tu firma que es una buena recopilacion de tutoriales.

Por cierto, sin tablas y sin div´s como hago para maketar?? ¿Hay mas opciones?

mmm respecto a:

Cita:

<div id="body"> ¿? es <body> lo cierras pero no lo abres
Código HTML:

<div class="titulo2">lalalalalala ala lala al</div>

¿No seria mejor?
Código HTML:

<h2>lalalalalala ala lala al</h2>

Y aplicarle formato al h2

"titulo2" lleva una imagen incorporada, puedo incorporar esa imagen al "hx"???

saludos y muchas gracias Durgeoble

Durgeoble · #6 (**permalink**) 15/08/2005, 02:23

Cita:

Iniciado por MindPaniC

"titulo2" lleva una imagen incorporada, puedo incorporar esa imagen al "hx"???

Si, simplemente cambia tal cual .titulo2 por h2 o bien aplicale la clase titulo2 a todos los h2.

En ningun momento he dicho que no usen divs y, aunque es posible maquetar sin ellos, es muy dificil maquetas en base a los elementos, es mejor poder agruparlos (divs) y trabajar en base a esos grupos.

La divitis es la mala practica de usar los divs en substitución de los elementos adecuados a la función requerida, por ejemplo el caso del titulo(header en ingles) que tienes a tu disposicion H1 H2 H3 H4.... para tal fin, por norma un div no deberia contener un unico elemento, en su lugar se le pueden aplicar estilos a ese elemento.

Basicamente trata los divs como grupos de elementos, que esto es parte de la barra lateral pues al div correspondiente, que es la cabecera pues idem, que es el cuerpo principal del contenido pues mas de lo mismo.

La pagina tal y como la has diseñado funcionaria a la perfección con tan solo 3 divs, 4 si incluyeras un pie de pagina (haz cuentas de lo que sobra).

Tambien adoleces de clasitis poniendo clases cuando no es necesario, si todas las cabeceras de tu pagina son identicas te puedes ahorrar el darle una clase e identificarlas por su etiqueta H(X) y si alguna difiere, de ser una la identificas por el #ID y sin son varias le aplicas una clase.

Lo mismo para el tipo de letra, si toda la pagina usa el mismo tipo de letra y tamaño deberias aplicarle el estilo al body y depues cambiar aquellos que sean excepciones por cualquier razon.

Otra muestra es si todos los links quieres que se vean igual te puedes ahorrar la clase --> a {estilos;} <--

Con lo dicho, mi firma y poco mas deberias poder solucionar todos los problemas que tiene la pagina y ¡No te olvides del doctype!

fullmental · #7 (**permalink**) 15/08/2005, 09:43

Cita:

Fullmetal pones que la codificación de caracteres es utf-8 pero el documento no esta guardado en ese formato, definir una codificación no tiene mas efecto que indicar al navegador en que formato se encuentra, si, como es el cso, este difiere del real se veran fallos.

ok ya esta guardado en utf-8 : la verdad no sabia esta parte, pero ya esto preguntando al tio google

.. en fin tambien cerre el formulario pero la cosa sigue igual, ojalá alguien pueda ayudarnos. ya ligue tambien la hoja de estilos en el primer post.

gracias.

Durgeoble · #8 (**permalink**) 15/08/2005, 10:18

cerrar el formulario no es suficiente, teneias muchas etiquetas abiertas sin cerrar y otras cerradas sin abrir.

No se cuanto has solucionado pero usar el validador del w3c te puede ayudar mucho, por otro lado el css no sabras si esta mal hasta que el html este bien.

Pincha en esta linea para ver la validación de tu pagina.

#9 (**permalink**) 15/08/2005, 13:15

Puffff css me esta dando demasiados dolores de cabeza... con lo sencillo que es hacerlo con tablas.

Como coño centro y pego a la imagen de cabecera el maldito menu horizontal???? estoy intentando solucionar los problemas desde la cabecera hasta el copyrigth pero me es imposible... al final si esto sigue asi volvere a usar tablas, por mucho que leo y miro estilos en zen garden para ver como coño lo hacen no consigo nada.

alguien me puede decir exactamete que he puesto mal??

Esto ya me esta moskeando.

El intento de rediseño: www.mindpanic.com/index2.php
la hoja de estilos: http://www.mindpanic.com/foros/templ...chunkstyle.css

saludos

Durgeoble · #10 (**permalink**) 15/08/2005, 14:11

De verdad, explicamelo, como esperas que css te tire bien si el HTML es un desastre, te he explicado todo lo que tienes mal, he vuelto a mirar la pagina y lo basico sigue igual, ¿y le hechas la culpa al css? eso es como hecharle la culpa al ordenador por no encenderse y no conectar el cable de corriente.

El html esta lleno de fallos las noticias se te van para abajo porque has cerrado el div #container antes de tiempo (un problema derivado de la divitis).

El menu lateral esta fijo en una posición pero con tanto div te pierdes en saber cual es el que falla.

Ya te he dicho antes que padeces de divitis, maquetar con css NO es hacerlo con tablas, no necesitas crear un div para cada cosa, ya que dicha cosa por si misma puede valerse sin problemas.

Te lo dije antes y te lo repito, un div con estilos no es la forma de ponerle un titulo a algo, lo suyo es coger y ponerle un titulo como dios manda (h1, h2, h3, hx).

Utilizas "B" para poner negrita, y esto esta desaconsejado, si quieres emfatizar una palabra "EM" y si lo que quieres es que resalte "STRONG" si por el contrario el resaltar una palabra atiende a aspecto puramente esteticos lo suyo es "span".

Ya te lo puse en un post anterior, TODA tu web podria ir a la perfección en 3 divs 4 si me fuerzas un poco (he contado 20 etiquetas div una de ellas sin cerrar).

Los parrafos TODOS dentro de las etiquetas <p></p> eso ademas te permitira eliminar todos los br, ni uno se usa adecuadamente en esta pagina.

Los menus laterales son listas desordenadas sin bullet, aplicalos como tales no como enlaces simples con br.

Si no sabes porque sucede una cosa, coloreala, asi sabras que es lo que esta causando el problema.

Cuando hayas solucionado TODOS los problemas que te he puesto entonces se puede empezar a mirar el css (te digo desde un principio que semanticamente esta bien aunque le faltan las comillas a los tipos de letra con espacios).

Si te pones en ello (de paso asea el codigo para que sea mas legible) no deberia llevarte mas de media hora de trabajo asi que animo.

#11 (**permalink**) 15/08/2005, 14:33

pufff los maltidos scrips php son lo que estan jodiendo todo, el sistema de login, las noticias del container, los ultimos mensajes del last...

limpiare y pondre ordenado el codigo para que sea mas legible....

pero tengo un gran problema, en el div login hay dos opciones:

1-Al estar logineado salen varios textos:
+Bienvenido [usuario]
+No tienes mensajes (o tienes mensajes, dependiendo)
+Cerrar sesion

Quiero que dichos textos salgan alineados a la izquierda...

y al no estar loguineado sale lo que tu ves, un formulario que aparece bien alineado a la derecha ya que queda mejor por que los cuadros de texto salen justo alineados.

Por ese motivo me parece complicado poder alinerlos a la izquierda o derecha ya que varian segun el estado (logineado, no logineado) y si meto (div align="rigth" o left) me da problemas...

resumiendo si fuese un simple html no seria tan complicado pero con los malditos scripts php me vuevo loco.

saludos

Durgeoble · #12 (**permalink**) 15/08/2005, 14:40

Normal que div te de problemas, que tal si haces esto en el css

div {text-align: left; }
div form {text-align:rigth;}

aunque ya te lo he dicho, sobran divs y si aplicaras los estilos por elementos esos problemas se solucionarian, tal y como he hecho, TODOS los divs alinearan el texto a la izquierda pero los forms se alienaran a la derecha (asi se vera bien el login y una vez logueado).

No tienes muy claro como separar contenido de maquetado ¿verdad?

#13 (**permalink**) 15/08/2005, 14:55

Lo que no tengo claro es como no joder lo que afecta a los foros, si aplico eso que me comentas los formularios de los foros tabien se veran afectados y serian más problemas.

Estoy compartiendo la misma hoja de estilos de los foros con las demás secciones de la web que yo he creado.

Aun asi no se por que el maldito container se corta... no encuentro donde dices que he cerrado el container antes de tiempo. Señalamelo en el codigo por favor.

saludos

#14 (**permalink**) 15/08/2005, 14:59

Vale ahora mismo encontre el fallo, ya esta solucionado lo del container.

Bueno voy a ir puliendo el html y luego ya me pondre a intentar solucionar los problemas de maketado.

#15 (**permalink**) 15/08/2005, 17:13

ok maketado solucionado para i.e y firefox.

solo me falta encuadrar bien el maldito menu y adema añadir un borde a la imagen de cabecera del mismo colo naranja del menu....

¿como puedo solucionar en encuadre del menu? ¿donde esta el fallo?

saludos

Durgeoble · #16 (**permalink**) 15/08/2005, 22:46

Bueno, efectivamente el codigo ahora es mucho mas legible aunque sigue adoleciendo de fallos (esos parrafos, usa los parrafos) ¿Y el body? sigues sin ponerlo, no es suficiente con que se vea bien la pagina, debe estar bien.

Para aplicar estilos sin estropear los de los foros simplemente aplica clases heredadas

#contenedor .clasecompartida {estilos}

La idea es coger un elemento maestro que no se encuentre en los foros asi evitas incongruencias. Por otro lado sin llegar a joder lo de los foros puedes poner un estilo mas uniforme a tu pagina.

#17 (**permalink**) 17/08/2005, 06:22

El menu me tiene loco, no consigo ponerlo bien...

¿cual es el mejor sistema para encajar el menu horizontal (no me digais que una tabla...)?

¿crees que seria mejor poner el menu con tags de lista (ul, li) con atributos en css para que se mantenga horizontal?

resumiendo que no tengo ni puñetera idea de como arreglar el problema

saludos

baccxus · #18 (**permalink**) 17/08/2005, 12:17

MindPanic: bájale a este valor hasta que te cuadre:

width: 93px; /*defino el ancho del rectangulo del vinculo*/

y listo.

PD: El CSS que hice el otro día no era para que lo aplicaras tal cual, era solo una base, y gracias a Durgeoble me dí cuenta que estaba maquetando mal. Estamos todos para aprender.

Saludos

Durgeoble · #19 (**permalink**) 17/08/2005, 14:43

yo por mi parte, mientras no solucione los problemas que ya he remarcado en varias ocasiones no voy a buscar mas.

#20 (**permalink**) 20/08/2005, 16:19

Cita:

Iniciado por Durgeoble

yo por mi parte, mientras no solucione los problemas que ya he remarcado en varias ocasiones no voy a buscar mas.

Estoy intendando limpiar el codigo, pero hay varias cuestiones que no me funcionan:

1- El "H2", al hacer lo que dices de asignar la imagen, se asigna perfectamente pero no ocupa el ancho que deseo y solo muestra la imagen al tamaño del texto, es decir no se expande horizontalmente hasta el ancho deseado, ¿como lo hago?

2- No se a que te refieres con usar parrafos, el texto viene formateado interactuando con el foro mediante un sistema llamado forum-news

¿Que mas debo pulir?

saludos

Durgeoble · #21 (**permalink**) 21/08/2005, 03:07

1- width: 100%

2-El texto debe ir entre las etiquetas "<p></p>", "<pre></pre>", "<span></span>" (estan son las de uso mas comun).

<p></p> indica el comienzo y el fin de un parrafo, añade por defecto un salto de linea al principio y al final del mismo (esto se puede modificar por css), tu usas <br /> (salto de linea) para simular el efecto visual de un parrafo y encierras todo el contenido en un div.

Por ejemplo :

Código HTML:

<p>Estoy intendando limpiar el codigo, pero hay varias cuestiones que no me funcionan:

<ol>
<li>1- El "H2", al hacer lo que dices de asignar la imagen, se asigna perfectamente pero no ocupa el ancho que deseo y solo muestra la imagen al tamaño del texto, es decir no se expande horizontalmente hasta el ancho deseado, ¿como lo hago?</li>

<li>2- No se a que te refieres con usar parrafos, el texto viene formateado interactuando con el foro mediante un sistema llamado forum-news</li>
</ol>

¿Que mas debo pulir?</p>

<p>saludos</p>