WebsiteBaker Support (2.8.x) > Templates, Menus & Design

New to CSS need menu help?

(1/2) > >>

thermalzombie:
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: ---<div id="mainbar">

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

</div>

--- End code ---


CSS

--- Code: ---#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;
}

--- End code ---

BerndJM:
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

WebBird:
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.

thermalzombie:
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.

WebBird:
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/)

Navigation

[0] Message Index

[#] Next page