TUTORIAL: CSS Menu (Basic)

PixelPusher · 08-03-2011, 10:25 PM

Quote:

Originally Posted by Phreaddee

...

just for the record the anchors on the first post are not closed. surprised no one has picked up on that yet.

</a</li>
should be
</a></li>

Ha, can't believe no one caught that. Thanks!
Its the darn html/code wysiwyg in the forum, everything has to be written manually and there is no indent in code option, damn it

dreamcon · 08-07-2011, 11:56 PM

Hi,

I am facing trouble in fire fox browser in MAC. My last tab on the main menu is not getting displayed in Firefox for MAc version and it looks fantastic on all other browser. What would be the problem?

CaldwellYSR · 08-08-2011, 12:38 AM

Quote:

Originally Posted by dreamcon

Hi,

I am facing trouble in fire fox browser in MAC. My last tab on the main menu is not getting displayed in Firefox for MAc version and it looks fantastic on all other browser. What would be the problem?

You should open up a separate thread for the issue and in it you should put a description of the problem and a live link, the relative code, and/or an image of the problem.

ericibe · 08-08-2011, 01:07 PM

Thanks friends, you are doing really a nice work here.

ChurroV · 09-16-2011, 08:37 PM

I was using this template, and noticed that I couldn't center my menu by any normal means -- putting it in a div with margin:0 auto didn't work unless I defined the width of the div in the first place -- a width that could change at any moment, and that I'd thus have to keep redefining.

I did some experimenting and found a similar way to make a menu by just using <a> links -- no list -- that can be easily centered (but which for now lacks the capacity to have all the items in the menu have the same width).

PixelPusher · 09-29-2011, 03:06 AM

Quote:

Originally Posted by ChurroV

I was using this template, and noticed that I couldn't center my menu by any normal means -- putting it in a div with margin:0 auto didn't work unless I defined the width of the div in the first place -- a width that could change at any moment, and that I'd thus have to keep redefining.

I did some experimenting and found a similar way to make a menu by just using <a> links -- no list -- that can be easily centered (but which for now lacks the capacity to have all the items in the menu have the same width).

Yes the auto property for margin will only work when a width is defined.

PixelPusher · 09-29-2011, 03:06 AM

Quote:

Originally Posted by sofia20

Nice tutorial. Thanks for this and keep it up!

Thanks. I have been slacking on the tuts...gonna try to change that

petervanlier · 11-09-2011, 09:46 AM

Quote:

Originally Posted by PixelPusher

For all those who have asked about how to create a menu with a list (and not a table), here is a basic menu created with an unordered list and CSS.

Markup

HTML Code:

<ul class="menu">
   <li><a href="">home</a</li>
   <li><a href="">products</a</li>
   <li><a href="">press</a</li>
   <li><a href="">support</a</li>
   <li><a href="">contact</a</li>
</ul>

CSS

Code:

body {
margin-top:100px; /* JUST USED TO MOVE LIST DOWN PAGE */
}
ul, li, a {
margin:0;
padding:0;
}
ul.menu {
overflow:hidden;
}
ul.menu li {
list-style:none;
float:left;
border-top:solid 1px #bbb;
border-bottom:solid 1px #bbb;
border-right:solid 1px #bbb;
}
ul.menu li:first-child {
border-left:solid 1px #bbb;
}
ul.menu li a {
font:bold 11pt Tahoma, san-serif;
display:block;
height:40px;
line-height:42px;
color:#555;
text-align:center;
text-decoration:none;
text-transform:capitalize;
padding:0 30px;
background-color:#ddd;
}
ul.menu li a:hover {
color:#fff;
background-color:#666;
}

Thanks for sharing your code dude .
It helped me a lot.

jumpingspider · 02-03-2012, 02:59 AM

Appreciate your effort on sharing this! Basically, we all need to know this!

Precision · 02-16-2012, 02:24 PM

Yeah, I been actually looking for a simple tutorial on that. I randomly happened to stumble upon this site, and already like 3 things helped me out :P. Thanks a lot

08-07-2011, 11:56 PM	#52
dreamcon Bronze Member Join Date: Jun 2008 Posts: 29	Hi, I am facing trouble in fire fox browser in MAC. My last tab on the main menu is not getting displayed in Firefox for MAc version and it looks fantastic on all other browser. What would be the problem? __________________ Website Design Web Application Development Web design Company Web developers Web Design Melbourne

02-03-2012, 02:59 AM	#59
jumpingspider Silver Member Join Date: Jan 2011 Posts: 214	Appreciate your effort on sharing this! Basically, we all need to know this! __________________ Sales order processing software \| Business Intelligence

02-16-2012, 02:24 PM	#60
Precision New Member Join Date: Feb 2012 Posts: 5	Yeah, I been actually looking for a simple tutorial on that. I randomly happened to stumble upon this site, and already like 3 things helped me out :P. Thanks a lot __________________ $50 Monthly Contest / Moderators Needed! http://www.worldofdiscussions.com

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

08-08-2011, 01:07 PM	#54
ericibe New Member Join Date: Aug 2011 Posts: 4	Thanks friends, you are doing really a nice work here.

09-16-2011, 08:37 PM	#55
ChurroV New Member Join Date: Sep 2011 Posts: 17	I was using this template, and noticed that I couldn't center my menu by any normal means -- putting it in a div with margin:0 auto didn't work unless I defined the width of the div in the first place -- a width that could change at any moment, and that I'd thus have to keep redefining. I did some experimenting and found a similar way to make a menu by just using <a> links -- no list -- that can be easily centered (but which for now lacks the capacity to have all the items in the menu have the same width).