Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Alignment problem, pic included


JustinS

Recommended Posts

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>

 

post-312717-0-64661500-1369347995_thumb.jpg

 

Thanks for any help given

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

post-312717-0-36622900-1369348555_thumb.jpg

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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

To improve is to change; to be perfect is to change often.

 

Link to comment
Share on other sites

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

To improve is to change; to be perfect is to change often.

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Well just a suggestion we all had to start sometime

 

<div class="grid_6 omega">

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

</div>

 

You could try style adding this why

 

<div class="grid_6 omega yourstyle">

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

</div>

 

and stylesheets

 

.yourstyle {

border-bottom: 1px solid black;

your css

 

}

 

Should work

To improve is to change; to be perfect is to change often.

 

Link to comment
Share on other sites

Sorry I went offline after I answered you.

 

Use the LI then style it appropriately to get rid of the bullet and add something else.

 

li {
 margin: 0;
 padding: 0;
 list-style-type: none;
 line-height: 2;
}
li:before {
 content: "> ";
}

 

I did not say you cannot have a full border, I said you cannot have a full border on a grid_x div. Think about that for a moment.

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...