Foros del Web » Creando para Internet » CSS »

Crear un menu centrado con div y CSS

Estas en el tema de Crear un menu centrado con div y CSS en el foro de CSS en Foros del Web. tengo un problema tonto con el menú de mi web... Tenía la web en tablas, pero me recomendaron pasarla a divs por el hecho de ...
  #1 (permalink)  
Antiguo 13/04/2010, 02:24
 
Fecha de Ingreso: marzo-2010
Mensajes: 30
Antigüedad: 7 años, 8 meses
Puntos: 0
Crear un menu centrado con div y CSS

tengo un problema tonto con el menú de mi web...

Tenía la web en tablas, pero me recomendaron pasarla a divs por el hecho de pasar el W3C WAI que por lo visto las tablas dan muchos problemas por el tema de los tamaños...

Mi código es:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
body{
font-family : Helvetica, Verdana, Arial, sans-serif;
background-color : white;
}
a:link {
font-size : 14px;
font-style : normal;
font-weight : normal;
color : #fffaf3;
text-decoration : none;
border : 0;
}

.central {
position: absolute;
top: 5px;
left: 50%;
margin-left: -200px;
text-align:center;
height:80px;
width:400px;
}
.fondo{
position:absolute;
top:0px;
height:100px;
width:100%;
background-image: url('http://www.factoriadearte.com/imagenes/fondo_arriba.gif');
}
#menuarriba {
list-style:none;
text-align:center;
top:0;
}
#menuarriba li {
float:left; //para eliminar el comportamiento de elemento de bloque(salto de linea)
}
#botonera{
height:auto;
width:100%;
text-align:center;
margin:auto;
}
-->
</style>
</head>
<body>
<div class="fondo">
<div class="central";><a href="http://www.factoriadearte.com/" target="_self"> <img src="http://www.factoriadearte.com/imagenes/logo_arriba.png" width="139" height="51" alt="dise&ntilde;o gr&aacute;fico" border="0"/></a>
<div id="botonera">
<ul id="menuarriba">

</ul>
</div>
</div>
</div>

</body>
</html>

Y el problema es que no consigo que el texto de arriba salga centrado, y llevo horas tocando el CSS sin ningún logro, el texto sale siempre en el lado y cuando publico mas aún...

¿Alguna ayuda?

Última edición por j4rk0r; 17/04/2010 a las 15:09
  #2 (permalink)  
Antiguo 13/04/2010, 05:42
 
Fecha de Ingreso: julio-2009
Mensajes: 103
Antigüedad: 8 años, 5 meses
Puntos: 2
Respuesta: Crear un menu centrado con div y CSS

Aquí lo tienes, me he permitido la licencia de hacerte algunos cambios en el css.
Un consejo, utiliza las identaciones y los intros para aclarar más el código y diferenciar unas partes de otras

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 xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  4. <title>Documento sin t&iacute;tulo</title>
  5. <style type="text/css">
  6. <!--
  7. body{
  8. font-family : Helvetica, Verdana, Arial, sans-serif;
  9. background-color : white;
  10. }
  11. a:link {
  12. font-size : 14px;
  13. font-style : normal;
  14. font-weight : normal;
  15. color : #fffaf3;
  16. text-decoration : none;
  17. border : 0;
  18. }
  19.  
  20. .central {
  21. top: 5px;
  22. margin:auto;
  23. text-align:center;
  24. height:80px;
  25. width:400px;
  26. }
  27. .fondo{
  28. position:absolute;
  29. top:0px;
  30. height:100px;
  31. width:100%;
  32. background-image: url('http://www.factoriadearte.com/imagenes/fondo_arriba.gif');
  33. }
  34.  
  35. #botonera{
  36. text-align:center;
  37. margin:auto;
  38. }
  39.  
  40. #botonera li {
  41.     display:inline;
  42. }
  43.  
  44. -->
  45. </head>
  46.  
  47. <div class="fondo">
  48. <div class="central";><a href="http://www.factoriadearte.com/" target="_self"> <img src="http://www.factoriadearte.com/imagenes/logo_arriba.png" width="139" height="51" alt="dise&ntilde;o gr&aacute;fico" border="0"/></a>
  49.  
  50.     <div id="botonera">
  51.         <ul>
  52.             <li> <a href="http://www.factoriadearte.com/" target="_self">Inicio</a> </li>
  53.             <li> <a href="http://www.factoriadearte.com/nosotros.php" target="_self">Nosotros</a> </li>
  54.             <li> <a href="http://www.factoriadearte.com/diseno.php" target="_self" >Dise&ntilde;o</a> </li>
  55.             <li> <a href="http://www.factoriadearte.com/contacto.php" target="_self">Contacto</a> </li>
  56.         </ul>
  57.     </div>
  58. </div>
  59. </div>
  60.  
  61. </body>
  62. </html>

Salu2
  #3 (permalink)  
Antiguo 13/04/2010, 06:36
 
Fecha de Ingreso: marzo-2010
Mensajes: 30
Antigüedad: 7 años, 8 meses
Puntos: 0
Respuesta: Crear un menu centrado con div y CSS

Muchas gracias por la ayuda...

Pero me encuentro con un problema en el código...

¿Como puedo cambiar la distancia entre los botones y el logo de arriba?
Con padding-top no lo hace bien...
  #4 (permalink)  
Antiguo 13/04/2010, 07:20
 
Fecha de Ingreso: julio-2009
Mensajes: 103
Antigüedad: 8 años, 5 meses
Puntos: 2
Respuesta: Crear un menu centrado con div y CSS

En el identificador #botonera, añádele un margin-top, así de simple
  #5 (permalink)  
Antiguo 13/04/2010, 07:44
 
Fecha de Ingreso: marzo-2010
Mensajes: 30
Antigüedad: 7 años, 8 meses
Puntos: 0
Respuesta: Crear un menu centrado con div y CSS

Buenas, gracias por la respuesta, pero aún poniendo el margin-top, sigue con un espacio ahí que no se de donde viene, no esta puesto en ningún sitio...

Además esta un poquito desplazado a la derecha..

¿Como puedo subir los botones mas arriba y ponerlos bien centrados?

Puedes verlo en marcha en www.factoriadearte.com

Gracias.
  #6 (permalink)  
Antiguo 13/04/2010, 10:14
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: Crear un menu centrado con div y CSS

j4rk0r te hace falta un reset CSS para que no tengas problemas... de este tipo.
el ul por defecto tiene margin tanto arriba como abajo, y un padding del lado izquierdo...
  #7 (permalink)  
Antiguo 13/04/2010, 17:42
 
Fecha de Ingreso: marzo-2010
Mensajes: 30
Antigüedad: 7 años, 8 meses
Puntos: 0
Respuesta: Crear un menu centrado con div y CSS

He leido lo del reseteo pero como lo hago exactamente, quito todo mi CSS, pongo ese y a empezar de 0, o como reseteo?
  #8 (permalink)  
Antiguo 13/04/2010, 17:46
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: Crear un menu centrado con div y CSS

les dejo un lindo reset

Código CSS:
Ver original
  1. html, body, div, span, applet, object, iframe,
  2. h1, h2, h3, h4, h5, h6, p,
  3. blockquote, pre, a, abbr, acronym, address, big,
  4. cite, code, del, dfn, em, font, img,
  5. ins, kbd, q, s, samp, small, strike,
  6. strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
  7. fieldset, form, label, legend,
  8. table, caption, tbody, tfoot, thead, tr, th, td,
  9. center, u, b, i {margin: 0;padding: 0;border: 0;outline: 0;font-weight: normal;font-style: normal;font-size: 100&#37;;font-family: inherit;}
  10. body {line-height: 1;}
  11. :focus {outline: 0;}
  12. ol, ul {list-style: none;}
  13. table {border-collapse: collapse;border-spacing: 0;}
  14. blockquote:before, blockquote:after, q:before, q:after {content: "";}
  15. blockquote, q {quotes: "" "";}
  16. input, textarea {margin: 0;padding: 0;}
  17. hr {margin: 0;padding: 0;border: 0;color: #000;background-color: #000;height: 1px;}

Simplemente copia y pega este código en tu CSS y listo, siempre arriba de todo, luego escribis tus sentencias

  #9 (permalink)  
Antiguo 14/04/2010, 19:50
 
Fecha de Ingreso: marzo-2010
Mensajes: 30
Antigüedad: 7 años, 8 meses
Puntos: 0
Respuesta: Crear un menu centrado con div y CSS

Wow, increible, lo puse retoque todos los CSS y depure el archivo hasta quedarme solo con los que uso, y me ha quedado perfect.

Muchas gracias por tu ayuda.

Un abrazo.

Etiquetas: centrar
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 08:33.