Logo.gif

The first thing i would like to do is put a boarder around the logo.gif, i have done it before but i cant remember where i added the code.

The second thing is center the logo.gif, i changed the following to the following and while it did center the logo, it also restricted the products to one per line. :(

Original:

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
float: left;
border: 2px solid #00000;

Changed to:

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
text-align : center;
border: 2px solid #00000;

1. If you want to put a simple border, put this into the stylesheet;

#logo {
       border: 1px solid #ff0000;
       }

2. You can isolate just that one selector and give it it's own declarations.

#logo {
       text-align: center;
       }

Remember to remove the original from the combo selector declarations. However, I don't think you could align it center and add a border just around the actual gif. I believe the border with do an outline perimeter instead of an actual border. But, it's hard to say what your set up is without a URL. Maybe you're not referring to the actual logo gif that I'm thinking about.

BTW, It seems that you'll already assigned a border for your logo via the combo selector declaration...

Here is my coding from the style sheet. however like i said when i change "float: left;" to "" it also makes the images in the subcategories change from 3 wide to 1 image per line.

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
float: left;
border: 1px solid #00000;
}

For example of what i mean when it comes to Subcategories, see the screen shot here...

http://www.delightsoftheflesh.com/private/screenshot.jpg

Darkwander:

Here is my coding from the style sheet. however like i said when i change "float: left;" to "" it also makes the images in the subcategories change from 3 wide to 1 image per line.

For example of what i mean when it comes to Subcategories, see the screen shot here...

http://www.delightsoftheflesh.com/private/screenshot.jpg

What you need to do is seperate #logo from the rest of that line, like this:

.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
float: left;
border: 1px solid #00000;
}
#logo { }

Now you can position the logo without interferring with other things.

Remember: to align the logo to the left use float: left. To align it to the right use float: right. To align it in the center use text-align: center.

Hope this helps

.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
float: left;
border: 1px solid #00000;
}

#logo {
text-align : center;
border: 1px solid #000000;
}

For anyone that wants the coding..

Is there some way of removing that tiny little space between the logo.gif and the border ?

Is there some way of removing that tiny little space between the logo.gif and the border ?

Not sure what you mean.

`Check the logo itself, if you're talking about the stock Zen logo... it has an extra outlying area past it's own imaged border. You may have to trim the outer perimeter in a image program. Or just trim it around the border and then you don't have to declare a border for the logo in the first place. :yes:

For a look at what i mean: https://www.delightsoftheflesh.com/shop/

Under the logo.gif there is a tiny space, it is only small but that is because of the border is 2 instead of 1.

There is one immediate problem to rectify.

Firstly, what you must do is correct a stylesheet declaration. Your current logo is 760 x 110px. Whereas, you have set the logo wrapper at 75px.

Find in your stylesheet;

#logoWrapper{
	background-image: url(../images/header_bg.jpg);
	background-repeat: repeat-x;
	background-color: #ffffff;
	height:75px;
	border: 2px solid #00000;
	}

Adjust the value in red to 110px . While you're in the stylesheet, you forgot an extra 0/zero in your black color declarations. There are three to find. :yes:

Thanks for all your help.

You're welcome. I don't want to overstep in your design, but to get rid of the double borders in each corner of your logo... that's totally IF you want;

Find in your stylesheet;

#logo {
	text-align : center;
	border: 1px solid #000000;
	}

You could just remove the line in red. Just my opinion is all, holds as much value as a pine cone sometimes. :laugh:

Kool , that looks alright, i hadn't got around to that, i am still trying to work out a problem with my Product mod..

Don't suppose you know anything about that or am i pushing my luck too far ?

:)

No and Yes. :P

Unfortunately, I haven't started installing any mods as of yet. There is probably a support thread for the certain mod you installed though.

hi. i seem to be having a similar yet different problem. when i try to adjust my stylesheet accordingly to make the logo.gif float : right it does nothing and remains on the left. the code i'm using is:

.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
float: left;
}
#logo {float : right; }

any help would be appreciated. thanks!!

yellowdaises:

hi. i seem to be having a similar yet different problem. when i try to adjust my stylesheet accordingly to make the logo.gif float : right it does nothing and remains on the left. the code i'm using is:

.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
float: left;
}
#logo {float : right; }

> 
> any help would be appreciated. thanks!!

URL for your site