Adding a horizontal line below header

[daneh]

Been working on my cart for a few days now. A little confusing at first, but I am beginning to grasp the where's and how to make changes. I have searched and searched but haven't found an answer to this question. I even did a google to see how to add a HR to my CSS, but when I add what I believe is the right code, my left categories sidebox lengthens considerably. I am brand new to CSS, so I am sure I added the wrong code. I have since ditched the code I added.

My goal is to add a horizontal line below the EZ pages links. I think it would look better to have a little separation between the EZ pages and the main content.

Here is my current page: http://mistkits.com/cart

Can someone give me a push in the right direction?

I am also open to other suggestions.

[kobra]

Find this in your stylesheet:

#headerWrapper, #contentMainWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
	margin: 0em;
	padding: 0em;
	}

seperate out the header wrapper tag and add the red entries adjusting as you want with allowable line definiitions if you want other than solid

#headerWrapper {
        border-bottom: 1px solid #000000;
	margin: 0em;
	padding: 0em;
        }    

#contentMainWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
	margin: 0em;
	padding: 0em;
	}

[daneh]

Worked like a charm...thanks.

Now I just need to work on spacing out a few things.
Now I am trying to figure how to add just a little space between the new line and the navigation links above. Then I would like to space out those links just a bit, they look a little crowded.

I have placed a clickable banner on the top of the page. I would like it to be below the home and login links where the header/tagline usually are. When I added the banner, it was automatically placed at the top of the page, which then moved those mentioned links down.

Any suggestions?

[barco57]

add line-height to the following statement like shown in red

.leftBoxContainer, .rightBoxContainer {
	margin-top: 1.5em;
	line-height: 1.5em;
}

and why are you using a clickable banner as your logo and tagline when there are divs for those and the logo would be clickable.

[daneh]

Thanks. Now I have more space below the line. Now to get those links separated with a little more space....

As far as the banner versus the header:
Well, to put it honestly, I had no clue how to do that. I did have an image I wanted to use, so made it the banner and clickable. I am still a little nervous about just adding code to pages that I really don't know what they do.

I originally was trying to make the header image (header_bg.jpg) a link, but didn't know how. I added my domain where a few posts suggested, but it didn't work. I think I needed to use the img src= code, but wasn't sure where or how.
A search didn't really shed any light, so I went with the banner.

[barco57]

The logo can be changed by placing the image file in your includes/templates/YOUR_TEMPLATE/images directory and then going to includes/languages/english and copy header.php to includes/languages/english/YOUR_TEMPLATE and than edit the new copy

// added defines for header alt and text
  define('HEADER_ALT_TEXT', 'Powered by Zen Cart :: The Art of E-Commerce');
  define('HEADER_SALES_TEXT', 'TagLine Here');
  define('HEADER_LOGO_WIDTH', '192px');
  define('HEADER_LOGO_HEIGHT', '64px');
  define('HEADER_LOGO_IMAGE', 'logo.gif');

you can use any file name or extension (jpg,gif,png) just change logo.gif to your logo filename

[kobra]

Better option might be to seperate your current image making "Mistkits.com" a transparent gig named logo.gif and the remainder sized for your layout header_bg.gif. The logo is just placed into your template images folder and non edited code will will display it - then center it in the stylesheet. Then if you look at the classic stylesheet you can determine how header_bg is applied

[daneh]

Wow Cobra, that was fast!

Ok, now can you translate what you just wrote in English?

Meaning, I am not sure what you just told me, but I am thinking it may be just easier to just add a link on the top of the page to my websites homepage. That is basically all I am trying to do, is give them a way back. Currently, there is no way for them to get out of my shopping cart.

Please be patient, I am still fumbling my way through.

[barco57]

If the image for the logo, which is called in the header.php file, is set up correctly there should be no reason to reference it in the stylesheet and it will also be clickable as the "home" link, other than to style it (i.e. center)

[kobra]

For your ez page spacing add this to your stylesheet and adjust as you want

#navCatTabsWrapper ul a:link {
        padding: 0em 0em 0em 10em;
        }