| View previous topic :: View next topic |
| Author |
Message |
warrior
2
Joined: 12 Mar 2006
Posts: 335
|
|
| Back to top |
|
 |
ed@searchfit
2
Joined: 27 Sep 2004
Posts: 173
|
 Posted: Wed Sep 10, 2008 1:17 pm GMT Post subject: styling the navigation menu |
 |
|
What example are you referring to? I don't recall an example that's similar to the link you gave.
If your goal is to make the background color of links fill the "td" on hover, then you can try this:
| Code: |
.menu_category {
display: block;
} |
|
|
| Back to top |
|
|
warrior
2
Joined: 12 Mar 2006
Posts: 335
|
| Posted: Wed Sep 10, 2008 2:21 pm GMT Post subject: |
|
|
Hi Ed,
I mean the navigation bar under the picture (dom tabs)...There's a css sample in the help file which I copy/pasted but I can't manage it to get a border around the whole box (like showen in the help file sample)..
http://www.samurai-sword-shop.com/samurai_miyamoto_musashi_katana-9-prd1.htm
How can you specify the background of the table of the selected tab ?
Thxs,
Dave |
|
| Back to top |
|
|
ed@searchfit
2
Joined: 27 Sep 2004
Posts: 173
|
| Posted: Thu Sep 11, 2008 6:21 am GMT Post subject: specify the background of the table of the selected tab |
|
|
The code you copied had a css selector (#wrapper) that does not match any div used in your template.
Try replacing the navtab part of your main css with the below code.
The rule "body table.navbar td.navtab_body" is the one you are looking for.
I also changed the height of links within the nav tabs to fit the td's.
| Code: |
body #navbar {
clear: both;
padding-top: 15px;
padding-right: 0;
padding-bottom: 15px;
padding-left: 0;
width:500px; }
#navbar table {
width: 500px; }
body table.navbar td.navtab_body {
padding: 15px 15px 20px 15px;
border: 1px solid #86aed5;
background-image: none;
text-align: left;
width:500px;
background-color: #ccc;
}
body table.navbar td {
height: 30px;
text-align: center;
}
/*-- styles for nav tab links --*/
.navtab_notselected:link, .navtab_notselected:visited {
padding-top: 7px;
height: 23px;
width: 123px;
display: block;
background-image: url('http://www.samurai-sword-shop.com/imagesindex/tab1.gif');
background-repeat: no-repeat;
background-position: left;
text-align: center;
overflow: hidden; }
.navtab_notselected:hover{
padding-top: 7px;
height: 23px;
width: 123px;
display: block;
background-image: url('http://www.samurai-sword-shop.com/imagesindex/tab1.gif');
background-repeat: no-repeat;
background-position: -134px 0px;
text-align: center;
overflow: hidden; }
.navtab_selected:link, .navtab_selected:visited, .navtab_selected:hover {
padding-top: 7px;
height: 23px;
display: block;
background-image: url('http://www.samurai-sword-shop.com/imagesindex/tab2.gif');
background-repeat: no-repeat;
background-position: left;
text-align: center;
overflow: hidden; }
.navtab_first, .navtab_middle{ width: 125px; }
.navtab_last { width: 125px; }
.navtab_selected {width:125px;}
.navtab_notselected {width:125px;} |
|
|
| Back to top |
|
|
warrior
2
Joined: 12 Mar 2006
Posts: 335
|
| Posted: Thu Sep 11, 2008 7:16 am GMT Post subject: |
|
|
Thxs Ed !!!
Dave
PS: Looks like you took over from Stan ? |
|
| Back to top |
|
|
ed@searchfit
2
Joined: 27 Sep 2004
Posts: 173
|
| Posted: Thu Sep 11, 2008 7:19 am GMT Post subject: |
|
|
Your welcome.
I'm not taking over for Stan though... I'm just watching the forum. Stan will be helping with the forum again soon. |
|
| Back to top |
|
|
warrior
2
Joined: 12 Mar 2006
Posts: 335
|
| Posted: Thu Sep 11, 2008 7:35 am GMT Post subject: |
|
|
It's me again 
Is there any way to get rid of the line (table border) that is crossing a selected tab.
Here's a sample of what I mean :
http://www.bestbuy.com/site/olspage.jsp?skuId=8500491&type=product&id=1186004962410
I can't figure out how the align the tabs so they appear side by side (left aligned) in stead of centered all over the table. I did try the float: command but no result there.
There also seems to be a little problem in FF..IE works good..
Thxs!
Dave |
|
| Back to top |
|
|
ed@searchfit
2
Joined: 27 Sep 2004
Posts: 173
|
| Posted: Fri Sep 12, 2008 9:30 am GMT Post subject: last nav tab css |
|
|
The last table cell containing a tab always has a class applied called ".nav_tab_last". You may use this class to achieve the layout in the example you referenced by doing something like this:
| Code: |
table td.navtab_last {
width: 400px;
} |
|
|
| Back to top |
|
|
warrior
2
Joined: 12 Mar 2006
Posts: 335
|
| Posted: Fri Sep 12, 2008 10:38 am GMT Post subject: |
|
|
Thxs Ed,
Working fine in FF but not in IE...seems hard to get them fixed in both
Have a nice weekend !
Dave |
|
| Back to top |
|
|
ed@searchfit
2
Joined: 27 Sep 2004
Posts: 173
|
| Posted: Mon Sep 15, 2008 7:50 am GMT Post subject: navtab layout |
|
|
Here's an example of a navtab layout working in FireFox3 and IE7:
http://demo3.searchfit.us.com/product_57086_detailed.html
This is formatted according to your request.
Here is the related CSS:
| Code: |
body #navbar {
clear: both;
width: 554px;
padding: 15px 0;
}
body #wrapper table.navbar td.navtab_body {
padding: 15px 15px 20px;
border: 1px solid #d9d9d9;
background-image: none;
text-align: left;
width: 524px;
}
body #wrapper table.navbar td {
height: 26px;
text-align: center;
}
body #wrapper table.navbar td.navtab_last {
text-align: left;
}
.navtab_notselected:hover {
padding-top: 6px;
height: 22px;
display: block;
background-image: url('images_templ/bg_nav_tab.jpg');
background-repeat: no-repeat;
background-position: -134px 1px;
overflow: hidden;
width: 128px;
}
.navtab_selected:link, .navtab_selected:visited, .navtab_selected:hover, .navtab_notselected:link, .navtab_notselected:visited {
padding-top: 6px;
height: 22px;
display: block;
background-image: url('images_templ/bg_nav_tab.jpg');
background-repeat: no-repeat;
background-position: 0 1px;
overflow: hidden;
width: 128px;
}
.navtab {
line-height: 28px;
width: 554px;
background-image: url('../images_templ/bg_nav_tab.jpg');
background-repeat: no-repeat;
background-position: left;
overflow: hidden;
font-size: 12px;
font-family: arial;
}
.navtab a:LINK, .navtab a:VISITED {
color: #5f9eda;
text-decoration: none;
font-weight: 700;
}
.navtab a:HOVER {
color: #0054a5;
text-decoration: none;
font-weight: 700;
}
.navtab_content {
padding: 15px 15px 20px;
border: 1px solid #d9d9d9;
border-top: 0;
font-size: 12px;
font-family: arial;
color: #333;
width: 524px;
}
.navtab_first a, .navtab_middle a, .navtab_last a {
text-align: center;
background-repeat: no-repeat;
background-position: 0 1px;
overflow: hidden;
}
.navtab_first, .navtab_middle, .navtab_last {
background-repeat: no-repeat;
}
.navtab_last {
width: 300px;
}
.navtab_last a, .navtab_middle a, .navtab_middle, .navtab_first a, .navtab_first {
width: 127px;
} |
|
|
| Back to top |
|
|
warrior
2
Joined: 12 Mar 2006
Posts: 335
|
| Posted: Tue Sep 16, 2008 2:50 am GMT Post subject: |
|
|
Thxs Ed for your effort..will try to figure it out ..
Dave |
|
| Back to top |
|
|
|
