Programacion web: CSS


  • 0

    Que tal? Seguro q os parece muy basico estoy que voy a preguntar, pero esq en diseño web me pierdo un poco. Desde hace unos meses tengo un portal en el que alojo blogs a mis amigos, y tengo una página principal en la que salen los últimos posts de cada blog. Bueno, esa página la hice deprisa y corriendo hace unos meses, pero me parece un poco fea, y quiero remodelarla.

    He visto sitios, como osnews.com que tienen un diseño que me gusta mucho, y a mi me gustaria hacerlo parecido:

    • Un encabezado, con el logo, la fecha y tal
    • Una tabal en el lateral izq que haga de menu
    • Una tabla central para contenidos

    Y bueno mi pregunta tonta es: ¿Como coloco una tabla al lado de otra, separadas como estan en osnews? Lo unico que ami se me ocurre es usando css y el tag de "position" pero no veo eso en el codigo de osnews??

    A ver si alguien me puede echar una mano. Si me mandaís a algun buen tutorial de diseño tambien lo agradecería, porque de php o jsp puedo saber bastante, pero para diseño soy mas negado…....

    Muchas gracias!



  • 1

    Yo normalmente lo hago dividiendo la página en 'contenedor', 'cabecera', 'menu' y 'pie'

    Para que lo veas mejor y veas más o menos como funciona te pongo el ejemplo de la web de mi nodo wifi.

    Si ves el código html de la web, puedes ver que hay unos tags en los que pone 'texto…." que son los que delimitan las secciones de la web.
    Las secciones estan definidas en el css.

    Te pongo algunos enlaces que seguro que te serviran:
    http://www.w3schools.com/css/
    http://css.maxdesign.com.au/floatutorial/index.htm

    NOTA: Como recomendación, prueba siempre las web en iexplorer porque la implementación de css en él es bastante mala e incompleta y algunas cosas no funcionan como debería.



  • 2

    Muchas gracias josefu!! Es justo lo que necesitaba. Algun buen editor para trabajar con CSS? De momento he estado usando Quanta en linux, pero no me importaría si tengo que usar DreamWeaver en win o lo q sea (Frontpage me costaría un poco ;))

    p.d: ¿Que problema has tenido con squirrelmail, por curiosidad? Llevo un par de años usandolo y la verdad me parece el mejor de todos los webmail.



  • 3

    Yo uso el vim a pelo y cuando tengo alguna duda busco en google o en el link que te he puesto antes.

    Con el quanta creo que se puede, pero nunca he probado.
    Según tengo entendido no hay ningún editor visual para css en linux (o eso creo, puede que este equivocado :D ); había por ahí un hilo en barrapunto hablando sobre ello, mira a ver si encuentras algo interesante.

    Respecto al squirrelmail, no era problema propiamente de él, sino de debian sid que la versión que había en ese momento no funcionaba bien.
    En el nodo wifi utilizo ahora horde y esta bastante bien, pero en el servidor de inet tengo squirrell porque esta con debian woody y el horde que hay en woody no me gusta nada.



  • 4

    Gracias otra vez josefu. Voy a ver si cuando acabe los examenes me pongo a aprender un poquito de css q así me quedarán menos feas la cosas.

    De lo de squirrelmail yo tb he tenido problemas alguna vez, porque la versión que tiene sid es la 1.5, que es beta aun y muchas cosas fallan mas q yo que se, asiq al final lo que hago siempre es bajarmelo de la pagina oficial y instalar el fuente original, q suele ser lo mejor…

    Un saludo,



  • 5

    @david_liz:

    De lo de squirrelmail yo tb he tenido problemas alguna vez, porque la versión que tiene sid es la 1.5, que es beta aun y muchas cosas fallan mas q yo que se, asiq al final lo que hago siempre es bajarmelo de la pagina oficial y instalar el fuente original, q suele ser lo mejor…

    Yo pensé en hacer eso, pero así perdía lo mejor de debian: las actualizaciones automatizadas
    por eso al final opte por horde. Pero ya te digo, en debian woody va fantástico.



  • 6

    Bueno, creo que otra forma más facil es jugando con tablas.

    Osea, divide la pantalla en tablas que contengan a su vez tablas.

    En el caso de la página de ejemplo que has puesto puedes tener una tabla con dos columnas. La de la izquierda es el menú y la derecha contiene los blogs. Si quieres que tengan separación pues metes otra columna en medio de las dos. La das un ancho y la dejas vacia. Así te dejará el hueco.

    Luego la parte derecha de los blogs tendrá una fila que contendrá a su vez una tabla con una fila por cada blog. Para que deje espacio entre los blogs pues metes filas sin contenido y con un alto definido. Y así sucesivamente.

    Creo que es la mejor manera. Puedes probar a dibujartelo en un papel primero.



  • 7

    Osea, divide la pantalla en tablas que contengan a su vez tablas.

    En el caso de la página de ejemplo que has puesto puedes tener una tabla con dos columnas. La de la izquierda es el menú y la derecha contiene los blogs. Si quieres que tengan separación pues metes otra columna en medio de las dos. La das un ancho y la dejas vacia. Así te dejará el hueco.

    Luego la parte derecha de los blogs tendrá una fila que contendrá a su vez una tabla con una fila por cada blog. Para que deje espacio entre los blogs pues metes filas sin contenido y con un alto definido. Y así sucesivamente.

    Si ves el fichero css de esa web y luego el html, comprobarás que es bastante entendible y más fácil que liarte con las tablas.
    Las tablas son para organizar datos, no para dar forma a una web.
    Con css, podrías cambiar la apariencia de la web a otra totalmente distinta sin tocar ni una línea del html con un pocos cambios en el css. Si tienes que hacer lo mismo en una web compuesta por tablas te puede llevar un buen rato para que todo quede bien.

    [editado]
    He cambiado un poco el ejemplo para que se puedan elegir distintos css:
    http://ilitel.com/josefu/tmp/freewave/
    Una web que base su diseño en tablas, no puede cambiar de aspecto tan fácilmente; habría que reescribir prácticamente todo el html.
    [/editado]



  • 8

    Bueno, bueno, eso es discutible.

    La verdad es que la manera que dices tu no estoy familiarizado. Yo trabajo a diario usando estructuras de tablas.

    Lo que pasa es que no puedes tener todo el código así a capón.

    Se hace con includes, de manera que si quieres cambiar la estructura pues con cambiar el include correspondiente bastaría.



  • 9

    Con tablas anidadas es como tengo ahora el diseño hecho, pero css te permite mucho mas, a parte de tener el codigo mucho más claro. Es a lo que tiende ahora todo el diseño web, porque de un solo golpe puedes cambiar el diseño de todas las paginas que tengas en tu sitio, asiq es muy cómodo.

    Gracias por la respuesta vallekano (por cierto, no te habrá pillado cerca el petardazo de hoy no? Yo lo he oido y visto desd mi casa….)



  • 10

    BUeno, yo uso css pero para letras,colores, tamaños, etc… pero no para estructurar la web.

    Y a que te refieres con lo del petardazo?? Joer, no me he enterado de nada, que ha pasado???



  • 11

    Y a que te refieres con lo del petardazo?? Joer, no me he enterado de nada, que ha pasado???

    Supongo que se refiere a esto:
    http://www.elmundo.es/elmundo/2004/09/06/madrid/1094455312.html



  • 12

    Joer, pues no me había enterado. La verdad es que no me pilla muy lejos de donde vivo, pero no he oido nada.



  • 13

    A eso me refería si. Yo vivo un poco mas arriba, en la Estrella… na era solo por comentartelo, no te fuera a haber pillado demasiado cerca :)



  • 14

    Gracias a las direcciones que me dio josefu (y a su propia pagina del nodo wifi) he aprendido algo de CSS en estos días, pero tengo un problema que aún no he conseguido resolver:

    La página que estoy diseñando es un portal para mi "comunidad de blogs", que lo que hace es una consulta a la bd para coger por ejemplo los ultimos 15posts de todos los blogs y mostrarlos en la página principal. Bueno, pues tengo el problema de que el titulo del post y el nombre del blog son de longitud variable, y si hay un post con un título muy largo se me sale del marco principal que tengo definido… podeis ver a lo que me refiero aquí, y la hoja de estilo que estoy usando, es ésta.

    A ver si alguno q sepais un poco de css me echais una mano. Yo he probado con las directivas width, max-width y demás, pero no se xk, no me hace caso, al menos en donde las he puesto….... ya que estaís, le podeis echar un ojo a ver que os parece mi primer diseño :)

    P.D: una solución sería truncar por codigo en php el tamaño de los datos recibidos de la bd, pero aún asi la "tabla" (porque no es una tabla en realidad) variaría de tamaño hasta el máximo permitido, y yo quiero que siempre ocupe lo mismo en la pantalla, mas om enos el mismo que tiene el cuadro de noticias.

    P.D 2: También me acabo de dar cuenta de que no se xk, en IE6 no sale centrado el contenedor... en Mozilla/Konqueror sale bien. :confused:



  • 15

    Date cuenta que el título que has puesto es toda una palabra, por lo tanto no se puede truncar; por eso se sale del cuadro. Prácticamente nunca tendrás una palabra tan larga, si metes algún espacio y lo conviertes una frase verás como si que hace un salto de línea al llegar al final del cuadro.

    Respecto al centrado, es un problema del ie; se puede arreglar con javascript y creo que también poniendo en la sección del css referente a 'body' lo siguiente:
    margin: auto;
    De lo último no estoy del todo seguro, pero en google puedes encontrar info.



  • 16

    Con el permiso de david_liz, hago un "pequeño" offtopic.
    Estoy bastante hecho a manejar codigo HTML, pero me pierdo con el CSS, me aconsejais algun manual en concreto para empezar con ello? o directamente tiro de google?
    Es que suelo hacer como dice vallekano, con tablas, pero imagino que tiene que haber cosas mas simples :)
    Venga, gracias y perdon por "aprobecharme" de tu post :)



  • 17

    Muchas gracias otra vez josefu, voy a probar ahora eso que me dices y a ver si acabo ya el diseño para ponerme con php.

    Permiso concedido ;) Yo con la página de josefu, y los dos enlaces que él puso arriba me he arreglado bastante bien, y he empezado de 0. La verdad esq es muy útil, y tengo un diseño igual que el inicial pero sin usar ni una tabla, y pudiendo cambiar el formato sin problemas en un momento.

    Si necesitas algo ya sabes PipeLine, aqui estamos.



  • 18

    Pues ya terminé el diseño de mi página ahora que he tenido un poco de tiempo. Usando los consejos de josefu tengo toda la página usando nada más que un par de tablas creo… la podeís ver aqui. Acepto cualquier crítica y consejo, porque es el primer diseño con css que hago. Aunque se ve mas o menos bien en todos los navegadores hay una cosa que me acaba de sorprender: El fondo de, por ejemplo las noticias, que debería ser amarillo clarito, en mozilla/konqueror/etc si sale bien, pero en IE6 sobre win2k sale gris :confused:

    Voy a buscar a ver si encuentro algo sobre esto, y también me falta validar las páginas para que cumplan con CSS y HTML, no se me vaya a haber escapado algo.



  • 19

    Parece que si que valida css y xhtml.





Has perdido la conexión. Reconectando a Hardlimit.