Foros del Web » Creando para Internet » CSS »

quiero hacer este menú

 Estas en el tema de quiero hacer este menú en el foro de CSS en Foros del Web. Buenas tardes a tod@s. Estoy intentando hacer un Menú, el cual quiero hacerlo por medio de CSS. Pongo aqui como quiero que quede visualmente (el ...
  #1 (permalink)  
Antiguo 26/11/2006, 07:42
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años
Puntos: 10
quiero hacer este menú
Buenas tardes a tod@s.

Estoy intentando hacer un Menú, el cual quiero hacerlo por medio de CSS.

Pongo aqui como quiero que quede visualmente (el código HTML no es el que quiero usar, pero era la mejor manera de que todos podais ver cual es mi interés).
Código: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Pruebas Menu</title>
	<style type="text/css">
		body {margin-bottom: 0px;margin-left: 0px;margin-right: 0px;margin-top: 0px;background-color:#ADADAD;}
		
		.sp{font-family:Arial,Verdana,Helvetica,sans-serif; font-size:1px; text-decoration:none; color:#FFFFFF; line-height:1px;}
		
		.a11_000000 {font-family:Arial,Verdana,Helvetica,sans-serif; font-size:11px; text-decoration:none; color:#000000; line-height:12px;}
		.a11_FFFFFF_bold {font-family:Arial,Verdana,Helvetica,sans-serif; font-size:11px; text-decoration:none; color:#FFFFFF; line-height:12px; font-weight:bold}
	</style>
</head>

<body>
Menu<br><br>
<table cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td width="28" class="sp">&nbsp;</td>
		<td width="66" height="20" class="a11_000000" bgcolor="#E7E7E7"><span style="padding-left:7px">&raquo;&nbsp;Empresa</span></td>
		<td width="1" class="sp" bgcolor="#FFFFFF">&nbsp;</td>
		<td width="78" height="20" class="a11_000000" bgcolor="#E7E7E7"><span style="padding-left:7px">&raquo;&nbsp;Soluciones</span></td>
		<td width="1" class="sp" bgcolor="#FFFFFF">&nbsp;</td>
		<td width="80" height="20" class="a11_000000" bgcolor="#E7E7E7"><span style="padding-left:7px">&raquo;&nbsp;Case Study</span></td>
		<td width="1" class="sp" bgcolor="#FFFFFF">&nbsp;</td>
		<td width="97" height="20" class="a11_000000" bgcolor="#E7E7E7"><span style="padding-left:7px">&raquo;&nbsp;Sala de Prensa</span></td>
		<td width="1" class="sp" bgcolor="#FFFFFF">&nbsp;</td>
		<td width="65" height="20" class="a11_000000" bgcolor="#E7E7E7"><span style="padding-left:7px">&raquo;&nbsp;Partners</span></td>
		<td width="1" class="sp" bgcolor="#FFFFFF">&nbsp;</td>
		<td width="57" height="20" class="a11_000000" bgcolor="#E7E7E7"><span style="padding-left:7px">&raquo;&nbsp;Cursos</span></td>
		<td width="1" class="sp" bgcolor="#FFFFFF">&nbsp;</td>
		<td width="103" height="20" class="a11_000000" bgcolor="#E7E7E7"><span style="padding-left:7px">&raquo;&nbsp;Bolsa de Empleo</span></td>
		<td width="1" class="sp" bgcolor="#FFFFFF">&nbsp;</td>
		<td width="87" height="20" class="a11_000000" bgcolor="#E7E7E7"><span style="padding-left:7px">&raquo;&nbsp;Tienda Online</span></td>
	</tr>
</table>
<hr>
	RollOvers<br><br>

<table cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td class="sp">&nbsp;</td>
		<td class="sp">&nbsp;</td>
		<td colspan="3" class="sp" height="6" bgcolor="#26265D" style="border:1px solid #FFFFFF; border-width:1px 1px 0px 1px">&nbsp;</td>
		<td class="sp">&nbsp;</td>
		<td class="sp">&nbsp;</td>
		<td class="sp">&nbsp;</td>
		<td class="sp">&nbsp;</td>
		<td class="sp">&nbsp;</td>
		<td class="sp">&nbsp;</td>
		<td class="sp">&nbsp;</td>
		<td class="sp">&nbsp;</td>
		<td class="sp">&nbsp;</td>
		<td class="sp">&nbsp;</td>
		<td class="sp">&nbsp;</td>
	</tr>
	<tr>
		<td width="28" class="sp">&nbsp;</td>
		<td width="66" height="20" class="a11_000000" bgcolor="#E7E7E7"><span style="padding-left:7px">&raquo;&nbsp;Empresa</span></td>
		<td width="1" class="sp" bgcolor="#FFFFFF">&nbsp;</td>
		<td width="78" height="20" class="a11_FFFFFF_bold" bgcolor="#26265D"><span style="padding:0px 0px 7px 7px">Soluciones</span></td>
		<td width="1" class="sp" bgcolor="#FFFFFF">&nbsp;</td>
		<td width="80" height="20" class="a11_000000" bgcolor="#E7E7E7"><span style="padding-left:7px">&raquo;&nbsp;Case Study</span></td>
		<td width="1" class="sp" bgcolor="#FFFFFF">&nbsp;</td>
		<td width="97" height="20" class="a11_000000" bgcolor="#E7E7E7"><span style="padding-left:7px">&raquo;&nbsp;Sala de Prensa</span></td>
		<td width="1" class="sp" bgcolor="#FFFFFF">&nbsp;</td>
		<td width="65" height="20" class="a11_000000" bgcolor="#E7E7E7"><span style="padding-left:7px">&raquo;&nbsp;Partners</span></td>
		<td width="1" class="sp" bgcolor="#FFFFFF">&nbsp;</td>
		<td width="57" height="20" class="a11_000000" bgcolor="#E7E7E7"><span style="padding-left:7px">&raquo;&nbsp;Cursos</span></td>
		<td width="1" class="sp" bgcolor="#FFFFFF">&nbsp;</td>
		<td width="103" height="20" class="a11_000000" bgcolor="#E7E7E7"><span style="padding-left:7px">&raquo;&nbsp;Bolsa de Empleo</span></td>
		<td width="1" class="sp" bgcolor="#FFFFFF">&nbsp;</td>
		<td width="87" height="20" class="a11_000000" bgcolor="#E7E7E7"><span style="padding-left:7px">&raquo;&nbsp;Tienda Online</span></td>
	</tr>
	<tr>
		<td class="sp">&nbsp;</td>
		<td class="sp">&nbsp;</td>
		<td colspan="3" class="sp" height="6" bgcolor="#26265D" style="border:1px solid #FFFFFF; border-width:0px 1px 0px 1px">&nbsp;</td>
		<td class="sp">&nbsp;</td>
		<td class="sp">&nbsp;</td>
		<td class="sp">&nbsp;</td>
		<td class="sp">&nbsp;</td>
		<td class="sp">&nbsp;</td>
		<td class="sp">&nbsp;</td>
		<td class="sp">&nbsp;</td>
		<td class="sp">&nbsp;</td>
		<td class="sp">&nbsp;</td>
		<td class="sp">&nbsp;</td>
		<td class="sp">&nbsp;</td>
	</tr>
</table>
</body>
</html>
Esta es la estructura que quiero montar (repito, que no os fijeis mucho en el código HTML, sino en como queda finalmente en Web)

Si alguno sabe como podría hacerlo (usando CSS) y me da igual si con UL o solo enlaces .. pero que funcione abiertamente en IE, Firefox, Opera y Netscape.

Gracias de antemano.

Un saludo.
  #2 (permalink)  
Antiguo 26/11/2006, 11:32
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años
Puntos: 10
Porfavor.. ¿Alguien sabe como resolver lo que comento?
Ruego que alguien me ayude, porfavor

Graciasc a tod@s
  #3 (permalink)  
Antiguo 29/11/2006, 14:20
Avatar de Mikmoro
Colaborador
  
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Código: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Pruebas Menu</title>
  <style type="text/css">
body { margin: 0px;
background-color: rgb(173, 173, 173);
}
#contenedor { margin-left: 20px;
}
#contenedor a { border-left: 1px solid rgb(231, 231, 231);
border-right: 1px solid rgb(255, 255, 255);
padding: 4px 7px;
font-family: Arial,Verdana,Helvetica,sans-serif;
font-size: 11px;
text-decoration: none;
color: rgb(0, 0, 0);
background-color: rgb(231, 231, 231);
margin-top: 6px;
float: left;
}
#contenedor a:hover { border: 1px solid rgb(255, 255, 255);
padding: 8px 7px;
font-family: Arial,Verdana,Helvetica,sans-serif;
font-size: 11px;
text-decoration: none;
color: rgb(255, 255, 255);
background-color: rgb(38, 38, 93);
margin-top: 0px;
float: left;
}
  </style>
</head>
<body>
<br />
<br />
<div id="contenedor">
<a href="#">&raquo;&nbsp;Empresa</a>
<a href="#">&raquo;&nbsp;Soluciones</a>
<a href="#">&raquo;&nbsp;Case
Study</a>
<a href="#">&raquo;&nbsp;Sala
de Prensa</a>
<a href="#">&raquo;&nbsp;Partners</a>
<a href="#">&raquo;&nbsp;Cursos</a>
<a href="#">&raquo;&nbsp;Bolsa
de Empleo</a>
<a href="#">&raquo;&nbsp;Tienda
Online
</a></div>
</body>
</html>
No he puesto negrita a la capa rollover para que no se desplace hacia la derecha por el mayor tamaño de la letra, y poder mantener que cada uno tenga su tamaño según el texto. Si es importante, tendrás que dar tamaño a cada elemento por individual y hacer algún pequeño cambio.

Mikel.
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 08:51.