problem with image based submenu

due to shape of buttons

[webprutser]

At the moment I'm working on a website with a horizontol image-based menu bar. It also has a submenu. In itself this all works well, but I run into something that is caused by the form of the buttons. They are basically a rectangle, that is afterwards bent in a slight arch-form. All very nice, but the submenu causes me headaches. Since the arch-form is placed on an rectangular transparent image the area functioning as an anchor is basicly too large. When the submenu-buttons are displayed in a vertical row, they only navigate well when there is a lot of space between the arches (the transparent images underneath the arches are neatly positioned below each other without space). Obviously moving the images in a better position, causes overlap and ill-functioning navigation.
I have given it a lot thought yet and tried things with padding and an "empty button" as a background-image using text as an anchor, but the background-image even didn't show up.
I don't know all ins and outs of css possibilities and wonder if there is any way I can get my submenu-buttons closer together in a way the navigation works well. Might a z-index be of any help, can the "area" function be combined with a list ...

This is how the images are used in the submenu:

<li><a href="produkten.html"><img src="images/button_produkten.png" alt="produkten"></a> <!-- hoofdmenu button 2 -->
<ul>
<li><a href="herkomst.html"><img src="images/button_herkomst.png" alt="herkomst"></a></li> <!-- submenu button 2.1 -->
<li><a href="categorie.html"><img src="images/button_categorie.png" alt="categorie"></a></li> <!-- submenu butoon 2.2 -->
</ul>

Maybe someone can help me with this "wavy-stuff" ...

[alt131]

Hi webprutser, keep going at this rate and we'll be calling you webwhiz ;)
Interesting question, several things might solve the problem - maybe - but an important issue is making sure the menu remains usuable, which includes keeping the clickable area large enough so users can "hit" it easily.

Can you post the menu css, plus any image sizes that aren't specified in the css?

[webprutser]

Haha ... webwhiz, that'll be the day ....
It's basically the same menu I made with help on this forum, but in this case it is a horizontal menu. I changed the button-form I originally had, after a discussion with my brother. His view on websites is very worthwhile. He is more the technical type of guy, interested in good usability, not at all in fancy looking sites. I sometimes pay too much attention to the way things look, so his comments help me keep focusing on the functioning of a website. His first reaction to the site I'm making at the moment was "why all this wavy s h i t?"(spaces required to use this word). Well, uh, because it fitted to the theme of the lay-out, but I had to agree that I might have overdone it, so I "de-waved" it a bit. I'm happy with the way it looks now, but never thought of the problem the submenu might cause with navigating. Here is the CSS for the navigation:

#siteNavigation { /* added to get rid of whitespace between buttons */
margin:0;
padding:0px;
font-size:0;
}

/* ul */
#siteNavigation ul {
width: 150px; /* of image */
display: inline; /* for horizontal menu, also see ul li a */

}

#siteNavigation ul a img {
border-width: 0;
padding-bottom:8px;
}

/* ul li */
#siteNavigation ul li {
position: relative; /* so the second level takes position from it */
display: inline;
}

#siteNavigation ul li:hover ul { /* reveals second level when hovering on the first */
visibility:visible;
}

#siteNavigation ul li a {
display: inline; /* for horizontal menu, also see ul */
height: 48px;
}

/* ul ul */
#siteNavigation ul ul {
visibility:hidden; /* to initially hide the drop down menu */
position:absolute;
top:-3px;
left: 0px; /*positon submenu t.o.v. mainmenu */
width: 150px; /* of image */
z-index: 10;
}

#siteNavigation ul ul a img { /* image dimensions */
width: 150px;
height: 48px;
border-width:0;
}

/* ul ul li */
#siteNavigation ul ul li {
height: 49px; /* height of second level list element matched to image height */
}

[webprutser]

Not that it matters much, but I see a typing error in the last entry of the CSS code. Height should be 48px, not 49px.

[webprutser]

One more thing: the website is not ready yet, but when it is helpful I can put a page of it online so you have a better picture of the images I use. I have a site that's inactive at the moment and I could place it there.

[webprutser]

Back again. I might have the solution to my problem (thanks to my brother). What I'm going to try is to cut each submenu image in three pieces, so I have better control on navigation. Theoretically it should work, but ... in practice? I'll be back to put down the results.

[webprutser]

Yeah !
My promotion to webwhiz is coming closer. :-)
It's working perfectly now. I indeed cut the image in three equal-sized parts, put them in two classes (one for the top section, one for the middle and bottom part) and added padding to each top section to close the transparent gap between the buttons. I linked each top section to the button above it, so navigation is working fine now.
In case someone wants a "wavy-menu-bar" and facing the same problems I did: a bit of photoshop and padding will do the job.

[alt131]

Hi webprutser, yep, sounds like webwhiz is approaching fast: Fantastic you have a solution - and also taking a "team" approach to "evaluating" sites from different perspectives - especially things that seem less "glamorous" than design - like usability.

Your descriptions were easy to understand, but reproducing the issue was tricker. I wanted to do that because the menu that has evolved through the WebmasterWorld posts has been focussed on keeping the code as simple as possible. IMO that is exactly right, but I wondered if this specific problem required taking more "control", and manipulating individual elements a bit more.

I was thinking about possibilities like setting the images as background-image, then manipulating the size of the <a> and/or the <li> to retain a good size "clickable" area - or some variation of that. Your solution of adjusting padding is along those lines, but the down-side to slicing images is more "hits" on the server, and the ideal is to avoid that.

I'm quite intrigued by the menu - "de-waved" or not ;) - so if you feel inclined to point to a demo page, I'd enjoy taking a closer look to see if there might be a solution that avoids slices.

[webprutser]

All right, I'll try to put it somewhere and give you a note. Well, that is when you promise not to ask me why I chose the "wavy s h i t" :-).
Maybe I should explain my choice.
It concerns the website of a fairtrade shop and like all people in the store, I work as a volunteer. When I volunteered to be a text writer for the site I ran into all kind of problems. It is CMS based and it is a small disaster. In the past content was added to it by copy/past WordPerfect text and that caused all kind of conflicts. I had no control over HTML/CSS and was very limited in lay-out choices. Finally it was decided that not only the text was going to be adapted but a new website would be made.
The shop involved is part of a series of these shops in Holland and well-known in the country, being one of the first organisations, that paid attention to it. I know more of these shops in my neighbourhood and they all give you a certain feeling when you are visiting them. Different, so the lay-out of the site had also to be "different" to my opinion. It's no clean-cut organisation, so I wanted something looking "organic". Right angles didn't fit this concept in my view, that was how I ended up with a wavy-menu-bar.
In a more phylosophical way, I think life in general has all kind of waves. When you look at history you see people in certain time-spans are focussing on certain items, which eventually die down again. The climate has it waves, etc. Of course a website-visitor will not think of all these things and is mainly interested in getting quickly at the page he needs. That's where people like my brother come in. If you put me on an island and let me make a website I end up with a site I can write a book about, but no one wants to visit it.

[webprutser]

I have put the page online. I deliberately made a mistake in it, for I'd like to know your opinion on the following. I try to change from table to box-model by bits and pieces. Above the navigation there are two images which are not in a table. For this example I put the first image in a div with a class attached to it, but the image doesn't center like I expected/wanted it to do. Looking at firebug, it turns out to take the style rules from parent (body). What I don't understand and what causes choosing me for tables most of the time is why on earth the image doesn't do anything with the class attached to it. I tried span as well, no result either.
Also don't look at the background of the submenu-buttons, need to be changed.
This is the URL: [edit]

[edited by: alt131 at 8:07 pm (utc) on Jul 9, 2011]
[edit reason] Thread Tidy - 404 [/edit]

[alt131]

Hi web-whizzy ;) no need to explain design choices - usually they only draw comment if they cause, or have been implemented in a ways that causes page rendering issues - like very slow downloads due to lots of hits on the server, or usability or accessibility issues.

I see three issues in this thread. One, your specific question about laying out the "header" images, two laying out the menu, three, taking away the tables completely.

Centring the "heading/Logo" images

For this example I put the first image in a div with a class attached to it, but the image doesn't centre like I expected/wanted it to do. Looking at firebug, it turns out to take the style rules from parent (body). What I don't understand and what causes choosing me for tables most of the time is why on earth the image doesn't do anything with the class attached to it. I tried span as well, no result either

The code for those images is:
<div class="img_center"><img src="myimage"></div>
<h1 align="center"><img src="my image"></h1><br>
So the containing elements are classed, not the images.
Recall your discussion about block and inline elements in problem with z-index [webmasterworld.com]. div and h1 are block elements. That means that unless a width is specified they wll expand the full width of the viewport. Set a border to see this in action.
The css uses the two main ways of trying to center elements:
.img_center {
margin-left: auto;
margin-right: auto;
display: block;
}
As a div is a block element the block is redundant and can be removed. Note that display is not inherited [w3.org] so it has no affect on the image inside the div. More on this on issue 3, but to center the div, all that is required is a width - the same size as the image is best, then set
margin:0 auto (shorthand for top/bottom left/right).

h1 {
margin: 0;
padding: 0;
}
plus align="center" inline

Avoid inline css - easier for code management to have all the css in one place - in the stylesheet. Plus align is deprecated [w3.org], so use the technique above: set a width and then auto left/right margins and the image will be centred. However, in this case you want some space between the image and the menu that follows, so remove the line <br>eak and also set a margin-bottom. It might look something like this:
margin:0 auto 18px (top left/right bottom)

Laying out the menu
For later readers, this is a horizontal drop-down menu created from a list. The "wave" effect is created by the shape of the images being used to create each link, so the complete menu looks like several of these ~ laid out horizontally, or a serpentine lying horizontally. The layout of the links varies cross browser: In some the dropdown is drawn below the top-level menu items, in others the second-level items are positioned so they are stacked over the top of the top-level items.

The first issue with the code are those divs inside the ul. This is invalid, so they have to go ;) The second is that there is no text, only images, which creates issues for non-visual users, so needs to be improved. (I think) the original images had all the "words" for each link in one large image, and the solution used was to slice the large image into smaller ones to produce individual images for each link. The down-side is that creates more requests to the server and increases the download time. Current recommendation is the exact opposite - take smaller images and combine them into a larger image, and I believe that is possible here. The fourth issue is reliance on browser defaults, which causes layout differences cross-browser. I'm a real advocate of working with, not against browsers, but this design makes it necessary to take a bit more control.

One way to do this is to set the "image" as a background on the ul, then position the li and links so they appear to be in the same position as the words of the image for visual users. For non-visual users, write the links into the html in the ordinary way, then hide the text from visual users. This has the advantage of removing "presentational" images from the html.
The technique demonstrated below does not display the text if images are turned off, only css, but it is available to users of assistive technology. I've also included titles, which at least display on hover for visual users, but would probably irritate a user of assistive voice technology who would hear the links read out twice - useful to make the title say something slightly different. Note SEO experts might have concerns about hiding text in this way. All the dimensions (width and height) and the positioning (top) will need to be adjusted to accommodate the actual size of the re-assembled image.

<style type="text/css">
ul#siteNavigation {
background-image: url(top-level.png);/*the whole top-level menu images combined into a single image*/
padding:0;
margin: 0 auto;
list-style-type:none;
width:744px;
height:63px;
}

ul#siteNavigation li {
float:left;
position: relative;
height:63px;
width:146px;
}

ul#siteNavigation li a {
position: absolute;
height:50px;
width:146px;
/*hiding the text*/
/*hiding the text*/
color:transparent;/* works for all but ie, but is NOT valid*/
/*opacity:0; works for all browsers but ie */
/*filter:alpha(opacity=0); works for ie, but does not validate*/
font-size:0; /*for all but winSafari and ie7*/
line-height:0; /*for ie7 but not winsafari*/
}

/*position the links for hover effects */
.concave {top:0;}
.convex {bottom:0}

ul#siteNavigation li ul {
background-image: url(second-level.png); /*the whole sub-menu images combined into a single image/*
list-style-type:none;
padding:0;
margin:0;
position:relative;
top:43px;
width:146px;
height:112px;
visibility:hidden;
}

ul#siteNavigation li ul li {
/*adjustment to allow for different image*/
height:40px;
}

ul#siteNavigation li:hover ul {
visibility:visible;
}

</style>
</head>
<body>
<ul id="siteNavigation">
<li><a class="concave" href="home.html" title="Home">Home</a></li>
<li title="product">
<ul>
<li><a href="one.html" title="One">Item One</a></li>
<li><a href="two.html" title="two">Item Two</a></li>
<li><a href="three.html" title="three">Item Three</a></li>
</ul>
</li>
<li><a class="concave" href="herkomst.html" title="Bedrijven">Bedrijven</a></li>
<li><a class="convex" href="information.html" title="Information">Information</a></li>
<li><a class="concave" href="Contact.html" title="Contact">Contact</a></li>
</ul>

Converting from tables.
This is a great page to convert! Once you see a possible solution I'm sure you'll wonder why you ever bothered with all those table rows ;) But we've a natural disaster, and while tiny by international standards, devastating because we experience very few and we have two personal friends still missing as I type. So after this testing week I need some rest. The menu suggestions will give you something to explore, and I'll try to get back to the page conversion tomorrow or next day.

[webprutser]

I have a bad habbit and that is testing a site in IE far too late. I'm afraid I'm not so mild with regard to Internet Explorer. I have little sympathy with a browser that causes so many webdevelopers time and again troubles. It's a pity so many people still use it, since they are you are stuck with it.
OK, back to the real thing. The header and the menu are things I'll have to try. The menu looks like abracadabra to me at the moment. As far as the user-unfriendly absence of text is concerned: in itself I agree with your point of view, but it concerns a website for a rather small group of users. It serves a small area of potential customers. Of course that could involve someone visibly disabled, but it's not my top priority in this case.
Why are div's inside an ul not allowed? I don't know by heart if I used it more often, but can imagine I have a list and I want to use for example different text colors. How can I manage to do that if I may not use a div?
I'm not sure if I get the idea you are proposing for the menu. I understand the idea of the whole main menu and the whole submenu being three images in total, have some things tried in the past with that. Found a post somewhere that moved the text out of sight, but it didn't work. I think I have to write the text of the links now, but make it invisible and the links will still work. I'll try it.
I know I have used some style elements inside html, html checks told me I was not allowed. Sometimes I didn't see any other solution and my theory is "make something that works instead of telling me you can't do this or that". It is recommended to use CSS in a style sheet, to separate content and styling. Fine with me, but if there's anything I really hate, than it's working with bad tools. Now I'm willing to believe that CSS isn't a bad tool, but I never had any troubles learning new stuff and am surprised every now and then how much trouble I still have with CSS. If it was the only field in which I was learning, I'd say I was getting old and rusty.
Once again my being a not-natural English speaker/reader causes me to be not sure about the last part of your post. You need some rest, as much as that is clear to me, so take your time. I'll be busy with all the new information and making new button-images. Version too many.

[webprutser]

I reread your post. Odd. I was under the impression you wrote that the menu didn't work properly in IE. I've read more posts today, so I probably mixed up things.
This means I will postpone the changes proposed for about two weeks. This is because the site has to go online within short and there is (as ever) still a lot to do. One of my rules is not to insert new things last minute, if they aren't really necessary. Since the menu works in FF as well as in IE, I will look at the alternative in two weeks.
I noticed the page has a long loading time. It's caused by the background image. I just had it resampled and it's better now (not online btw), but still rather large (550 kb). Don't know what else to do. For the next two weeks I'm fine with it. :-)

[alt131]

A quick response to some of your questions. I obviously didn't explain very well at all. Sorry webprutser, but the menu does work in ie - I just gave you some choices about how to hide the text in the links.

As far as the user-unfriendly absence of text is concerned: in itself I agree with your point of view, but it concerns a website for a rather small group of users

And I also agree with your point of view - knowing your target market is a really important part of making the best decision about what code to use, but I do urge coders to try to use solutions that are accessibility friendly as well.

Sometimes I didn't see any other solution and my theory is "make something that works instead of telling me you can't do this or that".

Ahah! But then you post at WebmasterWorld and discover how to make it work ;)
Also remember the validator's messages you "can't do" something comes from a time when there was limited standardisation between browsers, and advocating for standards was an important step towards avoiding having to write multiple versions of every page for each different browser and version, and then make sure the correct page of code was served to the right browser. Yes - some coders would write four or five different versions of the same page. I didn't, but it was common. internet explorer 6 was the most standards -compliant browser when it first came out.

I understand the frustration with browser variations, and why it is easy to focus on ie. Another view is to remember that things have got a great deal better, and a big reason is that internet explorer led standards conformance. Currently not a single browser is 100% conformant - so only talking about one browser seems unfair. Anyway, I don't argue about this, but it's another way of looking at the issue. I always remember that most of my learning has been caused by browser differences/non-conformance - and I like to learn ;)

Now I'm willing to believe that CSS isn't a bad tool, but I never had any troubles learning new stuff and am surprised every now and then how much trouble I still have with CSS. If it was the only field in which I was learning, I'd say I was getting old and rusty.

I disagree. You are trying to do things that are quite challenging. You're asking lots of extremely technical questions things, and are trying to understand the theory and put it into practise at the same time. From your posts you are putting in a lot of time yourself, then posting here and we are suggesting something completely different so you start again. All this in a language that is not your first language. One of the reason you've been getting very long explaining posts from me is because your desire to learn and the speed you have been understanding new ideas is quite extraordinary.

I can understand if you feel overloaded with new information - but you really are doing extremely well. Right now I see you wobbling on the edge of the major break-through: You have enough css knowledge to try lots of things, not quite enough to achieve what you want as fast as you would if you went back to using tables. Keep at it and this will be over very shortly.


Good on you for reducing the background image size - I also noticed the page is slow to load (over 35 seconds at my end). You re correct that part of that is the size of the background image, but other causes are the total number of images being requested - so combining and optimising should make it faster.

To explain what I mean about the menu, Currently the "background" texture effect for the top-level menu items is the same "texture" as the background image for the page, so all you need is the transparent images for each top menu item - and you already have those:
button_home.png, button_produkten.png, button_herkomst.png, button_categorie.png, etc.

In other posts you've mentioned photoshop, so create a new image with a transparent background about 100px high and 900px wide. Paste the existing images into that new image, lining them up side-by-side so you reproduce the "wave" effect that you have in the web page. Use photoshops automatic canvas resize to remove the extra canvas, then save this new image. Mine was named "top-level.png", and that's what I set as the background-image for the ul - only takes a couple of seconds.

Found a post somewhere that moved the text out of sight, but it didn't work.

Probably because it moved the <a>/<li> - which is why I've proposed "hiding" the text instead.

The menu looks like abracadabra to me at the moment.

Try it and see - it is the same menu and code you have been refining in the posts here. All I've done is take your existing menu and make the changes necessary to use the images as background-image rather than in the html itself.

[webprutser]

I don't know what you do for a living, but should you ever wonder what to do next, I'd say be a teacher. It is not often that people not only explain things well, but are motivating also.
I understood the part of the new images, but was wondering how the menu was going to work. It will be better just to try the code and see what happens. That works better most of the time.
Thanks so much for taking so much effort. What choice do I have but abandon table lay-out? :-)

[alt131]

Thanks for your kind words webprutser.

Why are div's inside an ul not allowed? I don't know by heart if I used it more often, but can imagine I have a list and I want to use for example different text colors. How can I manage to do that if I may not use a div?

One way to think about divs inside <li>sts is to remember a div is a page <div>ision. It should be used to <div>ide or separate different parts of the page content. Common uses are for a header and main content - as in the example code. But a list is a group of items that are related to each other, so <div>iding the items in the list doesn't really make sense.

Techniques to achieve different text colours will depend on what you want. Wrapping the text in <b>old or <i>talic is one way. Set a class on the list items, or depending on the html, adjacent sibling or attribute selectors [w3.org]

This is a good example of one of the important aspects of making the jump from tables-for-layout to using styling. The goal was to change the text style, but using a div changes the HTML.

Following is a possible solution for converting the page from tables to divs. For later readers the header and "logo" had been placed in a div and h1, the menu and main content into table rows. The basic layout was a fixed-width single column, and the table-for-layout used minimal cells. That nice clean code made it easy to take the next step and remove the tables completely.

The code hasn't been "examplified" as the links are standard. It is not a best practise example - the specific design required using the same background-color and color - something usually resolved before the code stage, and uses color:transparent which is not valid css2.1, but will be in css3.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<meta http-equiv="X-UA-Compatible" content="IE=8" >
<title>Wereldwinkel</title>
<meta name="keywords" content="Wereldwinkel, Hoorn, Noord-Holland">
<style type="text/css">
body {
font: 16px Georgia, serif;
color: #000;
background: #000 url("background-2.png") no-repeat top center;
min-height:1505px; /* The total height of the background-image - doesn't have to be set, but means the bottom curved corners are visible */
}

#header {
background: transparent url(hagedisjes.png) no-repeat center top; /* image centred by background-position */
width:950px;
margin:0 auto; /* with width, centres the header */
border:1px solid transparent; /* to avoid collapsing margins */
}

/* hiding the text - specifying "a" is necesary for winSafari*/
#header, #header a {
/*hiding the text*/
color:transparent; /* will not validate, but a valid colour in css3, and understood by all except ie*/
font-size:0; /*for ie*/
line-height:0; /*for ie 7*/
}

h1 {
/* no need to give a width and center using margin: 0 auto as the background-position centres the image, and no-repeat stops the image repeating horizontally */
background: transparent url(wereldwinkel_hoorn_groot.png) no-repeat center top;
margin-top:188px;
height:48px;
}

ul#siteNavigation {
list-style-type:none;
/*new image created by combining all of the top-level links images into a single image*/
background: transparent url(top-level.png);
width:744px;
height:63px;
padding:0;
margin: 30px auto 40px;
}

ul#siteNavigation li {
float:left;
position: relative;
height:63px;
width:146px; /*adjust to suit actual image dimensions*/
cursor:pointer; /* changes mouse pointer to a hand when the drop-downs are hovered */
}

ul#siteNavigation li a {
position: absolute;
height:50px;
width:146px; /*adjust to suit actual image dimensions*/
}

ul#siteNavigation li ul {
/*Image created by combining all of the second-level link images into a single image file */
background: transparent url(second-level.png);
list-style-type:none;
position:relative;
top:43px;
width:146px;
height:112px;
padding:0;
margin:0;
visibility:hidden;
}

ul#siteNavigation li ul li {
height:40px; /* adjust for image heights */
}

ul#siteNavigation li:hover ul {
visibility:visible;
}

#maincontent {
width: 750px;
margin:0 auto;
padding-top:10px; /*avoids padding on the image and p */
padding-bottom:100px;
}

.img_left {
float: left;
margin: 0 20px 10px 0;
/*if you decide not to set the body to the full height of the background image, set a bottom margin on the image to push the total page height down the desired 100px */
/* margin: 0 20px 110px 0;*/
}

</style>


</head>
<body>
<div id="header">
<h1>WERELDWINKEL HOORN</h1>
<ul id="siteNavigation">
<li><a href="index.html" title="home">Home</a></li>
<li title="produkten">
<ul>
<li><a href="herkomst.html" title="herkomst">herkomst</a></li>
<li><a href="herkomst.html" title="categorie">categorie</a></li>
<li><a href="fair_trade.html" title="fair_trade">fair_trade</a></li>
</ul>
</li>
<li><a href="bedrijven.html" title="bedrijven">bedrijven</a></li>
<li title="informatie">
<ul>
<li><a href="fair_trade.html" title="fair_trade">fair_trade</a></li>
<li><a href="fair_trade.html" title="fair_trade">fair_trade</a></li>
<li><a href="fair_trade.html" title="fair_trade">fair_trade</a></li>
</ul>
</li>
<li><a href="contact.html" title="contact">contact</a></li>
</ul>
</div>

<div id="maincontent">
<img width="365" height="550" src="homepage.png" class="img_left" alt="My alternate text inc as image does not display">

<p>In onze winkel staat een enthousiaste groep vrijwilligers klaar om u van dienst te zijn met een bijzonder assortiment produkten uit niet-westerse culturen: knuffels uit Sri Lanka, trendy <b>sieraden</b> en geurige <b>wierook</b> uit India, authentieke <b>muziekinstrumenten</b>, leuke <b>woonaccessoires</b> en bijzondere bureau-artikelen.</p>

<p>Bovendien verkopen we smakelijke <b>levensmiddelen</b> zoals koffie, thee, cacao, sauzen, chutneys en wijn.</p>

<p>Om ons assortiment aantrekkelijk te houden kopen we geregeld nieuwe produkten in, zodat het de moeite waard is om onze winkel regelmatig te bezoeken.</p>

<p>Koop je iets in een Wereldwinkel dan bevorder je bovendien de <b>eerlijke handel</b> en steun je de ontwikkeling van zilversmeden, pottenbakkers en koffieboeren op het zuidelijk halfrond.</p>
</div>

</body>
</html>

webprutser, remember ths is web-whiz stuff - the goal is not to push you off the edge so you splatter after a very long fall. So if you don't feel a "parachute of understanding" opening, come back with questions before you hit the bottom;)

[webprutser]

I'm way behind with reading. I have one more, busy, week to go with this website, the deadline being 9th March. I tried the centering of the header with your code and it worked. So, thanks for that. The image beneath it in the example I gave should also be centered, so no problem there. On other-than-home pages I use a smaller image, that should be right aligned.
I searched a bit on the internet and I have it in the right place, but not in the right way, for it renders differently with different screen resolutions. I don't know, however, how to get it working in the proper way. This is what I tried:

#img_ww_klein {
position: relative;
left: 750px;
display: block;
width: 300px;
margin-bottom: 20px;
}

The position relative and left 750px puts it in place, but only in the right place given a certain screen resolution.
I'm not panicking, for when I can't get it right using a div I put it in a table for the time being, but if you have a chance to help me, it is one step more on the box-model way.

As for the rest on this page: I survived the terror of trying to get a good working sub-menu on my own, which didn't succeed - that is not on my own - so in a week time I dare to confront the above.

[alt131]

Hi webprutser, I hadn't forgotten - busy and trying to think of the easiest solution. In part because I am not sure what the code looks like given you are still working on it, so will have changed. Anyway, like most things, simple should work.

I know you're enjoying positioning, but leave it aside for now (or treat this as achieving it in a slightly different way), because you can use the same technique you used to centre the header image.
If I am understanding your code at this stage, you used something like:
background: transparent url(hagedisjes.png) no-repeat center top

To break that down so you can manipulate the code to get what you want for this other image:

background: <-- shorthand for background-color, background-image, background-repeat, background-position
transparent <--- background color - transparent because you want the texture of the big background image to show through the other images
url(hagedisjes.png) <--- the image - which of course would be different from the header image
no-repeat <-- makes sure the image is only painted once, rather than being painted multiple times until it fills the whole element
center <-- position the image in the horizontal centre
top <-- position the image at the vertical top

So that makes it easy to see that if you the image to the right, all you have to change is:
background: transparent url(name of image.png) no-repeat right top
background-position is quite powerful and can be used to position quite accurately - check out what it is capable of at Background [w3.org]. (And things will be even more get exciting when css3 is fully supported.)

This solution is based on some guesses about the code, so if I've guessed wrong, please post back - its now the weekend, so a bit more time.

[webprutser]

I should have given more information, sorry.
I have indeed a background image, but my question is about the image beneath the "hagedisjes.png", it is the text "WERELDWINKEL HOORN". I have put it on my test website and will mail the url to you as soon as this post is finished. That's the most easy way, I think, to make clear what my problem is. As you can see in the source, the hagedisjes.png is now centered by using the code you gave me. I tried to work out something similar for the next image, wereldwinkel_hoorn_klein.png, but only had a partial success. It is in the right place, at my screen resolution. I put it in this div:

#img_ww_klein {
position: relative;
left: 750px;
display: block;
width: 300px;
margin-bottom: 20px;
}

and left:750px; puts the image in its place, but this is not the right way to do it, for if you have a different screen resolution it is out of place.
Like I said, I tried some things but couldn't find the right way. A float right brings it to the most right spot at my screen and has the navigation images moved to the most left spot. Of course, I thought, I have given no width to the background image, but when I do that I get very exotic results. I will have to do more reading on this, because although I made some progress I still don't get certain basic principles. As soon as this website is online, I sit back, have a fairtrade-cup-of-coffee and dive into some text.
OK, I will mail you the URL. Don't laugh at the very primitive way I made a "text-cloud", but I have no time now to sort that out. It will have to wait.

[alt131]

Hi webprutser, obviously not the most helpful explanation ;)

Ah - you weren't referring to the "table-less solution' at all! So if my last post seems like magic it isn't: Meaningless gibberish about code that doesn't exist ;)

But publication date is looming so I've used super-simple steps to stop myself causing any more confusion ;) Fingers crossed!

Possible fix

1. Your html:
   <div id="img_ww_klein"><img src="images/wereldwinkel_hoorn_klein.png"></div>
   
   The css:
   #img_ww_klein {
   position: relative;
   left: 750px;
   display: block;
   width: 300px;
   margin-bottom: 20px;
   }
   
   
2. Delete that and insert:
   #img_ww_klein {
   margin-bottom: 20px;
   text-align:right;
   }
   
   
3. Then give the image a width in your HTML
   <div id="img_ww_klein"><img src="images/wereldwinkel_hoorn_klein.png" width="300"></div>
   
   Best practise is always provide a width and an height for images. Doing so allows the browsers to calcuate the right size "space" and lay the other elements around that "space", even before the image has fully downloaded. Most editors can be set to automatically insert dimensions when you insert the image to make it less tedious.
   
   
4. So now the image is positioned to the right. Now ask "how far right"? The right of the viewport, the right edge of the background-image/texture ...?
   
   If the right edge of the viewport do nothing - the div has no width, so it will expand full width of the viewport and the image will be naturally drawn at the most-right edge. If the right edge of the header, img_header is 940px and so on.
   
   
5. So now you have a width. but all your other elements are centred using margin:auto. That means the browser is automatically calculating the left and right margins. We could spend hours calculating that ourselves and then use position:ralative to "manually" position the image, but easier to let the browser do the work. Adjust your css:
   
   #img_ww_klein {
   width:800px /* in line with the right-edge of the table */
   margin: 0 auto 20px; /* margin shorthand */
   text-align:right;
   }
   
   Centring the div using margin:0 auto; gives it the same visual "centre" as the other elements. Giving it a width sets the position of the right-hand edge. Right-aligning the content (the image) means the right edge of the image will be as far "right" as we want.
   

background thoughts
Position:relative positions the element relative to the surrounding elements - which is why the code for the other elements is needed to understand why it isn't working as desired.

Floats are one way, but float:right is really ordering the image to float to the right of the element that comes next in the html. That is why the menu appears to shift left - it isn't the menu, it's the image squeezing itself into the right and shunting the menu across. A quick fix to stop this is to add "clear:right" (or I prefer clear:both) to the menu.

That orders the menu to make sure there is nothing to it's left or right before it is painted. Visually that means the menu will be drawn "below" the image. But it is really ordering the image to do something you don't want it to do, then ordering the menu to stop the image from doing what it is told. Silly.

A width is a possible solution - but "exotic" is a lovely way to describe what I saw when I tried the same thing ;)

[webprutser]

Needless to say your solution works perfectly. I hadn't expect anything less. :-)
Thanks for that.
I can't say I understand it 100% yet. The theory of all this I have read in the past, but it was not combined with using it so a lot is still a mystery to me. By bits and pieces I gain more understanding and I think re-reading the theory and all information that was offered to me here will enable me to connect the dots and say "aha, now I understand".
I have some questions on the above at the moment, but will first do some refresh of my theoretic knowledge before asking all kind of trivial things.
A couple of days to go, before the website will be aired. Will mail you the url when it is, I think I owe you a glance at what you helped accomplish.

[webprutser]

Back to where this thread was about: the wavy-menu. Still busy doing all kind of last-minute-items at the website. Since I had to make a new button, I thought to give the alternative menu a try before putting the site online. Something odd is happening, though. The menu works fine, unbelievable by the way you got it working in this way. The odd thing, however, is that as soon as I implement it in a webpage, no style-rules are applied anymore. I am getting a bit tired by the many hours I spent on this site lately, but I can't see I'm overlooking something. Will not be surprised though if I did. I will send a message with the url I put the page on, that's the best way to give an impression of what's happening.

[webprutser]

Just for the record, in case someone with a similar problem reads this post. All that was wrong was one curly brace I missed when copying/pasting the code into my file. Adding it proved, the above code works perfectly.
If you might have an uncommon-formed-buttons menu than this is the solution. Hope it will not be patented by that time. :-)

[webprutser]

I unfortunately still have a problem. There are two main menu buttons that have a submenu. Since the image that is shown, is in the CSS I tried to solve this by giving the 2nd submenu (ul) an id, also tried wrapping the entire 2nd submenu in a div, but it didn't work. In both cases as soon as the submenu becames visible the same submenu-image appears. Is there a solution for this? It means I need two different submenu-images to show up when two different mainmenu buttons are hovered.

[alt131]

Since the image that is shown, is in the CSS I tried to solve this by giving the 2nd submenu (ul) an id,

Fantastic thinking - exactly what this example does. It's "over-engineered", but I've laid it out so you can follow the steps.

Write the new id's into your html:

<ul id="siteNavigation">
<li><a href="index.html" title="home">Home</a></li>
<li title="produkten" >
<ul id="product"> <--- add an id
... html continues ...
<li><a href="bedrijven.html" title="bedrijven">bedrijven</a></li>
<li title="informatie">
<ul id="inform"> <-- add an id
<li><a href="fair_trade.html" title="fair_trade">fair_trade</a></li>
... html continues
<li><a href="contact.html" title="contact">contact</a></li>
</ul>

Adjust the existing css to remove the background-image from the sub-menu ul, then add new rules so you can set a different background-image for each submenu

ul#siteNavigation li ul {
/*background: transparent url(second-level.png); comment out or delete */
/* leave the rest of the rules because they will apply to both submenus*/
list-style-type:none;
position:relative;
/* Just watch top, width and height - they may need adjusting if the different sub-menus images are a differnt size. If they are, delete the property from here and add it to the rules you are creating below - just the same as has been done for the background-image*/
top:43px;
width:146px;
height:112px;
padding:0;
margin:0;
visibility:hidden;
}

/* insert a rule for the things that are specific to each of the sub-menus*/
ul#siteNavigation li ul#product {
background: transparent url(first-second-level-menu.png);
}

ul#siteNavigation li ul#inform {
background: transparent url(other-second-level-menu.png);
}

[edit reason] Example used classes in the css, not id's! [/edit]

[webprutser]

It was a little puzzle, but it works!
We both overlooked something. You mentioned an id in the html and a class in the CSS for product and inform. I have a brother who thought me to always use underscores (don't remember why), so I made a second image called second_level_2.png, but in the CSS I mentioned second-level_2.png. Pfffff, I'm real tired at the moment. Had to copy the new menu and some other things in all files and I somehow always end up with more than I planned. Nevertheless, for the moment the job is done. Some testing tomorrow and then the site can go online.
I have said it before: thanks, but I really mean it. The way my problems were handled over here is marvellous. Undoubtedly I will be back with more questions, since the next project is leaving the table lay-out behind me.

[alt131]

Wahoo! Great news.
Definitely web-whiz now ;)

[webprutser]

That's too much credit for me. I'm a copycat (who forgets the last curly brace). I like to save the honourable title of web-whiz till I fully understand what you have done to the menu to get it working. :-)
I noticed I have to deal with some link-problems in I.E. first though. At first sight very odd behaviour. See what I can do and in case I need help I'll post it on a new thread.
You absolutely deserved a cup of fair-trade-coffee for all the help, but it has to be a virtual one.

[alt131]

Don't be too hard on yourself - I imagine almost everyone starts by copying, and I'm still doing it - and curly braces get lost all the time. They are really hard to find in your own code <shudder>

Fresh-brewed coffee - yum :)

[Leosghost]

Got to say it guys .this conversation has been a pleasure to follow ;-) ..kudos to both teacher and student ..alt131 <= mes respects ;-)