WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: gavjof on February 15, 2007, 02:57:23 PM

Title: Template - All CSS 2
Post by: gavjof on February 15, 2007, 02:57:23 PM
Hi all,

New Template - All CSS 2  (with horizontal drop-down menu)
(http://www.gavjof.com/upload/members/gav/allcss2-preview.png)

Similar to the allcss template, this template is all done with CSS, no images included - think of it as a bare-bones design. ;0)

The key feature is the support of a horizontal drop-down with up-to 3 levels. You just need to keep your top-level links to a minimum of perhaps 8-9 or else they will wrap and ruin the design. :0\

The colours used are just simple shades of grey to allow you to customise it to suit your own needs. I like grey what can I say. Feel free to take it and make it your own.

All markup should validate correctly to XHTML and CSS standards as well as conform to the DDA Priority 2 requirements set out by the WCAG (http://www.w3.org/TR/WAI-WEBCONTENT/).

To use the template you will need to install the show_menu2 module. See http://code.jellycan.com/show_menu2/ (http://code.jellycan.com/show_menu2/) for more information on show_menu2.

I've tested it in IE7, FF 2, Opera 8.54 and IE6 (which needed some hacks to work as usual).
Let me know if you find any more bugs.

<rant>
I don't care if you find any using IE on the MAC - please stop using this out of date browser :0p
</rant>

[gelöscht durch Administrator]
Title: Re: Template - All CSS 2
Post by: DGEC on February 15, 2007, 06:53:35 PM
This is the kind of thing I like to see!
Functional and standards-based coding, which can be easily customized.
And tested.

I'm a bit confused though. Did you update it today?  I downloaded one last week called allcss2 as well, but I can't find it anywhere else in the forum on addsons.

I'd upload it to see if there's any difference but I'm having login problems.
Title: Re: Template - All CSS 2
Post by: gavjof on February 15, 2007, 10:21:02 PM
Yeah, You helped me track down the ie6 issues:
http://forum.WebsiteBaker.org/index.php/topic,5321.msg33929.html#msg33929 (http://forum.WebsiteBaker.org/index.php/topic,5321.msg33929.html#msg33929)

This new version now looks fine in ie6 (as far as I know) :0)
Title: Re: Template - All CSS 2
Post by: ruebenwurzel on February 16, 2007, 05:35:00 AM
Hello,

will have a look to this template later and if it is ok we will add it to the addons page.

Matthias

Edit:

Added it to the addons page

http://addons.WebsiteBaker.org/pages/templates.php?template=allcss2 (http://addons.WebsiteBaker.org/pages/templates.php?template=allcss2)
Title: Re: Template - All CSS 2
Post by: gavjof on February 18, 2007, 09:15:25 PM
Nice work! Cheers :)
Title: Re: Template - All CSS 2
Post by: bgg on February 21, 2007, 05:32:47 AM
Hi G:

Thanks for your nice template. I am playing with your template at: http://wb.asiasrc.org

What I want to achieve these:


Thanks

Babul
Title: Re: Template - All CSS 2
Post by: kweitzel on February 21, 2007, 08:01:01 AM
Hi bgg,

at least for the style seitcher you'll need to research and programm a bit. A good starting point for this is this thread here: http://forum.WebsiteBaker.org/index.php/topic,4887.0/topicseen.html

The second issue, "sitewide fixed boxes" ... it depends on your definition of this term. Do you want to have a functionality where you have a WB page which is displayed in all other WB subpages as a content block (Global Blocks) or is it something else?

cheers

Klaus
Title: Re: Template - All CSS 2
Post by: bgg on February 21, 2007, 08:08:16 AM
Hi Klaus,

Thanks. I will work on the style switcher and will let you know...

The content box: I want one or mroe content boxes on in all the pages!
these may contain some existing WB things such as

1. Root menu
2. last 10 news items
4. last 10 forum posts
5. one random image from gallery
6. Latest events: list of events from the events section
7. a calendar: dates linking to events!

May be all these things will coem in the homepage.. and few will be shown in the other pages.

Currently the searchbox is shown in all the pages.

Perhaps I can hardcode few things in the template itself.

Thanks

Babul
Title: Re: Template - All CSS 2
Post by: kweitzel on February 21, 2007, 09:24:13 AM
You'll have to, but some scripts are available ...

1) Root Menu - normal menu call
2) look for script "Display news anywhere"
3) not yet done
4) Snippet Module Random Image
6) people in Germany are working on a script
7) see above

They can all be hardcoded into the template or included via "php - inlude" and/or curl.

cheers

Klaus
Title: Re: Template - All CSS 2
Post by: gavjof on February 21, 2007, 09:25:32 AM
Hi,

  • Submenu on the left block: working
  • Style switcher: atleast 2 sets of font size - large/small texts -- trying .. any idea?
  • sitewide fixed boxes: on the left block all pages... any idea?
  • a calendar: dates linking to events!

1. Have you moved your submenu from the left? as I can see it in the main content block.

2. Not thought about the style switching yet, although I've seen examples around that use js.
Have a look on here, I'm sure it's here someewhere: Web Developers Handbook (http://www.alvit.de/handbook/)

3. I presume you're talking about the fixed box pulling data from baker, as this would be easy to do in just the template? If the content is different on each page then you can add another content block. See this post: Multiple Blocks/ Menus (http://forum.WebsiteBaker.org/index.php/topic,1023.msg6183.html#msg6183)

4. There's a few Calendar's on the Add-ons directory. Give them a whirl and see if you like any.

Currently the searchbox is shown in all the pages.
why not try

Code: [Select]
<?php
// code used to show search on homepage only
if (MENU_TITLE == "Home") { ?>

<div id="searchbox">***Search goes here***</div>
<?php } // code used to show search on homepage only ?>


Cheers gav
Title: Re: Template - All CSS 2
Post by: Nobody on February 24, 2007, 08:40:21 PM
Really nice template - I want touse it for a site  :-D

But I have a question: Where I can change the size of the menue? Look at my site:
http://www.sv-fitness.de
The letters A-Z should be in one line.
Either every cell menu (A-Z) should be smaller or the complete menu size should be sized up. Where I can do the things in the screen.css?

Greetz
Sebastian
Title: Re: Template - All CSS 2
Post by: gavjof on February 25, 2007, 11:47:37 AM
You could always increase the width on #main from 750px.

The links have no width really, they just get some padding around the content:
See line 207...

Code: [Select]
#nav ul li a {display: block; background: #666; padding: 5px 10px; ....
Title: Re: Template - All CSS 2
Post by: Nobody on February 25, 2007, 12:47:14 PM
And if I change this line:
#main from 750px
What I have to change, too? Is there anything to change or is it only #main?
Title: Re: Template - All CSS 2
Post by: gavjof on February 25, 2007, 12:51:42 PM
Have a try. It depends on what resolution you're aimed for (with fixed width designs).

#main is the container div that holds all of the other content apart from '#extras' which sits outside this box and holds the footer details.
Title: Re: Template - All CSS 2
Post by: BerndJM on February 25, 2007, 02:19:12 PM
Hi Sebastian,
change the padding from 10px to 9px:
Code: [Select]
#nav ul li a {display: block; background: #666; padding: 5px 9px; padding-bottom: 4px; border-left: 1px solid #000; border-right: 1px solid #000; color: #fff; text-decoration: none;}this will do the trick

Greets Bernd
Title: Re: Template - All CSS 2
Post by: bgg on February 28, 2007, 06:27:58 AM
How can I add one more (4th level submenu) drop-down level into the horizontal menu. right now it supports 3 levels only.

Title: Re: Template - All CSS 2
Post by: gavjof on February 28, 2007, 03:55:21 PM
How can I add one more (4th level submenu) drop-down level into the horizontal menu. right now it supports 3 levels only.

Try duplicating the CSS code in "screen.css" and add further styles for ul ul ul or whatever.

Give this a whirl and let me know if it works:

Code: [Select]
/* 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; }

I've also added more comments so it's hopefully easier to track :0)
Title: Re: Template - All CSS 2
Post by: kweitzel on February 28, 2007, 04:54:16 PM
additionally you need to set the "allowed page level" in the settings of our WB installation (I think ou need to sow the advanced option for that).

cheers

Klaus
Title: Re: Template - All CSS 2
Post by: kweitzel on February 28, 2007, 09:53:05 PM
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
Title: Re: Template - All CSS 2
Post by: gavjof on March 01, 2007, 09:17:42 AM
wb t-shirts ?? sweet!
Title: Re: Template - All CSS 2
Post by: DGEC on March 12, 2007, 09:19:35 PM
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.
Title: Re: Template - All CSS 2
Post by: ruebenwurzel on March 13, 2007, 06:50:50 AM
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
Title: Re: Template - All CSS 2
Post by: gavjof on March 13, 2007, 08:43:50 AM
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]
#content table {
 width: 90%;
 margin-left:auto;
 margin-right:auto;
}
Title: Re: Template - All CSS 2
Post by: DGEC on March 15, 2007, 08:36:23 PM
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]
* 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]
<?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.
Title: Re: Template - All CSS 2
Post by: ruebenwurzel on March 16, 2007, 06:13:42 AM
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.  :wink:

Matthias
Title: Re: Template - All CSS 2
Post by: gavjof on March 16, 2007, 09:04:55 AM
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/ (http://www.webreference.com/authoring/style/sheets/layout/advanced/)

Quote
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 (http://www.3k.co.uk/baker/pages/news.php)

Cheers

gav
Title: Re: Template - All CSS 2
Post by: DGEC on March 16, 2007, 08:08:57 PM
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.
Title: Re: Template - All CSS 2
Post by: gavjof on March 16, 2007, 09:50:13 PM
ahh I see. You got a link to your design? I'd like to see it if that's okay with you :)
Title: Re: Template - All CSS 2
Post by: DGEC on March 19, 2007, 07:45:08 PM
Gav: PM'ed because I'm stll building page content. I'll switch back to your template.
Title: Re: Template - All CSS 2
Post by: bgg on March 23, 2007, 03:55:58 AM
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 */
Title: Re: Template - All CSS 2
Post by: doc on March 23, 2007, 06:26:59 AM
@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
Title: Re: Template - All CSS 2
Post by: bgg on March 23, 2007, 06:45:42 AM
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
Title: Re: Template - All CSS 2
Post by: doc on March 23, 2007, 06:48:39 AM
No I am no doc, doc is only my nickname  :-)
Have fun with WebsiteBaker.

Regards Christian
Title: Re: Template - All CSS 2
Post by: bgg on March 28, 2007, 06:42:14 AM
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 */
Title: Re: Template - All CSS 2
Post by: ruebenwurzel on March 28, 2007, 07:00:17 AM
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
Title: Re: Template - All CSS 2
Post by: gavjof on March 28, 2007, 08:42:21 AM
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. :)
Title: Re: Template - All CSS 2
Post by: drinky on April 02, 2007, 12:54:27 PM
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
Title: Re: Template - All CSS 2
Post by: doc on April 02, 2007, 03:55:07 PM
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.

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

Regards Christian
Title: Re: Template - All CSS 2
Post by: gavjof on April 02, 2007, 04:57:26 PM
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.
Title: Re: Template - All CSS 2
Post by: drinky on April 03, 2007, 12:11:08 AM
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
Title: Re: Template - All CSS 2
Post by: virgil on April 21, 2008, 12:20:13 PM
Hi everybody

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

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
Title: Re: Template - All CSS 2
Post by: doc on April 21, 2008, 01:06:23 PM
Hello,

yes this is possible by changing the CSS definitions of your template. Please have a look to the Listtutorial from Maxdesign (http://css.maxdesign.com.au/listutorial/index.htm) which explain step by step how to achieve whatever menu you want by simple CSS.

Regards Christian
Title: Re: Template - All CSS 2
Post by: ruebenwurzel on April 21, 2008, 01:07:06 PM
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