13 replies [Last post]
JM007
Offline
newbie
Last seen: 17 years 13 weeks ago
Joined: 2005-07-03
Posts: 5
Points: 0

Hi all,

Recently I installed this css menu :
http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm

The links in the example are placed next to each other..

Webmaster Sites | News Sites

But when I try this code on my page it places the links under each other..and there are no <br>s in the code..

http://www.wettersewezels.net/stwsite/newindex.php
As you see "Club" and "Competitie" are under each other...I want them to stand like this : Club | Competitie

my code

	<center>
	
	
    
<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu2')"><div class="menuitem">Club</div></a>

<div id="anylinkmenu2" class="anylinkcss" style="background-color:#598059">

<a href="http://www.javascriptkit.com">Clubinfo</a>
<a href="http://www.freewarejava.com">Historiek</a>
<a href="http://codingforums.com">Bestuur</a>
<a href="http://www.cssdrive.com">Stadion</a>

</div>

<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'Competitie')"><div class="menuitem">Competitie</div></a>

<div id="Competitie" class="anylinkcss" style="background-color:#598059">

<a href="http://www.javascriptkit.com">Wedstrijden</a>
<a href="http://www.freewarejava.com">Klassement</a>

</div>

    
</center>	

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 5 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Problem with css menu

Welcome to the forum.

We do require that you read the How To section before posting questions like this.

Your page has no doctype, and no hope of validating. These are things we require before we can help you with the problem.

I mean, it's right there, in big letters - Read This Before Posting Laughing out loud

http://www.csscreator.com/css-forum/ftopic2471.html

Verschwindende wrote:
  • CSS doesn't make pies

JM007
Offline
newbie
Last seen: 17 years 13 weeks ago
Joined: 2005-07-03
Posts: 5
Points: 0

Problem with css menu

thanks for your reply!

I added doctype but still it doesn't change

http://www.wettersewezels.net/stwsite/newindex.php

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 1 week ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Problem with css menu

There are all sorts of things wrong with your page. Really, its seems like you are trying to run before you can walk.

Your problem is due to

.anylinkcss a{
font:normal 12px Verdana;
font-weight:bold;
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
text-indent: 5px;
}

display:block gets the browser to assign a block to the element. That block will be a vertical segment of the browser window. The next element (in normal flow) must start below that element.

I have highlighted all the orange stuff to say "why?". You are duplicating style attributes, making redundant settings.

In this forum, you are encouraged to post valid html and css along with your questions. If you don't you are effectively showing a mess. A mess where who can tell what of the any number of errors could be causing your problem. When we see valid html and CSS we know the poster has put some time into trying to solve the problem themselves or at least has tried to make things easier for people to see what is actually supposed to be going on.

JM007
Offline
newbie
Last seen: 17 years 13 weeks ago
Joined: 2005-07-03
Posts: 5
Points: 0

Problem with css menu

Chris..S wrote:

display:block gets the browser to assign a block to the element. That block will be a vertical segment of the browser window. The next element (in normal flow) must start below that element.

Thanks for your reply..but removing display:block doesn't have any effect..

http://www.wettersewezels.net/stwsite/newindex.php

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 5 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Problem with css menu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

is incomplete.

(Where do people get these incomplete doctypes from?)

If you read the post I linked to:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
<title>Web Page Template</title>

<style type="text/css">
<!--/*--><![CDATA[/*><!--*/

/*]]>*/-->
</style>
<script type="text/javascript">
<!--//--><![CDATA[//><!--


//--><!]]>
</script>
</head>
<body>

</body>
</html>  

That's a valid, basic HTML shell. Should get you started.

Verschwindende wrote:
  • CSS doesn't make pies

JM007
Offline
newbie
Last seen: 17 years 13 weeks ago
Joined: 2005-07-03
Posts: 5
Points: 0

Problem with css menu

thepineapplehead wrote:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

is incomplete.

(Where do people get these incomplete doctypes from?)

If you read the post I linked to:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
<title>Web Page Template</title>

<style type="text/css">
<!--/*--><![CDATA[/*><!--*/

/*]]>*/-->
</style>
<script type="text/javascript">
<!--//--><![CDATA[//><!--


//--><!]]>
</script>
</head>
<body>

</body>
</html>  

That's a valid, basic HTML shell. Should get you started.

Still didn't solve my problem Crying
http://www.wettersewezels.net/stwsite/newindex.php

You know I really LOVE this menu ,I would like to get it working decently

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 1 week ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Problem with css menu

I don't want to put you off, but the point I tried to make above is that there are some 631 errors/warnings in your current page, http://validator.w3.org/check?verbose=1&uri=http%3A//www.wettersewezels.net/stwsite/newindex.php

Now a lot of them are probably minor. But quite possibly some are important and maybe just one is causing your problem. Then again maybe not. The only way to know is to resolve those 631 individual issues. I suspect 631 is too many for even the most saintly contributors to this forum.

If these errors are due to generated code in the package you are using and which you can't really alter, then you should build a small test page which only has the menu in it. Validate that test page and try to solve the problem - asking here with a link to your test page.

JM007
Offline
newbie
Last seen: 17 years 13 weeks ago
Joined: 2005-07-03
Posts: 5
Points: 0

Problem with css menu

Chris..S wrote:
I don't want to put you off, but the point I tried to make above is that there are some 631 errors/warnings in your current page, http://validator.w3.org/check?verbose=1&uri=http%3A//www.wettersewezels.net/stwsite/newindex.php

Now a lot of them are probably minor. But quite possibly some are important and maybe just one is causing your problem. Then again maybe not. The only way to know is to resolve those 631 individual issues. I suspect 631 is too many for even the most saintly contributors to this forum.

If these errors are due to generated code in the package you are using and which you can't really alter, then you should build a small test page which only has the menu in it. Validate that test page and try to solve the problem - asking here with a link to your test page.

Hi,

I just spend another hour playing around with it only to find out that a div I added caused the trouble.

<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu2')"><div class="menuitem">Club</div></a>

<div id="anylinkmenu2" class="anylinkcss" style="background-color:#598059">

<a href="http://www.javascriptkit.com">Clubinfo</a>
<a href="http://www.freewarejava.com">Historiek</a>
<a href="http://codingforums.com">Bestuur</a>
<a href="http://www.cssdrive.com">Stadion</a>

</div>

I replaced it with

<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu2')"><b class="menuitem">Club</a>

<div id="anylinkmenu2" class="anylinkcss" style="background-color:#598059">

<a href="http://www.javascriptkit.com">Clubinfo</a>
<a href="http://www.freewarejava.com">Historiek</a>
<a href="http://codingforums.com">Bestuur</a>
<a href="http://www.cssdrive.com">Stadion</a>

</div>

and now it works..

Anyway thanks for your replies
*About the validator ,to be honest I don't understand it.
Let's randomly take one : Line 94, column 16: there is no attribute "bgcolor"

<body bgcolor="#598059" >

Well bgcolor exists in my htmlbook :? ,this might sound very stupid but it's confusing :oops:

**don't you just love this menu http://www.wettersewezels.net/stwsite/newindex.php Laughing out loud Cool

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 5 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Problem with css menu

I started a post in the How To, explaining some common errors.

Quote:

Line 4, column 101: there is no attribute "TOPMARGIN"

...link=#551a8b alink=#ff0000 topmargin=3 marginheight=3><table border=0 cellspa

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute.



Another simple one. This error occurs when you try to use an attribute that is deprecated in the Doctype you've set. In Google's case, there is no doctype, so the validator falls back to 4.01.

To fix errors like these, use the CSS equivalent margin-top: xxx; on the body selector.

Verschwindende wrote:
  • CSS doesn't make pies

Anonymous
Anonymous's picture
Guru

Problem with css menu

I think this is another "so what if it isn't valid, it works" things. We will know it is if this person disappears.

It seems that "adding a doctype" rarely alleviates the error in question so it is simply abandoned. "validating your markup" is in the same boat so "what's the point".

Are we going about this in the wrong way, perhaps? I don't know.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 1 week ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Problem with css menu

Triumph wrote:
Are we going about this in the wrong way, perhaps? I don't know.

I don't think so, at least not in this case. A page which is as big a mess as this one is unlikely to get much in the way of assistance. Just finding your way through it will take too long. They don't have to take our advice if they don't wish to, but I think it was the right advice to give.

Anonymous
Anonymous's picture
Guru

Problem with css menu

Chris..S wrote:
I don't think so, at least not in this case. A page which is as big a mess as this one is unlikely to get much in the way of assistance. Just finding your way through it will take too long. They don't have to take our advice if they don't wish to, but I think it was the right advice to give.
I didn't mean that you (or we) were giving bad advice, just that I'm not sure any advice given will be taken anyway.

It seems a quick fix is wanted and I know we are to try to be more helpful than "No doctype = no help" but it seems that after a quick fix is discovered the asker disappears. It would be easier on us and better in the end to demand the rules be followed but we'd also be giving out less advice and angering some away from standards and such. I don't know. Both seem negative.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 50 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Problem with css menu

JM007 wrote:

**don't you just love this menu http://www.wettersewezels.net/stwsite/newindex.php Laughing out loud Cool

Mmmm, not really. Your dropdown menu items are far too wide and they don't really site nicely on the bottom of your nav bar. But like has been mentioned already, JM's probably not coming back so is unlikely to read this. :?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference