Jump to content


Photo
- - - - -

Border around content, but not each individual section

Border Custom CSS

Best Answer Danny , 19 November 2013 - 09:41 AM

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;
}
Go to the full post


  • Please log in to reply
9 replies to this topic

#1 WPPotato

WPPotato

    Newbie

  • Members
  • Pip
  • 4 posts
  • Country: Country Flag

Posted 15 November 2013 - 06:13 PM

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

  • Tibag3wv likes this

#2 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 15 November 2013 - 06:48 PM

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


  • Tibag3wv likes this

#3 Wizard

Wizard

    Member

  • Members

  • 12 posts
  • Framework Version:latest
  • Country: Country Flag

Posted 15 November 2013 - 09:34 PM

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


  • Tibag3wv likes this

#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 15848 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 17 November 2013 - 10:22 AM

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;
}

  • Tibag3wv likes this

#5 WPPotato

WPPotato

    Newbie

  • Members
  • Pip
  • 4 posts
  • Country: Country Flag

Posted 18 November 2013 - 05:51 PM

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.


  • Tibag3wv likes this

#6 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 18 November 2013 - 05:59 PM

let us know how it goes 



#7 WPPotato

WPPotato

    Newbie

  • Members
  • Pip
  • 4 posts
  • Country: Country Flag

Posted 18 November 2013 - 07:43 PM

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.



#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 15848 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 19 November 2013 - 09:41 AM   Best Answer

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;
}


#9 WPPotato

WPPotato

    Newbie

  • Members
  • Pip
  • 4 posts
  • Country: Country Flag

Posted 20 November 2013 - 05:28 PM

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



#10 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 20 November 2013 - 05:43 PM

Thanks for letting us know 







Also tagged with one or more of these keywords: Border, Custom CSS