Archived

This topic is now archived and is closed to further replies.

  • 0

Resolved multiple box sets, individual borders?


Question

Posted · Report post

Currently I have three box sets on the home page of a site I'm building. I am trying to create a border around all sets but I'm not getting the ID/Class right because it keeps putting a border around each individual box set. you can see the page here: http://prodigeemarketing.com/

This is the code that I'm using:


body.page-id-19 #boxes .content {border-left: 2px solid #252C46; border-right: 2px solid #252C46;}

body.page-id-19 #boxes .content {border-top: 2px solid #252C46; }

body.page-id-19 #boxes .content {border-bottom: 2px solid #252C46; }

I need the border-top to only be on the very top box set and the border-bottom to only be on the very bottom box set.

Any help is really appreciated!

Share this post


Link to post
Share on other sites

5 answers to this question

Posted · Report post

You can try with


.grid-element, .media_overview {

border: 2px solid #252C46;}

But I´m not sure :)

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks all for the help. Unfortunately, the suggested methods didn't accomplish what I was looking for. However, I have now decided to go with other options that were accomplished quicker.

It'd be great to get an answer on this in the future, but for now we can close this question.

Thanks,

Steve

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites

Posted · Report post

Hello Steves

Well, I love CSS so I'll try to help you! :)

Look at the picture, that is what you want?

modelo-de-pagina-com-css-customizado.png

I did this using the "Inspect element in Chrome."

Look now, as was done this test:

modelo-de-pagina-com-css-customizado2.png

--

I tried to modify the following selectors:

#dynamic-content .outline{

border: 2px solid #252C46;

padding: 10px 0px;

width: 78%;

display: block;

position: relative;

margin: 0 10%;

box-shadow: inset 0 0 6px #000;

}

I confess that it can present itself in different set of browsers such as IE and FF!

You may need to add something to the box, such as: "#boxes".

Worth a try!

I hope I helped! :)

Share this post


Link to post
Share on other sites

Posted · Report post

Please let us know if you tried either of the suggestions above and what the results were :)

Share this post


Link to post
Share on other sites