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

Nova · #1 (**permalink**) 14/12/2009, 15:57

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
 
<title>PÃ¡ginas Verdes : PerÃº</title>
<link rel="stylesheet" type="text/css" href="css/grid1000.css" media="all">
<link rel="stylesheet" type="text/css" href="css/reset.css" >
<link rel="stylesheet" type="text/css" href="css/text.css">
 
<link type="text/css" href="theme/ui.all.css" rel="stylesheet" /> 
<script type="text/javascript" src="jquery-1.3.2.js"></script> 
<script type="text/javascript" src="js/ui.core.js"></script> 
<script type="text/javascript" src="js/ui.tabs.js"></script> 
<link type="text/css" href="demos.css" rel="stylesheet" /> 
<script type="text/javascript"> 
    $(function() {
        $("#tabs").tabs();
    });
</script> 
<style type="text/css">
body{
margin: 0 auto;
 
background-color: #ddf4c6;  
}
#cabecera{
 
}
#fondobtns{
    background: url(images/bsigue.gif) no-repeat;
    margin: 0 0 0 0;/*  padding: 0 0 1px 0;*/
    /*background-color: #A5E124;*/
}
#bannerflash{
    margin: 0 0 0 -5px;
/*  margin-top: -10px;*/
}
#redes_sociales img {
    padding:9px 0 0 0;
 
}
#txtsiguenos img{
    margin: 5px 0 0 8px;
}
#txtsuscribir img{
    margin: 2px 0 0 10px;
}
#txtsuscribir input{
/*  margin: 0 0 0 5px;*/
    
}
#txttwitter img{
    margin: 0 0 0 -10px;
}
#txtrss img{
    margin: 0 0 0 -10px;
}
#suscrip {
    color: #FFFFFF;
    background-color: #666666;
    border: medium dotted #666666;
}
#Suscripcion {
    padding:9px 0 0 0;
}
#titu-catego img{
    padding:14px 0 4px 13px;
}
#config_zona_botones{
    margin:0;
/*  padding:14px 0 4px 13px;*/
}
#barra_cuerpo{
/*  margin: -1px 0 0 0;*/
    padding:-10px 0 0 -10px;
}
#barra_menues{
    background:url(images/bcat.gif) no-repeat;
    margin: 0 0 0 0;
    padding:0 0 0 0;
}
#barra_contenido{
    background:url(images/bskina.gif) no-repeat;
    overflow: auto;
    margin: 0 0 0 -1px;
    overflow:hidden;
}
#barra_publicidad{
    background:#BDCCB3;
}
#pie-contenido{
    padding:5px 0 0 0;
    background:url(images/pie.gif) no-repeat;
    text-align:center;
    font:  small-caps 0.8em/1.1em verdana;
    margin: 10px 0 0 0;
}
 
#texts-menu li{
    list-style-type: none;
    margin:0 30px; 
    list-style-image:url(images/check_off.png);
    border-bottom: 1px dashed #C6EC77;
}
#demo{
    float:right;
}
</style>
<script src="scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
 
<body>
<div id="proy-web" class="container_50">
    <div id="cabecera" class="container_50"> 
        <div id="bn_flash">
          <script type="text/javascript">
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
</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">
            <param name="movie" value="swf/head.swf" />
            <param name="quality" value="high" />
            <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>
          </object>
        </noscript></div>
      <div class="clear"></div>
    </div>
    <div id="zona_botones" class="container_50">
    <div id="config_zona_botones">
        <div id="fondobtns" class="grid_17">
            <div id="redes_sociales" class="grid_17">
                <div id="txtsiguenos" class="grid_6 alpha">
                    <img src="images/siguenosen.gif" alt="Siguenos en:" />
                </div>             
                <div id="txttwitter" class="grid_1 ">
                    <img src="images/twiterbutton.gif" alt="Twitter" />
                </div>
                <div id="txtfacebook" class="grid_2 ">
                    <img src="images/facebookbutton.gif" alt="Facebook" />
                </div>
                <div id="txtrss" class="grid_2 omega suffix_6">
                    <img src="images/rssbutton.gif" alt="RSS" />
                </div>
            <div class="clear"></div>
            </div><br /><br />
            <div id="Suscripcion" class="grid_17">
                <div id="txtsuscribir" class="grid_3 alpha">
                    <img src="images/mail.gif" alt="Newsletter" />
                </div>
                <div id="txtsiguenos" class="grid_13  omega suffix_1">
                  <form id="form1" name="form1" method="post" action="">
                          <input type="text" name="txtsuscrip" id="txtsuscrip" />
                          <input type="submit" name="suscrip" id="suscrip" value="Suscribir" class="btnsuscrip" />
                  </form>
                </div>
                <div class="clear"></div>
            </div>
            <div id="titu-catego" class="grid_14 prefix_2 suffix_1"><img class="" src="images/titucat.gif" alt="CategorÃas" /></div></div>
      </div>
        <div id="bannerflash" class="grid_33"><img src="images/flash.gif" alt="Banner flash" /></div>
        <div class="clear"></div>
    </div>
</div>
    <div id="barra_cuerpo" class="container_50">    
        <div id="barra_menues" class="grid_13">
          <ul id="texts-menu">
                <li>Agricultura y jardinerÃa</li>
                <li>Agua</li>
                <li>Alimentos y bebidas</li>
                <li>Arquitectura y construcciÃ³n</li>
                <li>Animales</li>
                <li>Artesania</li>
                <li>ConsultorÃa y servicios para el ambiente</li>
                <li>EducaciÃ³n y formaciÃ³n</li>
                <li>Embalaje y envases</li>
                <li>EnergÃa</li>
                <li>Finanzas</li>
                <li>Hogar</li>
                <li>Limpieza</li>
                <li>Madera</li>
                <li>Medios de comunicaciÃ³n, publicidad</li>
                <li>Moda, textiles</li>
                <li>PapelerÃa, oficina e imprenta</li>
                <li>Organizaciones e instituciones</li>
                <li>Reciclaje de residuos</li>
                <li>Restaurantes</li>
                <li>Salud y belleza</li>
                <li>Transporte</li>
                <li>Turismo y viajes</li>            
          </ul>
        </div>
    <div id="barra_contenido" class="grid_30">
 
    </div>        
    <div id="barra_publicidad" class="grid_7">
      <p> publi</p>
        <p>dfgfd</p>
        <p>g</p>
        <p>dfg</p>
        <p>&nbsp;</p>
        <p>dfg</p>
        <p>dfgdfg</p>
        <p>fdg</p>
        <p>fd</p>
        <p>g</p>
        <p>dfg</p>
        <p>fdgdg</p>
    </div>        
        <div class="clear"></div>        
  </div>
    <div id="pie" class="container_50">    
        <div id="pie-contenido" class="grid_50">
        <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>
        </div>
        <div class="clear"></div>
    </div>    
</div><!--FIN DE PROYECTO/-->
</body>
</html>

alexk · #2 (**permalink**) 14/12/2009, 16:00

WTF?????... cual es el problema?
QUIERES QUE TE LO HAGAMOS??????

Nova · #3 (**permalink**) 14/12/2009, 16:02

disculpa copie mal ahora ya esta arreglado puse una imagen por si no me deje entender..
gracias por su ayuda

alexk · #4 (**permalink**) 14/12/2009, 16:11

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!

jomaruro · #5 (**permalink**) 14/12/2009, 16:15

Hola:

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

Saludos.

Nova · #6 (**permalink**) 15/12/2009, 11:37

pues nsoe que pasa , probe con SAFARI y CHROME y si sale bien pero con IE me sigue saliendo separado :(

jomaruro · #7 (**permalink**) 15/12/2009, 15:55

Hola:

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

Saludos.

Nova · #8 (**permalink**) 15/12/2009, 15:57

no el reset lo utilizo para reiniciar la columna del grid

jomaruro · #9 (**permalink**) 15/12/2009, 16:13

Hola:

Pon esto al inicio de tu css:

Código:

*{padding: 0; margin: 0 auto;}

Saludos.

Nova · #10 (**permalink**) 15/12/2009, 17:04

El codigo:

Código __default:

Ver original[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???

alexk · #11 (**permalink**) 15/12/2009, 19:40

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!...

jomaruro · #12 (**permalink**) 16/12/2009, 13:27

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.

Nova · #13 (**permalink**) 16/12/2009, 14:22

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 (á , é , í , ó , ú)

Gracias

jomaruro · #14 (**permalink**) 16/12/2009, 15:45

Hola:

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

Saludos.