[SOLUCIONADO] Menú no funciona

bandolera · #1 (**permalink**) 01/05/2013, 22:07

Estoy tratando de hacer un menú horizontal.
Utilicé el sitio cssmenumaker (menú 527488). Pero no funciona, solo muestra una lista.
Estos son los archivos.

index.html

Código HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Ejemplo Menú</title>
        <link href="/menu_assets/styles.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
    <div id='cssmenu'>
    <ul>
       <li class='active'><a href='index.html'><span>Home</span></a></li>
       <li><a href='#'><span>Products</span></a></li>
       <li><a href='#'><span>About</span></a></li>
       <li><a href='#'><span>Contact</span></a></li>
       <li class='last'><a href='#'><span>Item</span></a></li>
    </ul>
    </div>
    </body>
</html>

Mi archivo CSS:

Código HTML:

#cssmenu ul{
	margin:0;
	padding:0;
	list-style-type:none;
	width:auto;
	position:relative;
	display:block;
	height:36px;
	text-transform:uppercase;
	font-size:12px;
	font-weight:bold;
	background:transparent url('images/off.gif') repeat-x top left;
	font-family:Helvetica,Arial,Verdana,sans-serif;
	border-bottom:4px solid #555555;
	border-top:1px solid #919191;
}
#cssmenu li{
	display:block;
	float:left;
	margin:0;
	padding:0;
	}
#cssmenu li a{
	display:block;
	float:left;
	color:#8c3a3a;
	text-decoration:none;
	font-weight:bold;
	padding:12px 20px 0 20px;
	height:24px;
	background:transparent url('images/divider.gif') no-repeat top right;
	}
#cssmenu li a:hover{
	background:transparent url('images/hover.gif') no-repeat top right;	
	}

Alguna idea? Gracias.

pitufoweb · #2 (**permalink**) 01/05/2013, 22:11

Hola,

Si no te funciona es por que no tienes enlazada correctamente la hoja de estilos. Revisa que la ruta sea la correcta.

Saludos

emprear · #3 (**permalink**) 01/05/2013, 22:15

Yo puse el css dentro del html y funciona, salvo por la falta de las imágenes.

Código HTML:

<!DOCTYPE html>
<html>
    <head>
<meta charset="utf-8" />
        <title>Ejemplo Menú</title>

<style type="text/css">
/*<![CDATA[*/

#cssmenu ul{
	margin:0;
	padding:0;
	list-style-type:none;
	width:auto;
	position:relative;
	display:block;
	height:36px;
	text-transform:uppercase;
	font-size:12px;
	font-weight:bold;
	background:transparent url('images/off.gif') repeat-x top left;
	font-family:Helvetica,Arial,Verdana,sans-serif;
	border-bottom:4px solid #555555;
	border-top:1px solid #919191;
}
#cssmenu li{
	display:block;
	float:left;
	margin:0;
	padding:0;
	}
#cssmenu li a{
	display:block;
	float:left;
	color:#8c3a3a;
	text-decoration:none;
	font-weight:bold;
	padding:12px 20px 0 20px;
	height:24px;
	background:transparent url('images/divider.gif') no-repeat top right;
	}
#cssmenu li a:hover{
	background:transparent url('images/hover.gif') no-repeat top right;	
	}


/*]]>*/
</style>
    </head>
    <body>
    <div id='cssmenu'>
    <ul>
       <li class='active'><a href='index.html'><span>Home</span></a></li>
       <li><a href='#'><span>Products</span></a></li>
       <li><a href='#'><span>About</span></a></li>
       <li><a href='#'><span>Contact</span></a></li>
       <li class='last'><a href='#'><span>Item</span></a></li>
    </ul>
    </div>
    </body>
</html>

Lo más probable es que la ruta a tu css no sea correcta. Probá de poner el css en la misma carpeta del html y llamarlo con

Código:

<link href="styles.css" rel="stylesheet" type="text/css"/>

Un detalle extra, mirá como se define el charset en html5, vos usaste la sintáxis de html

Saludos

bandolera · #4 (**permalink**) 02/05/2013, 10:06

Cita:

Iniciado por emprear

Yo puse el css dentro del html y funciona, salvo por la falta de las imágenes.

Código HTML:

<!DOCTYPE html>
<html>
    <head>
<meta charset="utf-8" />
        <title>Ejemplo Menú</title>

<style type="text/css">
/*<![CDATA[*/

#cssmenu ul{
	margin:0;
	padding:0;
	list-style-type:none;
	width:auto;
	position:relative;
	display:block;
	height:36px;
	text-transform:uppercase;
	font-size:12px;
	font-weight:bold;
	background:transparent url('images/off.gif') repeat-x top left;
	font-family:Helvetica,Arial,Verdana,sans-serif;
	border-bottom:4px solid #555555;
	border-top:1px solid #919191;
}
#cssmenu li{
	display:block;
	float:left;
	margin:0;
	padding:0;
	}
#cssmenu li a{
	display:block;
	float:left;
	color:#8c3a3a;
	text-decoration:none;
	font-weight:bold;
	padding:12px 20px 0 20px;
	height:24px;
	background:transparent url('images/divider.gif') no-repeat top right;
	}
#cssmenu li a:hover{
	background:transparent url('images/hover.gif') no-repeat top right;	
	}


/*]]>*/
</style>
    </head>
    <body>
    <div id='cssmenu'>
    <ul>
       <li class='active'><a href='index.html'><span>Home</span></a></li>
       <li><a href='#'><span>Products</span></a></li>
       <li><a href='#'><span>About</span></a></li>
       <li><a href='#'><span>Contact</span></a></li>
       <li class='last'><a href='#'><span>Item</span></a></li>
    </ul>
    </div>
    </body>
</html>

Lo más probable es que la ruta a tu css no sea correcta. Probá de poner el css en la misma carpeta del html y llamarlo con

Código:

<link href="styles.css" rel="stylesheet" type="text/css"/>

Un detalle extra, mirá como se define el charset en html5, vos usaste la sintáxis de html

Saludos

En la carpeta del index.html está la carpeta menu_assets y dentro de ella está styles.css y la carpeta imágenes.
Y el llamado a la carpeta es correcto, cierto?
Y no quiero ponerlo dentro porque sino todo lo que falta se va a complicar.

bandolera · #5 (**permalink**) 02/05/2013, 10:10

Cita:

Iniciado por pitufoweb

Hola,

Si no te funciona es por que no tienes enlazada correctamente la hoja de estilos. Revisa que la ruta sea la correcta.

Saludos

Será el navegador? Yo toy usando Chrome 26.0 y Internet Explorer 9.

emprear · #6 (**permalink**) 02/05/2013, 10:25

Cita:

Iniciado por bandolera

En la carpeta del index.html está la carpeta menu_assets y dentro de ella está styles.css y la carpeta imágenes.
Y el llamado a la carpeta es correcto, cierto?
Y no quiero ponerlo dentro porque sino todo lo que falta se va a complicar.

Yo no digo que lo pongas dentro, ponerlo dentro es la mejor forma de verificar que el css funciona. Entonces se deduce que el problema está en la llamada al archivo de estilos.

Por otra parte, ¿estás trabajando sobre el servidor, o desde el explorador de windows?
Si es lo segundo, esto

Código:

<link href="/menu_assets/styles.css" rel="stylesheet" type="text/css"/>

No te va a funcionar, deberías utilizar

Código:

<link href="menu_assets/styles.css" rel="stylesheet" type="text/css"/>

sin la barra al inicio de la ruta

Saludos

bandolera · #7 (**permalink**) 02/05/2013, 10:36

Cita:

Iniciado por emprear

Yo no digo que lo pongas dentro, ponerlo dentro es la mejor forma de verificar que el css funciona. Entonces se deduce que el problema está en la llamada al archivo de estilos.

Por otra parte, ¿estás trabajando sobre el servidor, o desde el explorador de windows?
Si es lo segundo, esto

Código:

<link href="/menu_assets/styles.css" rel="stylesheet" type="text/css"/>

No te va a funcionar, deberías utilizar

Código:

<link href="menu_assets/styles.css" rel="stylesheet" type="text/css"/>

sin la barra al inicio de la ruta

Saludos

Era eso.... le quité la barra del inicio....
Pero y por qué esa diferencia?
Probaré subiendola a un host para ver qué pasa.

Gracias.

emprear · #8 (**permalink**) 02/05/2013, 11:00

Si trabajas sobre el sistema de archivos la / equivale a la raiz de la unidad (C:\, D:\, etc.)
así que buscará la carpeta menu_assets en C:\menu_assets, D:\menu_assets , etc
En el server la / siempre coincide con el inicio de la carpeta de publicación (document_root), que suele ser, htdocs, public_html, ó lo que te indique el administrador.

Lo aconsejable es que si vas a desarrollar en local, trabajes sobre un servidor, utilizando algunos de los paquetes, xampp, wampserver y similares

en el server te va a funcionar de las dos formas (en este caso al menos), pero yo prefiero siempre utilizar la barra en todas partes
Saludos

bandolera · #9 (**permalink**) 02/05/2013, 11:11

Cita:

Iniciado por emprear

Si trabajas sobre el sistema de archivos la / equivale a la raiz de la unidad (C:\, D:\, etc.)
así que buscará la carpeta menu_assets en C:\menu_assets, D:\menu_assets , etc
En el server la / siempre coincide con el inicio de la carpeta de publicación (document_root), que suele ser, htdocs, public_html, ó lo que te indique el administrador.

Lo aconsejable es que si vas a desarrollar en local, trabajes sobre un servidor, utilizando algunos de los paquetes, xampp, wampserver y similares

en el server te va a funcionar de las dos formas (en este caso al menos), pero yo prefiero siempre utilizar la barra en todas partes
Saludos

hhmm..... te cuento que estoy utilizando xampp.
Acabo de ingresar por localhost a mi ruta y sin la barra inicial sí funciona.
Si le quito la barra no funciona.
Y lo mismo si lo subo a mi host.

emprear · #10 (**permalink**) 02/05/2013, 11:43

Cita:

Iniciado por bandolera

hhmm..... te cuento que estoy utilizando xampp.
Acabo de ingresar por localhost a mi ruta y sin la barra inicial sí funciona.
Si le quito la barra no funciona.
Y lo mismo si lo subo a mi host.

es que yo no sé que tenés, esto que te digo se aplica a este ejemplo

trabajando sobre el server, en local(xampp) o remoto, da lo mismo
supongamos que tu document_root es htdocs

img --> carpeta
img/fotos/foto.jpg
img/fondos/bg1.jpg
css --> carpeta
css/estilo.css
index.html
varios --> carpeta
varios/articulos.html

si desde cualquier html de tu página ó cualquier css, estén en la carpeta o subcarpeta que estén, utilizás

href="/varios/articulos.html"
src="/img/fotos/foto.jpg"
background: url(/img/fondos/bg1.jpg);

Es decir, con referencia absoluta a la raiz de tu web con la /, siempre te va a funcionar
Saludos

bandolera · #11 (**permalink**) 02/05/2013, 14:18

Cita:

Iniciado por emprear

es que yo no sé que tenés, esto que te digo se aplica a este ejemplo

trabajando sobre el server, en local(xampp) o remoto, da lo mismo
supongamos que tu document_root es htdocs

img --> carpeta
img/fotos/foto.jpg
img/fondos/bg1.jpg
css --> carpeta
css/estilo.css
index.html
varios --> carpeta
varios/articulos.html

si desde cualquier html de tu página ó cualquier css, estén en la carpeta o subcarpeta que estén, utilizás

href="/varios/articulos.html"
src="/img/fotos/foto.jpg"
background: url(/img/fondos/bg1.jpg);

Es decir, con referencia absoluta a la raiz de tu web con la /, siempre te va a funcionar
Saludos

hhmmm... mi document_root es c:/web
y allí tengo:
index.html
menu_assets ---> carpeta
menu_assets/styles.css
menu_assets/images --> carpeta
menu_assets/images/imagen.png
tons por qué a mí no me funciona como a ti??

emprear · #12 (**permalink**) 02/05/2013, 14:52

Cita:

Iniciado por bandolera

hhmmm... mi document_root es c:/web
y allí tengo:
index.html
menu_assets ---> carpeta
menu_assets/styles.css
menu_assets/images --> carpeta
menu_assets/images/imagen.png
tons por qué a mí no me funciona como a ti??

si estás ejecutando desde
http://localhost
asi como lo pusiste te tiene que funcionar, de todas maneras habría que revisar una serie de cosas, basicamente como hiciste los cambios en la configuración de apache.
Te recomiendo que revises el error.log y la consola del browser y ver que archivos envían un status 404

bandolera · #13 (**permalink**) 02/05/2013, 15:04

Cita:

Iniciado por emprear

si estás ejecutando desde
http://localhost
asi como lo pusiste te tiene que funcionar, de todas maneras habría que revisar una serie de cosas, basicamente como hiciste los cambios en la configuración de apache.
Te recomiendo que revises el error.log y la consola del browser y ver que archivos envían un status 404

Yo lo ejecuto desde http://localhost
Y la configuración del apache, pues solo cambié el DocumentRoot nada más. Instarlé el xampp y listo.
No será que yo trabajo sobre windows?

emprear · #14 (**permalink**) 02/05/2013, 15:12

No, yo tengo 5 instalaciones de Apache, con y sin xampp, decenas de hosts virtuales y funciona en todas.
consultá lo que te dije antes, además hay una serie de pruebas extras que podés hacer.
la más simple, tipea

Código:

http://localhost/menu_assets/styles.css

y fijate que te muestra
SAludos

bandolera · #15 (**permalink**) 02/05/2013, 15:21

Cita:

Iniciado por emprear

No, yo tengo 5 instalaciones de Apache, con y sin xampp, decenas de hosts virtuales y funciona en todas.
consultá lo que te dije antes, además hay una serie de pruebas extras que podés hacer.
la más simple, tipea

Código:

http://localhost/menu_assets/styles.css

y fijate que te muestra
SAludos

Me muestra el contenido del archivo styles.css.

emprear · #16 (**permalink**) 02/05/2013, 15:34

Cita:

Iniciado por bandolera

Me muestra el contenido del archivo styles.css.

mmmhhhh?!!!

otra prueba

crea un prueba.html y dentro ponele

Código:

<html>
<head>
<title>prueba</title>
</head>
<body>
<a href="/menu_assets/styles.css">Ver Estilo</a>
</body>
</html>

y contanos que pasa

Saludos

bandolera · #17 (**permalink**) 02/05/2013, 15:48

Me muestra esto:

Código HTML:

Object not found!

The requested URL was not found on this server. The link on the referring page seems to be wrong or outdated. Please inform the author of that page about the error.

If you think this is a server error, please contact the webmaster.

Error 404

localhost
Apache/2.4.3 (Win32) OpenSSL/1.0.1c PHP/5.4.7

emprear · #18 (**permalink**) 02/05/2013, 16:05

Cita:

Iniciado por bandolera

Me muestra esto:

Código HTML:

Object not found!

The requested URL was not found on this server. The link on the referring page seems to be wrong or outdated. Please inform the author of that page about the error.

If you think this is a server error, please contact the webmaster.

Error 404

localhost
Apache/2.4.3 (Win32) OpenSSL/1.0.1c PHP/5.4.7

Tendría que estar ahi, se me acaban las ideas, solo me queda una
cuando ponés la manito sobre el link de prueba, que te a parece en la barra de estado?

Código:

http://localhost/menu_assets/styles.css

ó

Código:

https://localhost/menu_assets/styles.css

Porque si figura lo segundo no te va a funcionar
No se que versión de xampp bajaste, yo no lo uso hace tiempo, pero desactivá el
OpenSSL, que tampoco te va a servir de mucho trabajando en local.
ahora que si es lo primero, ni idea, según me dijiste al tipear

Código:

http://localhost/menu_assets/styles.css

si te mostró el archivo y no hay diferencia entre eso y hacerlo con un link

Saludos

bandolera · #19 (**permalink**) 02/05/2013, 16:18

Me muestra así:

Código:

localhost/menu_assets/styles.css

No me muestra el http en ningún sitio. Ni en la barra de comandos.

emprear · #20 (**permalink**) 02/05/2013, 16:29

Cita:

Iniciado por bandolera

Me muestra así:

Código:

localhost/menu_assets/styles.css

No me muestra el http en ningún sitio. Ni en la barra de comandos.

eso es porque lo probás con el firefox que tiene ese endemoniado comportamiento, usá otro navegador

SAludos

bandolera · #21 (**permalink**) 02/05/2013, 16:32

Cita:

Iniciado por emprear

eso es porque lo probás con el firefox que tiene ese endemoniado comportamiento, usá otro navegador

SAludos

jajaja, No uso firefox. Yo uso Chrome.
Pero acabo de probar en IE9 y me sale lo mismo pero en la barra si sale

Código:

http://localhost/

emprear · #22 (**permalink**) 02/05/2013, 16:39

Cita:

Iniciado por bandolera

jajaja, No uso firefox. Yo uso Chrome.
Pero acabo de probar en IE9 y me sale lo mismo pero en la barra si sale

Código:

http://localhost/

uyy si, chrome hace la misma....

sinceramente se me agotaron las neuronas, probaste de ver los logs de apache? ahi tiene que decir que archivo se solicitó y porque no lo encontró

Saludos