Jump to content
cf666

issues with contentbox

Recommended Posts

cf666    0
cf666

Hi,

 

I'm trying to build my home page (http://pb.carinafeldman.com ) as in my comp (attached) and I'm having trouble with:

 

1) getting those colored tabs with the translucent black background area around them to sit right at the bottom of the page.

I first tried putting the HTML into the body of the page and the black background wouldn't extend the whole width of the browser window, so I decided instead to try pasting the HTML into a contentbox in the footer, but the damn thing (colored tabs + translucent black bg) is still sitting in the vertical middle of the page - although the translucent black bg now DOES cover the whole width of the window, which is progress I guess ;)

2) I also can't get the group of tabs to center horizontally in the footer - I've tried targeting a whole bunch of stuff and nothing works.

3) when i resize (smaller) the browser window, every other tab shifts up a few pixels. WTF????

 

The other thing is how do I get each tab to be a link to a page

I could add an <a> tag to each <li> but the URL they'd link to would be dynamically generated so how do I??

 

 

Here's the HTML I have in the contentbox (I gave the contentbox a class of "bottomtabs"):

 

 
<div id="specials">
<p>Check out our specials:</p>
<ul>
<li style="background: rgb(254,199,48);">CALAFATE ESSENTIAL</li></a>
<li style="background: rgb(238,2,41);">CALAFATE ALL GLACIERS</li>
<li style="background: rgb(0,170,156);">CALAFATE EXPRESS</li>
<li style="background: rgb(140,24,34);">CALAFATE FULL ECONOMY</li>
<li style="background: rgb(152,137,119);">CALAFATE CLASSIC</li>
</ul>
</div>
 
 
And here's the CSS:
 
#footer {background: rgba (0,0,0,0.4); height:300px; margin-bottom:0 !important;}
 
.bottomtabs {
  padding:0;
  color: #fff;
  font-family: montserrat;
  font-size: 1.5em;
  letter-spacing: 0.05em;
}
 
  
.hentry ul, .hentry ol {
  padding:0;
  margin-left: auto !important;
  margin-right:auto !important;
  margin-top: 50px;
  margin-bottom: 0px !important;
}
 
.hentry {margin:0;}
 
#footer li {
  display:inline-block; 
  width:15%; 
  height:150px; 
  0px 5px 0px 0px !important; 
  padding:10px; 
  margin: 0px 10px 0px 0px !important;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.4);}
 
 
Please help before I pull all of my hair out!!!!!!!!!!!!!
Thanks...
 

post-43418-0-57163900-1358490222_thumb.j

Share this post


Link to post
Share on other sites
cf666    0
cf666

i'm trying to upload another screen capture (to show the problems as they render on my end) and it's not letting me...

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

HI,

 

1. To have these tabs site at the bottom of your site, first you will need to remove the height:300px you have added to the footer CSS. If that doesn't automatically add them to the bottom of your site, then you will need to remove the padding-bottom from them.

 

2. Try adding text-align:center to the specials ID CSS.

 

3. This is most likely due to your custom CSS not being responsive. I would recommend using the PageLines Grid for something like this - http://support.pagelines.me/docs/miscellaneous/grid-system/

 

If you're still having difficulties, I recommend contacting one of our Pros for assistance - http://www.pagelines.com/pros/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
cf666    0
cf666

Hi Danny,

 

1. I removed the height:300px and that didn't work.

If by "remove the padding-bottom from them" you mean removing the padding-bottom from #footer li, I've done that too and it didn't work either.

 

2. If I add text-align:center to the specials ID CSS, then the text "Check out our current specials" also gets aligned center, which I don't want. I want the group of tabs to align center, not the heading. How?

 

3. I will check out Grid, thanks.

 

Please let me know what else you think I can do to solve this... Thanks!

Share this post


Link to post
Share on other sites
cf666    0
cf666

Correct me if I'm wrong, but from what I quickly gather from the Grid link you posted above, that wouldn't work if you need 5 columns, like I do??

Share this post


Link to post
Share on other sites
catrina    103
catrina

I think 5 columns would be possible, but there will be one column that isn't going to be the same width as the others (unless CSS were used to overwrite the default widths for these columns).


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
James B    436
James B

Hi Cf666

 

Inside the contentbox you have a 25px bottom margin on the .hentry box and a 15px padding to the main contentbox container you need to remove.

 




.section-contentbox .hentry .hentry-pad {
    padding: 0 0 25px;}


.section-contentbox .content .content-pad {

    padding: 15px;}

Remove them and the menu will sit on the bottom of the page :-) - http://screencast.com/t/vJxWoNOsUj


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
cf666    0
cf666

Hi James,

I  really don't see what you're referring to, I couldn't find where I had that 25px or 15px padding anywhere on my custom code, all of which I'm pasting below.

But I pasted the code you suggested above with 0px padding (at the very end of my code) and it still didn't work.

 
Just so you can see what I have, here's all my custom code:
 
 
body{}

/* HIDE SITE NAME FROM HEADER */
.navbar .plbrand {display:none;}


/* STYLING MENU */

#page #brandnav {background-image:url('http://pb.carinafeldman.com/wp-content/uploads/2013/01/whitebg.png'); background-repeat:repeat-x; padding-bottom:0; text-transform:uppercase;}

.main_nav ul {background: rgba (255,255,255, 0.5);}

#brandnav .content-pad {
padding-top: 1em;
padding-bottom: 0em;
}



/* FORMAT HOME TEXT */
div#hometext {
  display: inline-block;
  font-family: montserrat;
  background-color: rgba (0,0,0,0.4);
  font-size: 250%;
  color: #fff;
  line-height:120%;
  letter-spacing:0.05em;
 
}




/* STYLING FOR SPECIALS TABS AT BOTTOM OF HOME PG */

#footer {background: rgba (0,0,0,0.4);}

.bottomtabs {
  padding:0;
  color: #fff;
  font-family: montserrat;
  font-size: 1.5em;
  letter-spacing: 0.05em;
}

 
.hentry ul, .hentry ol {
  padding:0;
  margin-left: auto !important;
  margin-right:auto !important;
  margin-top: 50px;
  margin-bottom: 0px !important;
}

.hentry {margin:0;}

#footer li {
  display:inline-block;
  width:15%;
  height:150px;
  0px 5px 0px 0px !important;
  padding: 10px 10px 0px 10px;
  margin: 0px 10px 0px 0px !important;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.4);}

.section-contentbox .hentry .hentry-pad {
    padding: 0px;}
 
 
.section-contentbox .content .content-pad {
    padding: 0px;}

 

 

I hope you (or others at PL) can help me solve this problem, I'm starting to think this issue is the product of all the extra and unnecesary code that PL injects and that might be somehow conflicting with this very simple thing I'm trying to achieve here...

So I look forward to a solution from you guys.

Thank you again.

Share this post


Link to post
Share on other sites
James B    436
James B

Hi CF666, looking at your site its seems that you've got ride of the padding now, its all aligning to the bottom of the page like in my initial screenshot.

 

http://screencast.com/t/yecavOecXjN6

 

The dark red box needs to moved down slightly to line up with the rest as it's slightly out of sync.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
cf666    0
cf666

No, it isn't, hence my comment that "it's not working".

You might be looking at it on a small screen, although it even looks wrong on a small screen as my iPhone (see iPhone screengrab attached), let alone my 17" laptop.

The dark red box doesn't sit on the same line as the others apparently because there's a a:active that changes the vertical offset - obviously not working right because it gets offset when the box link is not active.

Ok, so what is the solution for this footer/content box issue??

Share this post


Link to post
Share on other sites
cf666    0
cf666

Ok great, so this uploader is not letting me upload the screengrab, I'm on my iPhone and have no access to image editing software on it. So you'll just have to imagine: it looks exactly like before :P

Share this post


Link to post
Share on other sites
batman    389
batman

Hi cf666

Please try with

For align and center boxes

#footer li {
  display:inline-table;
  text-align:left;
  width:17%; 
  height:150px; 
  0px 5px 0px 0px !important; 
  padding: 10px 10px 0px 10px; 
  margin: 0px 10px 0px 0px !important;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.4);}

For the footer 

#footer{
  text-align:center;
  height:450px; }

Change #px as you like

 

Captura%2520de%2520pantalla%25202013-01-

:)


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
mackenzie    12
mackenzie

Hi - Is this topic resolved or do you need assistance still?


Mackenzie - PageLines Help Desk

The Centsible Family - Writer, Photographer and Coffee Addict

---------------------------------------------------

Kindly search this forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

Share this post


Link to post
Share on other sites
cf666    0
cf666

I definitely still need to hear the solution to this. Nothing so far has worked. An explanation of why would be appreciated too. Thanks v

Share this post


Link to post
Share on other sites
batman    389
batman

Another way

I set boxes in the morefoot area and create the five boxes

 

Then I add this CSS rules to give the color each one

 

 

#fbox_12388 {
  background: rgb(254,199,48);
  position: relative;
  bottom: -400px;}

#fbox_12385 {
  background: rgb(238,2,41); 
  position: relative;
  bottom: -400px;}

#fbox_78 {
  background: rgb(0,170,156);
  position: relative;
  bottom: -400px;}

#fbox_49 {
  background: rgb(140,24,34);
  position: relative;
  bottom: -400px;}

#fbox_5 {
  background: rgb(152,137,119);
  position: relative;
  bottom: -400px;}
 

I need position:relative and bottom:-400Px to see them at the bottom of the page in a 21.5" iMac, like the image as you like (if I understand you now)

 

Captura%2520de%2520pantalla%25202013-01-

 

I don´t know why I need the  "bottom:-400px" to position the boxes, I only make it, perhaps some moderator will can to explain you.

:wacko: 


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
cf666    0
cf666

thank you, Batman.

One of the problems with this is that this is supposed to be responsive and it isn't working that way. Resizing the browser window only adds scroll bars, the content does not resize responsively...

On an iphone the tabs are still in the middle of the page on a portrait orientation and completely outside the browser viewport on a landscape orientation (one needs to scroll down to see them at the bottom of the page).

 

Let alone the fact that the colored tabs are supposed to sit on a narrow semi-transparent background with a line of text above them, as shown on the comp I designed (posted at the very beginning of this thread).

 

I'm getting really frustrated and I'm starting to think this is strictly a Pagelines issue - how can something so freaking SIMPLE be such a complicated nightmare to achieve (if in fact it can be achieved at all, it still remains to be seen...).

 

To the moderating team: I'm still awaiting for a solution that works on this one - please refer to my comp at beginning of this thread to see exactly what I'm trying to achieve... thank you.

Share this post


Link to post
Share on other sites
Rob    547
Rob

When using any dimension in px, the size is fixed, not responsive.  Your choices for responsive are percentages and em.

 

The code Batman kindly provided can be changed by converting -400px to -25em.  For future reference, you may find this link helpful. http://pxtoem.com/

 

Keep in mind, you may have other aspects of these boxes set in non-responsive measurements. Please inspect them using Firebug or Chrome's Inspection Tool and customize your code accordingly.  This should make the boxes responsive.


Former PageLines Moderator, Food Expert and Raconteur

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


  • Similar Content

    • John Olsson
      By John Olsson+
      Wierd little problem with the "boxes"-section. Just updated to latest version of all..
      The outline-default-link puts itself behind another container.. or so.. so the top/bottom border won't show, also the left and right box won't show the border on the left side for the left box, and same for the right box, on the right side.
      The padding/margin is ofc on default-settings.. What can this be?

    • janpeeters
      By janpeeters+
      Hi all,
      I was totally excited to find out about 'CSS Hero' (http://www.csshero.org) I read about it in the compatible plugins section of the PL5 docs (http://www.pagelines.com/resources/compatible-plugins) For me it's a great way to more easily customize my sites because I'm not a CSS pro.
      I'm wondering about one thing though… Does anyone know if using this will result in a heavy penalty on page loading speeds? Would love to start using it but only if it doesn't cost too much in terms of speed.
      Thanks, Jan
    • cliffordprimer
      By cliffordprimer+
      Trying my best to link words in a section to another section on the same page that provides more detail. Is there any way to do this.
      Brand new to pagelines -- using Voyant theme.
    • abuzzelli
      By abuzzelli+
      I need the modal popup background to be solid and I can't get the css to work. Not sure what to do. Here's the page: http://bellissimoplasticsurgery.com/breast-augmentation-test-page/
    • ipitts
      By ipitts+
      Greetings! 
      We are using Pagelines >> DMS2 theme. We are using the DMS2 Media Box module on several pages throughout our site. The media box includes an image thumbnail with hyperlinked text (below the thumbnail - located in the embedded HTML text editor).  We would like for users to be able to click on the image in addition to the accompanying text. Is there a way to add a hyperlink on the image itself?
      Please see the attached screenshot. You'll see we have "Compatibility Matrix" thumbnail image & text within the "Text & Embedded HTML" section that provides an <a href="...."></a> to direct visitors to another page. 
      We tried to follow this post (http://slickmedia.co.uk/blog/glenns-blog/pagelines-dms-mediabox-add-link/), but it did not help us solve our challenge. 
      Thank you very much for your help,
      Marie Thiele
      Marketing Coordinator, Syn-Apps LLC
      480-355-6822
      mthiele@syn-apps.com
      media box.tiff
×