PDA

View Full Version : rounded corners...my code..


africano
08-27-2008, 05:31 PM
Here is my code(Ive modified it to fit my needs, the original code is not mine) to achieve rounded corners in my CONTENT DIV:


div#content {
margin: 40px;
width: 585px;
height: 650px;
background-image: url(index_trainerWHITE_06.gif);
background-repeat: no-repeat;
background-position: 0 100%;
}

div#content h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1em;
color: #9B0000;
background-image: url(index_trainerWHITE_03.gif);
background-repeat: no-repeat;
background-position: 100% 0;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 25px;
margin: 0;
}

div#content p {
height: 562px;
width:527px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .85em;
color: #666;
background: #e9e9e9;
border-left: 2px solid #d5d5d5;
border-right: 2px solid #d5d5d5;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 11px;
padding-top: 10px;
padding-right: 14px;
padding-bottom: 0;
padding-left: 25px;
}



</style>



</head>

<body>
<div id="content">

<h1>Project Details</h1>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy 1text ever since the 1500s,Lorem Ipsum has been the industry's standard dummy 1text ever since the 1500s,Lorem Ipsum has been the, </p>
</div>
</body>
</html>

I want now to apply this to my current layout. But it messes everything up!
My content div currently has this css:
#content {
float: right;
height: 650px;
width: 560px;
position: relative;
background-color: #000000;
}
If I change the width of the rounded corners it messes uop everything:confused:

africano
08-27-2008, 05:49 PM
I know I probably dont make any sense...here is a link:

http://www.elchevirtual.com/roundedcornerkk.html

The grey area has a width of 560, this is what my Content div measures width wise.

I want this area with the rounded corners to be my content area. I cant seem to change the heading and the bottom rounded corner to fit.

Is this an issue with margins again?
Ive tried changing varoius parameters but no success...how would I incorporate this into my layout?

domedia
08-27-2008, 07:21 PM
I had a client that needed a border around the dynamic images they would upload to their CMS, and the border needed to have rounded corners. I created 4 transparent GIF's, and used absolute positioning to place them in each border, in addition to the regular border property in CSS.
Link: http://tinyurl.com/6f5s2m

africano
08-28-2008, 04:28 PM
yeah, currently I have this rough layout: http://www.elchevirtual.com/Personaltrainer/

I want to try out rounded corners in the WHITE area in the middle part. For tests Ive made this: http://www.elchevirtual.com/roundedcornerkk.html

But It doesnt seem to work and I have no idea how to make this fit into my layout.

Basically I want the middle Content area to have rounded corners and Im having trouble trying to fix this issue.

Last question how would I go along if I decided to have rounded corners over the whole layout, the wrapper div I suppose?
Thanks

Cary
08-29-2008, 06:42 AM
You might use code something like this. Then you just need to make your background images the correct size.

<div id="content">
<div>
<h1>Project Details</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy 1text ever since the 1500s,Lorem Ipsum has been the industry's standard dummy 1text ever since the 1500s,Lorem Ipsum has been the, </p>
</div>
</div>


#content {
float: right;
position: relative;
background-color: #FFFFFF;
background-image: url(images/index_trainerWHITE_06.gif);
background-repeat: no-repeat;
background-position: left bottom;
margin: 0;
padding: 0;
}

#content div {
background-image: url(images/index_trainerWHITE_03.gif);
background-repeat: no-repeat;
background-position: left top;
height: 650px;
width: 560px;
float: left;
margin: 0;
padding: 0;
}

#content h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1em;
color: #9B0000;
padding: 10px 0 10px 25px;
margin: 0;
}

#content p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.85em;
color: #666;
border-left: 2px solid #d5d5d5;
border-right: 2px solid #d5d5d5;
margin: 0;
padding: 10px 25px 0 25px;
}

africano
08-29-2008, 05:54 PM
Domedia Im becoming desperate!! Ive seen the work youve done for the client. Ide like to have a Border/rounded corner for the middle content area of my website. Could you explain a little more in depth on how to achieve that?

domedia
08-29-2008, 06:19 PM
I can't write a full tutorial on it, sorry :-(
You should be able to go to the page and see that there is 4 empty DIV's after the iamge, and that the image and the 4 images is contained in a DIV. You basically have to use the codebase, HTML and CSS, as an example and do the same if that particular effect is what you're after (image with rounded BORDERs, not just simply rounded image.)

africano
08-30-2008, 01:57 AM
Ive found what I think is quite a good discussion/article about rounded corner with border using css and one image. Ill leave the links incase anybody wants to have a read.

Here ya go!

http://cass-hacks.com/articles/discussion/css_borders_corners/

http://cass-hacks.com/articles/example/css_borders_corners/

Implementation: http://cass-hacks.com/articles/code/css_borders_corners/

Enjoy!