Template - All CSS 2

[gavjof]

I did a quick Google and there are lots of topics on the net covering css problems with tables and floats.
http://www.webreference.com/authoring/style/sheets/layout/advanced/

Watch your DIV and table widths
Setting WIDTH:100% in a DIV can cause it to not match the width of DIVs set to auto (the default) in IE and, in IE5.5 when using table width="100%" IE assumes entire window width, not the DIV width, so you can use //width:100% in a surrounding DIV and width:inherit in a table's style sheet.

Curiously my test site works with the template and the default news module. See here:
http://www.3k.co.uk/baker/pages/news.php

Cheers

gav

[DGEC]

It's not the table from the news module causing the problem, because I even tried putting plain paragraph text into the left column, and the content still jagged the same way.

BTW, I'm wasn't trying to get help for my website, I was attempting to help debug the supplied template because it's a very good effort.  Might have to do that "long column" trick to get it working completely.

Gav, I was talking about the news snippet in the left column, not a news page. I don't see that in the 3k link.

Good webreference article by the way.

[gavjof]

ahh I see. You got a link to your design? I'd like to see it if that's okay with you

[DGEC]

Gav: PM'ed because I'm stll building page content. I'll switch back to your template.

[bgg]

Hi Gav:

the 4th level of sub-menu, Its not happening

what am i missing?

Babul

here's my code:

Code: [Select]


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#### Header Menu #####
#######################

Horizontal Drop-Down Menu based off :
http://www.tanfa.co.uk/css/examples/menu/tutorial-h.asp

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */
#navContainer {width: auto;display:block;clear:both;border-right:1px solid #000;}


/* Remove List Formattings
~~~~~~~~~~~~~~~~~~~~  */
 ul.menu, li.menu {
list-style-type: none;
margin: 0px;
padding: 0px;
}

/* Header menu */
#header_menu {position: absolute; margin-left: 20px;background:#555;}
#header_menu li {line-height: normal;}
ul#header_menu  {z-index: 10; clear: both;}

#nav {
height: 1.68em;
background: #666;
border-top: 0;
border-bottom: 1px solid #000;
padding:0;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 81%;
text-transform: uppercase;
width: auto;
/*
(Disappearing List-Background)
http://www.positioniseverything.net/explorer/ie-listbug.html
*/
position: relative; /* Fix the Stupid IE6 Bug */
}
#nav ul li {float: left; color: #fff; text-align: center; font-weight: normal;}
#nav ul li a {display: block; background: #666; padding: 5px 10px; padding-bottom: 4px; border-left: 1px solid #000; border-right: 1px solid #000; color: #fff; text-decoration: none;}

/* Root Level Link Formatting */
#nav ul li a:hover, #nav li a:focus {background: #d1d2d4; border-color: #fff; color: #4b4c4d;}
#nav li a:active, #nav ul li a.active {background: #d1d2d4; border-color: #fff; color: #4b4c4d;}

/* Current page Customisations*/
#nav li.menu-current a {background: #000; color: #fff; border-bottom: 1px solid #000;}
#nav li.menu-current a {font-weight: bold;}

/* 2nd Child menu */
#nav .menu li ul {position: absolute; width: 12em; margin: 0; display: none; text-transform: none; border: 1px solid #000; border-top: 0; font-size: 100%;}
#nav .menu li ul li {width: 12em; text-align: left; font-weight: normal; margin: 0; padding: 0; line-height: 1.2em;}
#nav .menu li ul a {width: 11.5em; padding: .6em .1em .6em .4em; background: #4b4c4d; color: #fff; border: 0;}

/* 2nd Child link hover */
#nav .menu li ul a:hover {color: #4b4c4d; background: #666; border: 0; color:#fff;}

/* Show and hide */
#nav .menu li:hover ul, #nav .menu li a:focus ul, #nav .menu li.subMenu ul {display: block;} /* show  2nd on hover */
#nav .menu li ul ul, #nav .menu li ul ul ul  { display: none;} /* hide  3rd  & 4th by default */

/* hide 3rd & 4th menus when hovering 1st/2nd  */
#nav .menu li:hover ul ul, /*3rd from 1st */
#nav .menu li:hover ul ul ul, /*4th from 1st */
#nav .menu li li:hover ul ul  /*4th from 2nd */ {display: none;}

/* show  2nd & 3rd & 4th on hovers */
#nav .menu li:hover ul, /* Show 2nd from 1st hover  */
#nav .menu li li:hover ul, /* Show 3rd from 2nd hover  */
#nav .menu li li li:hover ul /* Show 4th from 3rd hover  */ {display: block;}

/* 3rd Child Menu Appreances */
#nav .menu li ul li ul li a { width: 11.5em; padding: .6em .1em .6em .4em; background: #c6c6c6; color: #fff; }

/* 4th Child Menu Appreances */
#nav .menu li ul li ul li ul li a { width: 11.5em; padding: .6em .1em .6em .4em; background: #c3c3c3; color: #fff; }
/* Positioning the Pop-out Drops */
#nav li {position: relative;}

#nav ul ul ul {
position: absolute;
top: 1px;
left: 100%;
}




/* end menu */


[doc]

@bgg
Have you set the page level limits to 4? The option can be found in the WB backend Settings / Advanced Settings / Page level limits.

Regards Christian

[bgg]

hey.. u r a doc right?? ur suggestion cured my problem!

thanks

Now my task is to make the theme/template better to suit the site

[doc]

No I am no doc, doc is only my nickname 
Have fun with WebsiteBaker.

Regards Christian

[bgg]

Ok, one more problem: when I select a menu .. it is highlighted (current menu ) .. when I go to its submenu, the top menu is not highlighted !!

http://wb.asiasrc.org/

On this the same menu typoe works nicely/correctly: http://www.panjaurvillage.com/

whr is my error??

-- Babul

Code: [Select]

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#### Header Menu #####
#######################

Horizontal Drop-Down Menu based off :
http://www.tanfa.co.uk/css/examples/menu/tutorial-h.asp

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */
#navContainer {width: auto;display:block;clear:both;border-right:1px solid #000;}


/* Remove List Formattings
~~~~~~~~~~~~~~~~~~~~  */
 ul.menu, li.menu {
list-style-type: none;
margin: 0px;
padding: 0px;
}

/* Header menu */
#header_menu {position: absolute; margin-left: 20px;background:#555;}
#header_menu li {line-height: normal;}
ul#header_menu  {z-index: 10; clear: both;}

#nav {
height: 1.68em;
background: #666;
border-top: 0;
border-bottom: 1px solid #000;
padding:0;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 81%;
text-transform: uppercase;
width: auto;
/*
(Disappearing List-Background)
http://www.positioniseverything.net/explorer/ie-listbug.html
*/
position: relative; /* Fix the Stupid IE6 Bug */
}
#nav ul li {float: left; color: #fff; text-align: center; font-weight: normal;}
#nav ul li a {display: block; background: #666; padding: 5px 10px; padding-bottom: 4px; border-left: 1px solid #000; border-right: 1px solid #000; color: #fff; text-decoration: none;}

/* Root Level Link Formatting */
#nav ul li a:hover, #nav li a:focus {background: #d1d2d4; border-color: #fff; color: #4b4c4d;}
#nav li a:active, #nav ul li a.active {background: #d1d2d4; border-color: #fff; color: #4b4c4d;}

/* Current page Customisations*/
#nav li.menu-current a {background: #000; color: #fff; border-bottom: 1px solid #000;}
#nav li.menu-current a {font-weight: bold;}

/* 2nd Child menu */
#nav .menu li ul {position: absolute; width: 12em; margin: 0; display: none; text-transform: none; border: 1px solid #000; border-top: 0; font-size: 100%;}
#nav .menu li ul li {width: 12em; text-align: left; font-weight: normal; margin: 0; padding: 0; line-height: 1.2em;}
#nav .menu li ul a {width: 11.5em; padding: .6em .1em .6em .4em; background: #4b4c4d; color: #fff; border: 0;}

/* 2nd Child link hover */
#nav .menu li ul a:hover {color: #4b4c4d; background: #666; border: 0; color:#fff;}

/* Show and hide */
#nav .menu li:hover ul, #nav .menu li a:focus ul, #nav .menu li.subMenu ul {display: block;} /* show  2nd on hover */
#nav .menu li ul ul, #nav .menu li ul ul ul  { display: none;} /* hide  3rd  & 4th by default */

/* hide 3rd & 4th menus when hovering 1st/2nd  */
#nav .menu li:hover ul ul, /*3rd from 1st */
#nav .menu li:hover ul ul ul, /*4th from 1st */
#nav .menu li li:hover ul ul  /*4th from 2nd */ {display: none;}

/* show  2nd & 3rd & 4th on hovers */
#nav .menu li:hover ul, /* Show 2nd from 1st hover  */
#nav .menu li li:hover ul, /* Show 3rd from 2nd hover  */
#nav .menu li li li:hover ul /* Show 4th from 3rd hover  */ {display: block;}

/* 3rd Child Menu Appreances */
#nav .menu li ul li ul li a { width: 11.5em; padding: .6em .1em .6em .4em; background: #c6c6c6; color: #fff; }

/* 4th Child Menu Appreances */
#nav .menu li ul li ul li ul li a { width: 11.5em; padding: .6em .1em .6em .4em; background: #c3c3c3; color: #fff; }
/* Positioning the Pop-out Drops */
#nav li {position: relative;}

#nav ul ul ul {
position: absolute;
top: 1px;
left: 100%;
}




/* end menu */


[ruebenwurzel]

Hello,

your both examples are totally different menus and menu techniks. Done only a short view but yours is php and the other is javascript based.

Matthias

[gavjof]

Ok, one more problem: when I select a menu .. it is highlighted (current menu ) .. when I go to its submenu, the top menu is not highlighted !!

Yeah. I'm not sure how to go about doing this. The menu only has a class for current menu and thus you can control the appearance for the menu item for the current page. I'd ask on the thread about the show_menu2 to see if it is possible to control the format of the parent links to the child you're after.

The second site you showed is using Joomla CMS - which has also has a great add-on menu called exmenu (Extended Menu) which allows for similar control. Joomla is good, but not as easy or as fun to work with as wb IMO.

[drinky]

Hey gav,

Great template! Thanks for sharing.  I've done a simple WB site for a local charity but was having a few problems with my header image displaying correctly in IE6. www.m4tm.com.au

I've tried tweaking everything in the css file but can figure out why the background image wont display to the correct height.

Works fine in IE7 and Firefox.  Would be grateful if you could advise a solution to this annoying little problem.

Code: [Select]

#banner {
/*padding: 10px 20px 0px 20px;*/
                height: 120px;
background: #660099;
border: 1px solid #000;
background: url('/media/music.png') top left no-repeat;
                clear:both;
                display:block;

}
Thanks
Brett

[doc]

Hi,

have you already tried the following additional CSS formats? Some browsers are a bit picky if you swap parameters for the shorthand notation style (background). In addition try to set padding to 0px within the banner div.

padding: 0px;
background: url('/media/musig.png') no-repeat top left fixed;

Regards Christian

[gavjof]

Hi there is another reference to the #banner's height just underneath those lines:

Code: [Select]

* html #banner {clear:both;height:70px;} /* ie6 misbehaves again */I must have put some padding in one of the boxes (and shouldn't have) and thus had to specify a separate height for ie6.

[drinky]

Thanks guys,
It was that second reference to the banner height that fixed it for me.  You've saved my sanity!!

Thanks again for a great CSS template gav.

Cheers
Brett

[virgil]

Hi everybody

hope this topic is still "alive" (as last posting is dd April 2007) 

my question: is it possible (and if yes, how) to change from a 1. level horizontal menu ot a vertical one (eg. at the left side)? ... what changes would this implicate for the submenues?

tks for reply
virgil

[doc]

Hello,

yes this is possible by changing the CSS definitions of your template. Please have a look to the Listtutorial from Maxdesign which explain step by step how to achieve whatever menu you want by simple CSS.

Regards Christian

[ruebenwurzel]

Hello,

wether a menu is horizontal or vertical is only done by css. So you need to edit the index.php and the css file of this template.

Help about HTML and CSS you will find on the bookmarks page on our help page. There exists a lot of good HTML and CSS Tutorials in the web. As this is a only html and css question this forum here is the wrong place to ask. I hope you understand, that we only can give here support for WB spezial questions.

Matthias