Creando un diseño 3 columna ( no entiendo del todo la explicaión)

DoPeY-BBS · #1 (**permalink**) 13/01/2009, 16:03

Bien estoy tratando de crear diseño de 3 columnas donde el contenido de la misma debe fluir de acuerdo a la resolución de la pantalla y deberá ajustarse para albergar la mayor columna de la pagina, donde todas deben de tener la misma altura,(imagino que es liquida).

Cada columna se ubica de forma absoluta (en relación al div que la contiene) salvo la de contenido que sera estatica.

La duda es la siguiente, según el libro hay dos métodos para hacer esto: Porcentaje de la altura y la altura y la altura implícita mediante las propiedades de desplazamiento top, botton.

Porcentual su altura es relativa a la del elemento que la contiene y posteriormente se le aplican los margenes, bordes y espacio de rellenos.

Con la segunda opción (propiedades de desplazamiento) la altura que se obtiene es la resultante tras aplicar los margenes los bordes y espacio de relleno:

¿cuál es el metodo es el mas recomendado, por que y sus diferencias? seguro que con las explicaciones que ustedes me den mas las del libro estaré mas que satisfecho.

Código HTML:

 <body>
    <div id='encabezamiento'>
       <h1>Encabezamiento</h1>
    </div>
    <div id='contenedor'>
      <div id='primera-columna'>
        Texto en la primera columna.
      </div>
      <div id='contenido'>
        Texto en la columna de contenido.
      </div>
      <div id='tercera-columna'>
        Texto en la tercera columna.
      </div>
    </div>
    <div id='pie'>
      <h6>Pie</h6>
    </div>

Si desean el css se los paso por si necesitan explicarme con mayor exactitud

poison_mayer · #2 (**permalink**) 13/01/2009, 16:36

puedes usar esto
<html>
<head>
<style>
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#content p{line-height:1.4}
div#left{background:#B9CAFF}
div#right{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#wrapper{float:left;width:100%}
div#content{margin: 0 25%}
div#left{float:left;width:25%;margin-left:-100%}
div#right{float:left;width:25%;margin-left:-25%}
div#footer{clear:left;width:100%}
</style>
</head>
<body>
<div id="container">
<div id="header"><h1>Header</h1></div>
<div id="wrapper">
<div id="content">
<p>contenido</p>
</div>
</div>
<div id="left">
<p>left </p>
</div>
<div id="right">
<p>right </p>
</div>
<div id="footer"><p>footer</p></div>
</div>
</body>
</html>

Mikmoro · #3 (**permalink**) 13/01/2009, 17:45

La respuesta es sencilla: la segunda no funciona en IE6, porque no sabe dar tamaño a una caja mediante las coordenadas de desplazamiento top, botton. Es una de las enormes puñetas, porque funciona muy bien en los demás y es muy práctico, pero desgraciadamente todavía IE6 nos tiene cogidos de las p.....s.

DoPeY-BBS · #4 (**permalink**) 13/01/2009, 22:16

Gracias Mikmoro por tu respuesta.

Cuando se dice que la altura de un elemento se determina mediante un valor porcentual su altura sera relativa al elemento que la contiene y posteriormente se le agregan los margenes.

¿Que quiere decir con, será relativa al elemento que la contiene? imagino que estan cojera la alt8ra desde su contenedor.

supongo que si el contenedor vale 400 los dos lados valen 200 cada uno.

¿Estoy en lo correcto?.

Mikmoro · #5 (**permalink**) 14/01/2009, 01:50

Significa: si una caja mide 400px de ancho, y una dentro de esta mide el 50%, esta segunda mide 200px, pero si la caja contenedora no mide 400px, es decir, no tiene width asignado, la que está dentro mide... NADA, porque el 50% de nada es nada.
Siempre que una caja este dimensionada en porcentaje, ese porcentaje se tomará con arreglo a la caja que la contenga que tenga tamaño definido, que puede ser su "padre", "abuelo", etc.

DoPeY-BBS · #6 (**permalink**) 14/01/2009, 11:03

Código HTML:

body {
  background: white;
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}
h1, h6 {
  margin: 0;
  font-weight: normal;
}
div#contenedor {
  position: relative;
  min-height: 400px;
  border: 1px solid gray;
  background: lightgrey;
  max-width: 1000px;
  min-width: 750px;
  margin: auto;
}
div#primera-columna,
div#segunda-columna {
  position: absolute;
  top: 0;
  bottom: 0;
  border: 1px solid gray;
  background: rgb(240, 240, 240);
  width: 200px;
  margin: 3px;
}
div#primera-columna {
  left: 0;
}
div#contenido {
  margin: 3px 208px 3px 208px;
  background: rgb(240, 240, 240);
  border: 1px solid gray;
  min-height: 392px;
}
div#encabezamiento,
div#pie {
  background: rgb(240, 240, 240);
  padding: 3px;
  border: 1px solid gray;
  max-width: 994px;
  min-width: 744px;
  margin: auto;
}
div#encabezamiento {
  border-bottom: none;
}
div#pie {
  border-top: none;
}

El libro dice que los margenes laterales del contenido son el resultado de sumar: el ancho de la columna, ell de los bordes, el de el relleno y el de los márgenes de las columans secundarias.

pero sumo y no me da el valor, no se que pasa

Mikmoro · #7 (**permalink**) 15/01/2009, 02:02

No entiendo eso, pero... ¿tiene algo que ver con la pregunta anterior?

DoPeY-BBS · #8 (**permalink**) 15/01/2009, 15:13

En realidad tiene que ver con la duda inicial en el primer post

Cita:

Porcentual su altura es relativa a la del elemento que la contiene y posteriormente se le aplican los margenes, bordes y espacio de rellenos.

Con la segunda opción (propiedades de desplazamiento) la altura que se obtiene es la resultante tras aplicar los margenes los bordes y espacio de relleno:.

Me refiero a que los margenes laterales (208) de las columnas secundarias son los valores resultantes de sumar los bordes, los padding los margenes y el ancho de las columans

Yo la verdad no entiendo nada

Mikmoro · #9 (**permalink**) 15/01/2009, 16:13

Yo tampoco, y menos fuera de contexto. Viendo el apartado completo quizá, pero así en un extracto ni idea de a qué se refiere.

DoPeY-BBS · #10 (**permalink**) 15/01/2009, 20:02

Cita:

div#primera-columna {
position: absolute;
top: 0;
bottom: 0;
border: 1px solid gray;
background: rgb(240, 240, 240);
width: 200px;
margin: 3px;
}

Gracias a MIkmoro y Webosiris por tener la paciencia de ayudarme y al final se logro,

ancho total = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

En este caso sumamos ancho margenes y bordes de cada margen latetal 200 + 3x2 + 1x2

tan simple como eso (una cosa tan simple y rompiendome la cabeza) lol

Mikmoro · #11 (**permalink**) 16/01/2009, 01:43

Sí, claro, eso es así (aunque ojo, no en todos los navegadores), pero... ¿entonces qué significa esta frase?

Cita:

los margenes laterales (208) de las columnas secundarias son los valores resultantes...

Eso era lo desconcertante. ¿De qué márgenes laterales habla? ¿qué columnas secundarias? En fin, da igual.

DoPeY-BBS · #12 (**permalink**) 16/01/2009, 14:51

Supuse que al poner el css completo mas arriba, lo habrías notado.

Los margenes estan en la clase contenido

Cita:

div#contenido {
margin: 3px 208px 3px 208px;
background: rgb(240, 240, 240);
border: 1px solid gray;
min-height: 392px;
}

Las columnas secundarias se refiere a las columnas laterales

Cita:

div#primera-columna, {
div#segunda-columna
position: absolute;
top: 0;
bottom: 0;
border: 1px solid gray;
background: rgb(240, 240, 240);
width: 200px;
margin: 3px;
}

Mikmoro · #13 (**permalink**) 16/01/2009, 16:43

Como te dije, no tengo el contexto completo de lo que está hablando, y aunque hubiera podido relacionar una cosa con otra, no le encontraría del todo sentido. De hecho todavía no tengo muy claro de qué trata, pero por mi no te preocupes, si has despejado tu duda, resuelto.

DoPeY-BBS · #14 (**permalink**) 21/01/2009, 11:18

Cómo los ejemplos que tengos se basan en este, procederé a explicar textualmente lo que dice el titulo.

El diseño debe ajustarse para albergar a la mayor columna de la página y todas deben ser de la misma altura. Debe decidir qué columna serán las mayores. Por lo general será la que muestre el contenido de la página Web. Lo más normal es que las otras contengan enlaces a la páginas web u otro tipo de información. La presentación de este tipo de información no ocupa tanto espacio horizontal como el contenido de la página, de modo que hemos de concentrarnos en conseguir el tamaño de las columnas secundarias (laterales) se ajuste a su contenido. Cada columna se ubica de forma absoluta (y en relación al elemento div que la contiene a todas), salvo la que alberga el contenido de la página, que se ubica de forma estática. CSS nos ofrece dos métodos para lograr que esas columnas sean tan altas como las del contenido : porcentaje de altura y altura implícita mediante las propiedades top y bottom. ( la segunda opción es la elegida)

Cita:

Con la segunda opción (propiedades de desplazamiento) la altura que se obtiene es la resultante tras aplicar los margenes los bordes y espacio de relleno:

Todo el css y el xhtml están mas arriba, por lo tanto, no lo repetire

He podido sacar algo de todo esto pero aun asi no logro entender como salio la altura 392 del contenido.

Este libro es un poco avanzado y hay ciertos detalles que el no cubre.

Mikmoro · #15 (**permalink**) 21/01/2009, 13:05

Como te dije, esa segunda opción elegida no funciona en IE6. Es muy práctica, pero no es compatible, así que sintiéndolo mucho yo no la usaría, a menos que usara también otra alternativa para IE6.

DoPeY-BBS · #16 (**permalink**) 21/01/2009, 14:16

De hecho si la hay

En el encabezamiento del xhtml hay un un comentario para el explorer

Cita:

Luego la hoja de estilo alterna es

Cita:

div#contenido {
position: relative;
top: 3px;
}
div#primera-columna {
top: 3px;
}
div#contenedor {
margin-top: -3px;
margin-bottom: -3px;
}

SI me puedes eplicar el metodo de la segunda opcion de manera simple te lo agradeceria, como dije, el libro es un poco avanzado y se vuela varias explicaciones.

Fijate en el css entero que puse mas arriba y veras una altura minima de 392px y yo no logro entender como fue que se llego a esa altura (que hizo el para darle esa altura, que sumo).

Mikmoro · #17 (**permalink**) 21/01/2009, 16:33

Yo tampoco sé de donde ha llegado a esa cifra, pero sí te puedo explicar ese método, que se basa en esto:

Cita:

div#segunda-columna {
position: absolute;
top: 0;
bottom: 0;

Si colocamos una caja con posición absoluta dentro de otra que tiene posición relativa, la absoluta lo es con respecto a su contenedora. Esto no permite dimensionar una caja en base a las cuatro coordenadas: por ejemplo, si una caja no tiene altura, pero le decimos que se coloque a 0px de la parte superor (top: 0;), y a 0px de la parte inferior (bottom: 0;), la caja ocupará todo el alto de la caja que la contiene, estando a 0 de arriba y a 0 de abajo. Prúebalo que es bastante fácil de entender si lo ves.
Esto es lo que no sabe hacer IE: no sabe dimensionar una caja basándose en las coordenadas.

Lo que muestras es un arreglo a través de javascript, lo que no me parece muy buena solución (bueno, no siempre):

Cita:

pao01 · #18 (**permalink**) 21/01/2009, 17:17

Voy a preguntar algo muy tonto, pero es algo que a mí me ocurre y tiene relación con el tema:
Por ejemplo al momento de centrar el div principal y dentro de él los otros divs, esto funciona de maravillas con ff, pero en ie7, el modo en que se visualiza (si bien no deforma, no la centra); en mi caso personal me lleva toda la página armadita hacia la izquierda.
y se me hace complejo, tal vez por la cantidad de cosas que debí aprender ya que venía de la nada misma, saber qué tipo de opción tocar para que el ie7 se comporte de la misma manera.
Lo mismo me ha ocurrido al momento de las transparencias en jpg, sólo di con un script que funcionaba, pero a medias y cuando se suba mi página al momento del concurso entenderán de lo que hablo (obviamente tomé por el atajo del jpg).
Pero convengamos que dentro de esta competencia no era recomendable usarlos.(scripts)
Heché mano al manual de Mik, pero no era un menú del tipo de los que por allí veo.
Pero si alguien tiene algún material a mano donde pueda ir viendo como pulir esas imperfecciones, sobre todas las relacionadas a ver como se subsanan temas referentes a la (irreverente y maliciosa conducta del ie en todas sus formas

), se agradece.
Lo de irreverente y maliciosa conducta fue a modo de broma.

Mikmoro · #19 (**permalink**) 21/01/2009, 17:31

Cita:

Iniciado por pao01

Voy a preguntar algo muy tonto, pero es algo que a mí me ocurre y tiene relación con el tema:
Por ejemplo al momento de centrar el div principal y dentro de él los otros divs, esto funciona de maravillas con ff, pero en ie7, el modo en que se visualiza (si bien no deforma, no la centra); en mi caso personal me lleva toda la página armadita hacia la izquierda.

No sé el caso concreto que expones, pero con un doctype como el de la competencia, si el contenedor tiene un ancho definido (width), con ponerle margin: 0 auto (o margin: 30px auto, vamos, que tenga auto en izquierda y derecha), el contenedor debe centrarse en IE7 sin problema (igual que en IE6).

Si no es así, apunta el caso concreto porque algo falla ahí, ya que por definición debería funcionar.

pao01 · #20 (**permalink**) 21/01/2009, 17:37

Lo reviso y sino aviso. Gracias Mik.

Código:

/* estilo del cuerpo */

#col_der, #col_izq, #col_cen {margin:auto; height: 100%;overflow:hidden; width: 300px; }div#CentradaLL {position:relative; top:10%; left:10%; width:80%; height:80%; }
div#CentradaLL {position:relative; top:10%; left:10%; width:60%; height:80%; }


#cont {width: 1000px; height: 515px;margin:20px auto; background-color: #e6fcfc; }
#col_der, #col_izq, #col_cen {height: 100%;}
#col_der {float: right; width: 250px;background-color: #e6fcfc;} 
#col_izq {float: left; width: 300px;background-color: #e6fcfc; font-size: 14px;}
.col_izq {padding:20px; text-align:justify;}
#col_cen {background-color: #e6fcfc; margin: 0 0 0 0; padding: 0 0 0 0;} 
.corte {clear: both;}


/* estilo del color de texto */
.otro-color { color:#cd810c; }

/* estilo de sector estilo  */ 
.estilos a {
  display:block;
  border:none;
  background-position:left top;
  background-repeat:no-repeat;
  width:170px;
  height:38.5px;
  margin: 0 0 0 0;

 }

.estilos a:hover { background-position: 0 -38.5px; text-decoration: none;  }
.estilos .alt { display:none; }
.estilos a#alvlin { background-image: url(images/alvlin.jpg) }
.estilos a#aresillo { background-image: url(images/aresillo.jpg) }
.estilos a#buzu { background-image: url(images/buzu.jpg) }
.estilos a#daes12 { background-image: url(images/daes.jpg) }
.estilos a#dopey { background-image: url(images/dopey.jpg) }
.estilos a#javi { background-image: url(images/javi.jpg) }
.estilos a#juaniquillo { background-image: url(images/juaniquillo.jpg) }
.estilos a#kseso { background-image: url(images/kseso.jpg) }
.estilos a#pitufoweb { background-image: url(images/pitufoweb.jpg) }
.estilos a#Raulmmmm { background-image: url(images/raul.jpg) }
.estilos a#sanchy { background-image: url(images/sanchy.jpg) }
.estilos a#Triby { background-image: url(images/triby.jpg) }
.estilos a#Willyfc { background-image: url(images/willy.jpg) }


/* estilo de caja */
#caja{ width:192px; height:424px; border:1px solid #e6fcfc; overflow:auto; margin: 50px 0 0 0; }

este es el código, si hay algo que omití avisame.

DoPeY-BBS · #21 (**permalink**) 21/01/2009, 17:53

Prueba con darle menos ancho al contenedor a ver

#cont {width: 1000px;

Mikmoro · #22 (**permalink**) 21/01/2009, 17:56

No veo aunque imagino que usas el doctype correcto.
¿Cuál es el contenedor principal?
¿Qué resolución usas?
¿Tiene tu contenedor un fondo o un borde como para saber si está centrado o no?

pao01 · #23 (**permalink**) 21/01/2009, 18:03

el doctype es el que nos dieron, te paso todo el css

Código:

/* alineación general */ 

* {margin: 00px; padding: 0px; }
body {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
background-color:#6db0b0;

}



h1 {display:none;

}



#contenedor {margin: 0 auto;
min-width: 1000px;
width: 1000px;
overflow:hidden;

} 
p { color: #634344; font-family: Verdana; }



/* estilo de la cabecera */ 
#cabecera {width: 1000px; height: 128px; 
background-color: #6db0b0;
text-align: left; 
margin: 0 0 0 0; 

}


#contmenu {width: 1000px;
margin: 0px auto;


}



.menua, .menub {
font-size:0em;
height:auto;
}



/* estilo del menú */ 

.menua a {
  display:block;
  border:none;
  background-position:left top;
  background-repeat:no-repeat;
  width:193px;
  height:33px;
  margin: 0 0 0 56px;
}
.menua li {float:left; list-style:none; }
.menua a:hover { background-position: 0 -33px; text-decoration: none;  }
.menua .alt { display:none; }
.menua a#home { background-image: url(images/home.jpg); }
.menua a#serviciosweb { background-image: url(images/sw.jpg) }
.menua a#diseñografico { background-image: url(images/dg.jpg) }
.menua a#portfolio { background-image: url(images/ptf.jpg) }


.menub a {
  display:block;
  border:none;
  background-position:left top;
  background-repeat:no-repeat;
  width:193px;
  height:33px;
  margin: 0 0 0 123px;
}
.menub li {float:left; list-style:none;}
.menub a:hover { background-position: 0 -33px; text-decoration: none;  }
.menub .alt { display:none; }
.menub a#diseñoweb { background-image: url(images/dw.jpg) }
.menub a#nuestraempresa { background-image: url(images/ne.jpg) }
.menub a#contactar { background-image: url(images/cnt.jpg) }

.corte1 {clear: both;}

/* estilo del cuerpo */

#col_der, #col_izq, #col_cen {margin:auto; height: 100%;overflow:hidden; width: 300px; }div#CentradaLL {position:relative; top:10%; left:10%; width:80%; height:80%; }
div#CentradaLL {position:relative; top:10%; left:10%; width:60%; height:80%; }


#cont {width: 1000px; height: 515px;margin:20px auto; background-color: #e6fcfc; }
#col_der, #col_izq, #col_cen {height: 100%;}
#col_der {float: right; width: 250px;background-color: #e6fcfc;} 
#col_izq {float: left; width: 300px;background-color: #e6fcfc; font-size: 14px;}
.col_izq {padding:20px; text-align:justify;}
#col_cen {background-color: #e6fcfc; margin: 0 0 0 0; padding: 0 0 0 0;} 
.corte {clear: both;}


/* estilo del color de texto */
.otro-color { color:#cd810c; }

/* estilo de sector estilo  */ 
.estilos a {
  display:block;
  border:none;
  background-position:left top;
  background-repeat:no-repeat;
  width:170px;
  height:38.5px;
  margin: 0 0 0 0;

 }

.estilos a:hover { background-position: 0 -38.5px; text-decoration: none;  }
.estilos .alt { display:none; }
.estilos a#alvlin { background-image: url(images/alvlin.jpg) }
.estilos a#aresillo { background-image: url(images/aresillo.jpg) }
.estilos a#buzu { background-image: url(images/buzu.jpg) }
.estilos a#daes12 { background-image: url(images/daes.jpg) }
.estilos a#dopey { background-image: url(images/dopey.jpg) }
.estilos a#javi { background-image: url(images/javi.jpg) }
.estilos a#juaniquillo { background-image: url(images/juaniquillo.jpg) }
.estilos a#kseso { background-image: url(images/kseso.jpg) }
.estilos a#pitufoweb { background-image: url(images/pitufoweb.jpg) }
.estilos a#Raulmmmm { background-image: url(images/raul.jpg) }
.estilos a#sanchy { background-image: url(images/sanchy.jpg) }
.estilos a#Triby { background-image: url(images/triby.jpg) }
.estilos a#Willyfc { background-image: url(images/willy.jpg) }


/* estilo de caja */
#caja{ width:192px; height:424px; border:1px solid #e6fcfc; overflow:auto; margin: 50px 0 0 0; }

/* estilo del pie */
#pie {  
background: url(images/robi.jpg);
width: 1000px;
margin: auto;
font-size: 0.8em;
height: 80px;
clear:both;
line-height:75px;
}
#pie ul { 
list-style-type: none;
margin-left: 220px;
}
#pie ul li {  
display: inline;
color: #ffb505;
}
#pie ul li a { 
padding: 0px 17px;
text-decoration: none;
color: #6db0b0;
}
#pie ul li a:hover, #pie ul li a:active { 
color:#6db0b0;
font-weight:bold;
}

pao01 · #24 (**permalink**) 21/01/2009, 18:09

y aquí el html

Código:

<!-- saved from url=(0022)http://internet.e-mail -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">




	<head>
		
	       <meta http-equiv="Content-Type" content="text/html: charset=ISO-8859-1" />
	       <meta name="description" content="Empresa de Soluciones web" />
                          <meta name="Keywords" content="Diseño Web, Diseño Gráfico, Servicios Web, Soluciones Web, Traducciones, Programación, Consultoría" /> 	
	       <meta name="Author" content="Paola Andrea Magariños" />
                          <meta name="Language" content="es" />


		<title>Soluciones Web &copy;</title>
		

	<!-- acceso a css -->

		<link href="pao01.css" rel="stylesheet" type="text/css" />


	</head>



	<body>

<h1>Soluciones Web</h1>

<!--contenedor general-->
<div id="contenedor">
<!--cuerpo-->


<!--imágen del header-->
<div id="cabecera">
<img src="images/cabecera.jpg" alt="Imagen corporativa" />
</div>
		
		
<!--menu-->
<div id="contmenu">
<div class="menua">
<ul>
                  
<li><a accesskey="1" id="home" href="#"><span class="menua">&nbsp;</span></a></li> <!-- estos cuatro enlaces están vacios de contenido-->
<li><a accesskey="2" id="serviciosweb" href="#"><span class="menua">&nbsp;</span></a></li>    <!-- estos cuatro enlaces están vacios de contenido-->        
<li><a accesskey="3" id="diseñografico" href="#"><span class="menua">&nbsp;</span></a></li>     <!-- estos cuatro enlaces están vacios de contenido-->                    
<li><a accesskey="4" id="portfolio" href="#"><span class="menua">&nbsp;</span></a></li>          <!-- estos cuatro enlaces están vacios de contenido-->
        


</ul>
</div>


<div class="menub">
<ul>
                
<li><a accesskey="5" id="diseñoweb" href="#"><span class="menub">&nbsp;</span></a></li>      <!-- estos cuatro enlaces están vacios de contenido-->   
<li><a accesskey="6" id="nuestraempresa" href="#"><span class="menub">&nbsp;</span></a></li>  <!-- estos cuatro enlaces están vacios de contenido-->        
<li><a accesskey="7" id="contactar" href="#"><span class="menub">&nbsp;</span></a></li>       <!-- estos cuatro enlaces están vacios de contenido-->     
              
</ul>
</div>

<div class="corte1"></div>
</div> 



<!--cierre contmenu-->
</div>

<div id="cont">
               <div id="col_der">
                              <div class="estilos">
                                       <div id="caja">
                                                <ul>
	                                                       <li><a href="http://www.forosdelweb.com/f53/alvlin/index.html" id="alvlin"><span class="alt">Diseño de alvlin</span></a></li>                     
                                                         <li><a href="http://www.forosdelweb.com/f53/aresillo/index.html" id="aresillo"><span class="alt">Diseño de Aresillo</span></a></li>                     
                                      	                 <li><a href="http://www.forosdelweb.com/f53/buzu/index.html" id="buzu"><span class="alt">Diseño de Buzu</span></a></li>
                                                         <li><a href="http://www.forosdelweb.com/f53/daes12/index.html" id="daes12"><span class="alt">diseño de daes12</span></a></li>
                                                         <li><a href="http://www.forosdelweb.com/f53/dopey-bbs/index.html" id="dopey"><span class="alt">Diseño de DoPeY-BBS</span></a></li>
                                                         <li><a href="http://www.forosdelweb.com/f53/javi_cassi/index.html" id="javi"><span class="alt">Diseño de javi_cassi</span></a></li>
                                                         <li><a href="http://www.forosdelweb.com/f53/juaniquillo/index.html" id="juaniquillo"><span class="alt">Diseño de juaniquillo</span></a></li>
                                                         <li><a href="http://www.devillasbuenas.es/fdw/enero/index.html" id="kseso"><span class="alt">Diseño de Kseso?</span></a></li>
                                                         <li><a href="http://www.forosdelweb.com/f53/pitufoweb/index.html" id="pitufoweb"><span class="alt">Diseño de pitufoweb</span></a></li>
                                                         <li><a href="http://www.forosdelweb.com/f53/raulmmmm/index.html" id="Raulmmmm"><span class="alt">Diseño de Raulmmmm</span></a></li>
                                                         <li><a href="http://www.forosdelweb.com/f53/sanchy/index.html" id="sanchy"><span class="alt">Diseño de sanchy</span></a></li>
                                                         <li><a href="http://www.forosdelweb.com/f53/triby/index.html" id="Triby"><span class="alt">Diseño de Triby</span></a></li>
                                                         <li><a href="http://www.forosdelweb.com/f53/willyfc/index.html" id="Willyfc"><span class="alt">Diseño de Willyfc</span></a></li>

                                                 </ul>
                                       </div>
                            </div>


</div>



<div id="col_izq">
               <div class="col_izq">

                                     <p><span class="otro-color">Soluciones Web</span> es una empresa dinámica, que se destaca por ofrecer soluciones originales en el desarrollo de la web.  Nuestros servicios 
		se engloban en las áreas de Internet, programación, multimedia, diseño gráfico, traducciones y consultoría.  Asimismo disponemos de soluciones
		adaptadas a las necesidades particulares de cada cliente ofrenciendo un servicio integral.</p>

		<p>Nuestro estudio se compone de profesionales programadores capacitados en la últimas tecnologías y de diseñadores que van más allá de una pantalla
		de ordenador.</p>

		<p>La confianza de nuestros clientes y los resultados obtenidos desde hace 10 años de creciente trabajo, convirtieron a <span class="otro-color">Soluciones Web</span> en el líder en 
		servicios web de habla hispana.</p>

		<p>La ética de nuestros integrantes, la superación constante y la forma de trabajar, destacándonos siempre con una estética diferente a la media, hace que
		hoy usted nos elija.</p>
		
                </div>
</div>

<div id="col_cen"><img src="images/robotito2.jpg" alt="mascota de la firma" /></div>
</div>

               

<!--cierre de la caja principal-->			
<div class="corte"></div>



<div id="pie">

	<ul>
		<li><a href="pao01.css" title="Acceso al archivo CSS">Código CSS</a> | </li>
		<li><a href="http://validator.w3.org/" title=" Referencia al validador XHTML de la W3C">Válido XHTML 1.0</a> | </li>
		<li><a href="http://jigsaw.w3.org/css-validator/" title=" Referencia al validador CSS de la W3C">Válido CSS 2.1</a> | </li>

		<li><a href="http://www.sidar.org/hera/index.php.es" title=" Referencia al analizador de accesibilidad de sidar.org">Accesibilidad</a></li>
	</ul>

	</div> 

		



</body>
</html>

DoPeY-BBS · #25 (**permalink**) 21/01/2009, 18:15

lo mismo que a mi me paso y ojala no hayas durado lo que yo dure *1 hora* quita el comentario de arriba del html, claro puede que esto sea parte de los muchos problemas que tienes *no se*

pero lo que si se de seguro es que quites el comentario de arriba del xhtml

http://www.forosdelweb.com/f53/no-lo...oblema-664443/
suerte

pao01 · #26 (**permalink**) 21/01/2009, 18:21

No Dopey, no es eso.
Digo que lo quito y no se centra, pero de todas maneras nuevo problema:
no se de dónde apareció eso, pero al retirarlo, desaparecen en el ie7 las imágenes.

(por lo menos las que están colocadas dentro del html (encabezado) y el (div central).

De todas maneras Dopey disculpas por invadirte, si lo deseas reporto todo esto para que algún moderador me mude y puedas continuar con lo tuyo.

Mikmoro · #27 (**permalink**) 21/01/2009, 18:22

Cita:

Iniciado por DoPeY-BBS

lo mismo que a mi me paso y ojala no hayas durado lo que yo dure *1 hora* quita el comentario de arriba del html

Sí, exactamente

pao01 · #28 (**permalink**) 21/01/2009, 18:23

Mik chocamos, pero si te fijas; no se resuelve.

Mikmoro · #29 (**permalink**) 21/01/2009, 18:27

Estamos cruzando ya varios mensajes

Dime, ¿cómo se llama el contenedor que no se centra, y cómo es visualmente?

DoPeY-BBS · #30 (**permalink**) 21/01/2009, 18:27

Cita:

Iniciado por pao01

No Dopey, no es eso.
Digo que lo quito y no se centra, pero de todas maneras nuevo problema:
no se de dónde apareció eso, pero al retirarlo, desaparecen en el ie7 las imágenes.

(por lo menos las que están colocadas dentro del html (encabezado) y el (div central).

De todas maneras Dopey disculpas por invadirte, si lo deseas reporto todo esto para que algún moderador me mude y puedas continuar con lo tuyo.

No, Todo esta perfecto no lo reportes

Esto del css no va a volver loco pao

unamos fuerza para que junto podamos vencer