Jump to content


Photo
- - - - -

Best Practices for Removing Space (padding) between Boxes


  • Please log in to reply
21 replies to this topic

#1 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 25 May 2012 - 10:06 PM

Hi! I need to bring these 3 boxes together so there is no space between them:

Please Login or Register to see this Hidden Content

I have assigned a separate CSS class to each box: IE "#content-boxes .home-page-badges". So now I want to remove the space for just these 3 boxes - without affecting any other boxes.... How do I do this "correctly"? Thanks!

#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 26 May 2012 - 12:32 AM

I've looked, up, down and around - searched for every option but I can't figure this one out. The second charcoal box appears to be in the footer for some odd reason.
For what it's worth, Henry offered this:

Please Login or Register to see this Hidden Content

for the red bad... with the proviso... "maybe?"

I'm going to play my age for the moment... create a table to do the same thing as those 3 boxes. Put it inside a content box. Make each box you have now a simple table row.

The problem I see is that .content is overriding each element with 15px padding. So, we need to customize the padding for each. Your class is actually applied inside the box. We need something to tie together each and set the padding top or bottom for the individual boxes. Tough call.

Tables! Great for boxes and dinner!

#3 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 26 May 2012 - 02:56 PM

Good Morning @rangelone! Actually, all three (red - black - black) boxes are "Content Boxes" where I have assigned individual CSS classes. I then added the coloured backgrounds via CSS. I have since added some stuff in the MoreFoot area of the Page template. Bottom line is I need to set things up as shown is this mockup:

Please Login or Register to see this Hidden Content

So my challenge is really what is the most practical way to get the content to render correctly? Do I use 3 boxes (red-black-black). Or do I use 2 (red-black) by merging the content in the two bottom black areas? @hperkins (Henry): Thanks for the suggestion. I did put the code in my custom.css file - with no affect. I don't understand it enough to troubleshoot. By changing: .content-pad to have "padding-bottom & padding-top" to 0px I can get things looking like this:

Please Login or Register to see this Hidden Content

But that results in a site-wide change. So back to square one. @Simple_Mama: Any thoughts on this conundrum? Thanks you all and Happy Memorial Day weekend to those of you whop are living in the US of A.

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 26 May 2012 - 05:28 PM

By changing: .content-pad to have "padding-bottom & padding-top" to 0px I can get things looking like this:

Please Login or Register to see this Hidden Content

But that results in a site-wide change. ^ Is this .content-pad belong to a specific DIV ID? (i.e. #divid div.content-pad)

#5 Henry Perkins

Henry Perkins

    Friendly Contributor

  • Members

  • 198 posts
  • LocationAustin, TX
  • Country: Country Flag

Posted 26 May 2012 - 05:56 PM

@webwerx Each content pad is given its own individual selector even if you don't give it one in meta settings. the class for the content pad for your red box is class="container clone_2" which is parent to your assigned homepage-red. Hopefully that helps you on your way. :)

#6 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 27 May 2012 - 11:15 AM

@hperkins: This makes more sense now. I'll have to take a look with FireBug to see the Selector structure. I'd like to be able to figure this stuff out myself. I'll report back on whether your suggestion worked. @catrina: No it does not. That is my issue..... Finding the correct Selector.

#7 Danny

Danny

    Is Awesome!

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

Posted 27 May 2012 - 11:33 AM

Hi WebWerx, Do you need further assistance ?

#8 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 27 May 2012 - 05:28 PM

Hey @Danny: I guess the folks in the UK don't take weekends off! I did try @hperkin 's fix. Sadly it did not have any effect. This is maddening... and confusing too.... I can take care of the spacing for the 2 black boxes by merging their content into 1. But this still leaves me with the space between red & black boxes which needs to be removed. I am tempted to try @rangelone 's suggestion of using tables. But I really am adverse to using to tables in Wordpress. Plus that would put me in the same age group as my chef friend -- ;-) @simple_mama: Can you have a look?

#9 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 27 May 2012 - 05:39 PM

I'm looking at it and since that .content-pad doesn't belong to any DIV ID, I was thinking maybe to create the illusion of removing spacing, you can use a negative value in the margin-left attribute for moving the box. This isn't the most robust/elegant solution, however. I can't think of any other solution (besides tables, which is kind of a lame solution).

#10 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 27 May 2012 - 06:43 PM

Hi @catrina!: I don't get it. Adding a negative value for margin-left will only move the box to the left. Am I misunderstanding? I have tried every permeation possible in FireBug. Funny thing is when I do just that the box does move to the left.

Please Login or Register to see this Hidden Content

But why won't it move up or down? GRRRRRRRRRR

#11 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 27 May 2012 - 10:07 PM

To paraphrase Shakespeare, who wasn't my contemporary or classmate in secondary school - for the record:

"Age cannot wither [us], nor custom stale [our] infinite variety;"

Lest we forget, you are my age! Our British colleagues aren't the only ones working weekends. They just wake up earlier than we do.

Okay, this isn't quite the solution you want but it's closer.

In Dashboard > PageLines > Templates > Morefoot place both Boxes and Morefoot sidebars with Boxes taking top position. Inside the Morefoot, you'll have to add multiple text boxes.

In Custom Code > CSS Rules, add and modify the colors in this:

Please Login or Register to see this Hidden Content

Admittedly, it causes the boxes anywhere else to be the same color. And it makes the color go site-wide. BUT, it did get rid of the white space. One small accomplishment.

I must admit you've stumped not only me, but it seems my colleagues with this one, though it appears something we should work on - a means of easily providing the background color of a section and on a particular page. I'm going to put that in my weekly report. I know that doesn't do you much good right now and humbly apologize for it. I suppose I'll have to bake a pie of crow.

#12 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 27 May 2012 - 10:38 PM

@rangelone: You are older -- that aside.... I'll give this fix a whirl tomorrow. I have been banging my noggin against the old CSS wall all afternoon. And any attempt at meaningful engagement between me & our website ain't going to happen this evening!

I do appreciate your loyalty to the company (and all that....). I too have some (misguided?) loyalty to my brand also. Sunday is coming to a close and a glass of Liberty School awaits!

Thanks you kindly for attentiveness to this CSS dilemma of mine.

#13 Danny

Danny

    Is Awesome!

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

Posted 28 May 2012 - 11:12 AM

Hi, Is this issue now resolved ?

#14 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 28 May 2012 - 02:40 PM

@Danny: Nope!

#15 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 28 May 2012 - 08:28 PM

I'm getting this message: [url=""Unable to locate the main framework files! Make sure the parent theme folder is named correctly.""]"Unable to locate the main framework files! Make sure the parent theme folder is named correctly."[/url]
I'm presuming you're fiddling again!

#16 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 28 May 2012 - 10:08 PM

@rangelone: Me and Nero... It's okay now. I was editing my style.css with the new version of Coda and POOF! GONZO. Just like that. "Honest officer, it was the other guy.". This is when I love WPENGINE! It's back up my friend. You will see that I pulled the 2 black section into one. So now it is only the space between the black & red boxes. You guys should get "danger pay" when you have to work with me!

#17 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 29 May 2012 - 02:49 AM

Hm, that space between the black and red boxes is a mystery to me. I still advise against using tables, but it's the only solution I can think of (...but still, don't use them).

#18 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 29 May 2012 - 02:17 PM

@catrina & @rangelone: It seems to be a mystery to everyone! So to recap (as this thread has gotten very long).... My initial requirement was to reduce the space between content boxes. I have partially solved my problem by bringing 2 black boxes into one. Reducing the top or bottom padding will bring the boxes (almost) together. But the change would be sitewide and we don't want that. @rangelone submitted this suggestion: ".container.clone_2.section-contentbox.fix {padding-bottom:0px !important; }". But it does not work. Me thinks that this issue is really about an inadequacy in the core Framework. So... what about putting the whole shebang in one box? Is there a way to place a red strip (as I have in one box) at the top of a box, followed by the black below? I think maybe. But the CSS is beyond me. @catrina: I agree (again) about not using tables. It'll make a mess of things somewhere. Tables in Wordpress are equivalent to IE6 anywhere (in my books).

#19 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 29 May 2012 - 04:26 PM

Try using this (as long as I understand what you're trying to do):

Please Login or Register to see this Hidden Content


  • Jason M likes this

#20 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 29 May 2012 - 05:29 PM

@simple_mama: Finally someone who understands me!:

Please Login or Register to see this Hidden Content