Problema menu horizontal

kenyis01 · #1 (**permalink**) 07/06/2011, 16:04

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?

JMS · #2 (**permalink**) 07/06/2011, 16:59

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;
}

JMS · #3 (**permalink**) 07/06/2011, 17:02

Haaaa ya solo usa la propiedad padding-left:#px; (dentro del CSS) para separarlos y listo

kenyis01 · #4 (**permalink**) 07/06/2011, 21:50

Muchas gracias, lo solucione agregandole un margin-top y un margin-left =) gracias JMS ^^

JMS · #5 (**permalink**) 08/06/2011, 08:41

Por nada mi amigo