7 replies to this topic

[JustinS]

If you look in the pic, I'm trying to make a border around a div using css.

I have this so far:


<style type='text/css'>
.footer{
   background: #fafafa;
   border-top: solid 5px #004180;
   border-left: solid 5px #004180;
   border-right: solid 5px #004180;
   border-bottom: solid 3px #004180
}
</style>

What I'm wondering, is why it has a blank space to the left every single time I try to use borders. I want it to line up with the edge of the page, on the white, without running in to the background (the grey).

Why does it keep doing this? Such a pain in the butt. The div is a grid_24 as shown below


<div class="grid_24 footer">

<ul class="grid_4">
  <?php echo '<a href="'. tep_href_link(FILENAME_DEFAULT) .'">'. '> Home' .'</a>'; ?><br>
  <?php echo '<a href="'. tep_href_link(FILENAME_CONTACT_US) .'">'. '> Contact Us' .'</a>'; ?><br>
  <?php echo '<a href="'. tep_href_link(FILENAME_PRODUCTS_NEW) .'">'. '> New Products' .'</a>'; ?><br>
</ul>
  
<ul class="grid_5">
  <?php echo '<a href="' . tep_href_link(FILENAME_ACCOUNT, '', 'SSL') . '">' . '> My Account' . '</a>'; ?><br>
  <?php echo '<a href="' . tep_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL') . '">' .  '> Create Account' . '</a>'; ?><br>
  <?php echo '<a href="' . tep_href_link(FILENAME_LOGIN, '', 'SSL') . '">' .  '> Log In' . '</a>'; ?><br>
  <?php echo '<a href="' . tep_href_link(FILENAME_LOGOFF, '', 'SSL') . '">' .  '> Log Off' . '</a>'; ?><br>
</ul>

<ul class="grid_5">
  <?php echo '<a href="' . tep_href_link(FILENAME_ACCOUNT_HISTORY, '', 'SSL') . '">' .  '> Order History' . '</a>'; ?><br>
  <?php echo '<a href="' . tep_href_link(FILENAME_PRIVACY) . '">' . '> Privacy Policy' . '</a>'; ?><br>
  <?php echo '<a href="' . tep_href_link(FILENAME_CONDITIONS) . '">' . '> Conditions of Use' . '</a>'; ?><br>
  <?php echo '<a href="' . tep_href_link(FILENAME_SHIPPING) . '">' . '> Shipping & Returns' . '</a>'; ?><br>
</ul>

<ul class="grid_5">
  <?php echo '<a href="' . tep_href_link(FILENAME_LOGIN, '', 'SSL') . '">' .  '> Link' . '</a>'; ?><br>
</ul>
  <div class="clear"></div></div>

 ugh.jpg   38.43K   9 downloads

Thanks for any help given

Edited by JustinS, Yesterday, 10:26 PM.

[burt]

1.  don't forget the alpha and omega classes.
2.  you cannot have a right or left border on a grid_x div.

<?php echo '<a href="' . tep_href_link(FILENAME_CONDITIONS) . '">' . '> Conditions of Use' . '</a>'; ?><br>

would be better like so;

<?php echo '<li><a href="' . tep_href_link(FILENAME_CONDITIONS) . '">Conditions of Use</a></li>'; ?>

If you have the UL why not the LI?   Now style your LI's appropriately.  Same for all those other links.

Edited by burt, Yesterday, 10:31 PM.

[JustinS]

@burt
not sure what u mean by alpha/omega classes, what little i have done is just stuff i've picked up along the way.

so there's no way to make my footer align like i see so many other websites do? how else could it be coded to make it touch the edge properly like it should in the first place?

and I don't have LI in it because then it puts a bullet symbol next to it, and i want the >
this is what i mean
 not-how-i-want-it.jpg   14.23K   2 downloads

Edited by JustinS, Yesterday, 10:36 PM.

[JustinS]

Ok I looked up alpha and omega, that solved a problem in it's own that I was having and had to work around the wrong way. Thank you for shedding light on that. But how do I design around it now if I can't use css borders, not sure how else to do it?

code changed to this:

<div class="grid_24 footer">

        <div class="grid_6 alpha">
          <?php echo '<a href="'. tep_href_link(FILENAME_DEFAULT) .'">'. '> Home' .'</a>'; ?><br>
          <?php echo '<a href="'. tep_href_link(FILENAME_CONTACT_US) .'">'. '> Contact Us' .'</a>'; ?><br>
          <?php echo '<a href="'. tep_href_link(FILENAME_PRODUCTS_NEW) .'">'. '> New Products' .'</a>'; ?><br>
        </div>
      
        <div class="grid_6">
          <?php echo '<a href="' . tep_href_link(FILENAME_ACCOUNT, '', 'SSL') . '">' . '> My Account' . '</a>'; ?><br>
          <?php echo '<a href="' . tep_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL') . '">' .  '> Create Account' . '</a>'; ?><br>
          <?php echo '<a href="' . tep_href_link(FILENAME_LOGIN, '', 'SSL') . '">' .  '> Log In' . '</a>'; ?><br>
          <?php echo '<a href="' . tep_href_link(FILENAME_LOGOFF, '', 'SSL') . '">' .  '> Log Off' . '</a>'; ?><br>
        </div>

        <div class="grid_6">
          <?php echo '<a href="' . tep_href_link(FILENAME_ACCOUNT_HISTORY, '', 'SSL') . '">' .  '> Order History' . '</a>'; ?><br>
          <?php echo '<a href="' . tep_href_link(FILENAME_PRIVACY) . '">' . '> Privacy Policy' . '</a>'; ?><br>
          <?php echo '<a href="' . tep_href_link(FILENAME_CONDITIONS) . '">' . '> Conditions of Use' . '</a>'; ?><br>
          <?php echo '<a href="' . tep_href_link(FILENAME_SHIPPING) . '">' . '> Shipping & Returns' . '</a>'; ?><br>
        </div>

        <div class="grid_6 omega">
          <?php echo '<a href="' . tep_href_link(FILENAME_LOGIN, '', 'SSL') . '">' .  '> Link' . '</a>'; ?><br>
        </div>
      <div class="blue"></div></div>

[joli1811]

Hi Justin,

Best thing to do is simply buy the osc book within an hour or so all will be clear.
Been working 7+ years on osc but was the the best value / investment I made in along time

http://www.oscommerce.com/Services&books&oscbooks

Just saves you hours/ days of trail and error

Regards
Joli

[JustinS]

how is the book set up? is it paper back or an e-book.

i dont see how it would possibly cover tiny code problems like this =P

[joli1811]

It is an ebook with instant download .

It goes into great detail about designing  nice footer I realise you problem is pretty small it is just a question of adding a class to the div and styling with css.

I have seen you about for a while now on the forums just think it would really help you a lot with design  as its like turning a light on everything just becomes that much clearer and quicker.
Regards
Joli

[JustinS]

Hmm... I may go ahead and get it soon. It just seems like a waste, I don't feel like there's... way too much left to do really... just need to finish footer, add a nice navigation bar at the top, add seo, and get a nicer looking categories column... after that just need to fill up rest of the front page with content.

Unfortunately the only way I will know how to do most of that is google and help on the forums... so maybe the book would be good to have =P