Scalable rounded corner w/ variable color and blocked header

Hey,

I like the way this page has scalable content boxes, http://home.tiscali.nl/developerscorner/liquidcorners/more-rounded-corners_step2.htm   But would like to make it more attractive by using variable colors on the boxes and adding block headers for each box like on http://www.csstemplatesforfree.com/previewcsstemplate.aspx?csstemplateName=balanced while still keeping the scalability.  The problem with the "Balanced" page is that the tags are fixed widths.

I have limited skills when it comes to <div> layout and CSS so trying to hack through this might be futile, if anyone has a different example I can look at or a fix I would appreciate it.
LVL 18
Mark FranzProject ManagerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

azadisaryevCommented:
you can quiet easily do this with jquery (http://jquery.com) and mike alsup's corner plug-in (http://jquery.malsup.com/corner/) - see attached sample code.

you can style the header and content elements as you wish - backgrounds (even images), borders, etc etc.

the plug-in uses native border-radius rounding in browsers that support it (Opera 10.5+, Firefox, Safari, and Chrome). in IE it uses "div strips" method.

change paths to js scripts as necessary.

Azadi
<script src="path/to/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="path/to/jquery.corner.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("div.rounded h1").corner('top 10px');
	$("div.rounded div").corner('bottom 10px');
});
</script>


<div class="rounded" style="width:300px; padding:0;">
	<h1 style="background-color:#000; color:#FFF; margin:0; padding:10px 5px; border:2px solid #0c0; border-bottom:0;">HEADER</h1>
	<div style="margin:0; padding:5px; border:2px solid #0c0; border-top:0;">some text here</div>
</div>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Mark FranzProject ManagerAuthor Commented:
Your example errors on line 8, the call to $(document).ready(function).  I copied the .js scripts from the link you provided and placed them in a root folder along with your example, when I run it, the error, "property does not support this object or method" throws.  
<!DOCTYPE html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML lang="en">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=utf-8"></META>
<SCRIPT type="text/javascript" src="jquery.min.js"></SCRIPT>
<SCRIPT type="text/javascript" src="jquery.corner.js"></SCRIPT>
<SCRIPT type="text/javascript">
$(document).ready(function(){
	$("div.rounded h1").corner('top 10px');
	$("div.rounded div").corner('bottom 10px');
});
</SCRIPT>
</HEAD>
<BODY>
	<DIV class="rounded" style="width:300px; padding:0;"><H1 style="background-color:#000; color:#FFF; margin:0; padding:10px 5px; border:2px solid #0c0; border-bottom:0;">HEADER</H1>
		<DIV style="margin:0; padding:5px; border:2px solid #0c0; border-top:0;">	some text here
		</DIV>
	</DIV>
</BODY>
</HTML>

Open in new window

0
azadisaryevCommented:
hmm... works fine for me...

please double-check the script filenames and paths.

just to test it, change your jquery script tag to point to the one on google apis cdn:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

if your test page is web-accessible, please post its url to help you debug this further.

Azadi

0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Mark FranzProject ManagerAuthor Commented:
OK, the error was being thrown by my editor, (browser switch).  Here is the link, the box loads fine but no corners.  http://www.mgfic.com/templates/box.htm
0
azadisaryevCommented:
>> <SCRIPT type="text/javascript" src="jquery.corner.js"></SCRIPT>

the location and/or name of jquery.corner.js script is incorrect - your page returns a '404 not found' for this file.

http://www.mgfic.com/templates/jquery.corner.js does not exist
make sure you specify correct path to jquery.corner.js file in your <script> tag.

Azadi
0
azadisaryevCommented:
you also have a typo in script tag for jquery script:

<SCRIPT type="text/javascript" src=""http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></SCRIPT>

src=""http...

should be

src="http... (only one " there, not 2 like you have)

this prevents jquery script from loading.

Azadi
0
Mark FranzProject ManagerAuthor Commented:
OK, with the .js script embedded in the page it runs fine.  With the jquery.corner.js file installed as a link it fails.  This looks like a hosting issue.  But anyway, I got it running with your help.  

Thanks, this is exactly what I was looking for.
0
Mark FranzProject ManagerAuthor Commented:
The hosting companies servers are not setup to allow extended naming of files, so I had to rename them as old .js files, but the scripts run fine.  Check the source at http://www.mgfic.com/templates/box_linked.htm
0
azadisaryevCommented:
cool! happy that you sorted it out.

glad i could help :)

Azadi
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.