1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

CSS Need help centering horizontal line in Hardware store Template

Discussion in 'Web Development' started by Dragoon09, May 30, 2010.

  1. Dragoon09

    Dragoon09 New Member

    Hey gang,

    Got an issue I've been struggling with for days. I increased the width of the Hardware Store Template from 780px to 880px
    I can't seem to get the two sub items menus centered, the horizontal line is causing me the trouble. How do I move it?
    Anyone got any ideas on how to resolve this?
     
  2. enigma1

    enigma1 New Member

    So you changed the style.css entries from 780 to 880 ok, you will likely need to change the width of #main_content and .sub_items
    from 644 to 744 if you want the main content to take up the additional space.

    You will end up with a couple of gaps for the sub-items and main menu which should be simple to adjust.
     
  3. Dragoon09

    Dragoon09 New Member

    Thank you for your swift response.
    I tried the suggestions. I can't beleive i missed the main content section in the css.
    The new item section works great and looks great.
    However, the sub items sections, the content moves over, but that horizontal line that separates them does not move no matter what I do.

    I have tried adjusting the margins, padding, overall main_content size, sub items size.

    Is there something else I am missing?
    Somewhere in the CSS there has the code to adjust the location on that stupid line.
    Or can I just remove it completely? I could live with that too.

    Thanks
    Matt
     
  4. Dragoon09

    Dragoon09 New Member

    I finally figured it out, after much trial and error, and several days of my time.
    To move the horizontal line between the two sub_items, you have adjust the values of the background.
    Here is what it looks like originally in the CSS File:
    /* Sub Items Descriptions */
    .sub_items {
    margin-bottom: 2px;
    margin-top: 5px;
    width: 725px;
    background: url('images/item_sub_background.gif') repeat-y 0px 0px;
    text-align: justify;

    To move the horizontal line, raise the value of the repeat-y - like this:
    background: url('images/item_sub_background.gif') repeat-y 45px 45px;

    Making the values 45px instead of 0px moves the line to the right.

    Hopefully this will others who might encounter the same problem.
     
  5. enigma1

    enigma1 New Member

    usually a template is integrated with a framework. Assuming you're going to set it up for an eshop the template should be a guideline. Slicing the various sections, integrating the layout elements with the code of the store is the most complex task, in which case the sample css and images will be discarded.

    It may save you time, you may not have to redo the template.
     
  6. uzoh

    uzoh New Member

    Please how can i center my template.....its not centering after uploading to my cpanel.

    I never changed anything