WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: thermalzombie on August 20, 2009, 05:46:40 AM

Title: New to CSS need menu help?
Post by: thermalzombie on August 20, 2009, 05:46:40 AM

Sorry if posted in wrong place.

Hi how do you make a menu or list go sideways could somebody please geve me a demo.

I have a menu on the top of my website www.thermalzombie.c om

I am using my website at the moment just to learn css I have created a div tag with the id of mainbar and within that div tag I have a unordered list for the menu.

Here is the html and css what do I have to add to make the menu go sideways.

HTML

Code: [Select]

<div id="mainbar">

<ul>
<li><a href="http://www.thermalzombie.com/">Home</a></li>
<li>Temp</li>
</ul>

</div>


CSS

Code: [Select]

#mainbar {
width: 100%;
height: 40px;
border-top-style:solid;
border-width:2px;
border-color:#0000FF;
background: #FF0000 url('menu_b.jpg') top left;
background-repeat:repeat-x;
}

#mainbar ul li {
list-style-type: none;
}

#mainbar ul li a:hover {
color: #FFFFFF;
background: #0000FF;
}


Title: Re: New to CSS need menu help?
Post by: BerndJM on August 20, 2009, 07:04:52 AM

Hi,

first of all, if you post sourcecode please use the code tag (the button with the #
And please understand, that our capacity is not so big, that we can give you a crash course in CSS.
Please Have a look at the help project, there are also some links to pages that give you informations about the css basics.

http://help.WebsiteBaker.org/pages/en/bookmarks.php

Regards Bernd

Title: Re: New to CSS need menu help?
Post by: WebBird on August 20, 2009, 10:42:56 AM

A good starting point for creating nav menus with CSS is List-a-matic:

http://css.maxdesign.com.au/listamatic/index.htm

There are very nice step-by-step tutorials and a bunch of ready-to-use CSS examples.

Title: Re: New to CSS need menu help?
Post by: thermalzombie on August 20, 2009, 01:15:55 PM

I finally made some progress got menus going sideways anyway but cannot find out what makes the rollover images higher or larger then the text also since getting the menu in the middle of my site working it has shrunkin in hieght not sure why yet all css menu hieght are set to 40px and this one looks smaller.

noticed some other issues on my site table no making page extend to fit and the list module I installed messes it up completely.

Thanks for the links CSS is a pain to learn.

Title: Re: New to CSS need menu help?
Post by: WebBird on August 20, 2009, 01:27:41 PM

Believe me - it's worth it. :-D

If you are using Firefox, you should install Firebug (http://getfirebug.com/) and Web Developer Toolbar (http://chrispederick.com/work/web-developer/)

Title: Re: New to CSS need menu help?
Post by: igalco14 on August 20, 2009, 04:52:21 PM

Hay i ran into some nice thing:
http://www.dynamicdrive.com/style/csslibrary/item/nested_side_bar_menu/
Is this good?
He is showing on how to do multi level side menus and giving you the HTML+CSS.
So i think it's answering your question.
Hope that i helped in someway..