Ronde hoekjes aan m'n kader
31 oktober 2011 - 09:33   
geplaatst door: Duke
beste,

ik moet een site aanpassen die met een template-builder gemaakt is. De berichten hebben allemaal een kader met ronde hoeken. Nu wil ik m'n sidebar ook een kader met ronde hoeken geven maar ik weet niet precies hoe ik het moet doen. Ik heb de code gevonden en het kader zit er om heen. Nu alleen de hoeken nog afronden.

Wie kan me helpen?

.art-Block
{
   position:relative;
   z-index:0;
   margin:0 auto;
   min-width:15px;
   min-height:15px;
   border-color: #ffffff;
   border-style: solid;
   border-width: 4px;
}

Ronde hoekjes aan m'n kader
31 oktober 2011 - 09:38    reactie #1
geplaatst door: moxie
voor safari en firefox kun je dit in je css erbij zetten:

-webkit-border-radius: 5px;
-moz-border-radius: 5px;

maar als je ook ronde hoeken wilt in IE dan zul je daarvoor een javascript moeten gebruiken
curvycormers.js is een eenvoudig te gebruiken script

Ronde hoekjes aan m'n kader
31 oktober 2011 - 10:44    reactie #2
geplaatst door: Duke
Dank je moxie, ik heb nu inderdaad ronde hoekjes in firefox en safari.
Van java heb ik geen verstand. Ik heb die twee files in m'n root gezet en dit in m'n header.php (ik gebruik wp) :
<script type="text/JavaScript" src="curvycorners.js"></script>

<DIV id=".art-Block"></DIV>
<script type="text/JavaScript">
 window.onload = function() {
   var settings = {
     tl: { radius: 20 },
     tr: { radius: 20 },
     bl: { radius: 20 },
     br: { radius: 20 },
     antiAlias: true
   }

   var divObj = document.getElementById(".art-Block");
   curvyCorners(settings, divObj);

   // or, equivalently:
   curvyCorners(settings, '#.art-Block');
 }

</script>

Dat doet echter niets. Kun je me vertellen wat ik verkeerd doe?

(Bewerkt door Duke om 10:45, 31-10-2011)

Ronde hoekjes aan m'n kader
31 oktober 2011 - 20:10    reactie #3
geplaatst door: moxie
DIV id=".art-Block"

je hebt art-block gedefinieerd als class, dus deze kun je niet oproepen als div id

onderstaande code zou moeten werken:

< div class="art-Block"></div>
< script type="text/JavaScript">
window.onload = function() {
  var settings = {
    tl: { radius: 20 },
    tr: { radius: 20 },
    bl: { radius: 20 },
    br: { radius: 20 },
    antiAlias: true
  }

 
  curvyCorners(settings, '.art-Block');
}

</script>

waarbij je

< div class="art-Block"></div>
plaatst in je site waar je de kaders wilt gebruiken, dus niet in je head bij je javascript

(Bewerkt door moxie om 20:11, 31-10-2011)