Foros del Web » Creando para Internet » CSS »

Problema con ul, float:left y otros detalles...

Estas en el tema de Problema con ul, float:left y otros detalles... en el foro de CSS en Foros del Web. Hola 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 ...
  #1 (permalink)  
Antiguo 29/05/2007, 17:48
Avatar de manujav  
Fecha de Ingreso: julio-2006
Mensajes: 63
Antigüedad: 11 años, 5 meses
Puntos: 0
Pregunta Problema con ul, float:left y otros detalles...

Hola
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:
!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>
Ojalá puedan ayudarme ya que de momento no le veo salida...
Gracias.
__________________
Feo, muy feo foro...
www.electri-k.tk
  #2 (permalink)  
Antiguo 31/05/2007, 10:02
Avatar de manujav  
Fecha de Ingreso: julio-2006
Mensajes: 63
Antigüedad: 11 años, 5 meses
Puntos: 0
Re: Problema con ul, float:left y otros detalles...

Gracias a todos, ya lo resolvi.
Fue la última vez que pido ayuda por acá.
Gracias y adiós.
__________________
Feo, muy feo foro...
www.electri-k.tk
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 21:50.