Comunidad de diseño web y desarrollo en internet online

No soy capaz de hacer un diseño de tres columnas con CSS

Citar            
MensajeEscrito el 24 Ene 2006 11:08 pm
Buenas noches.

Estoy intentando hacer esto:
http://user.7host.com/savervalley/xhtml/raster01_interior.jpg
*Es una parte de un rediseño que estoy haciendo que tiene tres columnas.

Lo en intentado hacer sólo con etiquetas DIV y con CSS a partir del tutorial de "Componer un diseño de 3 columnas en XHTML y CSS" de la sección de tutoriales y lo que he conseguido es:
http://user.7host.com/savervalley/xhtml/index2.htm que se medio ve en Firefox (y hay cosas que no consigo) y en iExplore se descojona del todo.
El css está en http://user.7host.com/savervalley/xhtml/estilos2.css

Luego he hecho un MIX con tablas, DIVS y CSS y se ve bien en iExplorer, FireFox y Safari:
http://user.7host.com/savervalley/xhtml/index5.htm con su css en http://user.7host.com/savervalley/xhtml/estilos5.css. Pero estoy convencido de que se puede hacer bien sin tablas.

Necesito que el resultado final se vea igual en Explorer, Firefox y Safari.
¿Alguien podría enderezar un poco mi camino?

Muchas gracias

Por akira

226 de clabLevel

2 tutoriales

 

Madrid

firefox
Citar            
MensajeEscrito el 25 Ene 2006 12:27 am
pues no pude entrar a los vínculos :roll:

Por arrobawebmx

33 de clabLevel



Genero:Masculino  

México df

firefox
Citar            
MensajeEscrito el 25 Ene 2006 12:46 am
conexion tardo demasiado, eso dijo FF :crap:

Por jaimoco

299 de clabLevel



Genero:Masculino  

choya bay , mexico

firefox
Citar            
MensajeEscrito el 28 Ene 2006 07:41 pm
Es un servidor gratuito y a veces da problemas. Si le podéis echar un vistazo os lo agradeceré.

Por akira

226 de clabLevel

2 tutoriales

 

Madrid

firefox
Citar            
MensajeEscrito el 28 Ene 2006 07:50 pm
No puedo resolverlo personalmente en este momento -por cierto se ve bien tu diseño- pero te puedo recomendar que leas acerca del comportamiento de los navegadores con margin y padding, eso es lo que te está molestando.
Una vez que conozcas eso y agarres tu calculadora para hacer la aritmética básica de tu plantilla, estarás listo.

Por Pedro

BOFH

3017 de clabLevel

3 tutoriales
6 articulos

  Bastard Operators From Hell

Honduras

firefox
Citar            
MensajeEscrito el 28 Ene 2006 07:55 pm
ok, muchas gracias. He podido ver algo leyendo acerca del modelo de cajas en disenorama, así que me pondré a ello.

un saludo y gracias de nuevo.

Por akira

226 de clabLevel

2 tutoriales

 

Madrid

firefox
Citar            
MensajeEscrito el 28 Ene 2006 10:15 pm
Bueno, en principio ten mucho cuidado con los valores del ancho de cada div, ya que si la suma entre la anchura y los margenes de todas las div es superior a la div que las contiene, se deformará por completo. Revisa también si usas etiquetas <h*> en el interior de las mismas, ya que te pueden dar problemas de ese estilo, un truquillo es ponerles margin y padding a cero.

Y lo más importante de todo, la estructura en XHTML, debes poner los elementos por el orden en que quieras que aparezcan.
Hay algunos fallos que te puedo citar.
En lugar de poner la imágen de header así, y menos aún dentro de etiquetas <p> y algunas cosas más, puedes hacer los siguiente...

Código :

   <div id="contenedor">
      <div id="header">
      <h1>titulo</h1>
      </div>
      <div id="navegacion">el menu</div>
      <div id="relacionados">informacion relacionada...</div>
      <div id="texto">el texto principal...</div>
      <div id="footer">los iconos esos de los navegadores, etc...</div>
   </div>

En css...

Código :

   #header   {
         background-image:url('img/header02.jpg');
         }


en vez de poner esto...

Código :

    <p><span class="textoRojo">Titulaci&oacute;n</span><br>

      Master en Animaci&oacute;n de Personajes</p>

pon esto

Código :

<h6>Titulaci&oacute;n</h6>
<p>Master en Animaci&oacute;n de Personajes</p>

y defines h6 dentro de esa div con el color rojo y todo lo que quieras de esta forma

Código :

#tu_div h6{color:#FF0000;
etc...}


En fin, sé que me dejo cosas en el tintero, pero es que estoy de agobio con los examenes y no puedo dedicarle mucho tiempo estos días a clab. de todas formas prueba cop la estructura que te he sugerido, a ver qué tal.
Fijandome en la imágen podrías hacer incluso otra cosa.
Primero el header, con la imágen de fondo y tu h1 con el título (aunque le des h1{display:none;}pero ponlo.)
debajo del header, una div con la imágen de fondo esa que se ve más grande. en esa div metes otras dos, una con el menú principal, y otra con lo de home,contacto,etc.
debajo de la segunda div, irían ya las demás...
weno, espero que me hayas comprendido, siento no poderte poner alguna imágen para explicartelo, pero es que estoy sin server actualmente.
Te recomiendo que al igual que has hecho el boceto en una imágen, hagas un esquema también con las partes que necesitaras, tomando en cuenta que cada una es una div y que las tendrás que posicionar de determinada forma para que funcione...
Saludos

Por Johnny

Claber

1589 de clabLevel

4 tutoriales

  Héroes

firefox
Citar            
MensajeEscrito el 28 Ene 2006 10:28 pm
Ahora si lo pude ver.

Antes que nada, debo decir que esta muy bueno el diseño (Y)

Bueno, te puedo decir que no te falta mucho. Lo que puedes hacer, primero, lee el tuto que tengo sobre Posicionamiento y Layout con CSS aqui en clab, ahi veras unos detalles sobre lo que te dijo pedro, que son los que te estan molestando por un lado.

Por otro lado, creo que deberás cambiar esta imagen:
http://user.7host.com/savervalley/xhtml/img/fondoConetendero02.gif
por una que contenga todo lo de adentro, es decir, la linea punteada de la izquierda, el separador gris con puntos y el fondo gris de la columna derecha, todo en la misma imagen, es la mejor forma que puedes lograr que todo eso se vea parejo hasta el final de la pagina, aunque en las columnas laterales no haya tanto contenido como en la central.

Si quieres mas informacion al respecto, lee "Faux Columns"

Saludos.

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell REC Héroes

London, UK

firefox
Citar            
MensajeEscrito el 29 Ene 2006 06:36 pm
muchas gracias a todos.

en realidad el diseño que os enseñé es sólo una parte de la página. Encima de eso tengo que meter un menú de dos niveles y dos animaciones flash.

cuando vaya más avanzada os la enseñaré.

Muchas gracias de nuevo.

Por akira

226 de clabLevel

2 tutoriales

 

Madrid

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.