Archived

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

  • 0

Empty space between sections

Question

Posted · Report post

1. I've tried the content code and also a specific code for the sections to mini the big gap....  see my picture!

 

2. I also want to know if I can set up the boxsets manually on the content page?

 

I've a deadline on saturday. Then everything must be done.

 

 


 

Share this post


Link to post
Share on other sites

17 answers to this question

Posted · Report post

OK, can you send me a PM please, containing admin username and password, as well as link to your site and I will take a look.

 

However, my shift ends at 2:00pm GMT, so if you send it around about this time or later, I will look at your site tomorrow and hopefully point you in the right direction.

Thanks for the help even if you only looked.

 

I was figurin out that a Plugin for a Store map was a problem and also this code I hade to change.

section.copy {
    margin: 0.5em 0;
}

And I'll be needing some new map but that is a later problem...

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

I am well aware you're using the grid but you have also add this to the grid:

 

<div class="fbox_1">

 

Although this is a PageLines Box class, it really shouldn't be used inside a grid layout, as they do similar jobs.

 

The <p></p> is not related to PageLines and is actually a Wordpress editor problem. Wordpress has a habit of adding linebreaks, to resolve the issue, simply remove the line breaks in your code or use the PageLines raw shortcode. Simply wrap it around your code and it will automatically stop Wordpress from doing this line break.

[pl_raw]

You code

[/pl_raw]
Please bear in mind that this shortcode can be only be used once per page.

 

<div class="fbox_1"> is only a css stylesheet as;

 

{ background-color: #e9e9e9;
    border: 3px solid #3e5583;
    padding:3%;
    -webkit-box-shadow: #757575 3px 3px 3px;
    -moz-box-shadow: #757575 3px 3px 3px; 
    box-shadow: #757575 3px 3px 3px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    display:block;
    margin:auto;
    width:95%;
    margin-top:0;
    text-align:center;
}

And the code

 

[pl_raw]

You code

[/pl_raw]

didn't work here

 

 

post-44899-0-86131400-1360704682_thumb.p

Share this post


Link to post
Share on other sites

Posted · Report post

Hi, the fbox_1 element is CSS found in PageLines default code.  It is used in our boxes.  If you create a new class using the same class used by our Boxes, you will get a conflict and one of the two classes will fail.

 

If you want to use custom classes in the grid, that's fine, but please use unique terms, but make sure they're truly unique. The term fbox is used by PageLines and should not be used as a custom class. Just rename it to f-box_1 and change your custom code to match.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

It looks like the one of the sections is adding a rather large volume of padding or margin space there. Have you used Firebug or Chrome's Inspection Tool to find other elements that may be causing the issue?

Share this post


Link to post
Share on other sites

Posted · Report post

Hi, the fbox_1 element is CSS found in PageLines default code.  It is used in our boxes.  If you create a new class using the same class used by our Boxes, you will get a conflict and one of the two classes will fail.

 

If you want to use custom classes in the grid, that's fine, but please use unique terms, but make sure they're truly unique. The term fbox is used by PageLines and should not be used as a custom class. Just rename it to f-box_1 and change your custom code to match.

is this code also a conflict then I can't style my boxes???

//Tillskott//
#fbox_2601 { background-color: #FFFFFF;
    border: 3px solid #97151E;
    padding:5%;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-box-shadow: #757575 3px 3px 3px;
    -moz-box-shadow: #757575 3px 3px 3px; 
    box-shadow: #757575 3px 3px 3px;
    display:block;
    margin:auto;
    width:90%;
    margin-top:2%; }

Share this post


Link to post
Share on other sites

Posted · Report post

I am not sure why you're using the fbox name, you can use whatever word you like, for example,

 

.omgwtfbbq { you CSS here ;}

 

Also the attached image above isn't the one you originally had. So I am now confused as to what your issue is. Can you provide a link to the site in question and explain us what issue you're having.

 

As the original attached image displayed a gap between two sections but this image has now been removed for some reason and the one attached now, is of text and a few tabs ?

Share this post


Link to post
Share on other sites

Posted · Report post

No problem, happy to help and thanks for sharing the snippet that resolve your issue.

Share this post


Link to post
Share on other sites

Posted · Report post

I am not sure why you're using the fbox name, you can use whatever word you like, for example,

 

.omgwtfbbq { you CSS here ;}

 

Also the attached image above isn't the one you originally had. So I am now confused as to what your issue is. Can you provide a link to the site in question and explain us what issue you're having.

 

As the original attached image displayed a gap between two sections but this image has now been removed for some reason and the one attached now, is of text and a few tabs ?

I can't show you the page because is not for show yet but I can create a login for you. Im sorry for the image I wanted to show that its on other pages also....

 

:nurse:

 

But I've to use the fbox if I need to style boxes?

Share this post


Link to post
Share on other sites

Posted · Report post

I have to say I am very confused now lol

 

OK, all sections have padding under the content-pad class, you will need to target these section(s) and reduce the padding or remove it completely with padding:0px;

 

Now as for the image attached, inspect using Firebug or your browsers built-in web dev tools and see where that extra space at the bottom is coming from, it may be related to min-height property or something else.

 

Inspecting the site using the web dev tool is what you need to do, find out where the extra space is coming from be it padding, a few lone <p></p> tags etc...

Share this post


Link to post
Share on other sites

Posted · Report post

I have to say I am very confused now lol

 

OK, all sections have padding under the content-pad class, you will need to target these section(s) and reduce the padding or remove it completely with padding:0px;

 

Now as for the image attached, inspect using Firebug or your browsers built-in web dev tools and see where that extra space at the bottom is coming from, it may be related to min-height property or something else.

 

Inspecting the site using the web dev tool is what you need to do, find out where the extra space is coming from be it padding, a few lone <p></p> tags etc...

Confusing YES LOL Im on it... Post here when I've solved it....

Share this post


Link to post
Share on other sites

Posted · Report post

OK, keep us posted.

Share this post


Link to post
Share on other sites

Posted · Report post

Firebug shows in the biggest frame

 

<section class="container no_clone section-contentbox fix" id="contentbox"><div class="texture"><div class="content"><div class="content-pad"><div class="hentry cb-standard"><div class="hentry-pad cb-standard-pad entry_content"><div class="row">
    <div class="span6">
<div class="fbox_4">
<h1>Ta reda på skillnaden</h1>
Här kan du välja mellan näringsrika <b>foder till häst</b>. Saracens <b>hästfoder</b> bjuder på ett brett utbud, välj efter din hästs behov. Kvalitativa <b>vitaminer</b> och <b>mineraler</b> är en självklarhet. Här hittar du också <b>tillskott till häst</b>, bra <b>örter</b> och olika resultatinriktade örtblandingar.
<p>Vill du ha hjälp att <b>räkna ut foderstat</b>?<br> Vi erbjuder kostnadsfri rådgivning.</p>
<p align="center">Ladda ner vår folder i <img src="http://www.saracen.se/wp-content/uploads/2013/02/pdf_icon.png"> format - Senaste forskningen - Beställ Nyhetsbrev</p>
</div>
 </div>
<div class="span3">
<div class="fbox_1">
<h3><span style="color: #3e5583;">Forskning och vetenskap</span></h3>
<img src="http://www.saracen.se/wp-content/uploads/2013/02/KERcmykR.png"><br>
<span style="color: #3e5583;">Vår samarbetspartner</span><br>
KER är en världens ledande forskningscenter i USA på hästfoder och fysiologi.<br>
<a href="http://www.youtube.com/watch?v=gFT6obamTb8?width=560&amp;height=315"><span style="color: #3e5583;"><img rel="wp-video-lightbox" src="http://www.saracen.se/wp-content/uploads/2013/01/youtube_white.png"> Se Film</span></a> <a target="_blank" href="http://www.ker.com"><img src="http://www.saracen.se/wp-content/uploads/2013/02/webb1.png"> <span style="color: #3e5583;">Läs mer</span></a>
</div><br>
<div class="fbox_3">
<img align="left" src="http://www.saracen.se/wp-content/uploads/2013/02/Dengie.jpg">
<h3><span style="color: #006431;">Alf Alfa</span></h3>
Fiberprocerat hästfoder
</div>
</div>
<div class="span3">
<div class="fbox_2">
<h3><span style="color: #006431;">Foderspecialist</span></h3>
<img src="http://www.saracen.se/wp-content/uploads/2013/02/foderspec1.jpg"><br>
Jag svarar på dina frågor och hjäper dig räkna ut en foderstat. Inga frågor är dumma. Vi hörs!
<table>
<tbody>
<tr>
<td>040 - 48 07 58 <br>
Pia Prahl</td>
<td><img src="http://www.saracen.se/wp-content/uploads/2013/02/mail.png"></td>
</tr>
</tbody>
</table>
</div><br>
<div class="fbox_3">
<img align="left" src="http://www.saracen.se/wp-content/uploads/2013/02/Orter1.png"><h3><span style="color: #006431;">Örter</span></h3>
Örtblandningar som komplement till foder.
</div>
</div></div></div></div></div></div></div></section>

Share this post


Link to post
Share on other sites

Posted · Report post

All sections contain a similar HTML structure, where it has some like this:

 

<section ID="" class="">

<div class="texture">

<div class="content">

<div class="content-pad">

 

and so on...

 

But from the code you have linked above (in future use our paste service) you're using a ContentBox with the boxes section HTML code inside it. We do not provide support for user created custom code HTML, CSS or PHP.

 

The space is most likely generated by your custom code or you need to inspect the ContentBox section and reduce its padding which is found in the Content-pad, see my basic html structure above.

 

However, you're also going to need to inspect all your HTML, if you have any margins or other elements using padding, which could also be causing the space.

Share this post


Link to post
Share on other sites

Posted · Report post

OK, keep us posted.

My head is going to blow up... someone who can help me?

Share this post


Link to post
Share on other sites

Posted · Report post

OK, can you send me a PM please, containing admin username and password, as well as link to your site and I will take a look.

 

However, my shift ends at 2:00pm GMT, so if you send it around about this time or later, I will look at your site tomorrow and hopefully point you in the right direction.

Share this post


Link to post
Share on other sites

Posted · Report post

All sections contain a similar HTML structure, where it has some like this:

 

<section ID="" class="">

<div class="texture">

<div class="content">

<div class="content-pad">

 

and so on...

 

But from the code you have linked above (in future use our paste service) you're using a ContentBox with the boxes section HTML code inside it. We do not provide support for user created custom code HTML, CSS or PHP.

 

The space is most likely generated by your custom code or you need to inspect the ContentBox section and reduce its padding which is found in the Content-pad, see my basic html structure above.

 

However, you're also going to need to inspect all your HTML, if you have any margins or other elements using padding, which could also be causing the space.

But I've using your grid system in the contentbox? Nothing then a customcode for each box is setted. Just because I wanted it this way....

 

I've looked true my HTML lots of time but I can't see whats wrong? Also I see under my pages that after the edit link in the bottom is a big gap... <p></p> and its must be your framework? :startle:

Share this post


Link to post
Share on other sites

Posted · Report post

I am well aware you're using the grid but you have also add this to the grid:

 

<div class="fbox_1">
 

Although this is a PageLines Box class, it really shouldn't be used inside a grid layout, as they do similar jobs.

 

The <p></p> is not related to PageLines and is actually a Wordpress editor problem. Wordpress has a habit of adding linebreaks, to resolve the issue, simply remove the line breaks in your code or use the PageLines raw shortcode. Simply wrap it around your code and it will automatically stop Wordpress from doing this line break.



[pl_raw]

You code

[/pl_raw]

Please bear in mind that this shortcode can be only be used once per page.

Share this post


Link to post
Share on other sites