posicionamiento del Header

emilioledesma_3 · #1 (**permalink**) 17/08/2011, 08:55

Buen dìa a tod@s,

Tengo un problema con una pagina web lo que pasa es lo siguiente:

La muestro en la pantalla y me sale bien pero cuando haga la ventana mas chica me la desordena, el header me lo pone a la izq y el contenido lo deja en el centro, como puedo hacer que se ve el header y el contenido en el centro?

Les dejo mi codigo del html y los css.....Saludos.

css:
#logo{background-image: url(http://alltech.mx/maka/imagenes/logoorg.png);
background-repeat:no-repeat;
/*margin:5px;
padding:5px;*/
width:1022px;
height:193.3px;
margin-left:150px;
}

#menu ul li {
display: inline;
padding: 2px 7px; /*Separar el texto*/
margin:5px; /* Separar los botones */
/*background-color:#E4E4E4; Color de fondo */
color: #999999;
font-family:Arial;
font-size:16.14px;
}
#menu ul li:hover {
/*background-color:#CCCCCC; Color de fondo sobre el boton */
cursor: pointer; /* cambiar el aspecto del puntero */
color:#660033
}

html:

<table border="0" width="100%" align="center">


<tr><td>
<div id="logo"></div></td>
</tr>
<div id="menutabla">

<div id="menu" align="right">
<ul>
<li><a href="/maka/index.html">INICIO</a></li>
<li>MAKA</li>
<li>NOTICIAS</li>
<li><a href="/maka/catalogo.html">CATALOGOS</a></li>
<li>TIENDAS</li>
</ul>


<div id="label"> Maka nace del compromiso del DIF Querétaro de apoyar a la economia de las artesanas queretanas y a sus familias.
</div>

</div>

<tr> <td>
<div class="content">


<div id="hs_container" class="hs_container">
<div class="hs_area hs_area1">

Contenido......

</div>
</td>
</tr>
<tr> <td class="footertext">
<center></center>
</td>
</tr>
<tr><td><center><img src="http://alltech.mx/maka/imagenes/bgfooter.png" alt="footer" /></center></td>
</tr>
</table>

Batan · #2 (**permalink**) 17/08/2011, 14:16

Buenas

Tu "header" no tiene contenido.

Cita:

Esta cerrado.

Saludos

C2am · #3 (**permalink**) 18/08/2011, 00:34

Hola
Este es el html que tienes online: (le saque lo que tenias "comentado" y el contenido dentro de las celdas para que veas el ERROR que tienes y comente los errores )

Código HTML:

Ver original<body> 
 
<!-- ERRROR 1: MAQUETAS CON TABLAS -->
<table border="0" width="100%" align="center"> 
 
<tr> 
   <td> 
           <div id="logo">
           </div>
   </td> 
</tr> 
 
 
 
 
<!-- ERROR 2: cortas una tabla (no la cierras con</table> y agregas un div)-->
<div id="menutabla"> 
 
   <div id="menu" align="right"> 
      <ul> 
           <li><a href="/maka/index.html">INICIO</a></li> 
           <li>MAKA</li> 
           <li>NOTICIAS</li> 
           <li><a href="/maka/catalogo.html">CATALOGOS</a></li> 
           <li>TIENDAS</li> 
      </ul> 
 
 
   <div id="label"> Maka nace del compromiso del DIF Querétaro de apoyar a la economia de las artesanas queretanas y a sus familias.
   </div> 
 
</div> 
 
 
 
 
 
 <!-- Error 3: continuas con la tabla del inicio, a pesar del error 2 -->
 
<tr>
  <td> 
        <div class="content"> 
            
            <h2>Maka</h2>--> 
            
            <div id="hs_container" class="hs_container"> 
            
                                <div class="hs_area hs_area1"> 
                    <img class="hs_visible" src="http://www.forosdelweb.com/f53/maka/imagenes/area1/1.jpg" alt=""/> 
                    <img src="http://www.forosdelweb.com/f53/maka/imagenes/area1/2.jpg" alt=""/> 
                    <img src="http://www.forosdelweb.com/f53/maka/imagenes/area1/3.jpg" alt=""/> 
                </div> 
            
            </div> 
 
            
     </div> 
     </td> 
</tr> 
 
<tr>
  <td class="footertext">
     <!-- <center >no se usa mas --> 
      <center>Derechos Reservados DIF QUERÉTARO 2011 | POWERED BY FILLSER MUR</center> 
      </td> 
 </tr> 
 
<tr>
      <td>
              <center>
         <img src="http://alltech.mx/maka/imagenes/bgfooter.png" alt="footer" />
            </center>
      </td> 
</tr> 
</table>

Por eso es que actua de esa manera tu página.
Solución rápida: mete ese div que divide a tu tabla dentro de una celda.
Solución óptima: revisa el código, no uses tablas para maquetar (porque con tantos <tr><td> te mareas).

Saludos

emilioledesma_3 · #4 (**permalink**) 18/08/2011, 20:43

Ok!! Les agradesco mucho pero mucho su ayuda en este moemnto lo pondre en practica!!! De antemano muchas Gracias!!

Saludos!!

emilioledesma_3 · #5 (**permalink**) 19/08/2011, 10:05

Ya meti el div en una celda y aun asi me sigue haciendo lo mismo...!!! :S

Saludos!!

C2am · #6 (**permalink**) 19/08/2011, 11:51

No veo que continue haciendo lo mismo.
Supongo que ya lo corregiste.
Saludos

emilioledesma_3 · #7 (**permalink**) 19/08/2011, 13:00

Siip .. Ya lo Hice!! meti el div en un <tr><td>Mi <div> </tr></td>

Y aun asi me sigue haciendo lo mismo..!!

Saludos!!

C2am · #8 (**permalink**) 19/08/2011, 13:31

Lo dices porque la imagen queda sobre el menú?

Eso pasa porque tienes un imagen y luego una tabla

Me parece que no hace falta meter una tabla para ordenar el menú.
Te aconsejaría que busques información sobre como maquetar con div y css.
www.librosweb.es

Pero volviendo a lo que ya tienes, quita esa tabla que tienes despues de la imagenlogo y deja:

<div id="menu">

<ul>

<li><a href="/maka/index.html">INICIO</a></li>
<li>MAKA</li>
<li>NOTICIAS</li>
<li><a href="/maka/catalogo.html">CATALOGOS</a></li>
<li>TIENDAS</li>

</ul>
<div id="label"> Maka nace del compromiso del DIF Querétaro de apoyar a la economia de las artesanas queretanas y a sus familias.
</div>

</div>

emilioledesma_3 · #9 (**permalink**) 22/08/2011, 08:52

Listo!! Ya quedo !! lo Unico que hice fue poner la imagen de fondo, creo que el problema era el DIV pero se lo quite y la imagen de se la puse de fondo y quedo!!!

Gracias x todo :D

Saludos!!

C2am · #10 (**permalink**) 22/08/2011, 09:17

Hola emilioledesma_3
Que bueno que hayas podido solucionar tu problema.

Debo decir, que no comparto tu solución pero bueno, si estas conforme es lo único que cuenta.

Solamente dejame comentarte algo, para que lo tengas en cuenta.
Las imagenes importantes como logos o que sean parte del contenido es mejor ponerlas con las etiquetas html correspondiente, <img>, ya que son, como dije antes, parte del contenido de la web. Es decir, no creo, por ejemplo, que quieras que el texto de tu web pase desapercibido para los buscadores.
Bueno lo mismo sucede para las imagenes, y más ahora que google también busca imagenes.
digamos, una regla para las imagenes podría ser preguntarse lo siguiente: ¿es una imagen que solo cumple una función decorativa o es una imagen que complementa el contenido?
Si es decorativa la aplicas como fondo, en caso contrario la colocas mediante <img>.

Bien, si aún así sigues con esta idea, fijate que no tienes en ningún lugar dentro del body el titulo o nombre de la empresa o de la página.
Es decir, no tienes ninguna etiqueta <h1>, por ejemplo, que al leer el html de una clara referencia de que se trata tu web.

Saludos, y espero te sirvan mis comentarios

emilioledesma_3 · #11 (**permalink**) 23/08/2011, 10:57

Ok Muchas gracias por toda tu ayuda y por tus consejos y tienes toda la razon voy a seguir tratando de solucionar mi problema con lo que medices..Saludos...