SOLUCIONADO:Layout CSS de 3 Paneles Cross-Browser

deZtino · #1 (**permalink**) 27/02/2005, 16:47

Qusiera saber si alguien tiene un codigo de un layout (maquetación) en Css de 3 paneles. solo eso
[ | | ]
Que los paneles laterales sean fijos de 150 pixel, y el central variable dependiendo la resolucion de pantalla.
Que se vea = en Opera, Mozilla, Ie.

Existe?

Remo:Erdosain · #2 (**permalink**) 27/02/2005, 19:41

¿Algo como esto? http://glish.com/css/7.asp

kemie · #3 (**permalink**) 28/02/2005, 01:15

por supuesto que los hay!
te recomiendo este generador:
http://www.inknoise.com/experimental/layoutomatic.php

posavasos · #4 (**permalink**) 28/02/2005, 04:13

http://css-discuss.incutio.com/?page=ThreeColumnLayouts

deZtino · #5 (**permalink**) 28/02/2005, 10:53

Bueno.. .Finalmente y MUCHISIMAS gracias a posavasos, encontre un layout que pude modificar fácilmente para que se adapte a lo que necesitaba.

kemie http://www.inknoise.com/experimental/layoutomatic.php no tiene layout con ancho fijo o no logre encontrarlo. Gracias

remo http://glish.com/css/7.asp me fue imposible adaptar ese layout (no necesitaba headers ni footer) Gracias

Aca http://css-discuss.incutio.com/?page=ThreeColumnLayouts encontre lo que necesitaba. Luego de reformar uno me quedo asi. [| |]

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>
<title>3 col layout with equalising columns and footer</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* commented backslash hack v2 \*/ 
html, body{height:100%;} 
/* end hack */ 
body {
padding:0;
margin:0;
color: #000000;
}
#outer{
min-height:100%;
margin-left:130px;
margin-right:130px;
background:#F8E7EC;
border-left:1px solid #000;
border-right:1px solid #000;
margin-bottom:-52px;
color: #000000;
}
 
* html #outer{height:100%} /*for IE as IE treats height as min-height anyway*/
#header{
position:absolute;
top:0;
left:0;
width:100%;
height:70px;
background:#FF0000;
border-top:1px solid #000;
border-bottom:1px solid #000;
overflow:hidden;
color: #000000;
}
#left {
position:relative;/*ie needs this to show float */
width:130px; 
float:left;
margin-left:-129px;/*must be 1px less than width otherwise won't push footer down */
z-index:100;
left:-1px;
}
* html #left {padding-bottom:52px ;margin-right:-3px;}/*fix gap in ie next to float and clear footer because we've moved float too far left*/
#left p {padding-left:3px;padding-right:2px}
#right p {padding-left:3px;padding-right:2px}
#right {
position:relative;/*ie needs this to show float */
width:130px;
float:right;
margin-right:-129px;/*must be 1px less than width otherwise won't push footer down */
left:1px
}
#footer {
width:100%;
clear:both;
height:50px;
border-top:1px solid #000;
border-bottom:1px solid #000;
background-color: #FF8080;
color: #000000;
text-align:center;
position:relative;
}
* html #footer {/*only ie gets this style*/
\height:52px;/* for ie5 */
he\ight:50px;/* for ie6 */
}
#clearheader{height:72px;}/*needed to make room for header*/
#clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
* > html #clearfooter {float:left;width:100%;}/* ie mac styles */
div,p {margin-top:0}/*clear top margin for mozilla*/
* html #centrecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */
#centrecontent {position:relative;z-index:1}
/* css stuff below is just for presentation and not needed for the demo */
#left span {
display:none; 
} 
#left a:hover {
color: #666666;
background: #FFFFCC;
text-decoration: none;
}
#left a:hover span {
display:block;
position:absolute;
left:130px;
width:150px;
z-index:20;
background:#fff;
}
@media all and (min-width: 0px){
#left a:hover span {
top:150px;
}
}
#footer span {
display:none; 
} 
#footer a:hover {
color: #666666;
background: #FFFFCC;
text-decoration: none;
}
#footer a:hover span {
display:block;
position:absolute;
top:-95px;
width:150px;
z-index:20;
background:#fff;
left:50%;
}
html > body #minHeight{float:left;width:0px;height:100%;margin-bottom:-52px;} /*safari wrapper thanks to Tim Connor*/
</style>
</head>
<body>
<div id="minHeight"></div>
<div id="outer"> 
<!-- <div id="clearheader"></div> -->
 
<div id="left"> 
Izquierda
</div>
<div id="right"> 
Derecha
</div>
<div id="centrecontent"> 
	<!--centre content goes here -->
Centro
</div>
<div id="clearfooter"></div> <!-- to clear footer -->
</div><!-- end outer div -->
<!--<div id="footer">Footer - | <a href="3colfixedtest_1.htm">Left column longest</a> 
| <a href="3colfixedtest_2.htm">Centre column longest</a> | <a href="3colfixedtest_3.htm">Right 
column longest</a> | <a href="3colfixedtest_pob.htm">Example Page<span><img src="images/screenexample.gif" alt="example page using the above techniques" width="150" height="85" /></span></a> 
| - Footer 
<p></p>
</div>-->
<!--<div id="header">Header - right column longest - footer at bottom of document.</div>-->
</body>
</html>

programeitor · #6 (**permalink**) 28/02/2005, 13:18

.

Parece demasiado codigo para poner tres paneles ,creo

.

Esto da el mismo resultado

.

<style>
body,table,td{height:100%;margin:0;padding:0;borde r:1 solid black;border-collapse:collapse;vertical-align:top;}
</style>
<table width=100%>
<tr>
<td width=150px style=background:#999>izquierda</td>
<td style=background:#bbb>centro</td>
<td width=150px style=background:#999>derecha</td>
</tr>
</table>

.

kemie · #7 (**permalink**) 28/02/2005, 14:13

deZtino, para la proxima, todos los layouts de layoutomatic son de ancho fijo. basta con poner el ancho que quieras donde dice "Container area width (includes sidebars and main content):"
Programeitor, pero tu codigo utiliza tablas, y deZtino buscaba un layout hecho con CSS.

jesusbet · #8 (**permalink**) 28/02/2005, 14:15

Cita:

Iniciado por programeitor

.

Parece demasiado codigo para poner tres paneles ,creo

.

Esto da el mismo resultado

.

<style>
body,table,td{height:100%;margin:0;padding:0;borde r:1 solid black;border-collapse:collapse;vertical-align:top;}
</style>
<table width=100%>
<tr>
<td width=150px style=background:#999>izquierda</td>
<td style=background:#bbb>centro</td>
<td width=150px style=background:#999>derecha</td>
</tr>
</table>

.

parece poco código como para ser un webmaster profesional

programeitor · #9 (**permalink**) 28/02/2005, 15:03

En este caso

se demuestra que las tablas son mas efectivas que css para este proposito

.

jesusbet · #10 (**permalink**) 28/02/2005, 15:04

y si una empresa te pide usar las nuevas tecnologías de desarrollo web???

kemie · #11 (**permalink**) 01/03/2005, 03:44

depende de como midas la efectividad. en tamaño de codigo? flexibilidad? adaptabilidad? flexibilidad? semántica?

programeitor · #12 (**permalink**) 01/03/2005, 11:40

.

una nueva tecnologia se aplica para mejorar algo ,no para complicarlo.

He intentado hacer varias cosas mediante solo css y he tenido que desistir por lo complicado y lo absurdo de realizarlas ,siendo factibles y mas faciles con html o una mezcla de ambas.

por ejemplo ,difino un ID en css y no puedo acceder a varios atributos mediante javascript ,sin embargo si el estilo lo declaro en mismo tag "<div style=tal> si puedo acceder a ellos por javascript.

otro ejemplo aun mas patente es este que nos ocupa.

saludos.

.

jesusbet · #13 (**permalink**) 01/03/2005, 11:42

pues css no es una nueva tecnología... el que no puedas realizar algo mediante css es mera falta de creatividad...

saludos

programeitor · #14 (**permalink**) 01/03/2005, 11:57

.

La verdad no me importa que un lenguaje sea o no nuevo ,lo que me importa es que sea efectivo.

lo de que sea nuevo no lo he dicho yo, que conste.

Cita:

Iniciado por jesusbet

y si una empresa te pide usar las nuevas tecnologías de desarrollo web???

a lo que yo conteste:

Cita:

Iniciado por programeitor

una nueva tecnologia se aplica para mejorar algo ,no para complicarlo.

Saludos.

.

jesusbet · #15 (**permalink**) 01/03/2005, 12:02

bueno, mejor dicho:

y si una empresa te pide innovar en el desarrollo web??? me refiero a usar tecnologías actuales, que están de moda pues...

jesusbet · #16 (**permalink**) 01/03/2005, 15:36

por cierto... estamos en el foro CSS

kemie · #17 (**permalink**) 01/03/2005, 15:52

el que algo te parezca complicado no significa que lo es, simplemente que no estas familiarizado con el. las ventajas de usar css para layouts en vez de tablas son muchas. Si prefieres usar tablas, usa tablas, no hay problema. Pero los argumentos de que CSS es "demasiado complicado" creo que no van...

kahlito · #18 (**permalink**) 02/03/2005, 03:30

Otro ejemplo que puede que te sirva:

http://www.tierradenomadas.com/tw003c.html

Saludosss

sir_notos · #19 (**permalink**) 02/03/2005, 06:58

sobre la discucion yo al princio era una papa para el CSS ... (ahora soy un ravano :P) pero y tenia la misma idea algo asi como ... CSS sucks ... :P pero despues de buscar y mirar lo que se puede hacer con CSS O_O como por ejemplo

http://csszengarden.com ... cuando lo mire no me la crei O_O tambien esta en español es camaleon CSS pero no recuerdo la url

Jesusbet.

estas equivocado no se trata de modas se trata de inovar y de hacer las cosas mas eficientes

lo que se trata CSS es de separar el diseño de estructura ... bueno eso creo

como ya dije soy un ravano en esto

jesusbet · #20 (**permalink**) 02/03/2005, 08:43

:plop: camaleoncss no es zengarden en español...

kemie · #21 (**permalink**) 02/03/2005, 09:57

es la misma idea...

sir_notos · #22 (**permalink**) 02/03/2005, 17:00

Cita:

Iniciado por jesusbet

:plop: camaleoncss no es zengarden en español...

tienes razon creo que no me explique bien devi haber dicho como kemie dice es es la misma idea :P

CifuSO · #23 (**permalink**) 03/03/2005, 06:23

Ademàs el uso de Css tiene otros objetivos y es la nueva tendencia. Las tablas tienden a desaparecer por completo.
Fijate cual te indexa mejor el google por ejemplo (seguro que lo que hagas en css). Y esto es solo una ventaja.

Por aca dejo algunos links muuy interesantes sobre el uso de las Css:

Alzado.org (1)
Alzado.org (2)
Alzado.org (3)

sir_notos · #24 (**permalink**) 04/03/2005, 03:16

tanto asi como que las tablas desaparescan por completo lo dudo ... pues las tablas no estan en estado deprecated ... las tablas son una muy buena herramienta para mostrar informacion tabular ... esto es no fuero creadas para hacer el diseño de tu web :P

CifuSO · #25 (**permalink**) 04/03/2005, 06:25

Notos, yo hablo de tendencias. Es seguro que las tablas no van a desaparecer de un dia para el otro, porque no cualquiera maqueta puramente en Css; pero en el ambito profesional ya se van dejando las tablas atras para separar contenido de presentacion, y que html sea solo un lenguaje de marcas.
Si estas al tanto,la mayoria de los sistemas opensource de publicacion como lo son Wordpress, MovableType, OsCommerce, PHP-Nuke etc etc estan maquetados solo con estilos Css y cero tablas.
Te repito, estoy hablando de tendencias siguiendo con los estandares, para hacer la web accesible para todos, sin depender desde que medio se ingrese a la misma (es un ejemplo más).
Saludos

thunder.scripts · #26 (**permalink**) 04/03/2005, 14:13

Se van dejando las tablas atrás para maquetar, pero NUNCA van a desaparecer porque el objetivo de las tablas es mostrar información tabulada, y eso lo hacen muy bien ;)

Suerte
Fede

sir_notos · #27 (**permalink**) 05/03/2005, 04:14

Cita:

Iniciado por sir_notos

tanto asi como que las tablas desaparescan por completo lo dudo ... pues las tablas no estan en estado deprecated ... las tablas son una muy buena herramienta para mostrar informacion tabular ... esto es no fuero creadas para hacer el diseño de tu web :P

es lo mismo que yo digo :S