Foros del Web » Creando para Internet » CSS »

SOLUCIONADO:Layout CSS de 3 Paneles Cross-Browser

Estas en el tema de SOLUCIONADO:Layout CSS de 3 Paneles Cross-Browser en el foro de CSS en Foros del Web. Qusiera saber si alguien tiene un codigo de un layout (maquetación) en Css de 3 paneles. solo eso [ | | ] Que los paneles ...
  #1 (permalink)  
Antiguo 27/02/2005, 16:47
 
Fecha de Ingreso: febrero-2005
Mensajes: 15
Antigüedad: 12 años, 9 meses
Puntos: 0
SOLUCIONADO:Layout CSS de 3 Paneles Cross-Browser

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?

Última edición por deZtino; 28/02/2005 a las 15:46
  #2 (permalink)  
Antiguo 27/02/2005, 19:41
 
Fecha de Ingreso: febrero-2005
Ubicación: En un BLINK
Mensajes: 184
Antigüedad: 12 años, 10 meses
Puntos: 0
¿Algo como esto? http://glish.com/css/7.asp
  #3 (permalink)  
Antiguo 28/02/2005, 01:15
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
por supuesto que los hay!
te recomiendo este generador:
http://www.inknoise.com/experimental/layoutomatic.php
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #4 (permalink)  
Antiguo 28/02/2005, 04:13
 
Fecha de Ingreso: enero-2005
Mensajes: 265
Antigüedad: 12 años, 11 meses
Puntos: 1
http://css-discuss.incutio.com/?page=ThreeColumnLayouts
  #5 (permalink)  
Antiguo 28/02/2005, 10:53
 
Fecha de Ingreso: febrero-2005
Mensajes: 15
Antigüedad: 12 años, 9 meses
Puntos: 0
Mensaje Solucionado: Layour 3 Paneles Cross-Browser Lat.Fijos

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>

Última edición por deZtino; 28/02/2005 a las 11:11
  #6 (permalink)  
Antiguo 28/02/2005, 13:18
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 12 años, 10 meses
Puntos: 9
.

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>


.
  #7 (permalink)  
Antiguo 28/02/2005, 14:13
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
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.
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #8 (permalink)  
Antiguo 28/02/2005, 14:15
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
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
  #9 (permalink)  
Antiguo 28/02/2005, 15:03
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 12 años, 10 meses
Puntos: 9
En este caso se demuestra que las tablas son mas efectivas que css para este proposito .
  #10 (permalink)  
Antiguo 28/02/2005, 15:04
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
y si una empresa te pide usar las nuevas tecnologías de desarrollo web???
  #11 (permalink)  
Antiguo 01/03/2005, 03:44
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
depende de como midas la efectividad. en tamaño de codigo? flexibilidad? adaptabilidad? flexibilidad? semántica?
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #12 (permalink)  
Antiguo 01/03/2005, 11:40
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 12 años, 10 meses
Puntos: 9
.

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.

.
  #13 (permalink)  
Antiguo 01/03/2005, 11:42
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
pues css no es una nueva tecnología... el que no puedas realizar algo mediante css es mera falta de creatividad...

saludos
  #14 (permalink)  
Antiguo 01/03/2005, 11:57
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 12 años, 10 meses
Puntos: 9
.

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.

.
  #15 (permalink)  
Antiguo 01/03/2005, 12:02
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
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...
  #16 (permalink)  
Antiguo 01/03/2005, 15:36
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
por cierto... estamos en el foro CSS
  #17 (permalink)  
Antiguo 01/03/2005, 15:52
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
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...
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #18 (permalink)  
Antiguo 02/03/2005, 03:30
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Otro ejemplo que puede que te sirva:

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

Saludosss
  #19 (permalink)  
Antiguo 02/03/2005, 06:58
Avatar de sir_notos  
Fecha de Ingreso: noviembre-2001
Ubicación: Mexicali
Mensajes: 709
Antigüedad: 16 años
Puntos: 1
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
__________________
Usuario Registrado de linux #374849
  #20 (permalink)  
Antiguo 02/03/2005, 08:43
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
:plop: camaleoncss no es zengarden en español...
  #21 (permalink)  
Antiguo 02/03/2005, 09:57
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
es la misma idea...
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #22 (permalink)  
Antiguo 02/03/2005, 17:00
Avatar de sir_notos  
Fecha de Ingreso: noviembre-2001
Ubicación: Mexicali
Mensajes: 709
Antigüedad: 16 años
Puntos: 1
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
__________________
Usuario Registrado de linux #374849
  #23 (permalink)  
Antiguo 03/03/2005, 06:23
Avatar de CifuSO  
Fecha de Ingreso: marzo-2004
Mensajes: 90
Antigüedad: 13 años, 8 meses
Puntos: 0
Css..

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)
__________________
» FinisterreShop.com.ar Clothes & Skateboard
» Sierras de Cordoba - Argentina Turismo, alojamiento y lugares
  #24 (permalink)  
Antiguo 04/03/2005, 03:16
Avatar de sir_notos  
Fecha de Ingreso: noviembre-2001
Ubicación: Mexicali
Mensajes: 709
Antigüedad: 16 años
Puntos: 1
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
__________________
Usuario Registrado de linux #374849
  #25 (permalink)  
Antiguo 04/03/2005, 06:25
Avatar de CifuSO  
Fecha de Ingreso: marzo-2004
Mensajes: 90
Antigüedad: 13 años, 8 meses
Puntos: 0
No tablas..

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
__________________
» FinisterreShop.com.ar Clothes & Skateboard
» Sierras de Cordoba - Argentina Turismo, alojamiento y lugares
  #26 (permalink)  
Antiguo 04/03/2005, 14:13
 
Fecha de Ingreso: febrero-2005
Mensajes: 670
Antigüedad: 12 años, 10 meses
Puntos: 0
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
__________________
Federico H. García
Desarrollo Web
www.federicog.com.ar
  #27 (permalink)  
Antiguo 05/03/2005, 04:14
Avatar de sir_notos  
Fecha de Ingreso: noviembre-2001
Ubicación: Mexicali
Mensajes: 709
Antigüedad: 16 años
Puntos: 1
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
__________________
Usuario Registrado de linux #374849
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:17.