• 0

Border around content, but not each individual section


Question

Posted · Report post

Hi, I am trying to put a border around the site I am working on ( http://nerdzforhire.com/basa4/ ) I want the border to go around the lighter colored section (the content area) but when I use this custom CSS:

 

.content {
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border: 2px solid blue;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);}
 
it puts individual borders around each section of the page (header, nav, main body, footer, etc..) and I just want one box around the whole thing. Any one know how I would accomplish this? Thanks in advance for any help. 
 
-Sean
1 person likes this

Share this post


Link to post
Share on other sites

9 answers to this question

  • 0

Posted · Report post

If I understand what you mean, try the replacing the simple-nav snippet of code with this:

 

.section-simple_nav .content {
border-top: 2px solid #00F;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

can you sketch a mockup of how you want this to look please and i can suggest a change to yoru code ? 

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Try using an ID instead of a class.

 

ex:

 

#content { blah } 

 

vs

 

.content {blah}

 

ID's are specific to the element which is marked with the same ID

Classes will cascade to all the elements within the <div>/etc

 

So it sounds to me like your class attributes are cascading down to everyhting within the page.. instead of just being tied to the one specific element you want to edit

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi,

 

The reason as to why it is adding borders around every section is due to every section using the .content class.

 

So what you can do is try the following:

 

section[id] .content {
border-left: 2px solid #00F;
border-right: 2px solid #00F;
}

.section-branding .content {
border-top: 2px solid #00F;
}

.section-simple_nav .content {
border-bottom: 2px solid #00F;
}
1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi all, sorry I took so long to reply, I was away from my computer till now. I will try what you have suggested and let you know how it works out. Thanks for all the help.

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

let us know how it goes 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi, So I tried Danny's Method and it worked, Thanks! I do have one more question though, in that snippet of code; the bottom of the frame is under the simple nav, if I wanted the bottom of the frame to be above the simple nav how would I rework the code? I tried changing the border-bottom to border-top in the simple-nav section but the sides still go all the way down to the bottom of simple nav. Thanks again for the help, I am kind of rusty at css.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for all your help, I really appreciate it. I think I got it from here.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for letting us know 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now