Foros del Web » Creando para Internet » CSS »

posicionamiento del Header

Estas en el tema de posicionamiento del Header en el foro de CSS en Foros del Web. Buen dìa a [email protected], Tengo un problema con una pagina web lo que pasa es lo siguiente: La muestro en la pantalla y me sale ...
  #1 (permalink)  
Antiguo 17/08/2011, 09:55
 
Fecha de Ingreso: agosto-2011
Mensajes: 27
Antigüedad: 5 años, 4 meses
Puntos: 0
Mensaje posicionamiento del Header

Buen dìa a [email protected],

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><img src="http://alltech.mx/maka/imagenes/logo.png" /><img src="http://alltech.mx/maka/imagenes/bgfooter.png" align="top"/></td></tr>-->

<tr><td>
<div id="logo"></div></td>
<!--<td><div id="header"></div></td>--></tr>
<div id="menutabla">
<!--<table border="0" align="center" width="100%">
<tr><td>-->
<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>

<!--</td></tr>
<tr><td>-->
<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>
<!--</td></tr>
</table>-->
</div>




<tr> <td>
<div class="content">
<!--<h1>DIF</h1>
<h2>Maka</h2>-->

<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>
  #2 (permalink)  
Antiguo 17/08/2011, 15:16
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 6 años, 2 meses
Puntos: 63
Respuesta: posicionamiento del Header

Buenas

Tu "header" no tiene contenido.

Cita:
<div id="header"></div>
Esta cerrado.


Saludos
  #3 (permalink)  
Antiguo 18/08/2011, 01:34
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 7 años, 10 meses
Puntos: 306
Respuesta: posicionamiento del Header

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 <!-- Errores -->)
Código HTML:
Ver original
  1. <body>
  2.  
  3. <!-- ERRROR 1: MAQUETAS CON TABLAS -->
  4. <table border="0" width="100%" align="center">
  5.  
  6. <tr>
  7.    <td>
  8.            <div id="logo">
  9.            </div>
  10.    </td>
  11. </tr>
  12.  
  13.  
  14.  
  15.  
  16. <!-- ERROR 2: cortas una tabla (no la cierras con</table> y agregas un div)-->
  17. <div id="menutabla">
  18.  
  19.    <div id="menu" align="right">
  20.       <ul>
  21.            <li><a href="/maka/index.html">INICIO</a></li>
  22.            <li>MAKA</li>
  23.            <li>NOTICIAS</li>
  24.            <li><a href="/maka/catalogo.html">CATALOGOS</a></li>
  25.            <li>TIENDAS</li>
  26.       </ul>
  27.  
  28.  
  29.    <div id="label"> Maka nace del compromiso del DIF Querétaro de apoyar a la economia de las artesanas queretanas y a sus familias.
  30.    </div>
  31.  
  32. </div>
  33.  
  34.  
  35.  
  36.  
  37.  
  38.  <!-- Error 3: continuas con la tabla del inicio, a pesar del error 2 -->
  39.  
  40. <tr>
  41.   <td>
  42.         <div class="content">
  43.            
  44.             <h2>Maka</h2>-->
  45.            
  46.             <div id="hs_container" class="hs_container">
  47.            
  48.                                 <div class="hs_area hs_area1">
  49.                     <img class="hs_visible" src="http://www.forosdelweb.com/f53/maka/imagenes/area1/1.jpg" alt=""/>
  50.                     <img src="http://www.forosdelweb.com/f53/maka/imagenes/area1/2.jpg" alt=""/>
  51.                     <img src="http://www.forosdelweb.com/f53/maka/imagenes/area1/3.jpg" alt=""/>
  52.                 </div>
  53.            
  54.             </div>
  55.  
  56.            
  57.      </div>
  58.      </td>
  59. </tr>
  60.  
  61. <tr>
  62.   <td class="footertext">
  63.      <!-- <center >no se usa mas -->
  64.       <center>Derechos Reservados DIF QUERÉTARO 2011 | POWERED BY FILLSER MUR</center>
  65.       </td>
  66.  </tr>
  67.  
  68. <tr>
  69.       <td>
  70.               <center>
  71.          <img src="http://alltech.mx/maka/imagenes/bgfooter.png" alt="footer" />
  72.             </center>
  73.       </td>
  74. </tr>

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
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #4 (permalink)  
Antiguo 18/08/2011, 21:43
 
Fecha de Ingreso: agosto-2011
Mensajes: 27
Antigüedad: 5 años, 4 meses
Puntos: 0
Respuesta: posicionamiento del Header

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

Saludos!!
  #5 (permalink)  
Antiguo 19/08/2011, 11:05
 
Fecha de Ingreso: agosto-2011
Mensajes: 27
Antigüedad: 5 años, 4 meses
Puntos: 0
Respuesta: posicionamiento del Header

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

Saludos!!
  #6 (permalink)  
Antiguo 19/08/2011, 12:51
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 7 años, 10 meses
Puntos: 306
Respuesta: posicionamiento del Header

No veo que continue haciendo lo mismo.
Supongo que ya lo corregiste.
Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #7 (permalink)  
Antiguo 19/08/2011, 14:00
 
Fecha de Ingreso: agosto-2011
Mensajes: 27
Antigüedad: 5 años, 4 meses
Puntos: 0
Respuesta: posicionamiento del Header

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

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

Saludos!!
  #8 (permalink)  
Antiguo 19/08/2011, 14:31
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 7 años, 10 meses
Puntos: 306
Respuesta: posicionamiento del Header

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>
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #9 (permalink)  
Antiguo 22/08/2011, 09:52
 
Fecha de Ingreso: agosto-2011
Mensajes: 27
Antigüedad: 5 años, 4 meses
Puntos: 0
Respuesta: posicionamiento del Header

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!!
  #10 (permalink)  
Antiguo 22/08/2011, 10:17
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 7 años, 10 meses
Puntos: 306
Respuesta: posicionamiento del Header

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
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #11 (permalink)  
Antiguo 23/08/2011, 11:57
 
Fecha de Ingreso: agosto-2011
Mensajes: 27
Antigüedad: 5 años, 4 meses
Puntos: 0
Respuesta: posicionamiento del Header

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

Etiquetas: html
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 20:08.