Problema con ul, float:left y otros detalles... Pues si, el problema es que, para poner dos enlaces en una sola línea ya he utilizado el ul y el float:left, pero como estoy utilizando un tooltip para los enlaces (que en realidad no son enlaces ya que no llevan a ninguna parte y solo muestran el tooltip), éste me descuadra ambos enlaces...
Además, no logro alinear en la misma línea ambos enlaces en IE7 y mucho menos en IE6... Lo he probado en FF y casi funciona, con el defecto de desalinear los enlaces en el a:hover...
Esto es realmente complicado, y para entenderlo mejor, dejo el código y el css.
Código:
td
{
font-family:"Verdana";
font-size:10px;
color:black;
}
span.required{
font-size: 13px !important;
color: red !important;
}
.espacio
{
padding-left:5px;
}
*
{
padding:0;
margin:0;
}
html, body
{
margin:0;
padding:0;
width:100%;
height:100%;
overflow:hidden;
}
#background
{
position:absolute;
z-index:1;
width:100%;
height:100%;
}
h1
{
margin-top:65px;
color:red;
font-family:arial;
}
h2
{
color:#da612e;
font-family:arial;
font-size:9pt;
}
#scroller
{
position:relative;
width:100%;
height:100%;
top:0;
left:0;
overflow:auto;
z-index:2;
padding:170px 300px 20px 470px;
}
.pie
{
font:10pt, Arial;
color:#465656;
margin-left:-50px;
margin-top:50px;
}
a:link
{
text-decoration:none;
color:#465656;
}
a:visited
{
text-decoration:none;
color:#465656;
}
a:hover
{
text-decoration:none;
color:white;
}
em
{
color:white;
}
p
{
font-size:11pt;
}
#fixed
{
position:absolute;
top:10px;
left:50px;
width:250px;
z-index:10;
padding:10px 10px 15px 10px;
text-align:center;
}
.contenedor
{
text-align:center;
font-size:11pt;
font-family:arial;
color:#000;
width:280px;
padding:10px 10px 0 40px;
}
.papel
{
background: url('rollo.png') no-repeat;
height:440px;
width:359px;
margin-top:-90px;
margin-right:170px;
clear:both;
}
#peliroja
{
height:150px;
text-align:right;
margin:-180px 0 0 450px;
}
#ligas
{
font-size:9pt;
}
.formulario
{
text-align:left;
margin-left:20px;
padding:10px;
}
.serif
{
background: transparent;
width:160px;
margin:0 auto;
}
.serif .top, .serif .bottom
{
display:block;
background:transparent;
font-size:1px;
}
.serif .b1, .serif .b2, .serif .b3, .serif .b4
{
display:block;
overflow:hidden;
}
.serif .b1, .serif .b2, .serif .b3
{
height:1px;
}
.serif .b2, .serif .b3
{
background:#fff;
border-left:1px solid #fff;
border-right:1px solid #fff;
margin:0 2px;
margin:0 1px;
border-width:0 2px;
}
.serif .b4
{
background:#fff;
border-left:1px solid #fff;
border-right:1px solid #fff;
height:1px;
margin:0 3px;
}
.serif .b1
{
margin:0;
background:#fff;
}
.serif .boxcontent
{
display:block;
background:#fff;
border-left:5px solid #fff;
border-right:10px solid #fff;
}
#menu dl
{
width: 150px;
margin: 0;
padding: 0 0 10px 0;
background: #000 url(bottom.gif) no-repeat bottom left;
}
#menu dt
{
font-family:trebuchet MS;
margin:0;
padding: 10px;
font-size: 1.4em;
color: #fff;
border-bottom:1px solid #fff;
background: #000 url(top.gif) no-repeat top left;
}
#menu dd
{
font-family:trebuchet MS;
text-align:left;
margin:0;
padding:-10px;
color: #fff;
font-size: 9pt;
border-bottom:1px solid #fff;
}
#gallery a, #gallery a:visited
{
color:#fff;
text-decoration:none;
display:block;
padding:3px 5px 5px 20px;
background: #da612e no-repeat 10px 10px;
width:125px;
}
#gallery a:hover
{
background: #96401b no-repeat 11px 10px;
color:#fff;
letter-spacing:2pt;
}
strong
{
font-size:11pt;
color:black;
padding-left:30px;
}
#info
{
position:relative;
clear:both;
z-index:24;
color:#da612e;
font-size:20pt;
text-decoration:none;
font-family:Trebuchet Ms;
font-weight:bold;
width:300px;
margin:40px 10px 50px 30px;
list-style-type:none;
border:1px solid #da612e;
}
#info li a
{
color:#da612e;
float:left;
}
#info li a:hover
{
z-index:25;
color:#96401b;
}
#info a span
{
display: none;
}
#info a:hover span
{
display:block;
position:relative;
left:-85px;
width:250px;
border:1px solid #da612e;
background-color:#fd0;
color:#000;
font-family: Arial, Helvetica, sans-serif;
font-weight:normal;
text-align:center;
font-size: 10pt;
padding: 10px;
}
Código:
Ojalá puedan ayudarme ya que de momento no le veo salida...!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>.: La Botika Grafika | Diseño, publicidad e internet :. | Un poco sobre nosotros y lo que hacemos</title> <link rel=stylesheet type="text/css" href="estilo.css"> <link rel=stylesheet type="text/css" href="menu.css"> </head> <body> <div> <img id="background" src="fondo.gif" alt="diseño grafico y web" title="Lo mejor del diseño web y publicitario" /> </div> <div id="fixed"> <img src="logo.png" height="150px" style="margin-bottom:10px" alt="La Botika Grafika, diseño web, publicitario y más"> <div class="serif"> <b class="top"><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></b> <div class="boxcontent"> <div id="menu"> <dl id="gallery"> <dt>Menu</dt> <dd><a href="home.html" title="Donde todo comienza...">HOME</a></dd> <dd><a href="nosotros.html" title="De todo... como en botika"><strong>NOSOTROS</strong></a></dd> <dd><a href="servicios.html" title="Aquí encontrarás lo que ofrecemos">SERVICIOS</a></dd> <dd><a href="portafolios.html" title="Estas son nuestros trabajos más recientes">PORTAFOLIOS</a></dd> <dd><a href="contacto.html" title="Llena esta forma o envíanos un correo">CONTACTO</a></dd> </dl> </div> </div> <b class="bottom"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b> </div><img src="nos.png" height="210px" style="margin-top:5px; alt="En la Botika Grafika, trabajamos para su satisfacción"> </div> <div id="scroller"> <div class="papel"> <div class="contenedor"> <h1>¿Quiénes Somos?</h1> <p>Somos una empresa joven pero con muchos años de experiencia en el área de las Artes Gráficas.</p> <p>Lo que nos distingue de otras empresas es el trato cercano con el cliente, ya que éste es fundamental para el proceso tanto creativo como de desarrollo.</p> <p>Con nuestra atención personalizada, somos capaces de ofrecer un servicio de calidad en virtud de las necesidades reales de nuestros clientes.</p> </div> <ul id="info"> <li><a href="#" class="info">Misión <span>Ser una empresa líder en ofrecer servicios de publicidad de las más alta calidad, siempre buscando complacer a nuestros clientes y trabajando a la par con ellos para encontrar los medios que les permitan destacarse de sus competidores.</span></a></li> <li><a href="#" class="info">Visión <span>Ofrecer el mejor servicio enfocándonos en la relación cliente-proveedor, procurando siempre dar un valor agregado, fomentando así el crecimiento de dicha relación.</span></a></li> </ul> </div> <div class="pie"> <p><a href="home.html"> La Botika Grafika </a><em>~ </em>® Todos los Derechos Reservados. <em>~</em> México, 2007.</p> <img id="peliroja" src="peliroja.png" alt="Diseño y mucho más..."> </div> </div> </body> </html>
Gracias.
