Template - All CSS 2

[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

[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

[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

[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

[gavjof]

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

Code Select Expand

* 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.

[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

[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 Expand

#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

[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.

[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

[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 Expand


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#### 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]

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

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]

@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]

Hi Gav:

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

what am i missing?

Babul

here's my code:

Code Select Expand



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#### 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 */


[DGEC]

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

[gavjof]

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

[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]

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

[ruebenwurzel]

Hello,

double check the divs in your template and the related css. Try learning about this from internet or books. Don't understand me wrong, but this forum her shoud be a forum for WB issues, your issues can be solved with standard html and css wich website developpers should be able to know what it is. 

Matthias

[DGEC]

Oh yes.  I remember about that table issue now.  But, if that's it, it's not an obvious fix to me.

The table involved is the one automatically created in the current standard news module. For this template, and any others that operate in a similar manner, all the supplied table widths seem to be 98%, so it should be okay. Just in case, I dropped all 3 to 90%, no joy.

Hmm... The FOOTER settings show 98% too but the previous/next page links add up to 100%. I think that's 100% of the row size, which is 98% of the DIV... Yup, tried changing that, doesn't help.

The template's screen.css has content container tables set to 90% as well. 

Code Select Expand

* html #contentContainer #content table {width: 90%;} /* ie6 fix to stop tables being pushed below floats */

That's what you were talking about in the previous message, wasn't it Gav? I tried adding the exact code you put there, but it didn't make any difference.

The only change I made to any defaults was to include the news block.

Code Select Expand

<?php display_news_items();  ?>I wasn't sure if I had to nest another DIV, so I tried it with & without. No difference.

Something else must complicating things!  I checked the HTML of the content again, pure & simple UL.

[gavjof]

Yes, Matthias is correct. I usually have to change the width of tables on the settings pages for the news/form page since the width="100%" pushs the content around.

You could always add the following to your screen.css file:

Code Select Expand


#content table {
width: 90%;
margin-left:auto;
margin-right:auto;
}


[ruebenwurzel]

Hello,

think this is a well know IE Issue. If you have a containerbased template (div containers like AllCss use) IE cannot display tables with a width of 100%. Using this moves the content down under the menu (in AllCss template). To solve this simply set the width to 98%.

Matthias

[DGEC]

Another IE twitch I found:

If the LEFT column will cause a slight bump in the positioning of the text in the CONTENT area.

I noticed it with an UL list that passed the bottom edge of the news box.  After the box, the bullets slight left, JUST enough to be annoying.
Eh??? Checked the page source... no different code between those LI's. 
Then I realized that it was on a level with the bottom of the news box. Smoking CSS in IE gun.

Check that list on PIE again. I think it's something about margins or padding. Might be the floats.

[gavjof]

wb t-shirts ?? sweet!

[kweitzel]

Due to the release date, this template has been entered into the template contest:

http://forum.websitebaker.org/index.php/topic,5594.0.html

cheers

Klaus