Gå till innehåll

Problem med javascript/css


Recommended Posts

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..

namnlsv.th.png

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; }

Länk till kommentar
Dela på andra webbplatser

Delta i dialogen

Du kan skriva svaret nu och registrera dig senare, Om du har ett konto, logga in nu för att svara på inlägget.

Gäst
Svara i detta ämne...

×   Du har klistrat in innehåll med formatering.   Ta bort formatering

  Only 75 emoji are allowed.

×   Din länk har automatiskt bäddats in.   Visa som länk istället

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Skapa nytt...