How do i insert Css tabs & menus into Actinic

[xdoktor]

Hi all,

i want to use 2 css/ javascript menus for my cart.
1 for the horizontal menu & 1 for vertical menu

i have both of these css/scripts working fine when designed in dreamweaver but when inserting the relevant code into my site layout page(in the same places i would have Horizontal Nav Bar Text Links etc) they do not display correctly.

i am aware that in effect i could be calling 3 .css sheets....should i just include the css used by the tabs/menus into the main .css sheet used by actinic?

Alternatively, can someone give me a link or a howto as ive trawled the forums for 2 days with NO definite solution!

many thanks in advance....
as this is the last bit to finish off 'Baby's first Shopping Cart" !!

haha

Andrew

[Cheapprices4u]

hi i've been playing with this today

css goes into the actinicstyle sheet

design>library>layouts>web page outer layout> actinic stylesheet

paste all the tab8 li { etc etc} here


the tab info goes into the nav bar layout you wish to change

layout code - horisontal nav bar images and text links

is where all your Css tabs will go

just in from work ill update later with specifics but that will get you going

G

[Cheapprices4u]

to expand now im on the design pc

/*- Menu Tabs 8--------------------------- */

#tabs8 {
float:left;
width:100%;
background:#FCF1F6;
font-size:93%;
line-height:normal;
border-bottom:1px solid #E276A7;
}
#tabs8 ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs8 li {
display:inline;
margin:0;
padding:0;
}
#tabs8 a {
float:left;
background:url("tableft8.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs8 a span {
float:left;
display:block;
background:url("tabright8.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#333;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs8 a span {float:none;}
/* End IE5-Mac hack */
#tabs8 a:hover span {
color:#591333;
}
#tabs8 a:hover {
background-position:0% -42px;
}
#tabs8 a:hover span {
background-position:100% -42px;
}

#tabs8 #current a {
background-position:0% -42px;
}
#tabs8 #current a span {
background-position:100% -42px;
}



this goes into the style sheet



<div id="tabs8">
<ul>
<!-- CSS Tabs -->
<li><a href="index.html"><span>Home</span></a></li>
<li><a href="lingerie.html"><span>Lingerie</span></a></li>
<li><a href="Shoes-Boots.html"><span>Shoes Boots</span></a></li>
<li id="current"><a href="clubwear.html"><span>Clubwear</span></a></li>
<li><a href="about.html"><span>About</span></a></li>
<li><a href="contactus.html"><span>Contact Us</span></a></li>

</ul>
</div>


this obviously with your own descriptions goes into the nav bar layout


Gabe showed me this program http://www.highdots.com/css-tab-designer/

have fun

[TraceyHand]

w00t
Go Gareth!!

edit...you know we're going to want a working example of that now, don't you?

[xdoktor]

Hey Gareth,

cheers for that...its simple when you know how!

will try it later as I'm 'coded out' now haha

many thanks

Andrew

[Cheapprices4u]

the test site is there ill put it over to working site later once im happy

going to break side nav bar first

[xdoktor]

Hey Master Gareth,

yes indeed, it has worked for me!

thanks again for that!

if you ever need hosting or grants for your clients, let me know!
(this applies to all friends on this forum )

Cheers

Andrew

[BodyBits]

Hi Gareth,

I have problems making it work with the smart layout..

i used the little program freeware css tab designer (superb!) and used the TabsF (F style) for a French site I am building for myself.

Do you have to replace any code in Actinic Stylesheet or do you just paste that style code? and when you paste, where exactly ?

Sorry, don't have much experience in navigations with V8 but will learn !

[jont]

When you are using CSS from any external source you need to ensure you are not replicating classes and the cascade is not being influenced by the specificity of the tag.

For navigation purposes drop the new code into a named <div id="n"> then prefix your new CSS accordingly with the #name and place at the bottom of the actinic.css stylesheet to afford best compatibility.

[BodyBits]

Thanks Jont.

I have tried again from scratch and still no joy..this is what I do :
I insert the following in the Horizontal Brochure Nav Bar Layout from the Library :
<div id="tabsF">
<ul>
<!-- CSS Tabs -->
<li><a href="index.html"><span>Acceuil</span></a></li>
<li><a href="contact.html"><span>Contact</span></a></li>
<li><a href="Conditions_ventes.html"><span>Terms Conds</span></a></li>
<li><a href="plan_du_site.html"><span>Plan du Site</span></a></li>
<li><a href="bijoux_body_piercing.html"><span>Shopping !</span></a></li>
<li><a href="Expeditions.html"><span>Expeditions</span></a></li>
<li><a href="bijoux_piercing_informations.html"><span>Info Piercing</span></a></li>

</ul>
</div>

And I insert at the bottom of the Actinic Stylesheet the following :
/*- Menu Tabs F--------------------------- */

#tabsF {
float:left;
width:100%;
background:#efefef;
font-size:93%;
line-height:normal;
border-bottom:1px solid #666;
}
#tabsF ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsF li {
display:inline;
margin:0;
padding:0;
}
#tabsF a {
float:left;
background:url("tableftF.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsF a span {
float:left;
display:block;
background:url("tabrightF.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsF a span {float:none;}
/* End IE5-Mac hack */
#tabsF a:hover span {
color:#FFF;
}
#tabsF a:hover {
background-position:0% -42px;
}
#tabsF a:hover span {
background-position:100% -42px;
}

#tabsF #current a {
background-position:0% -42px;
}
#tabsF #current a span {
background-position:100% -42px;
}

Then I make sure both images from the tab design (here: tableftF.gif and tabrightF.gif) are in the site 1 directory (even copied in the html folder too just in case)

Not Working. From what you see, I have a named <div id="tabsF">..what am I doing wrong?

And should I include the piece of code given with the Tab Menu as follow:
body {
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}

h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}

and where in the Actinic Stylesheet? Isn't this the bit of code that can clash with the classes in my stylesheet?

All I am trying to do here is to be able to generate an horizontal menu navigavigation to fit with the site using css as this seems to be the best way to have a lighter page (than working with pictures button) but also more search engine friendly...am I on the right track here?

Thanks for your help Jont

[Cheapprices4u]

did you copy the gif/jpg from the original html you created?
without the gif/jpg the tabs wont form

tabrightF.gif

did you copy this into your site directory?

[BodyBits]

Yes,
I did copy them in Site1 folder, and in the Html folder (thinking may be it needs it for the preview )..

What do you think the problem is?

Thanks

[Cheapprices4u]

a url to the site with problem then we can have a look?

[BodyBits]

The Site is not live yet, it is on my PC..all I can see is the smart header..

[BodyBits]

May be someone could give me (and all users) a fresh "step by step" to install the css tab navigation ?