16 replies to this topic

[cf666]

Hi,

 

I'm trying to build my home page (

Please Login or Register to see this Hidden Content

) 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...

 

Attached Files

•  GOOD COMP.jpg   100.33K  10 downloads

[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...

[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 - 

Please Login or Register to see this Hidden Content

 

If you're still having difficulties, I recommend contacting one of our Pros for assistance -

Please Login or Register to see this Hidden Content

[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!

[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??

[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).

[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.

 

Please Login or Register to see this Hidden Content

Remove them and the menu will sit on the bottom of the page :-) -

Please Login or Register to see this Hidden Content

[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('

Please Login or Register to see this Hidden Content

'); 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.

[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.

 

Please Login or Register to see this Hidden Content

 

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

[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??

[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

[batman]

Hi cf666

Please try with

For align and center boxes

Please Login or Register to see this Hidden Content

For the footer 

Please Login or Register to see this Hidden Content

Change #px as you like

 

[mackenzie]

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

[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

[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

 

 

Please Login or Register to see this Hidden Content

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)

 

 

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.

 

[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.

[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.

Please Login or Register to see this Hidden Content

 

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.