Zen Cart Logo
Forums / Addon Templates / CSS Flyout Header with Upscale Boutique

CSS Flyout Header with Upscale Boutique

Locked

Views: 2,054

Results 1 to 10 of 10
This thread is locked. New replies are disabled.
29 Oct 2010, 12:47 AM
#1
gem10 avatar

gem10

New Zenner

Join Date:
Oct 2010
Posts:
53
Plugin Contributions:
0

CSS Flyout Header with Upscale Boutique

Hello, not sure if I am posting this in the right place or not.

I am tring to add the CSS Flyout Header with the Upscale Botique template and have hit a wall....as usual.

Anyway - here is the site. http://www.facetsofgem.com/cart/index.php

Once I installed the menu, the picture on top of it raised and the menu is overlapping the main part. I would like to:

1 - Align the menu so there is no overlap there on the right end.
2 - move the menu up so it is not hanging over the main part.
3 - remove the picture (not the logo) at the top and move the header(the logoad what not) down on top of the menu.

If anyone could help, I would appreciate it.

Thanks

29 Oct 2010, 2:04 AM
#2
picaflor_azul avatar

picaflor_azul

Totally Zenned

Join Date:
Jul 2009
Location:
picaflor-azul.com
Posts:
6,940
Plugin Contributions:
28

Re: CSS Flyout Header with Upscale Boutique

In stylesheet_header_menu.css change:

div#dropMenu {
width:100%;
margin:0 auto;
text-align:center;
z-index:1000;
position:relative;
	}

to:

div#dropMenu {
width:100%;
margin:0 auto;
text-align:center;
z-index:1000;
position:relative;
top:-30px;
	}

to move the menu up.

29 Oct 2010, 2:11 AM
#3
picaflor_azul avatar

picaflor_azul

Totally Zenned

Join Date:
Jul 2009
Location:
picaflor-azul.com
Posts:
6,940
Plugin Contributions:
28

Re: CSS Flyout Header with Upscale Boutique

3 - remove the picture (not the logo) at the top and move the header(the logoad what not) down on top of the menu.

In stylesheet.css replace:

#logoWrapper {
background-image: url(../images/back12.jpg);
height: 50px;
width: 948px;
position: relative;
margin: 0px;
border:1px solid #8b775f;
}

with:

#logoWrapper {}
29 Oct 2010, 2:34 AM
#4
gem10 avatar

gem10

New Zenner

Join Date:
Oct 2010
Posts:
53
Plugin Contributions:
0

Re: CSS Flyout Header with Upscale Boutique

Thanks! Now time to change the footer :dontgetit

29 Oct 2010, 3:12 AM
#5
gem10 avatar

gem10

New Zenner

Join Date:
Oct 2010
Posts:
53
Plugin Contributions:
0

Re: CSS Flyout Header with Upscale Boutique

Ok - so far the only thing I need now is find out how to get rid of the white space between the search box in the header, and the horizontal menu.

Any idea's? I did the following already.

#logoWrapper {}
29 Oct 2010, 2:01 PM
#6
picaflor_azul avatar

picaflor_azul

Totally Zenned

Join Date:
Jul 2009
Location:
picaflor-azul.com
Posts:
6,940
Plugin Contributions:
28

Re: CSS Flyout Header with Upscale Boutique

In stylesheet.css change:

#contentMainWrapper {
margin-top:-30px; 
border-right:1px solid #8b775f; 
border-left:1px solid #8b775f;
}

to:

#contentMainWrapper {
margin-top:-60px; 
border-right:1px solid #8b775f; 
border-left:1px solid #8b775f;
}

and in stylesheet_header_menu.css change:

div#dropMenu {
width:100%;
margin:0 auto;
text-align:center;
z-index:1000;
position:relative;
top:-30px;
	}

to:

div#dropMenu {
width:100%;
margin:0 auto;
text-align:center;
z-index:1000;
position:relative;
top:-60px;
	}
29 Oct 2010, 2:48 PM
#7
gem10 avatar

gem10

New Zenner

Join Date:
Oct 2010
Posts:
53
Plugin Contributions:
0

Re: CSS Flyout Header with Upscale Boutique

Perfect!

When I did that change it worked in everything but IE, but I was able to fix that. :blink:

Thanks again!

29 Oct 2010, 8:00 PM
#8
gem10 avatar

gem10

New Zenner

Join Date:
Oct 2010
Posts:
53
Plugin Contributions:
0

Re: CSS Flyout Header with Upscale Boutique

It's me again. :blush:

http://www.facetsofgem.com/cart/

If you will notice on the site, above the menu is that white space. I know where to change the color to the background, but it also changes the main part and the footer. For now I want to only keep the main part white.

How can I do that, plus get rid of the excess space at the top?

Having a bit of a problem with getting the border to show up on the outside of the footer to line up the side - but, I'm working on that and trying to figure it out.

Sheesh - just when I thought I had it under control. :unsure:

30 Oct 2010, 5:08 PM
#9
gem10 avatar

gem10

New Zenner

Join Date:
Oct 2010
Posts:
53
Plugin Contributions:
0

Re: CSS Flyout Header with Upscale Boutique

Any idea's on the previous post? I'm stuck :frusty:

Any help would be appreciated.

Thanks

30 Oct 2010, 9:10 PM
#10
gem10 avatar

gem10

New Zenner

Join Date:
Oct 2010
Posts:
53
Plugin Contributions:
0

Re: CSS Flyout Header with Upscale Boutique

Never mind, I got it. :clap: