My daughter runs websites and she would like to have the menu inside the header, not necessarily aligned in a row or column. I am trapped in here, cannot find out how to achieve this. Any help is welcome.

Currently the theme is Simplicity, but it is not a must.

Hi,

Im not sure what you mean by 'clickable image maps in header', but from what i understand in the text you wrote, you want to insert the 'menu' (im assuming the top navigation) inside the header section. With Simplicity theme you can't do it via the admin interface because it has $GP_ARRANGE = false; added to the topnav, so it's not arrangable.

If you can edit the template.php file inside themes/simplicity/ you can quickly do this, but you will have to edit the style.css file to tweak some properties too, try this:

In template.php cut(ctl + x) the <div id="topnav"> and paste it inside the <div id="header"> right after <?php gpOutput::Get('Extra','Header'); ?>

	<div id="header">
		<?php gpOutput::Get('Extra','Header'); ?>
		<div id="topnav">	
			<?php
			$GP_ARRANGE = false;
			gpOutput::Get('Menu');
			?>
		</div>	
	</div>

In the style.css, in the blue or the orange color theme, paste these in just to make it look prettier:  replace lines 27 and 28

#header{position:relative;width:940px;height:150px; background:url(../images/header.png) top no-repeat; padding:10px;border-bottom:2px solid #0002bd;}
#topnav{position:absolute;bottom:0;width:940px;height:30px;padding:0;}

Hope this helps!

Here's a preview of the result

Well, it's a bit hard to explain. I meant something like this:

My idea

So menu buttons are inside the header. Should it be anywhere on a simple page I could use something like:

<img src="sg.jpg" width="1000" height="400" border="0" usemap="#map" />
 
<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:sy -->
<area shape="rect" coords="32,73,68,142" href="http://myurl/Mission" />
<area shape="rect" coords="35,173,69,238" href="http://myurl/Next" />
....
</map>

Wow, ok, please don't take what i'm about to say as prejudice, but you should be doing this the correct and standards compliant way, like using CSS to achieve this kind of menu layout.

I know you might say that not everybody knows how to code, but if you can take the time to learn how to work with image maps in GIMP, i think you could learn some basic CSS in just that same amount of time and really benefit from that knowledge in the future. Again, i'm not implying you should or that your method will not work, but just trying to help you do it right if you want to.

Back to the issue, to do this i'm assuming you have created your pages and know their url's, this is a custom hand coded menu, not the default top menu generated by gpEasy. So you will not be using the hook <?php gpOutput::Get('Menu'); ?> inside the <div id="topnav">. I cant really assure that pasting your GIMP generated code into the <div id="header"> will work as expected, i have to say i never really worked with generated image maps to build websites before.

If you want to achieve the same effect using CSS, keep reading and i'll try to explain here how you can do it.

This is a quick explanation of a smarter implementation of your design, although it is always best not to use images to replace text in html, but im not going into that right now!!

Note: You will have to separately save your images, background(header.png), and all four buttons as separate images, like btn1.png - btn2.png -btn3.png - btn4.png and put them inside images folder.

Insert the image (mountain scene) as background for the #header

You might have noticed that the background image for this element is inside images/ folder in Simplicity theme, called header.png, use it to determine the width, height and the amount of rounded borders to apply to your image, if you want to.

Look at style.css, line 27

#header{
 /* add this property to insure that any absolute positioned element inside it (like or menu will be) will be restricted to this area and not the browser window*/
position:relative;
width:940px; 
height:150px; 
background:url(../images/header.png) top no-repeat; 
padding:10px;
}

Add the custom navigation menu inside <div id="header">

In template.php add something like this to the #header div

	<div id="topnav">	

		<ul>

			<li class="item1"><a class="btn1" href="http://url-to-page">page1<a><li>
			<li class="item2"><a class="btn2" href="http://url-to-page">page2<a><li>
			<li class="item3"><a class="btn3" href="http://url-to-page">page3<a><li>
			<li class="item4"><a class="btn4" href="http://url-to-page">page4<a><li>

		</ul>

	</div>

Code explanation:

We're adding different class names to each <li> (list items) so we can absolutely position each of them inside the #header, just like in the generated code from GIMP that is using coords="", but we will be using top and left css properties with px (pixel) values instead and this is only an example, you may have to tweak the pixel values to put the buttons exactly were you want them to be. In the anchor (<a>) elements we're also adding different class names so you can use them to insert your button images for each of them separately.

The CSS

In style.css delete line 28 and replace lines 36, 37 and 38 with the following code

#topnav ul{list-style-type:none;margin:0;}

#topnav li{
position:absolute; /* as the property name implies we absolutely position our list items */
z-index:2; /* this insures they will sit on top of anything else that exists inside the #header element */
/* we now give them a fixed size, you can tweak this according to your button images sizes for example */
width:150px;
height:40px;
}

Now the list item classes, positioning our buttons were we want them

li.item1{
/*here we give each of them a specific coordinate, relative to the #header element, an example:*/
top:20px; /* 20px away from the top of element #header */
left:50px; /* 50px away from the left of element #header */
}

/*the same implies for the the other 3 list elements, tweak to get the exact position you want */
li.item2{
top:40px;
left:220px;
}
li.item3{
	...
}
li.item4{
	...
}

The anchors

a.btn1, a.btn2, a.btn3, a.btn4{
	display:block; /* occupy the whole area given in width and height */

	/* same height and width of their parent list items */
	width:150px;
	height:40px;
	/* this pushes the html text (page name) out of the way so it doesn't appear on top of our btn image */
	text-indent:-9999px;

/* add our button images for each */
a.btn1{	
	background:url(../images/btn1.png) 0 0 no-repeat; /* the image for button 1 */
}
a.btn2{
	background:url(../images/btn2.png) 0 0 no-repeat;
}
a.btn3{
	...
}
/* etc..*/

Ok done, be sure to tweak the top and left values of the list items to properly place your buttons were you want them, and i hope i have converted you to the 'light side of the force' :)