Bocadillos en css

OsSk4R · #1 (**permalink**) 19/05/2009, 10:40

Buenas,

Verán he estado buscando un estilo de "bocadillos" para el sistema de comentarios que estoy creando.

Pero ando verde en css...

Buscando encontre esto: Aquí

La verdad me gusto y lo tengo adaptando, le he cambiado el color un poco, le he quitado ese fonde morado etc.

Pero lo que no se hacer, es ponerle lo de "inicio" del bocadillo en el lado izquierdo.
Como se ven en los ejemplos, aparece de dos maneras; arriba o abajo.

¿Como puedo ponerlo en el lado izquierdo?

O... ¿me podrías decir que selectores y/o declaraciones son las que tendria que poner?

Muchas gracias

kseso? · #2 (**permalink**) 19/05/2009, 13:13

Hace ya unos meses que comentamos aquí esa código css. Y como siempre, Mikmoro se sacó de la manga algo más.
Mira su aportación
Creo que podrás adaptarla, cambia el ^ por < en el html y adapta los valores top y left del css para ajustarlo a tus deseos.

Suerte.

OsSk4R · #3 (**permalink**) 20/05/2009, 08:07

Buenas de nuevo, la verdad mira que busque por el foro y la web, algun tema relacionado, pero no di...

He estado probando las dos aportaciones que realizó y me quedé con la ultima. Pero por mucho que lo intento no acabo de dejarlo como quiero.

Así esta el código:

Cita:

<!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">
<head>
<title>callout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin: 0;padding: 0;}
body {background-color: #ccccfe;
font-family: verdana;
}
#caja {height: 100px;
border: solid 2px #f9f9ff;
margin: 20px;
position: relative;
background-color: #9a99ff;
float: left;
}
#caja span {position: absolute;
background-color: transparent;
height: 20px;
overflow: hidden;
left: 20px;
display: block;
width: 15px;
}

#caja span.punta {font-size: 90px;
top: 8px;
left:-10px;
color: #9a99ff;
text-indent: -49px;
line-height: 60px;
}
#caja span.punta2 {font-size: 30px;
top: 5px;
left:-15px;
color: #f9f9ff;
text-indent: -5px;
}
p {padding: 10px;}
</style>
</head>
<body>
<div id="caja"><span class="punta"><</span><span class="punta2"><</span><p>Otra forma de hacerlo que funciona
perfectamente en IE6</p></div>
</body>
</html>

Pero este es el resultado:

Como se ve no acabo de encajarlo bien

Muchas gracias una vez más