Foros del Web » Creando para Internet » CSS »

Urgente: Ayuda para Maquetar con GRID960 please..!!!!

Estas en el tema de Urgente: Ayuda para Maquetar con GRID960 please..!!!! en el foro de CSS en Foros del Web. Hola Chicos, La presente es para que me ayuden de suma urgencia respecto a maquetar con GRID 960 ( pero el que tengo es el ...
  #1 (permalink)  
Antiguo 14/12/2009, 15:57
Avatar de Nova  
Fecha de Ingreso: enero-2003
Ubicación: Hyo
Mensajes: 832
Antigüedad: 14 años, 10 meses
Puntos: 1
Urgente: Ayuda para Maquetar con GRID960 please..!!!!

Hola Chicos,
La presente es para que me ayuden de suma urgencia respecto a maquetar con GRID 960 ( pero el que tengo es el grid1000).
El problema que tengo es unir 2 partes del cuerpo de la pagina web pero solo en algunos navegadores me hace caso, pero en otras no, seria de la gran ayuda de ustedes para que me echen una mano.
Gracias de antemano , muchísimas gracias.

Web: http://fondoverde.org/page-web/index.html


Por si les es mas cómodo les dejo el Index.html o sino del enlace de arriba directo a la pagina
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html lang="en">
  3.  
  4. <title>Páginas Verdes : Perú</title>
  5. <link rel="stylesheet" type="text/css" href="css/grid1000.css" media="all">
  6. <link rel="stylesheet" type="text/css" href="css/reset.css" >
  7. <link rel="stylesheet" type="text/css" href="css/text.css">
  8.  
  9. <link type="text/css" href="theme/ui.all.css" rel="stylesheet" />
  10. <script type="text/javascript" src="jquery-1.3.2.js"></script>
  11. <script type="text/javascript" src="js/ui.core.js"></script>
  12. <script type="text/javascript" src="js/ui.tabs.js"></script>
  13. <link type="text/css" href="demos.css" rel="stylesheet" />
  14. <script type="text/javascript">
  15.     $(function() {
  16.         $("#tabs").tabs();
  17.     });
  18. </script>
  19. <style type="text/css">
  20. body{
  21. margin: 0 auto;
  22.  
  23. background-color: #ddf4c6; 
  24. }
  25. #cabecera{
  26.  
  27. }
  28. #fondobtns{
  29.     background: url(images/bsigue.gif) no-repeat;
  30.     margin: 0 0 0 0;/*  padding: 0 0 1px 0;*/
  31.     /*background-color: #A5E124;*/
  32. }
  33. #bannerflash{
  34.     margin: 0 0 0 -5px;
  35. /*  margin-top: -10px;*/
  36. }
  37. #redes_sociales img {
  38.     padding:9px 0 0 0;
  39.  
  40. }
  41. #txtsiguenos img{
  42.     margin: 5px 0 0 8px;
  43. }
  44. #txtsuscribir img{
  45.     margin: 2px 0 0 10px;
  46. }
  47. #txtsuscribir input{
  48. /*  margin: 0 0 0 5px;*/
  49.    
  50. }
  51. #txttwitter img{
  52.     margin: 0 0 0 -10px;
  53. }
  54. #txtrss img{
  55.     margin: 0 0 0 -10px;
  56. }
  57. #suscrip {
  58.     color: #FFFFFF;
  59.     background-color: #666666;
  60.     border: medium dotted #666666;
  61. }
  62. #Suscripcion {
  63.     padding:9px 0 0 0;
  64. }
  65. #titu-catego img{
  66.     padding:14px 0 4px 13px;
  67. }
  68. #config_zona_botones{
  69.     margin:0;
  70. /*  padding:14px 0 4px 13px;*/
  71. }
  72. #barra_cuerpo{
  73. /*  margin: -1px 0 0 0;*/
  74.     padding:-10px 0 0 -10px;
  75. }
  76. #barra_menues{
  77.     background:url(images/bcat.gif) no-repeat;
  78.     margin: 0 0 0 0;
  79.     padding:0 0 0 0;
  80. }
  81. #barra_contenido{
  82.     background:url(images/bskina.gif) no-repeat;
  83.     overflow: auto;
  84.     margin: 0 0 0 -1px;
  85.     overflow:hidden;
  86. }
  87. #barra_publicidad{
  88.     background:#BDCCB3;
  89. }
  90. #pie-contenido{
  91.     padding:5px 0 0 0;
  92.     background:url(images/pie.gif) no-repeat;
  93.     text-align:center;
  94.     font:  small-caps 0.8em/1.1em verdana;
  95.     margin: 10px 0 0 0;
  96. }
  97.  
  98. #texts-menu li{
  99.     list-style-type: none;
  100.     margin:0 30px;
  101.     list-style-image:url(images/check_off.png);
  102.     border-bottom: 1px dashed #C6EC77;
  103. }
  104. #demo{
  105.     float:right;
  106. }
  107. <script src="scripts/AC_RunActiveContent.js" type="text/javascript"></script>
  108. </head>
  109.  
  110. <div id="proy-web" class="container_50">
  111.     <div id="cabecera" class="container_50">
  112.         <div id="bn_flash">
  113.           <script type="text/javascript">
  114. AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','1000','height','267','src','swf/head','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','swf/head' ); //end AC code
  115. </script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="1000" height="267">
  116.             <param name="movie" value="swf/head.swf" />
  117.             <param name="quality" value="high" />
  118.             <embed src="swf/head.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="1000" height="267"></embed>
  119.           </object>
  120.         </noscript></div>
  121.       <div class="clear"></div>
  122.     </div>
  123.     <div id="zona_botones" class="container_50">
  124.     <div id="config_zona_botones">
  125.         <div id="fondobtns" class="grid_17">
  126.             <div id="redes_sociales" class="grid_17">
  127.                 <div id="txtsiguenos" class="grid_6 alpha">
  128.                     <img src="images/siguenosen.gif" alt="Siguenos en:" />
  129.                 </div>            
  130.                 <div id="txttwitter" class="grid_1 ">
  131.                     <img src="images/twiterbutton.gif" alt="Twitter" />
  132.                 </div>
  133.                 <div id="txtfacebook" class="grid_2 ">
  134.                     <img src="images/facebookbutton.gif" alt="Facebook" />
  135.                 </div>
  136.                 <div id="txtrss" class="grid_2 omega suffix_6">
  137.                     <img src="images/rssbutton.gif" alt="RSS" />
  138.                 </div>
  139.             <div class="clear"></div>
  140.             </div><br /><br />
  141.             <div id="Suscripcion" class="grid_17">
  142.                 <div id="txtsuscribir" class="grid_3 alpha">
  143.                     <img src="images/mail.gif" alt="Newsletter" />
  144.                 </div>
  145.                 <div id="txtsiguenos" class="grid_13  omega suffix_1">
  146.                   <form id="form1" name="form1" method="post" action="">
  147.                           <input type="text" name="txtsuscrip" id="txtsuscrip" />
  148.                           <input type="submit" name="suscrip" id="suscrip" value="Suscribir" class="btnsuscrip" />
  149.                   </form>
  150.                 </div>
  151.                 <div class="clear"></div>
  152.             </div>
  153.             <div id="titu-catego" class="grid_14 prefix_2 suffix_1"><img class="" src="images/titucat.gif" alt="Categorías" /></div></div>
  154.       </div>
  155.         <div id="bannerflash" class="grid_33"><img src="images/flash.gif" alt="Banner flash" /></div>
  156.         <div class="clear"></div>
  157.     </div>
  158. </div>
  159.     <div id="barra_cuerpo" class="container_50">    
  160.         <div id="barra_menues" class="grid_13">
  161.           <ul id="texts-menu">
  162.                 <li>Agricultura y jardinería</li>
  163.                 <li>Agua</li>
  164.                 <li>Alimentos y bebidas</li>
  165.                 <li>Arquitectura y construcción</li>
  166.                 <li>Animales</li>
  167.                 <li>Artesania</li>
  168.                 <li>Consultoría y servicios para el ambiente</li>
  169.                 <li>Educación y formación</li>
  170.                 <li>Embalaje y envases</li>
  171.                 <li>Energía</li>
  172.                 <li>Finanzas</li>
  173.                 <li>Hogar</li>
  174.                 <li>Limpieza</li>
  175.                 <li>Madera</li>
  176.                 <li>Medios de comunicación, publicidad</li>
  177.                 <li>Moda, textiles</li>
  178.                 <li>Papelería, oficina e imprenta</li>
  179.                 <li>Organizaciones e instituciones</li>
  180.                 <li>Reciclaje de residuos</li>
  181.                 <li>Restaurantes</li>
  182.                 <li>Salud y belleza</li>
  183.                 <li>Transporte</li>
  184.                 <li>Turismo y viajes</li>            
  185.           </ul>
  186.         </div>
  187.     <div id="barra_contenido" class="grid_30">
  188.  
  189.     </div>        
  190.     <div id="barra_publicidad" class="grid_7">
  191.       <p> publi</p>
  192.         <p>dfgfd</p>
  193.         <p>g</p>
  194.         <p>dfg</p>
  195.         <p>&nbsp;</p>
  196.         <p>dfg</p>
  197.         <p>dfgdfg</p>
  198.         <p>fdg</p>
  199.         <p>fd</p>
  200.         <p>g</p>
  201.         <p>dfg</p>
  202.         <p>fdgdg</p>
  203.     </div>        
  204.         <div class="clear"></div>        
  205.   </div>
  206.     <div id="pie" class="container_50">    
  207.         <div id="pie-contenido" class="grid_50">
  208.         <p><a href="#">PRESENTACI&Oacute;N</a> | <a href="#">AN&Uacute;NCIATE</a> | <a href="#">CONT&Aacute;CTANOS</a><br /> <a href="#">Pol&iacute;tica de Privacidad</a><br />COPYRIGHT (c) 2010 Todos los Derechos Reservados <a  href="http://www.fondoverde.org">Fondo Verde</a> 2009</p>
  209.         </div>
  210.         <div class="clear"></div>
  211.     </div>    
  212. </div><!--FIN DE PROYECTO/-->
  213. </body>
  214. </html>
__________________
http://about.me/jemano
  #2 (permalink)  
Antiguo 14/12/2009, 16:00
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Urgente: Ayuda para Maquetar con GRID960 please..!!!!

WTF?????... cual es el problema?
QUIERES QUE TE LO HAGAMOS??????
  #3 (permalink)  
Antiguo 14/12/2009, 16:02
Avatar de Nova  
Fecha de Ingreso: enero-2003
Ubicación: Hyo
Mensajes: 832
Antigüedad: 14 años, 10 meses
Puntos: 1
Respuesta: Urgente: Ayuda para Maquetar con GRID960 please..!!!!

disculpa copie mal ahora ya esta arreglado puse una imagen por si no me deje entender..
gracias por su ayuda
__________________
http://about.me/jemano
  #4 (permalink)  
Antiguo 14/12/2009, 16:11
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Urgente: Ayuda para Maquetar con GRID960 please..!!!!

la verdad veo una enorme chapuza esto de los frameworks y mas si recien comienzas con CSS... pero bueno...

aprimera veo mucho div y el que te da ese problema es "bannerflash" una solucion rapida seria
margin:-8px 0 0 -5px;
o hacerlo menos alto...

pero como consejo... te digo que es mejor tener tu propio codigo... pero bueno chao y suerte!
  #5 (permalink)  
Antiguo 14/12/2009, 16:15
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Urgente: Ayuda para Maquetar con GRID960 please..!!!!

Hola:

Posiblemente lo soluciones reduciendo un poco el alto (height) del banner flash.

Saludos.

  #6 (permalink)  
Antiguo 15/12/2009, 11:37
Avatar de Nova  
Fecha de Ingreso: enero-2003
Ubicación: Hyo
Mensajes: 832
Antigüedad: 14 años, 10 meses
Puntos: 1
Respuesta: Urgente: Ayuda para Maquetar con GRID960 please..!!!!

pues nsoe que pasa , probe con SAFARI y CHROME y si sale bien pero con IE me sigue saliendo separado :(
__________________
http://about.me/jemano
  #7 (permalink)  
Antiguo 15/12/2009, 15:55
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Urgente: Ayuda para Maquetar con GRID960 please..!!!!

Hola:

Una pregunta, ¿en tu código css sueles empezar con un reset?

Saludos.

  #8 (permalink)  
Antiguo 15/12/2009, 15:57
Avatar de Nova  
Fecha de Ingreso: enero-2003
Ubicación: Hyo
Mensajes: 832
Antigüedad: 14 años, 10 meses
Puntos: 1
Respuesta: Urgente: Ayuda para Maquetar con GRID960 please..!!!!

no el reset lo utilizo para reiniciar la columna del grid
__________________
http://about.me/jemano
  #9 (permalink)  
Antiguo 15/12/2009, 16:13
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Urgente: Ayuda para Maquetar con GRID960 please..!!!!

Hola:

Pon esto al inicio de tu css:

Código:
*{padding: 0; margin: 0 auto;}
Saludos.

  #10 (permalink)  
Antiguo 15/12/2009, 17:04
Avatar de Nova  
Fecha de Ingreso: enero-2003
Ubicación: Hyo
Mensajes: 832
Antigüedad: 14 años, 10 meses
Puntos: 1
Respuesta: Urgente: Ayuda para Maquetar con GRID960 please..!!!!

El codigo:
Código __default:
Ver original
  1. [HIGHLIGHT="CSS"]*{padding: 0; margin: 0 auto;}
[/HIGHLIGHT] esta configurado en un archivo css.


ahora no se que hice que en el mozilla firefox me sale desordenado completamente....

a que se debe ahora???
__________________
http://about.me/jemano

Última edición por Nova; 15/12/2009 a las 17:10
  #11 (permalink)  
Antiguo 15/12/2009, 19:40
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Urgente: Ayuda para Maquetar con GRID960 please..!!!!

tas hecho un lio jeje... mejor... empieza de nuevo como debe ser sin ese framework...

.container_50 {float:left;}

tardaras lo mismo hacerlo de nuevo correctamente, que encontrar los errores de compatibilida y tal chao!...
  #12 (permalink)  
Antiguo 16/12/2009, 13:27
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Urgente: Ayuda para Maquetar con GRID960 please..!!!!

Hola:

Por lo que veo lo has arreglado, ¿cómo lo has conseguido?

Un consejo, para evitar que te salgan caracteres extraños donde hay acentos (por ejemplo, Páginas Verdes : Perú) debes incluir dentro del <head> esto:

Código:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
o bien

Código:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
Saludos.

  #13 (permalink)  
Antiguo 16/12/2009, 14:22
Avatar de Nova  
Fecha de Ingreso: enero-2003
Ubicación: Hyo
Mensajes: 832
Antigüedad: 14 años, 10 meses
Puntos: 1
Respuesta: Urgente: Ayuda para Maquetar con GRID960 please..!!!!

pues era solo un error que estaba cometiendo.... las clases con
Cita:
class="grid_xxxx" o class="container_xx"
tienen su CSS ya definido en el GRID960 ( el framework).

Gracias por el detalle de los acentos, pero justo a ello iva mi pregunta.
Que me recomiendas que le incluya el <meta> o que trabaje con códigos HTML para tildes (&aacute; , &eacute; , &iacute; , &oacute; , &uacute;)

Gracias
__________________
http://about.me/jemano
  #14 (permalink)  
Antiguo 16/12/2009, 15:45
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Urgente: Ayuda para Maquetar con GRID960 please..!!!!

Hola:

Incluyendo <meta> solucionas el problema y no tienes que andar buscándo ningún código.

Saludos.

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 23:02.