Tabbed Header with images

  • hockeyhero4

    (@hockeyhero4)


    11 years, 12 months ago

    I’m trying to setup our site to have our header display three big image tabs. Below it we have an image slider and then below that the navigation menu as seen below.

    VISUAL EXPLANATION:
    This first:
    IMAGE 1

    Then, once selected, enhance current image
    IMAGE 2

    As you can see in the picture, I want three tabbed images. The images will be a low opacity but once chosen I want them to come full color through the use of another image or css; whichever is the best way to accomplish it. Then, when a tab is chosen, it will take them to another section of our website which will then contain a different footer and image slider.

    What would be the best way to accomplish this? Let me start now by handing out my gratitude and thanks to anyone willing to offer assistance and help…especially on a Sunday!

Viewing 1 replies (of 1 total)
  • Thread Starter hockeyhero4

    (@hockeyhero4)

    11 years, 12 months ago

    Okay so I’ve figured out how to get the hover. How can I get the current page to work with the method I’m using? I’ve tried many options.

    First, here’s what I’ve done. Under APPEARANCES > MENU I’ve enabled CSS through the SCREEN OPTIONS.

    I assigned my 3 items like this:

    .logo1
    .logo2
    .logo3

    [using #logo1, #logo2, #logo3 didn’t work]

    Here’s my code that is working:

    .logo1 {
	display: block;
	overflow:hidden;
	text-indent:100%;
	white-space:nowrap;
	float: left;
}

.logo1 a{
	background-image:url(img/logo1.png);
	display:block;
	overflow:hidden;
	text-indent:100%;
	white-space:nowrap;
	width: 326px;
	height: 90px;
}
.logo1 a:hover{
	background-image:url(img/logo1-hov.png);
	display:block;
	overflow:hidden;
	text-indent:100%;
	white-space:nowrap;
	width: 326px;
	height: 90px;
}

.logo2 {
	display: block;
	overflow:hidden;
	text-indent:100%;
	white-space:nowrap;
	float: left;
}

.logo2 a{
	background-image:url(img/logo2.png);
	display:block;
	overflow:hidden;
	text-indent:100%;
	white-space:nowrap;
	width: 280px;
	height: 90px;
}
.logo2 a:hover{
	background-image:url(img/logo2-hov.png);
	display:block;
	overflow:hidden;
	text-indent:100%;
	white-space:nowrap;
	width: 280px;
	height: 90px;
}

.logo3 {
	display: block;
	overflow:hidden;
	text-indent:100%;
	white-space:nowrap;
	float: left;
}

.logo3 a{
	background-image:url(img/logo3.png);
	display:block;
	overflow:hidden;
	text-indent:100%;
	white-space:nowrap;
	width: 328px;
	height: 90px;
}
.logo3 a:hover{
	background-image:url(img/logo3-hov.png);
	display:block;
	overflow:hidden;
	text-indent:100%;
	white-space:nowrap;
	width: 328px;
	height: 90px;
}

    As I said, the image shows up great and so does the hover, what I CAN’T get to work is the current page to highlight. I want to use the SAME IMAGE as the hover for each logo. Here’s what I’ve tried (no sense doing all three I’ll just show logo1 example’s that didn’t work):

    .logo1 a:current{
	background-image:url(img/logo1-hov.png);
	display:block;
	overflow:hidden;
	text-indent:100%;
	white-space:nowrap;
	width: 326px;
	height: 90px;
}

    and

    .logo1 a.current{
	background-image:url(img/logo1-hov.png);
	display:block;
	overflow:hidden;
	text-indent:100%;
	white-space:nowrap;
	width: 326px;
	height: 90px;
}

    Any suggestions of how to get this current page to show?

Viewing 1 replies (of 1 total)
  • The topic ‘Tabbed Header with images’ is closed to new replies.