Round corners problem! [Archive] - Dynamic Drive Forums

C-arvalho

09-19-2009, 03:11 PM

Hi all, i have a doubt, im making a site to a costumer, but im having some troubles creating it the way i imagined it, and now im really thinking its impossible, so im coming here like in a last resource.

the problem is the folwing i am using the CSS slideshow from here:
http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm
(that its great by the way)

and what i have is this:
http://img401.imageshack.us/img401/4869/exemplot.th.jpg (http://img401.imageshack.us/i/exemplot.jpg/)img401.imageshack.us/i/exemplot.jpg/[/URL]

and my problem has you can see in my picture, is that in the botom of the site has round corners, and i would like that the slideshow could make that round corners so it would be nicer to the eye.

I have this done this way:
the content which the slideshow is in, is being loaded by an iframe that loades all the content from another html file. another way i tought was to make the iframe rounder, but do not know if its possible too.

resuming can i make the slideshow whit round corners at the bottom, or is any way you know that i can achive my goal?

Regards.

C-arvalho

09-20-2009, 04:47 PM

This is from the index file:

</head>
<body class="back">
<div id="centeredcontent">
<div id="layer1">
<div id="layer5">
<iframe id="iframe1" name="iframe1" src="home.html" frameborder="0" scrolling="no" height="479" width="610"></iframe>
</div>
<img src="backtext.png" alt="" height="512" width="631" border="0" />
<div id="layer3">
<img src="logo.png" alt="" height="149" width="162" border="0" /></div>
</div>
<div id="layer2">
<div id="layer6">
<a href="some.htmlfile" target="iframe1"><img src="cont.png" alt="" height="53" width="179" border="0" /></a></div>
<img src="back.png" alt="" height="475" width="179" border="0" />
<div id="layer4">
<a href="home.html" target="iframe1"><img src="avisit.png" alt="" height="53" width="179" border="0" /></a></div>
</div>
<p></p></div>
</body>
</html>

and this is from the file that is loaded in the iframe of index, this one is the one that has the slideshow:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>home</title>
<meta name="Generator" content="Cocoa HTML Writer">
<meta name="CocoaVersion" content="1038.11">
<style type="text/css">
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Verdana; background-color: #f9f9f9}
p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Verdana; background-color: #f9f9f9; min-height: 16.0px}
#layer2 { height: 150px; width: 577px; left: 23px; top: 50px; position: absolute; visibility: visible; }
#simplegallery1simplegallery1layer3 { height: 100px; width: 100px; left: 98px; top: 278px; position: absolute; visibility: visible; }
#geleria { height: 270px; width: 610px; left: 0; top: 200px; position: absolute; visibility: visible; }
</style>
</head>
<body>
<table width="600" border="0" cellspacing="0" cellpadding="0" height="480">
<tr>
<td>
<div id="layer2">

</div>
<div id="geleria"><div id="simplegallery1"></div>
</div>
</td>
</tr>
</table>
<p class="p1"></p>
</body>

<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>

<style type="text/css">

/*Make sure your page contains a valid doctype at the top*/
#simplegallery1{ //CSS for Simple Gallery Example 1
position: relative; /*keep this intact*/
visibility: hidden; /*keep this intact*/
border: 0px solid darkred;
}

#simplegallery1 .gallerydesctext{ //CSS for description DIV of Example 1 (if defined)
text-align: left;
padding: 2px 5px;
}

</style>

<script type="text/javascript" src="simplegallery.js">

</script>

<script type="text/javascript">

var mygallery=new simpleGallery({
wrapperid: "simplegallery1", //ID of main gallery container,
dimensions: [610, 268], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: [
["/hotel/1.jpg", "", "_new", "hotel .:Bar"],
["/hotel/2.jpg", "", "", "hotel .:Hall"],
["/hotel/3.jpg", "", "", "hotel .:Quartos"],
["/hotel/4.jpg", "", "", "hotel .:Vista Externa"]
],
autoplay: [true, 2500, 200], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
oninit:function(){ //event that fires when gallery has initialized/ ready to run
//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
},
onslide:function(curslide, i){ //event that fires after each slide is shown
//Keyword "this": references current gallery instance
//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
}
})

</script>

</html>

it's still a mess cause i'm just testing.