arnada Posted April 28, 2010 Share Posted April 28, 2010 Hejsan! Håller på att koda en blogg och har nu fastnat då javascripts inte är något jag direkt kan.... När man kommenterar så ska kommentaren hamna i en pratbubbla http://www.willmayo.com/2007/02/10/css-speech-bubbles/ Allt verkar fungera utom en grej, pratbubblan har bara runda hörn på den senaste kommentaren.. Tack på Förhand! Kommentar.php (mellan <head>) <script type="text/JavaScript" src="rounded_corners.inc.js"></script> <script type="text/JavaScript"> window.onload = function() { settings = { tl: { radius: 10 }, tr: { radius: 10 }, bl: { radius: 10 }, br: { radius: 10 }, antiAlias: true, autoPad: true } var myBoxObject = new curvyCorners(settings, "rounded"); myBoxObject.applyCornersToAll(); } </script> Kommentar.php while($kommentar = mysql_fetch_array($data)){ echo '<br />'; echo '<div class="bubble">'; echo '<div class="rounded">'; echo '<blockquote>'; echo $kommentar['text']; echo '</blockquote>'; echo '</div>'; echo '<cite>'; echo '<strong>'.$kommentar['namn'].'</strong>'; echo ' '; echo $kommentar['timestamp']; echo '</cite>'; echo '</div>'; } style.css /* PRATBUBBLA */ /* Normal Bubble */ div.bubble { width: auto; font-size: 0.75em; margin-bottom: 24px; } div.bubble blockquote { margin: 0px; padding: 0px; border: 1px solid #c9c2c1; background-color: #fff; } div.bubble blockquote p { margin: 10px; padding: 0px; } div.bubble cite { position: relative; margin: 0px; padding: 7px 0px 0px 15px; top: 6px; background: transparent url(images/tip.gif) no-repeat 20px 0; font-style: normal; } /* Rounded Bubble */ div.bubble div.rounded { margin-bottom: 10px; border: 3px solid #fff; background-color: #b7e0ff; } div.bubble div.rounded blockquote { border: 0; background-color: transparent; } div.bubble div.rounded blockquote p { margin: 0px 10px; font-size: 16px; } div.bubble cite.rounded { position: relative; margin: 0px; padding-left: 15px; padding-top: 12px; top: 9px; background: transparent url(images/tip-rounded.gif) no-repeat 15px 0; } /* Pimped Bubble */ div#pimped.bubble { font-size: 16px; } div#pimped.bubble div.rounded { color: #fff; border: 3px solid #fff; background-color: #111; } div#pimped.bubble cite.rounded { background: transparent url(images/tip-pimped.gif) no-repeat 15px 0; } #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; } Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.