 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
phibs14
Joined: 09 Oct 2009
Posts: 15
|
 Posted: Sat Oct 10, 2009 5:10 am CSS rounded corners, - help pls! |
 |
|
|
I have the following code to produce rounded corners but not much is happening.
the four files used are attached here:
   
thanks to sticks464
found a link to this from his site:
images used can be found here http://virtuelvis.com/gallery/css/rounded/
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
toptitle.rounded:before {
background: transparent url(top-right.png) scroll no-repeat top right;
margin-bottom: -20px;
height: 30px;
display: block;
border: none;
content: url(top-left.png);
padding: 0;
line-height: 0.1;
font-size: 1px;
}
toptitle.rounded:after {
display: block;
line-height: 0.1;
font-size: 1px;
content: url(bottom-left.png);
margin: 0 0 -1px 0;
height: 30px;
background: white;
background: transparent url(bottom-right.png) scroll no-repeat bottom right ;
padding: 0;
}
</style>
</head>
<body>
<div id="toptitle">
<p style="line-height: 150%; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; padding-top: 0px; margin-top: 0px; color: rgb(51, 51, 51);"><span style="line-height: 150%;"><span style="font-family: Baskerville; font-size: 36px;"><span style="font-weight: normal;">A</span></span></span><span style="font-family: Baskerville; font-size: 24px; line-height: 150%;"><span style="font-weight: normal;">bout</span></span>
</p>
</div>
</body> |
[img][/img][img][/img] |
|
sticks464
Joined: 31 Dec 2006
Posts: 2311
|
| Posted: Sat Oct 10, 2009 6:33 am |
|
|
|
I use this one.
No images, one javascript file and you control which block content gets corners and what size.
Usually the rounded corners using images doesn't work if the file path to the images is incorrect. |
|
phibs14
Joined: 09 Oct 2009
Posts: 15
|
| Posted: Mon Oct 12, 2009 6:37 am |
|
|
|
thanks - much appreciated.  |
|
phibs14
Joined: 09 Oct 2009
Posts: 15
|
| Posted: Sat Oct 17, 2009 11:38 am |
|
|
|
seams easy enough but v hard to get to work,, plus know where to put the code,
using the code you helped me out with on the borders there is no man div to apply this code too..
does that make sense..
have the code below and have added and changed src acordingly but with no luck.
the instructions say to add the following div
<div id="myDiv"></div>
Not sure where to put this - I put it around my content in the main page but with no luck.
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
background:#494949;
line-height:1.5;
color: rgb(51, 51, 51);
font-family:Baskerville, Arial, Helvetica, sans-serif;
font-size:16px;
}
h3 {
font-size:120%;
}
#apples
{
background:white;
width:93%;
padding:20px;
border:0px solid gray;
margin:10px auto;
}
#apples p {margin-bottom:10px;}
#apples p.line {
color: rgb(233, 153, 57);
text-align:center;
}
#apples p.instruct {
margin-top:30px;
}
</style>
<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("myDiv");
curvyCorners(settings, divObj);
}
</script>
<script type="text/JavaScript" src=""file:///Users/timcarey/Desktop/My Website/curvycorners.js">
</script>
</head>
|
| Code: |
<div id="myDiv">
<div id="apples">
<p><img style="border:1px solid #545565; margin: 20px;" src="file:///Users/timcarey/Desktop/My Website/Images/me.davoshalfpipe.jpg" align="right" width="" height="35%" alt="Me in the Davos half pipe" /></p>
<h3>Qualifications:</h3>
<p>BASI Level 2 Snowboard Instructor <br />
(BASI Teacher & Techincal Modules)<br />
BSA Level 1 Surf Coach</p>
<h3>Experience:</h3>
<span style="font-family: Baskerville; font-size: 16px;">9 seasons of snowboarding coaching</span>
<span style="font-family: Baskerville; font-size: 16px;">(USA, Canada, Switzerland to name a few)</span>
<span style="font-family: Baskerville; font-size: 16px;">
<br />
2 summer seasons surfing.</span>
<p><span class="Apple-style-span" style="font-family: Baskerville; font-size: 16px;"><br class="webkit-block-placeholder" />
</span></p>
<p><span class="Apple-style-span" style="font-family: Baskerville; font-size: 16px;"><br class="webkit-block-placeholder" />
</span></p>
<p class="instruct">I started out my coaching back in 1997, as an assistant instructor in my martial arts <a href="http://www.choikwangdo.com/" target="_blank">Choi-Kwang-Do</a>, while studying at school.</p>
<p>Four years later I started snowboarding and just over a year later and after a month in Whistler Canada was coaching at the local dry slope.</p>
<p>Surfing wise, I first stepped on a surfboard during the summer of 2005 whilst working in Fuerteventura teaching windsurfing. Living in Corralejo for 8 months and 30 seconds drive from the North track, every spare minute was spent on a surf board - no thanks to my room mate!</p>
<p>Check out my <a href="~PAGEID~131F9AD61CF844AE8218">blog</a> for updates and news of my current whereabouts and work locations</p>
<pclass="line">_____________________________________________________
</pclass="line"></div>
</div>
|
|
|
sticks464
Joined: 31 Dec 2006
Posts: 2311
|
| Posted: Sat Oct 17, 2009 8:26 pm |
|
|
|
Use this script for the corners. The call to the javascript file must come first.
You do not have to use a myBox div, that is just what is used for an example. But you do have to use the name of the div you want rounded and it must be shown as an id (#) or a class (.)
| Code: |
<script type="text/JavaScript" src=""file:///Users/timcarey/Desktop/My Website/curvycorners.js">
<script type="text/JavaScript">
addEvent(window, 'load', initCorners);
function initCorners() {
var settings = {
tl: { radius: 20 },
tr: { radius: 20 },
bl: { radius: 20 },
br: { radius: 20 },
antiAlias: true
}
curvyCorners(settings, "#apples");
}
</script> |
Delete <div id="myDiv"> and the ending tag </div>
This works in IE7 and 8, FF, Safari, Chrome.
Here's a css style that is needed for a bug in Opera v10.
| Code: |
| h3, #apples p, #apples p.instruct, #apples p.line {background:#fff;}/* needed for Opera v10 */ |
|
|
phibs14
Joined: 09 Oct 2009
Posts: 15
|
| Posted: Sun Oct 18, 2009 2:00 am |
|
|
|
Ok, now I'm getting frutrated ,.,,, lol.
Can you have a quick check pls sticks. It's all in order but no luck..! cheers
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/JavaScript" src=""file:///Users/timcarey/Desktop/My Website/curvycorners.js">
<script type="text/JavaScript">
addEvent(window, 'load', initCorners);
function initCorners() {
var settings = {
tl: { radius: 20 },
tr: { radius: 20 },
bl: { radius: 20 },
br: { radius: 20 },
antiAlias: true
}
curvyCorners(settings, "#apples");
}
</script>
<script type="text/JavaScript" src=""file:///Users/timcarey/Desktop/My Website/curvycorners.js">
</script>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
background:#494949;
line-height:1.5;
color: rgb(51, 51, 51);
font-family:Baskerville, Arial, Helvetica, sans-serif;
font-size:16px;
}
h3 {
font-size:120%;
}
#apples
{
background:white;
width:93%;
padding:20px;
border:0px solid gray;
margin:10px auto;
}
#apples p {margin-bottom:10px;}
#apples p.line {
color: rgb(233, 153, 57);
text-align:center;
}
#apples p.instruct {
margin-top:30px;
}
</head>
<body>
<div id="apples">
<p><img style="border:1px solid #545565; margin: 20px;" src="file:///Users/timcarey/Desktop/My Website/Images/me.davoshalfpipe.jpg" align="right" width="" height="35%" alt="Me in the Davos half pipe" /></p>
<h3>Qualifications:</h3>
<p>BASI Level 2 Snowboard Instructor <br />
(BASI Teacher & Techincal Modules)<br />
BSA Level 1 Surf Coach</p>
<h3>Experience:</h3>
<span style="font-family: Baskerville; font-size: 16px;">9 seasons of snowboarding coaching</span>
<span style="font-family: Baskerville; font-size: 16px;">(USA, Canada, Switzerland to name a few)</span>
<span style="font-family: Baskerville; font-size: 16px;">
<br />
2 summer seasons surfing.</span>
<p><span class="Apple-style-span" style="font-family: Baskerville; font-size: 16px;"><br class="webkit-block-placeholder" />
</span></p>
<p><span class="Apple-style-span" style="font-family: Baskerville; font-size: 16px;"><br class="webkit-block-placeholder" />
</span></p>
<p class="instruct">I started out my coaching back in 1997, as an assistant instructor in my martial arts <a href="http://www.choikwangdo.com/" target="_blank">Choi-Kwang-Do</a>, while studying at school.</p>
<p>Four years later I started snowboarding and just over a year later and after a month in Whistler Canada was coaching at the local dry slope.</p>
<p>Surfing wise, I first stepped on a surfboard during the summer of 2005 whilst working in Fuerteventura teaching windsurfing. Living in Corralejo for 8 months and 30 seconds drive from the North track, every spare minute was spent on a surf board - no thanks to my room mate!</p>
<p>Check out my <a href="~PAGEID~131F9AD61CF844AE8218">blog</a> for updates and news of my current whereabouts and work locations</p>
<pclass="line">_____________________________________________________
</pclass="line"></div>
</body>
</html>
|
|
|
sticks464
Joined: 31 Dec 2006
Posts: 2311
|
| Posted: Sun Oct 18, 2009 6:26 am |
|
|
|
This code will not work with the curveycorners.js file. You mus use the curvycorners.src.js file.
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/JavaScript" src="file:///Users/timcarey/Desktop/My Website/curvycorners.src.js"></script>
<script type="text/JavaScript">
addEvent(window, 'load', initCorners);
function initCorners() {
var settings = {
tl: { radius: 20 },
tr: { radius: 20 },
bl: { radius: 20 },
br: { radius: 20 },
antiAlias: true
}
curvyCorners(settings, "#apples");
}
</script>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
background:#494949;
line-height:1.5;
color: rgb(51, 51, 51);
font-family:Baskerville, Arial, Helvetica, sans-serif;
font-size:16px;
}
h3 {
font-size:120%;
}
#apples
{
background:white;
width:93%;
padding:20px;
border:0px solid gray;
margin:10px auto;
}
#apples p {margin-bottom:10px;}
#apples p.line {
color: rgb(233, 153, 57);
text-align:center;
}
#apples p.instruct {
margin-top:30px;
}
h3, #apples p, #apples p.instruct, #apples p.line {background:#fff;}/* needed for Opera v10 */
</style>
</head>
<body>
<div id="apples">
<p><img style="border:1px solid #545565; margin: 20px;" src="file:///Users/timcarey/Desktop/My Website/Images/me.davoshalfpipe.jpg" align="right" width="" height="35%" alt="Me in the Davos half pipe" /></p>
<h3>Qualifications:</h3>
<p>BASI Level 2 Snowboard Instructor <br />
(BASI Teacher & Techincal Modules)<br />
BSA Level 1 Surf Coach</p>
<h3>Experience:</h3>
<p>9 seasons of snowboarding coaching (USA, Canada, Switzerland to name a few)
<br />
2 summer seasons surfing.</p>
<p><span class="Apple-style-span" style="font-family: Baskerville; font-size: 16px;"><br class="webkit-block-placeholder" />
</span></p>
<p><span class="Apple-style-span" style="font-family: Baskerville; font-size: 16px;"><br class="webkit-block-placeholder" />
</span></p>
<p class="instruct">I started out my coaching back in 1997, as an assistant instructor in my martial arts <a href="http://www.choikwangdo.com/">Choi-Kwang-Do</a>, while studying at school.</p>
<p>Four years later I started snowboarding and just over a year later and after a month in Whistler Canada was coaching at the local dry slope.</p>
<p>Surfing wise, I first stepped on a surfboard during the summer of 2005 whilst working in Fuerteventura teaching windsurfing. Living in Corralejo for 8 months and 30 seconds drive from the North track, every spare minute was spent on a surf board - no thanks to my room mate!</p>
<p>Check out my <a href="~PAGEID~131F9AD61CF844AE8218">blog</a> for updates and news of my current whereabouts and work locations</p>
<p class="line">_____________________________________________________
</div>
</body>
</html> |
|
|
phibs14
Joined: 09 Oct 2009
Posts: 15
|
| Posted: Sun Oct 18, 2009 9:20 am |
|
|
|
Ah ok, I see.
Thanks sticks. Gd stuff. |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
