?
Solved

CSS divs with rounded corner images as background

Posted on 2011-05-04
6
Medium Priority
?
421 Views
Last Modified: 2012-05-11
I'm trying to create a box with rounded corners and content inside.  I have to use background images (trust me, I would rather use CSS constructs only) per the client.

I have attached my CSS and <div> code.  I end up with a space between the content div and the bottom div, but can't figure out why.  Help!!
CSS:

.page_edit_properties_nav_top
{
	background-image: url('/images/gray_border_top.jpg');
	background-repeat: no-repeat;
	width: 754px;
	height: 5px;
}


.page_edit_properties_nav_bottom
{
	background-image: url('/images/gray_border_bottom.jpg');
	background-repeat: no-repeat;
	width: 754px;
	height: 5px;
}

.page_edit_properties_nav_content
{
	background-image: url('/images/gray_border_content.jpg');
	background-repeat: repeat-y;
	position: relative;
	top: 20px;
}


HTML:

<div class="page_edit_properties_nav_top"></div>
<div class="page_edit_properties_nav_content">This is a test...<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p></div>
<div class="page_edit_properties_nav_bottom"></div>

Open in new window

0
Comment
Question by:quipuha
  • 3
  • 2
6 Comments
 

Author Comment

by:quipuha
ID: 35692700
Oops.  I realized my CSS included some code I was testing.  Here is the updated code:

.page_edit_properties_nav_top
{
      background-image: url('/images/gray_border_top.jpg');
      background-repeat: no-repeat;
      width: 754px;
      height: 5px;
}


.page_edit_properties_nav_bottom
{
      background-image: url('/images/gray_border_bottom.jpg');
      background-repeat: no-repeat;
      width: 754px;
      height: 5px;
}

.page_edit_properties_nav_content
{
      background-image: url('/images/gray_border_content.jpg');
      background-repeat: repeat-y;
}
0
 
LVL 13

Expert Comment

by:jonahzona
ID: 35692717
It is because of the default margin on the P element.

Add this to your CSS.

p {
  margin: 10px 0 0 0;
}

Open in new window


Could you also post the images so we could make this more precise? I am trying to figure out why you have the top: 20px property on the content div, might make more sense with the images.
0
 
LVL 6

Accepted Solution

by:
bartvd earned 1000 total points
ID: 35692761
I only get this problem with your test code, but not with the updated code. It is because of the content of the content div.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:quipuha
ID: 35692809
You're right bartvd... as soon as I put in actual content, it worked fine... odd!!

thanks for taking a look at this!
0
 
LVL 13

Assisted Solution

by:jonahzona
jonahzona earned 1000 total points
ID: 35692832
@guipuha - it was because of the margins of the p element. By default they have a margin of 10px 0, so 10px on top and bottom. That lower margin was pushing down the div beneath.

FYI, all P elements have this margin setting unless you change it in the CSS.
0
 

Author Comment

by:quipuha
ID: 35692844
Good point, thanks jonahzona!
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses
Course of the Month16 days, 13 hours left to enroll

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question