Foros del Web » Creando para Internet » CSS »

Problema menu horizontal

Estas en el tema de Problema menu horizontal en el foro de CSS en Foros del Web. Bueno, la verdad es un problema re boludo pero no me sale no se que onda jaja.... Este es mi codigo html: Código: <!DOCTYPE html ...
  #1 (permalink)  
Antiguo 07/06/2011, 17:04
 
Fecha de Ingreso: mayo-2010
Mensajes: 53
Antigüedad: 7 años, 6 meses
Puntos: 0
Problema menu horizontal

Bueno, la verdad es un problema re boludo pero no me sale no se que onda jaja....

Este es mi codigo html:

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Centro Ficch - Centro de formacion e investigacion en ciencias de comportamiento humano</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta name="designer" content="Alejo Zambecchi" />
<meta name="licence" content="Centroficch.com.ar - Centro de formación e investigación en ciencias de comportamiento humano." />
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico/">
</head>

<body bgcolor="#f0e6d5">
<div id="wrapper">
     <div id="nav_2">
      <ul class="navigation">
       <li class="inicio"><a href="index.html" title="Home"></a></li>
       <li class="profesionales"><a href="profesionales.html" title="Profesionales"></a></li>
     </ul>
</div>
Este es mi CSS:

Código:
/* CSS layout */body {
	margin: 0;
	padding: 0;
	color: #3c2d1b;
	font-family: "Arial", Times New Roman, Times, Serif;
	font-size: 12px;
	background-color: #f0e6d5;
}
p {
        color: #ffffff;
        align: justify;
        font-family: "Arial"
}
a {
	color:#3c2d1b; text-decoration:none;
}
a:hover {
	color:#56442e; text-decoration:none;
}
#wrapper {
	width:100%;
        height:100%;
	margin:0 auto;
	padding:0;
}
#nav_2 {
	float: left;
	width: 171px;
	height: 38px;
	display: inline;
	list-style-type:
}
 
.navigation li {
	display: inline;
	list-style-type: 
	float: left;
}
 
.navigation li a {
	display: inline;
	float: left;
	height: 38px;
}
li.inicio a {
	display: inline;
	width: 68px;
	background-image: url(images/home.gif);
	background-repeat: no-repeat;
}
 
li.profesionales a {
	display: inline;
	width: 103px;
	background-image: url(images/profesionales.gif);
	background-repeat: no-repeat;
}
li.inicio a:hover {
	display: inline;
	background-image: url(images/homeON.gif);
	background-repeat: no-repeat;
}
 
li.profesionales a:hover {
	display: inline;
	background-image: url(images/profesionalesON.gif);
	background-repeat: no-repeat;
}
Y no logro que los 2 botones (home y profesionales) estén horizontales xd.... alguna solución?
  #2 (permalink)  
Antiguo 07/06/2011, 17:59
Avatar de JMS
JMS
 
Fecha de Ingreso: junio-2007
Ubicación: Mexico, veracruz
Mensajes: 790
Antigüedad: 10 años, 6 meses
Puntos: 44
Respuesta: Problema menu horizontal

Creo que el problema lo tienes en tu CSS por que estas haciendo muchas repeticiones, es decir mira esta parte de tu código:

Código HTML:
.navigation li a {
	display: inline;
	float: left;
	height: 38px;
}
Indicas un div llamado Navigation con "li a", esto último es el problema ya que mas adelante para cada li lo indicas de forma individual.

Código HTML:
li.inicio a {
	display: inline;
	width: 68px;
	background-image: url(images/home.gif);
	background-repeat: no-repeat;
}
Ahora solo tienes que editar la parte donde esta .navigation li a {, tienes que poner .navigation {

Entonces quedaría así:

Código HTML:
.navigation {
	display: inline;
	float: left;
	height: 38px;
}
__________________
L.I.A. Josué Marín Saldaña
Grupo kumiko - Diseño gráfico, diseño web, Poemas, Juegos.
http://www.grupokumiko.com
  #3 (permalink)  
Antiguo 07/06/2011, 18:02
Avatar de JMS
JMS
 
Fecha de Ingreso: junio-2007
Ubicación: Mexico, veracruz
Mensajes: 790
Antigüedad: 10 años, 6 meses
Puntos: 44
Respuesta: Problema menu horizontal

Haaaa ya solo usa la propiedad padding-left:#px; (dentro del CSS) para separarlos y listo
__________________
L.I.A. Josué Marín Saldaña
Grupo kumiko - Diseño gráfico, diseño web, Poemas, Juegos.
http://www.grupokumiko.com
  #4 (permalink)  
Antiguo 07/06/2011, 22:50
 
Fecha de Ingreso: mayo-2010
Mensajes: 53
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Problema menu horizontal

Muchas gracias, lo solucione agregandole un margin-top y un margin-left =) gracias JMS ^^
  #5 (permalink)  
Antiguo 08/06/2011, 09:41
Avatar de JMS
JMS
 
Fecha de Ingreso: junio-2007
Ubicación: Mexico, veracruz
Mensajes: 790
Antigüedad: 10 años, 6 meses
Puntos: 44
Respuesta: Problema menu horizontal

Por nada mi amigo
__________________
L.I.A. Josué Marín Saldaña
Grupo kumiko - Diseño gráfico, diseño web, Poemas, Juegos.
http://www.grupokumiko.com

Etiquetas: horizontal
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 22:09.