Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

3 Col. Footer - Why does data overlap the grids?


tonymatt

Recommended Posts

Hmm... My images are not showing once I submitted the post. What's up with this? Geez, .... simple things are not working for me today.

 

I attached the images ...

 

* * *

 

I am coding a 3 column footer but there are two issues -

  • the data is overlapping the other grids
  • the third grid goes onto the next line, as if the grid "width" is incorrect

Here is what I have:

 

3column-overlappingdata-1.jpg

 

 

Here is the ouput:

 

 

3column-overlappingdata2.jpg

 

Tryiing to get the 960 working here but obviously I am missing something. I have the grids equal so the width should be equal. However, it is like they are not. Can someone lead me onto what I am missing?

post-271328-0-82474700-1326460500_thumb.jpg

post-271328-0-39480100-1326460506_thumb.jpg

Link to comment
Share on other sites

This is the code. I only added the three div's and believe I am following the video on how to use the 960 grid.

 

require(DIR_WS_INCLUDES . 'counter.php');

?>

 

<div class="grid_24 footer">

<div class="grid_8">111111111111111111111111111111111111111111111111111111111

<p align="center"><?php echo FOOTER_TEXT_BODY; ?></p>

</div>

<div class="grid_8">2222222222222222222222222222

<p align="center"><?php echo FOOTER_TEXT_BODY; ?></p>

</div>

<div class="grid_8">3333333333333333333333333333

<p align="center"><?php echo FOOTER_TEXT_BODY; ?></p>

</div>

</div>

 

<div class="grid_24 footer">

<p align="center"><?php //echo FOOTER_TEXT_BODY; ?></p>

</div>

 

<?php

if ($banner = tep_banner_exists('dynamic', '468x50')) {

?>

Link to comment
Share on other sites

I haven't added any css yet, only on the footer.php. That's all I added was the "grid_8" with an omega and alpha. The "1's" just keeping going on one line, overlapping into the middle grid. I thought the grid_8 takes the place of the "width"? But it doesn't I guess. Does that mean I have to ad css to contain the data in the grid_8 alpha?

 

My site isn't live I am using Wamp. I was not able to get my URL to my screenshots to display in my original post so I attached the screenshots.

 

Still trying to URL my image: ( I have the thumbnail of it attached though below) How come the image is not showing?

 

3column-overlappingdata2-1.jpg

 

Here is the footer.php code:

 

 

require(DIR_WS_INCLUDES . 'counter.php');

?>

 

<div class="grid_24 footer">

<div class="grid_8 alpha">

111111111111111111111111111111111111111111111111111111111

<p align="center"><?php echo FOOTER_TEXT_BODY; ?></p>

</div>

<div class="grid_8">

2222222222222222222222222222

<p align="center"><?php echo FOOTER_TEXT_BODY; ?></p>

</div>

<div class="grid_8 omega">

3333333333333333333333333333

<p align="center"><?php echo FOOTER_TEXT_BODY; ?></p>

</div>

</div>

 

<div class="grid_24 footer">

<p align="center"><?php //echo FOOTER_TEXT_BODY; ?></p>

</div>

post-271328-0-19107000-1326465768_thumb.jpg

Link to comment
Share on other sites

You don't need to use nested divs, you can have straight 3 divs grid_8 side by side. Allha and omega you need to use in case of nested divs to eliminate the left (right) margin so they fit into the total width

 

Your text is not wrapping because it is a long spaghetti, write some normal text and I guess it will be ok

 

I would do something like this

<div class="footer">
 <div class="grid_8">
<p>11111111 111111111111 1111111111 1111111 111111 1111111111111</p>
<p><?php echo FOOTER_TEXT_BODY; ?></p>
 </div>
 <div class="grid_8">
<p>222 22222 2222 2222222 2222 22222</p>
<p><?php echo FOOTER_TEXT_BODY; ?></p>
 </div>
 <div class="grid_8">
<p>33333 33333 333333 3333 33333333</p>
<p><?php echo FOOTER_TEXT_BODY; ?></p>
 </div>
 <div class="grid_24">
<p><?php //echo FOOTER_TEXT_BODY; ?></p>
 </div>
</div>

 

Then you can style the <p> in your css accessing it as follows .footer p{text-align:center}

Link to comment
Share on other sites

You are correct on the spaghetti wrapping. that is solved.

 

However, I tried your code and the 3rd grid will go to the next line. I put the alpha and omega in and it works.

 

This is a fresh install. This footer is the first thing I am working on.

Link to comment
Share on other sites

However, I tried your code and the 3rd grid will go to the next line. I put the alpha and omega in and it works.

 

It should not, unless you have it wrapped into an other grid class, that's what the 960gs is for

Link to comment
Share on other sites

Hmm, the difference between yours and mine, is that I have - <div class="grid_24 footer"> (the stock osc code). You only have -

<div class="footer"> with the grid_8's nested inside this div.

 

 

When I try this then my grids go out of whack. It only works if my grid_8's are nested in the grid_24 footer.

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...