Foros del Web » Creando para Internet » CSS »

Bocadillos en css

Estas en el tema de Bocadillos en css en el foro de CSS en Foros del Web. 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: ...
  #1 (permalink)  
Antiguo 19/05/2009, 11:40
Avatar de OsSk4R  
Fecha de Ingreso: octubre-2006
Ubicación: $this->home
Mensajes: 824
Antigüedad: 11 años, 1 mes
Puntos: 74
Bocadillos en css

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
  #2 (permalink)  
Antiguo 19/05/2009, 14:13
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Bocadillos en css

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.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 20/05/2009, 09:07
Avatar de OsSk4R  
Fecha de Ingreso: octubre-2006
Ubicación: $this->home
Mensajes: 824
Antigüedad: 11 años, 1 mes
Puntos: 74
Respuesta: Bocadillos en css

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
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 05:21.