Estructura DIV y Clear

Charli78 · #1 (**permalink**) 13/01/2012, 08:52

Hola, a ver si me podeis ayudar,

soy novatillo en el tema i tengo algun problema en la estructura de la linea horizontal que quiero hacer con DIV.
A la izquierda un texto i a la derecha un hipervinculo del facebook.

El HTML:

<div id="presentacion">
<ul>
<li>Estais: <strong>Inicio</strong></li>
<li><img src="images/logoFacebook.jpg" alt="Facebook" width="29" height="29" border="0" align="right"/></lI>
</ul>
</div>

El CSS:
#presentacion ul{
list-style:none;
width:760px;
font-size:25px;
color:#FFF;
clear:both;
}
#presentacion ul li{float:left}

El problema me viene con el float, que me incrusta la siguiente imagen al logoFacebook justo a la derecha, me interessa un clear pero no se donde ponerlo. También no logro poner el logoFacebook al extremo izquierdo.

Si me podeis ayudar.

Gracias

GAST0N · #2 (**permalink**) 13/01/2012, 08:59

sacale el clear.. a los li aparte del float dale margenes a los costados , y pading

Charli78 · #3 (**permalink**) 13/01/2012, 09:18

Podrias especificarme un poco mejor, lo intento con margin y padding no se me modifica nada.

Charli78 · #4 (**permalink**) 14/01/2012, 13:45

No logro resolver el problema. Necesito que el logo de facebook este en el extremo derecho del box, mientras que la imagen siguiente al DIV esté a un salto de linea de este.
¿Alguien me puede ayudar porfavor?
Voy cambiando los valores de margin y como mucho consigo que el logoFacebook se me quede a medio box de allí ya passa a ubicarse debajo del texto "Estais en:"

Desesperacioon

C2am · #5 (**permalink**) 14/01/2012, 14:01

Hola
Puedes postear el código que tienes hasta el momento, o un enlace.
Saludos

Charli78 · #6 (**permalink**) 17/01/2012, 10:19

Hola,
os muestro el HTML:

<body>
<div id="wrap">
<div id="presentacion">
<ul>
<li>Estais a: <strong>Inicio</strong></li>
<li><img src="images/logoFacebook.jpg" alt="Facebook" width="29" height="29" border="0" align="right"/></li>
</ul>
</div>

<div id="logo">
<img src="images/logo.jpg" alt="Nuestro Logo" border="0" />
</div>
<br><br><br><br><br>
<p class="logo2">
PTIFLIUIS
</p>

<!!-- _________________________ -->

El codigo CSS:

#logo {
width:200px;
font-family:zoi;
float:left;
text-align:center;
-moz-border-radius:15px;
-webkit-border-radius: 15px;
/*font-size:100px;*/
background-color:#FFF;
margin:0px 20px 20px 20px;
}

p.logo2 {
width:760px;
text-align:left;
font-family:zoi;
-moz-border-radius:15px;
-webkit-border-radius: 15px;
box-shadow: 5px 5px 0 #333;
-webkit-box-shadow: 5px 5px 0 #333;
-moz-box-shadow: 5px 5px 0 #333;
font-size:100px;
background-color:#FFF;
margin:auto;
}

#presentacion ul{
list-style:none;
width:760px;
font-size:25px;
color:#FFF;
padding:0px 200px 20px 20px;
}
#presentacion ul li{
float:left;
margin:10px 300px 0px 0px;
margin-right: 300px;
}