Foros del Web » Creando para Internet » CSS »

Hacer esto sin tablas??

Estas en el tema de Hacer esto sin tablas?? en el foro de CSS en Foros del Web. Lo que quiero es muy simple pero no puedo hacerlo o no se puede, no termino de entender las diferencias entre cajas en linea o ...
  #1 (permalink)  
Antiguo 11/02/2006, 18:26
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 19 años, 9 meses
Puntos: 4
Hacer esto sin tablas??

Lo que quiero es muy simple pero no puedo hacerlo o no se puede, no termino de entender las diferencias entre cajas en linea o en bloque. Fíjense en esta pagina: http://www.torneosnydus.com/index.php arriba de todo sobre el banner, hay 7 links uno al lado del otro, eso es una tabla:

Código HTML:
<table>
	<tr>
		<td><a href="/index.php">Home</a></td>
		<td><a href="/foros/index.php">Forum</a></td>
		<td><a href="/replays/index.php">Replays</a></td>
		<td><a href="/torneos/index.php">Tournaments</a></td>
		<td><a href="/downloads/index.php">Downloads</a></td>
		<td><a href="/halldefama.php">Hall of Fame</a></td>
		<td><a href="/lsw3/grupos.php">LSW III</a></td>
	</tr>
</table> 
Bueno ahora quiero hacer eso sin la tabla, de esta forma no me funciona porque especificar width en un SPAN no funciona..

Código HTML:
<style type="text/css">
	SPAN	{
		width:150px;
	}
</style>
....
<span><a href="/index.php">Home</a></span>
<span><a href="/foros/index.php">Forum</a></span>
<span><a href="/replays/index.php">Replays</a></span>
<span><a href="/torneos/index.php">Tournaments</a></span>
<span><a href="/downloads/index.php">Downloads</a></span>
<span><a href="/halldefama.php">Hall of Fame</a></span>
<span><a href="/lsw3/grupos.php">LSW III</a></span> 
y el gran problema es que al pasar el mouse sobre los links se pone en negrita y el ancho se agranda y se mueven los demas links, eso justamente es lo que no quiero! hay una forma de generar una caja como el <div> pero una al lado de la otra y que no esten flotando???

Saludos.
__________________
Internet Explorer SuckS
Download FireFox
  #2 (permalink)  
Antiguo 11/02/2006, 18:33
Tew
 
Fecha de Ingreso: enero-2006
Mensajes: 1.562
Antigüedad: 18 años, 2 meses
Puntos: 17
Busca como hacer un menu horizontal con css

Suele hacerse con listas...

Y para ke no se pongan en negrita pues no le des ese estilo a los links...

Última edición por Tew; 11/02/2006 a las 18:41
  #3 (permalink)  
Antiguo 11/02/2006, 19:03
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 19 años, 9 meses
Puntos: 4
yo no dije que no queria la negrita.. justamente si quiero que tenga negrita pero que los links de los costados queden fijos.
__________________
Internet Explorer SuckS
Download FireFox
  #4 (permalink)  
Antiguo 11/02/2006, 19:38
Tew
 
Fecha de Ingreso: enero-2006
Mensajes: 1.562
Antigüedad: 18 años, 2 meses
Puntos: 17
Cita:
Iniciado por SiR.CARAJ0DIDA
yo no dije que no queria la negrita.. justamente si quiero que tenga negrita pero que los links de los costados queden fijos.
Bueno al hacerlo como lista eso no te importara...

Pero sino kieres ke en negrita sea mas grande pon un tamaño de letra mas pekeño cuando este en negrita... por ejemplo, normal a 12pt y negrita a 10pt.
  #5 (permalink)  
Antiguo 11/02/2006, 20:15
Avatar de ramm  
Fecha de Ingreso: junio-2004
Ubicación: Guadalajara
Mensajes: 207
Antigüedad: 19 años, 9 meses
Puntos: 0
Revisa esto
http://www.cristalab.com/tutoriales/...-usando-listas

Ahi explico detalladamente como hacer diferentes tipos de menu con listas
  #6 (permalink)  
Antiguo 12/02/2006, 08:56
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 19 años, 9 meses
Puntos: 4
que bien hice como dice ahi y no puedo centrar el menu en firefox ahora, alguien me dice que esta mal?? si el UL es en bloque no se centra con margin:auto; ??

Código HTML:
<style type="text/css">
DIV	{
	text-align:center;
}
UL	{
	margin:0px auto;
	width:660px;
}
#navi {  
	list-style:none;
	margin:0;
	padding:0;
}
#navi li {
	margin:0px;
	padding:0;
	float:left;
}
#navi li a {
	display:block;
	width:110px;
	padding:4px 0px;
	margin:0px;
	text-decoration:none;
	text-align:center;
	font-size:11px;
	color:#FFF;
	background-color:#000;
}
#navi li a:hover {
	font-weight:bold;
}
</style>
...
<div>
	<ul id="navi">
		<li><a href="#">inicio</a></li>
		<li><a href="#">acerca de</a></li>
		<li><a href="#">contactos</a></li>
		<li><a href="#">inicio</a></li>
		<li><a href="#">acerca de</a></li>
		<li><a href="#">contactos</a></li>
	</ul>
</div> 
__________________
Internet Explorer SuckS
Download FireFox
  #7 (permalink)  
Antiguo 17/02/2006, 18:59
Avatar de gonzalezmfrank  
Fecha de Ingreso: julio-2005
Ubicación: Maracaibo - Venezuela
Mensajes: 266
Antigüedad: 18 años, 8 meses
Puntos: 0
Estimado SirCarajodida

No soy muy letrado en esto... de hecho he visto cosas muy interesantes aca... pero si tienes un div... prueba con incluirle unos estilos a tu div ?

Algo como

<div style='align:center'> o 'middle' .. no estoy seguro, de hecho si no te da nada cambia align por text-align

Frank
  #8 (permalink)  
Antiguo 17/02/2006, 19:01
Avatar de gonzalezmfrank  
Fecha de Ingreso: julio-2005
Ubicación: Maracaibo - Venezuela
Mensajes: 266
Antigüedad: 18 años, 8 meses
Puntos: 0
Ojo... digo esto por cuanto no le estas colocando ningun "nombre" al div y me llama la atencion que los tienes en Mayusculas... no se realmente si esto tenga algo que ver...

Saludos
  #9 (permalink)  
Antiguo 17/02/2006, 19:57
 
Fecha de Ingreso: febrero-2006
Mensajes: 155
Antigüedad: 18 años, 1 mes
Puntos: 6
En vez de usar display: block; y float, intenta usando display: inline-block; y elimina el float :), si no te va en firefox, también intenta con display: -moz-inline-box;

Saludos!
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 01:15.