Foros del Web » Creando para Internet » CSS »

Consulta sobre <li> y <a>

Estas en el tema de Consulta sobre <li> y <a> en el foro de CSS en Foros del Web. Hola tengo un problema con el menú de mi web que estoy tratando de arreglar pero me quedo estancado en un punto, la cuestión es ...
  #1 (permalink)  
Antiguo 27/12/2006, 17:49
Avatar de Zubzero  
Fecha de Ingreso: julio-2006
Ubicación: Lima - Peru
Mensajes: 299
Antigüedad: 11 años, 4 meses
Puntos: 2
Pregunta Consulta sobre <li> y <a>

Hola

tengo un problema con el menú de mi web que estoy tratando de arreglar pero me quedo estancado en un punto, la cuestión es que quiero utilizar los atributos de la etiqueta <ul><li><a> para cambiar los botones del menú pero no puedo darle los bordes a cada elemento del menú ... no sé si me explico

Código HTML:
ul#menu1 {list-style-type:none; margin:0 0 0 0px; padding:0 0 0 0px;}
ul#menu1 li {float:center; margin:0 0 0 0px; padding:0 0 0 px;height:25px;font-weight:bold;border:1px;border-color:#ffffff;}
éste es el código que uso pero no puedo darle los bordes a cada elemento de la lista ....

les agradecería me echaran una mano

mi propósito es hacer mas ligera mi web y no utilizar tantos botones y demás elementos que hagan pesada mi web...

Saludos.
__________________
Cine de terror
  #2 (permalink)  
Antiguo 27/12/2006, 18:08
Avatar de Ruben_JD  
Fecha de Ingreso: diciembre-2003
Ubicación: Quito-Ecuador
Mensajes: 218
Antigüedad: 14 años
Puntos: 7
Re: Consulta sobre <li> y <a>

porque no los separas, ejemplo:
#menu
#menu ul
#menu li
#menu li a
#menu li a:link
#menu li a:visited
#menu li a:hover
y asi puedes dar un fondo, un color de letra, un margen y bordes.
__________________
RubénJ. Regresando al foro despues de un par de años. A preguntar más de las novedades del foro.
  #3 (permalink)  
Antiguo 27/12/2006, 18:32
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Consulta sobre <li> y <a>

A simple vista te diría que es que no le estás diciendo qué tipo de borde quieres, y asume que es none. Prueba a poner por ejemplo esto:

border:1px solid #000

Otra cosa: float:center no existe.

Mikel.
  #4 (permalink)  
Antiguo 27/12/2006, 18:55
Avatar de Zubzero  
Fecha de Ingreso: julio-2006
Ubicación: Lima - Peru
Mensajes: 299
Antigüedad: 11 años, 4 meses
Puntos: 2
Re: Consulta sobre <li> y <a>

Cita:
Iniciado por Mikmoro Ver Mensaje

Otra cosa: float:center no existe.

Mikel.
Bueno eso ya me lo habían dicho anteriormente .... siempre se me olvida corregirlo , bueno ahorita dispongo de poco tiempo (tengo que ir al trabajo ).... mañana a primera hora probaré lo que me acaban de recomendar y veré cómo me va .... Gracias por responderme...

Saludos ...
__________________
Cine de terror
  #5 (permalink)  
Antiguo 28/12/2006, 11:14
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
Re: Consulta sobre <li> y <a>

Hola a todos [as],

Zubzero, checate la forma en que yo lo hago y me cuentas si te sirve.

XHML
Código:
<div id="bloque">
<div id="menu">

     <h1>Men&uacute;</h1>

<ul>
<li><a href="#html">Inicio</a></li>
<li><a href="#html">Blog Personal</a></li>
<li><a href="#html">Noticias Recientes</a></li>
<li><a href="#html">Quienes somos?</a></li>
<li><a href="#html">Proyectos</a></li>
<li><a href="#html">Multimedia</a></li>
<li><a href="#html">Galer&iacute;a</a></li>
<li><a href="#html">Art&iacute;culos</a></li>
<li><a href="#html">Zona de descargas</a></li>
<li><a href="#html">Contactanos</a></li>
</ul>

</div>
</div>
CSS
Código:
/*esto es opcional, lo utilice para dar formato al modulo */
div#bloque {
position : relative;
width : 320px;
height : auto;
margin : 10% auto;
padding : 5px;
border : 1px outset #eee;
}

	/**********************************
	*******************************
	el div[menu], encierra el listado desordenado
	*********************************	
	*************************************/

div#menu {
position : relative;
width : 300px;
height : auto;
margin : 0 auto;
padding : 3px;
text-align : left;
border : 1px outset #eee;
background : transparent url(css.png) no-repeat right bottom;
}

#menu ul {
list-style-type : none;
margin : 0 auto;
padding : 2px;
}

#menu >ul li {
margin : 0;
padding : 2px;
font : normal 8pt Tahoma, Arial, Verdana, Serif, Symbol;
}

#menu >ul li a {
display : block;
text-decoration : none;
width : auto;
height : 17px;
margin : 0;
padding : 2px 0 0 20px;
background-color : inherit;
color : #828598;
}

#menu >ul li a:hover {
display : block;
width : auto;
height : 17px;
background-color : inherit;
color : #000;
background-color : #ddf;
}


#bloque #menu h1 {
font : normal 100 28pt Georgia, Serif, Sans-Serif, Symbol;
margin : 0;
padding : 0;
background-color : inherit;
color : #AACC66;
letter-spacing : -6px;
word-spacing : 4px;
}
Así de fácil!... si te das cuenta es cuestion de jugar con los selectores y el resultado es, [pienso yo] muy bueno Si tienes dudas o quisieras hacer alguna otra pregunta que te haya surgido a ultimo momento puedes postearla y con gusto te hechamos la mano
__________________
_______
Jorge Rojas.

Última edición por iconogt; 28/12/2006 a las 11:19 Razón: había un error en el código :D
  #6 (permalink)  
Antiguo 28/12/2006, 18:25
Avatar de Zubzero  
Fecha de Ingreso: julio-2006
Ubicación: Lima - Peru
Mensajes: 299
Antigüedad: 11 años, 4 meses
Puntos: 2
Re: Consulta sobre <li> y <a>

hola ...

estoy probando hacer el menú basándome en los ejemplos que me han dado lo cual les agradezco, digamos que estoy por buen camino pero hasta ahora no le puedo dar los bordes a cada elemento:

inicio
biografia
filmografia
galeria


hice las separaciones como me dijeron pero aún así no me sale el borde salvo el borde que contiene todos los elemento o sea el del <ul></ul>

estoy sospechando que puede ser el list-style-type ...... pero de ser así dónde debo colocarlo y en vez de none que pongo? ...

estoy haciendolo a nivel local así que no puedo mostrarles como me está quedando ...

bueno... seguiré probando...

Gracias por su ayuda
__________________
Cine de terror
  #7 (permalink)  
Antiguo 28/12/2006, 18:36
Avatar de Zubzero  
Fecha de Ingreso: julio-2006
Ubicación: Lima - Peru
Mensajes: 299
Antigüedad: 11 años, 4 meses
Puntos: 2
Re: Consulta sobre <li> y <a>

momento momento!!!

creo que lo logré!!
__________________
Cine de terror
  #8 (permalink)  
Antiguo 28/12/2006, 19:08
Avatar de Zubzero  
Fecha de Ingreso: julio-2006
Ubicación: Lima - Peru
Mensajes: 299
Antigüedad: 11 años, 4 meses
Puntos: 2
Re: Consulta sobre <li> y <a>

Bueno voy a aprovechar este post ... para despejarme tres dudas que aún tengo:

qué funciones tienen:

display: block;
Padding: 0 0 0;
position : relative/absolute; (en ésta cuál es la diferencia entre las dos opciones?)

es todo ... gracias por todo
__________________
Cine de terror
  #9 (permalink)  
Antiguo 30/12/2006, 16:36
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
Re: Consulta sobre <li> y <a>

Creo que tendrás que leer un poco, aquí te dejo un muy buen link:

http://www.w3schools.com/css/pr_class_position.asp

Slds, suete...
__________________
_______
Jorge Rojas.
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 07:47.