Comunidad de diseño web y desarrollo en internet online

MENU VERTICAL

Citar            
MensajeEscrito el 11 May 2017 08:11 am
Hola, tengo un menú en mi pagina, que funciona bien, pero quería que las letras salen en negro, y no como ahora en azul. y también que las letras no están subrayados.
Con respecto al color he intentado poner el color "black" pero no cambia nada, y no se muy bien como evitar el subrayado.
Espero que alguien aquí me podría ayudar en este dos cambios.
Gracias

<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>

<body>
<div align="left" color="black" font="bold" id="menu">
<ul>
<li><a href="arte_budista/arte_budista.html" target="blank">ARTE BUDISTA</a></li>
<li><a href="arte_oriental/arte_oriental.html" target="blank">ARTE ORIENTAL</a></li>
<li><a href="bronce/bronce.html" target="blank">BRONCE</a></li>
<li><a href="porcelana_china/porcelana_china.html" target="blank">PORCELANA CHINA</a></li>
<li><a href="ceramica_oriental/ceramica_oriental.html" target="blank">CERAMICA ORIENTAL</a></li>
<li><a href="jade/jade.html" target="blank">JADE</a></li>
<li><a href="joyas_etnicas/joyas_etnicas.html" target="blank">JOYAS ETNICAS</a></li>
<li><a href="muebles/muebles.htm" target="blank">MUEBLES Y PEANAS</a></li>
<li><a href="otro/otro.html" target="blank">OTROS OBJETOS</a></li>
</ul>
</div>
</body>

Por th

15 de clabLevel



 

chrome
Citar            
MensajeEscrito el 11 May 2017 11:03 am
Prueba con esto.

<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul li a {
text-decoration:none;
color:#000;
cursor:pointer;
}
</style>

Puedes hacer mucho mas que solo texto para un menu.

ul li a {
background-color: rgba(100,110,255,0.80);
width: 200px;
height: 20px;
display:block;
text-decoration:none;
padding:5px;
color:#000;
cursor:pointer;
}
ul li a:hover {
background-color: rgba(140,150,255,0.80);
text-decoration:none;
color:#ff0000;
cursor:pointer;
}

Y todavia mas.

Espero haberte ayudado.

Por jearj

41 de clabLevel



 

mozilla
Citar            
MensajeEscrito el 11 May 2017 11:43 am
Esto puede ayudarte a crear un menu un poco mas dinamico:

<style>
ul {
float:left;
background-color: rgba(80,90,255,0.99);
list-style-type: none;
padding:5px;
margin: 0px;
}

ul li a {
background-color: rgba(100,110,255,0.99);
width: 200px;
height: 20px;
display:block;
border-bottom:1px solid rgba(50,70,255,0.99);
text-decoration:none;
text-align: left;
font: bold 14px/20px Verdana;
color:#000;
padding:5px;
margin: 0px auto;
cursor:pointer;
}
ul li a:hover {
background-color: rgba(140,150,255,0.99);
width: 190px;
height: 20px;
text-decoration:none;
font: bold 12px/20px Verdana;
color:#ff0000;
cursor:pointer;
}
</style>
</head>

<body>
<div align="left" id="menu">
<ul>
<li style="border-top:1px solid rgba(50,70,255,0.99);"><a href="arte_budista/arte_budista.html" target="blank">ARTE BUDISTA</a></li>
<li><a href="arte_oriental/arte_oriental.html" target="blank">ARTE ORIENTAL</a></li>
<li><a href="bronce/bronce.html" target="blank">BRONCE</a></li>
<li><a href="porcelana_china/porcelana_china.html" target="blank">PORCELANA CHINA</a></li>
<li><a href="ceramica_oriental/ceramica_oriental.html" target="blank">CERAMICA ORIENTAL</a></li>
<li><a href="jade/jade.html" target="blank">JADE</a></li>
<li><a href="joyas_etnicas/joyas_etnicas.html" target="blank">JOYAS ETNICAS</a></li>
<li><a href="muebles/muebles.htm" target="blank">MUEBLES Y PEANAS</a></li>
<li><a href="otro/otro.html" target="blank">OTROS OBJETOS</a></li>
</ul>
</div>
</body>

Por jearj

41 de clabLevel



 

mozilla
Citar            
MensajeEscrito el 12 May 2017 02:59 pm
Hola de nuevo. Y muchas gracias por ayudar en estos temas.

El ultimo menú que has publicado es muy bonito, y lo puse en una pagina limpia para verlo, y se quedaba bien y lineado a la izquierda.

Pero en cuando lo puse en la pagina real, y otro de test, se quedaba en el centro, no se lineaba a la izquierda como al principio. No se porque porque el otro menú que puse aquí el otro día se quedaba a la izquierda sin problemas.
Lo único que se me ocurra es que el Marco que enmarca todo esta parte puedo interferir en el asunto. aunque no se porque en uno y en otro no. Si pongo todo la pagina aquí, podrías mirar en cuando tienes un momento a ver lo que es que se interfiere en la alineación?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta name="description" content="Antigüedades Orientales">

<meta name="keywords" content="Arte oriental, budismo, Bronce, Porcelana china, Cerámica oriental, jade, antigüedades, joyas étnicas, Budas, arte budista, Thankas, objetos tibetanas, objetos chinos, arte asiática, Birmania Camboya, Tailandia, China, Vietnam, joyas de jade, libros, muebles, peanas">

<title>index.html</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href=css />

<style>
ul {
float:left;
background-color: rgba(80,90,255,0.99);
list-style-type: none;
padding:5px;
margin: 0px;
}

ul li a {
background-color: rgba(100,110,255,0.99);
width: 200px;
height: 20px;
display:block;
border-bottom:1px solid rgba(50,70,255,0.99);
text-decoration:none;
text-align: left;
font: bold 14px/20px Verdana;
color:#000;
padding:5px;
margin: 0px auto;
cursor:pointer;
}
ul li a:hover {
background-color: rgba(140,150,255,0.99);
width: 190px;
height: 20px;
text-decoration:none;
font: bold 12px/20px Verdana;
color:#ff0000;
cursor:pointer;
}
</style>


<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-93342980-1', 'auto');
ga('send', 'pageview');

</script>

</head>

<body bgcolor=#C0C0C0 STYLE="background-color: #C0C0C0;">
<div style="border-bottom: #606060 18px double; text-align: center; border-left: #606060 18px double; padding-bottom: 10px; margin: 0px auto; padding-left: 10px; width: 100%; padding-right: 10px; max-width: 900px; border-top: #606060 18px double; border-right: #606060 18px double; padding-top: 10px">&nbsp;
<h1 align="center" color="red">ANTIG&Uuml;EDADES HOOCK</h1>

<h2 align="center">Arte Oriental - Arte etnica - Budismo - Antig&uuml;edades</h2>

<div size="4" style="text-align: center">Si desan ver los productos pueden ponerse en contacto y pedir una cita privada.</div>
&nbsp;

<p>Antig&uuml;edades Hoock<br />
Malaga - Espa&ntilde;a<br />
+ 34 693 46 07 15<br />
Mail: [email protected]</p>

<div align="left" id="menu">
<ul>
<li style="border-top: 1px solid"><a href="arte_budista/arte_budista.html" target="blank">ARTE BUDISTA</a></li>
<li><a href="arte_oriental/arte_oriental.html" target="blank">ARTE ORIENTAL</a></li>
<li><a href="bronce/bronce.html" target="blank">BRONCE</a></li>
<li><a href="porcelana_china/porcelana_china.html" target="blank">PORCELANA CHINA</a></li>
<li><a href="ceramica_oriental/ceramica_oriental.html" target="blank">CERAMICA ORIENTAL</a></li>
<li><a href="jade/jade.html" target="blank">JADE</a></li>
<li><a href="joyas_etnicas/joyas_etnicas.html" target="blank">JOYAS ETNICAS</a></li>
<li><a href="muebles/muebles.htm" target="blank">MUEBLES Y PEANAS</a></li>
<li><a href="otro/otro.html" target="blank">OTROS OBJETOS</a></li>
</ul>
</div>
<br />
<br />
<br />
<br />
<br />
<span style="font-size: 15px; font-weight: bold">GRACIAS POR VISITAR NUESTRA PAGINA</span>

<p align="center" class="credits"><strong>&copy; 20017 ANTIG&Uuml;EDADES HOOCK</strong></p>
</div>

Por th

15 de clabLevel



 

chrome
Citar            
MensajeEscrito el 12 May 2017 05:20 pm
Del selector ul, quita float:left; y pon width:210px;

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Web Developer

chrome
Citar            
MensajeEscrito el 13 May 2017 08:00 am
Te refieres a hacerlo asi en >style>?


<style>
ul {
width: 210px;
background-color: rgba(80,90,255,0.99);
list-style-type: none;
padding:5px;
margin: 0px;
}

Por th

15 de clabLevel



 

chrome
Citar            
MensajeEscrito el 14 May 2017 12:31 pm
Si eso mismo te dice.

Con eso le pones medida al ul y te mantendra el menu a la izquierda.

Por jearj

41 de clabLevel



 

mozilla
Citar            
MensajeEscrito el 15 May 2017 08:23 am
Si cierto, ya lo he probado y funciona bien. Gracias por la ayuda.
Me queda como una barra arriba del menú como eso:

____________
arte Budista
Arte Oriental
Bronce

Se puede quitar, o es un parte del diseño?

Por th

15 de clabLevel



 

chrome
Citar            
MensajeEscrito el 15 May 2017 05:02 pm
Acaba de ver que el menú esta dentro de un block en color azul? eso no vi en cuando lo puse en el compositor, pero una vez subido a la red lo veo, se puedo quitar este block azul y solamente tener las letras en Negro? y el resto de los efectos también?

Por th

15 de clabLevel



 

chrome
Citar            
MensajeEscrito el 15 May 2017 08:13 pm
Puedes quitarle esto del ul background-color: rgba(80,90,255,0.99);

y dejarlo asi:
ul {
width: 210px;

list-style-type: none;
padding:5px;
margin: 0px;
}

O si lo prefieres puedes cambiar esto: padding:5px;

Dejandolo asi:
padding:0px;

Por jearj

41 de clabLevel



 

mozilla
Citar            
MensajeEscrito el 20 May 2017 08:43 am
Hola de nuevo

Quitando ul background-color: rgba(80,90,255,0.99);
No me ha solucionado la problema sigue apareciendo el color azul como fondo en el menü.
Tengo que quitar algo más?

Por th

15 de clabLevel



 

chrome
Citar            
MensajeEscrito el 21 May 2017 11:49 am
Al quitar el: background-color: rgba(80,90,255,0.99); de la ul, ya no necesitas esta parte resaltada en rojo:

<li style="border-top:1px solid rgba(50,70,255,0.99);"><a href="arte_budista/arte_budista.html" target="blank">ARTE BUDISTA</a></li>

Puedes volver a dejarla como estaba.
Reemplaza esa línea por esta:

<li><a href="arte_budista/arte_budista.html" target="blank">ARTE BUDISTA</a></li>

Por jearj

41 de clabLevel



 

mozilla
Citar            
MensajeEscrito el 22 May 2017 08:18 am
Hola
Si esta parte ya lo quité, ya no esta:

<div align="left" id="menu">
<ul>
<li><a href="arte_budista/arte_budista.html" target="blank">ARTE BUDISTA</a></li>
<li><a href="arte_oriental/arte_oriental.html" target="blank">ARTE ORIENTAL</a></li>
<li><a href="bronce/bronce.html" target="blank">BRONCE</a></li>
<li><a href="porcelana_china/porcelana_china.html" target="blank">PORCELANA CHINA</a></li>
<li><a href="ceramica_oriental/ceramica_oriental.html" target="blank">CERAMICA ORIENTAL</a></li>
<li><a href="jade/jade.html" target="blank">JADE</a></li>
<li><a href="joyas_etnicas/joyas_etnicas.html" target="blank">JOYAS ETNICAS</a></li>
<li><a href="muebles/muebles.htm" target="blank">MUEBLES Y PEANAS</a></li>
<li><a href="otro/otro.html" target="blank">OTROS OBJETOS</a></li>

Lo que pasa es que el fondo del menú sigue siendo el color azul, y me gustaría que no esta y solamente el texto co el efecto de hover. Este es el style actual:

<style>
ul {
width:210px;
list-style-type: none;
padding:0px;
margin: 0px;
}

ul li a {
background-color: rgba(100,110,255,0.99);
width: 200px;
height: 20px;
display:block;
border-bottom:1px solid rgba(50,70,255,0.99);
text-decoration:none;
text-align: left;
font: bold 14px/20px Verdana;
color:#000;
padding:5px;
margin: 0px auto;
cursor:pointer;
}
ul li a:hover {
background-color: rgba(140,150,255,0.99);
width: 190px;
height: 20px;
text-decoration:none;
font: bold 12px/20px Verdana;
color:#ff0000;
cursor:pointer;
}
</style>

Como podría quitar el color en el fondo, porque la primera parte :
ul background-color: rgba(80,90,255,0.99);

Yo lo quité también.

Un saludo

Por th

15 de clabLevel



 

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.