16 replies [Last post]
sp3ctre
Offline
newbie
Last seen: 15 years 35 weeks ago
Joined: 2006-05-28
Posts: 10
Points: 0

Hi all,

Sorry to ask a question in my first post but I have been struggling with this for a day already!

I am trying to make a CSS menu... this went fairly well, but I am using firefox. I try it in IE and it looks a mess. If anyone can give me a helping hand with this that woulkd be much appreciated.

http://www.jimsefton.com/test/menu.php

Thanks in advance.

sp3ctre
Offline
newbie
Last seen: 15 years 35 weeks ago
Joined: 2006-05-28
Posts: 10
Points: 0

Menu with graphical ends

oops, here is the code (EDIT: corrected):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>menu</title>
<style type="text/css">


#topbar
{
width:738px;
height:100px
}

.yel_menu
{
    color: white;
    font-family: Tahoma;
    font-size: 8pt;
    font-weight: bold;
    text-decoration: none;
    background-color: #FFCC00;
    padding: 0px;
	padding-left:15px;
	padding-right:17px;
	padding-bottom:4px;
	padding-top:4px
}

.yel_menu:hover
{
    background-color: #EA9F15;
}

.yel_toolbar
{
    background-color: #FFCC00;
    padding-top:0px;
	float:left;
	margin-top:4px
}

.yel_menu_ends
{
float:left;
width:9px;
}



#yellowmenu
{
padding-left:396px;
padding-top:30px
}

.blue_menu
{
    color: white;
    font-family: Tahoma;
    font-size: 8pt;
    font-weight: bold;
    text-decoration: none;
    background-color: #8FB5D2;
    padding: 0px;
	padding-left:25px;
	padding-right:26px;
	padding-bottom:4px;
	padding-top:4px
}

.blue_menu:hover
{
    background-color: #5B94BD;
}

.blue_toolbar
{
    background-color: #8FB5D2;
    padding-top:0px;
	float:left;
	margin-top:4px
}

.blue_menu_ends
{
float:left;
width:9px;
}

#bluemenu
{
padding-left:34px;
padding-top:4px;

}



</style>

</head>
<body>

<div id="topbar">
&nbsp;


<div id="yellowmenu">

<div class="yel_menu_ends"><IMG SRC="http://www.jimsefton.com/test/images/yelmenu_l.gif" WIDTH="9" HEIGHT="21" BORDER="0" ALT="Menu cap"></div><div class="yel_toolbar"><a class="yel_menu" href="demo.php" title="Demo">&nbsp;&nbsp;&nbsp;&nbsp;Demo&nbsp;&nbsp;&nbsp;&nbsp;</a><a class="yel_menu" href="support.php" title="Support">&nbsp;&nbsp;&nbsp;&nbsp;Support&nbsp;&nbsp;&nbsp;</a><a class="yel_menu" href="contact.php" title="Contact Us">&nbsp;Contact Us&nbsp;</a></div><div class="yel_menu_ends"><IMG SRC="http://www.jimsefton.com/test/images/yelmenu_r.gif" WIDTH="9" HEIGHT="21" BORDER="0" ALT="Menu cap"></div><br>

</div>



<div id="bluemenu">

<div class="blue_menu_ends"><IMG SRC="http://www.jimsefton.com/test/images/bluemenu_l.gif" WIDTH="9" HEIGHT="21" BORDER="0" ALT="Menu cap"></div><div class="blue_toolbar"><a class="blue_menu" href="index.php" title="Home">&nbsp;&nbsp;Home&nbsp;</a><a class="blue_menu" href="about.php" title="About Us">About Us&nbsp;</a><a class="blue_menu" href="features.php" title="Features">&nbsp;Features</a><a class="blue_menu" href="solutions.php" title="Solutions">&nbsp;Solutions&nbsp;</a><a class="blue_menu" href="faq.php" title="Questions">&nbsp;&nbsp;&nbsp;&nbsp;FAQ's&nbsp;&nbsp;&nbsp;&nbsp;</a><a class="blue_menu" href="requirements.php" title="Requirements">Requirements</a></div><div class="blue_menu_ends"><IMG SRC="http://www.jimsefton.com/test/images/bluemenu_r.gif" WIDTH="9" HEIGHT="21" BORDER="0" ALT="Menu cap"></div>

</div>



</div>

</body>
</html>

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 6 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Menu with graphical ends

No doctype?

Please read the forum rules and guidelines, it's forum etiquette to actually bother reading the rules before you post. Honestly, I don't know why nobody does it.

Read them, follow the advice on them, and let us know what happens.

Verschwindende wrote:
  • CSS doesn't make pies

sp3ctre
Offline
newbie
Last seen: 15 years 35 weeks ago
Joined: 2006-05-28
Posts: 10
Points: 0

Menu with graphical ends

thepineapplehead wrote:
No doctype?

Please read the forum rules and guidelines, it's forum etiquette to actually bother reading the rules before you post. Honestly, I don't know why nobody does it.

Read them, follow the advice on them, and let us know what happens.

Well first of all thank you very much for your polite and considered response. I did read the forum guidelines, but obviously made a mistake. I don't know about you, but in the "real world" i.e. ouside of anonymous forums you can't get away with speaking to people in such an agressive tone.

You can tell this was a genuine mistake as I had made the effort to use the full reference images in my code, as per the guidelines, so I DID read them.

Yes, I made a mistake, I am sorry for that, I will correct it, but please don't speak to people in such a way, it is rude!

EDIT: I have corrected the code and it validates fine... again, sorrt for the mistake but you were out of order with your tone.

Anonymous
Anonymous's picture
Guru

Menu with graphical ends

sp3ctre wrote:
thepineapplehead wrote:
No doctype?

Please read the forum rules and guidelines, it's forum etiquette to actually bother reading the rules before you post. Honestly, I don't know why nobody does it.

Read them, follow the advice on them, and let us know what happens.

Well first of all thank you very much for your polite and considered response. I did read the forum guidelines, but obviously made a mistake. I don't know about you, but in the "real world" i.e. ouside of anonymous forums you can't get away with speaking to people in such an agressive tone.

Yes, I made a mistake, I am sorry for that, I will correct it, but please don't speak to people in such a way, it is rude!The only person being rude is you. If you are going to speak to a moderator like thepineapplehead like that then you'll treat others like that as well. That is not going to happen.

You think you're frustrated with your problem, try answering the same question that is answered in the rules 1000 times a month.

thepineapplehead was neither rude nor agressive. Maybe you meant strict. If you have a problem with authority or do not recognize authority then you're the one that's going to have problems in the "real world".

sp3ctre wrote:
EDIT: I have corrected the code and it validates fine... again, sorrt for the mistake but you were out of order with your tone.
I'm just wondering who gave you the right to correct others.

You will find that this forum is nothing but helpful if you don't go ahead and get yourself ignored by pushing people around.

sp3ctre
Offline
newbie
Last seen: 15 years 35 weeks ago
Joined: 2006-05-28
Posts: 10
Points: 0

Menu with graphical ends

ok I take your point, and I did apologise for my mistake. I just find people on forums sometimes go a little over the top when a new person makes a mistake. I apologise to you and to the moderator if my tones offended.

As I said, it was a genuine mistake on my part, I hold my hands up to that, but I had read the guidelines as I detained above, I just missed a bit. I just took offence to being told

Quote:
it's forum etiquette to actually bother reading the rules before you post

I would like (if possible) to move on from this debate though, and again I apologise for my part.

If anybody reading can help with my code problem then it would still be appreciated.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 6 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Menu with graphical ends

Just a quicky now to get my thoughts across, then I'll have a look at the code.

I do not mean to be condescending, however as Triumph has pointed out we get thousands of people asking for help with invalid messy code. It's frustrating when they don't follow the guidelines.

I apologise if my tone was a bit harsh, let's put this behind us and get onw ith the problem.

Brb! Wink

/edit 1

Notice if you remove the html code for all the yellow menu, the blue one lines up excellently in Firefox, and almost fine in IE.

Verschwindende wrote:
  • CSS doesn't make pies

sp3ctre
Offline
newbie
Last seen: 15 years 35 weeks ago
Joined: 2006-05-28
Posts: 10
Points: 0

Menu with graphical ends

thepineapplehead wrote:
Just a quicky now to get my thoughts across, then I'll have a look at the code.

I do not mean to be condescending, however as Triumph has pointed out we get thousands of people asking for help with invalid messy code. It's frustrating when they don't follow the guidelines.

I apologise if my tone was a bit harsh, let's put this behind us and get onw ith the problem.

Brb! Wink

Very much appreciated, and once again sorry for my tone too, I think Triumph is correct, this frustration has made me a bit touchy :?

sp3ctre
Offline
newbie
Last seen: 15 years 35 weeks ago
Joined: 2006-05-28
Posts: 10
Points: 0

Menu with graphical ends

thepineapplehead wrote:

Notice if you remove the html code for all the yellow menu, the blue one lines up excellently in Firefox, and almost fine in IE.

I tried this, but the problem is not alignment but the way it looks. In FF is looks like a big "sausage" LOL, but in IE it looks too thin in the middle.

Edit: Ah, I see what you mean... duh! Still, can't for the life of me work out what's happening here.... one of those instances where using tables would be far quicker, but it just feels so wrong to do that Shock

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 6 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Menu with graphical ends

Nope tables will make a mess of the whole thing, NEVER use them Tongue

Here you go, I've whipped up the start of a menu using a <ul> instead of numerous divs. It seems to work fine in IE6, Opera 8 and Firefox 1.5, have a go and see what you can make of it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>menu</title>
<style type="text/css">

ul#ymenu, ul#ymenu li {
	margin: 0;
	padding: 0;
	list-style: none;
	font: bold 8pt Tahoma, sans-serif;
	text-decoration: none;
	overflow: auto;
}

ul#ymenu { 
	background: #fc0 url(http://www.jimsefton.com/test/images/yelmenu_l.gif) no-repeat top left; 
	padding-left: 1em;
	height: 2em;
}

ul#ymenu * { 
	float: left; 
	text-decoration: none; 
	padding: 0; 
	color: #fff;
	padding: 0 1em;
	line-height: 2em;
	vertical-align: middle;
}

ul#ymenu a:hover {
background-color: #EA9F15;
}

</style>

</head>
<body>

<ul id="ymenu">
	<li class="first"> <a href="demo.php" title="Demo">Demo</a> </li>
	<li> <a href="support.php" title="Support">Support</a> </li>
	<li> <a href="contact.php" title="Contact Us">Contact Us</a> </li>
</ul>

</body>
</html> 

Verschwindende wrote:
  • CSS doesn't make pies

sp3ctre
Offline
newbie
Last seen: 15 years 35 weeks ago
Joined: 2006-05-28
Posts: 10
Points: 0

Menu with graphical ends

mmm, very interesting... I like it, thanks!!!

What I plan to do now is fix the width of the menu and make a "sausage" background so the right side of the menu looks correct too, is that the correct way to do it?

One question though, which I'm sure I could hunt for the answer but I'm sure it's a simple answer if you don't mind... why use "em" as opposed to "px"... as you may have guessed, i'm a but new to CSS

Thanks again for your help!! Laughing out loud

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 6 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Menu with graphical ends

It's just the way I do it, it resizes the box relative to the font size.

Example; if your font size is 20px high, and padding-left is 1em, that mean the left padding is equal to the width of a 20px high letter "M".

So, if you resize the text, the size of the "M" get's bigger, and so does the padding.

If you use something like "20px" padding, no matter how big the text is, th eleft padding will always be 20px.

As for the end cap, I was toying with classes. See the bit class="first" - remove that, and edit the last one to be class="last". Then, in the css, apply the right endcap to the li.

Let us know how you get on with it.

Verschwindende wrote:
  • CSS doesn't make pies

sp3ctre
Offline
newbie
Last seen: 15 years 35 weeks ago
Joined: 2006-05-28
Posts: 10
Points: 0

Menu with graphical ends

thepineapplehead wrote:

As for the end cap, I was toying with classes. See the bit class="first" - remove that, and edit the last one to be class="last". Then, in the css, apply the right endcap to the li.

Let us know how you get on with it.

Sorry, I think I am getting confused here... I don't understand the relevance of "first"... it isn't referenced in the CSS, is it? Or do you mean you put that in but I need to add CSS to attach to this now?

Thanks again.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 6 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Menu with graphical ends

It'd a bit complicated, but I'll try and explain.

Some modern browsers (read: any browser EXCEPT IE) support the :first-child and :last-child pseudo class.

This means that you can add styles to the first or last element, for example the first <li> in a <ul> or even the last <li>.

The way your menu is set up, the left rounded image is set as the background image of the <ul>.

To use the right rounded image, we would like to apply it as a background of the <ul> aligned to the right. But we can't have more than one background-image.

Therefore, it would make sense to apply it ONLY to the last <li> of the group. This would be done with something like:

ul#ymenu:last-child {
background: #fco url(rightcurve.png)
}

Unfortunately, IE doesn't support it.

We can still apply the image to the last list-item we just have to target it another way:

<li class="last"> a href="contact.php" title="Contact Us">Contact Us</a> </li>

Then the css:

ul#ymenu li.last {
background: #fco url(rightcurve.png)
}

Have a go, see how you do Wink

Verschwindende wrote:
  • CSS doesn't make pies

sp3ctre
Offline
newbie
Last seen: 15 years 35 weeks ago
Joined: 2006-05-28
Posts: 10
Points: 0

Menu with graphical ends

WHOA... need coffee before I attempt that... I just read it and my head span a little... hehe, thanks though, going to get coffee and then have a crack at it!

Thanks again, you're a star!

sp3ctre
Offline
newbie
Last seen: 15 years 35 weeks ago
Joined: 2006-05-28
Posts: 10
Points: 0

Menu with graphical ends

ok, well I have had my coffee and had a fiddle with the css and still not getting anywhere... am I doing anything obviously wrong?

http://www.jimsefton.com/test/menu.php

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 6 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Menu with graphical ends

If you note the li.last class, look what happens if you change the color from #fco to anything else Wink

You're getting there, keep playing around.

Verschwindende wrote:
  • CSS doesn't make pies