How do you suggest I do it?

[Mike567]

I'm not sure what you can do about that except make the menu bar thing 800 width

[Coreper]

isnt there a way to specifiy the width something like this:

width minimum: 998px

width normal: 100%

?

[Mike567]

Ah yes, just thought about min-height and min-width.

just add min-width:998px;

[Coreper]

AWESOME!!!!! IT WORKS!!!!!

thanks!!!!

man, thank you for all your fantastic help

i did notice though, that this min-width isnt supported by IE6, and IE for Mac >> but who cares ;) < png transparency also isnt supported by IE6 > IE6 is crap :D

but....

i still have a few question: now we have finished the header, i still need the buttons:

1. how can i place the buttons so they will always float above the header, no matter what window size is used?

2. is it possible to have a bigger mouseover-button, than a not-mouseover-button?

3. or is it also possible to make custom "mouseover-area's" [so the image will change to its mouseover image, when the mouse enters that specific region, instead of the image]

[Coreper]

just to give you an idea of how it is supposed to look:

http://img231.imageshack.us/img231/1959/we...eaderonlqc8.png

the red squares indicate the size of the buttons and the logo:

the not-mouseover-button image has got an empty area around it, just like the not-mouseover-logo image, that is because i think the mouseover images have to be the same size...

[Mike567]

So your buttons,

You want to create the mouseover in CSS.

if you want a larger coverage area what i would do is make the images with the gap inbetween except when covering the C so try and keep them a constand width, same for mouse over images.

for gap between the C I would use a 'spacer' image and make it a fixed width to fill up the gap.

So ideally you won't actually be positioning the buttons with anything, this is the best way I can think of creating it due to your semi-fixed layout.

I'm rusty on my CSS but I believe you can do something like <a href="blah.htm" id="home"></a>

then the CSS

#home:hover{

would contain somthing like

background-image:url('mouseoverimg.png');

width:blah

}

and the

#home{ (your non mouseover)

can have the standard image in it

background-image:url('nonmouseover.png');

width:blah

}

if you don't want to change image size I guess you can place a <img src="spacer.gif" width="something" />

You see what I mean?

Its the easiest method I can think of, but I believe you will see a variation between FF and IE.

if you was doing a completely fluid layout, I would create two seporate div tags one either side of it adding a padding inbetween the buttons.

[Coreper]

but would it also be possible to have a smaller not-mousover image, as the mouseover image?

and how can i place these buttons to a solid position, because the width of the header keeps changing... [ive got to position from the middle... ?]

oh, and i do not want a bigger mouseover area as the image, but a smaller:

now i made the not-mouseover-button 116x66, just like the mouseover-button

i did that because the mouseoverbutton is bigger in size, because it has a glow around it

originally the not-mouseover-button was 82x83 in size, but when i tried making a standard mouseover button with the bigger mouseover image, the mouseover-image was resized...

so i was wondering if its possible to add a mouseover-effect, with a mouseoverbutton which is bigger than the not-mouseover button, but doesnt get resized when the mouseover is activated

i hope i make a bit sense here

[Mike567]

Okay the simplest way is to make all the buttons exactly the same size, just change then in photoshop what I've done for buttons is make one standard one and build all of them from that.

You will be placing the buttons in the middle of the page and positioning them like that.

[Coreper]

how do you suggest i do that: using DIV or IMG tags?

and the position code to position from center, which one is that? [fixed, relative, etc.]

[Mike567]

just do some basic

<div align="center" style="width:900px;">

<div id="leftbut">

<a href="button.html"><img src="button" />

</div>

<div id="rightbut">

<a href="button.html"><img src="button" />

</div>

</div>

leftbut you will just float left, you might want to make the width like 45% for the button box's and the centered box you want a fixed width like 900px.

Get it?

[Coreper]

this is what i got now:

<div "align="center" width:998px>
<div id="Button_Portfolio">
<a href="portfolio.html"><img src="images/buttons/Button_Portfolio.png" />
</div>
<div id="Button_Home">
<a href="index.html"><img src="images/buttons/Button_Home.png" />
</div>
</div>

but i just completely forgot how to position the buttons properly...

can you tell me?

[Mike567]

you haven't closed the links.

shouldn't need positioning if you have set the inner kinda div tags to be like 45% and 45%

[Coreper]

i stil dont understand how to do it:

<div id="Buttonholder" align="center" width:998px>
<div id="Button_Portfolio" width><a href="portfolio.html"><img src="images/buttons/Button_Portfolio.png" /></a></img></div>
<div id="Button_Home"><a href="index.html"><img src="images/buttons/Button_Home.png" /></a></img></div>
</div>

how can i get the Button_Portfolio 300px left and 86px from the top, from the middle?

[Coreper]

i just noticed a horizontal menu maker in Dreamweaver, which i used to make my menu:

this is what it made:

<div align="center">
<a href="portfolio.html" target="_top" onclick="MM_nbGroup('down','group1','Portfolio','',1)" onmouseover="MM_nbGroup('over','Portfolio','images/buttons/Button_Portfolio-Active.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/buttons/Button_Portfolio.png" alt="Button_Portfolio" name="Portfolio" width="116" height="66" border="0" id="Portfolio" onload="" /></a>

<a href="index.html" target="_top" onclick="MM_nbGroup('down','group1','Home','',1)" onmouseover="MM_nbGroup('over','Home','images/buttons/Button_Home-Active.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/buttons/Button_Home.png" alt="Button_Home" name="Home" width="116" height="66" border="0" id="Home" onload="" /></a>

<a href="info.html" target="_top" onclick="MM_nbGroup('down','group1','Info','',1)" onmouseover="MM_nbGroup('over','Info','images/buttons/Button_Info-Active.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/buttons/Button_Info.png" alt="Button_Info" name="Info" width="116" height="66" border="0" id="Info" onload="" /></a>

<a href="about.html" target="_top" onclick="MM_nbGroup('down','group1','About','',1)" onmouseover="MM_nbGroup('over','About','images/buttons/Button_About-Active.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/buttons/Button_About.png" alt="Button_About" name="About" width="116" height="66" border="0" id="About" onload="" /></a>

<a href="links.html" target="_top" onclick="MM_nbGroup('down','group1','Links','',1)" onmouseover="MM_nbGroup('over','Links','images/buttons/Button_Links-Active.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/buttons/Button_Links.png" alt="Button_Links" name="Links" width="116" height="66" border="0" id="Links" onload="" /></a>
</div>

but i just need to position the buttons like it want to...

thanks in advance

[Mike567]

Dreamweaver adds so much junk.

you want to do something like this

<div "align="center" width:998px>

<div id="Button_Portfolio">

//CSS for this

padding-left:300px;

padding-top:87px;

<a href="portfolio.html"><img src="images/buttons/Button_Portfolio.png" />

</div>

<div id="Button_Home">

<a href="index.html"><img src="images/buttons/Button_Home.png" />

</div>

</div>

[Coreper]

it doesnt work: the images stay at the same position: in the center, underneath the header

[Coreper]

do you know how to fix it?

or maybe how to let the image divs float above the header div, so i can place them where i want > now they are "trapped" in the header div

[Mike567]

you didn't copy it straight did you the css part has to go into your sheet style and modify the things to your needs, it was just a example.

Other than that post what you have.

[Coreper]

i know

here is what i have:

<div id="ButtonHolder" align="center" width:998px>
<div id="Button_Portfolio"><a href="portfolio.html"><img src="images/buttons/Button_Portfolio.png"/></a></div>
<div id="Button_Home"><a href="index.html"><img src="images/buttons/Button_Home.png"/></a></div>
</div>

-----CSS Styles-----

.ButtonHolder {
	width:998px;
}
.Button_Portfolio {
	padding-left:300px;
	padding-top:87px;
}

with this as result:

DreamWeaver screenshot: http://img183.imageshack.us/img183/8404/websitetg6.png

and this is where the buttons must go: http://img183.imageshack.us/img183/5498/websiteca6.png

btw:

here is the full code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns=&quot;http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Coreper - Online Portfolio</title>

<style type="text/css">

<!--

body {

background-image: url(images/bg_mainframe.png);

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

#HeaderUpCornerLeft {

float: left;

background-image: url('images/header/Menu_Corner_Left.png');

width: 20px;

height: 146px;

clear:none;

}

#HeaderUpCornerRight {

float: right;

background-image: url('images/header/Menu_Corner_Right.png');

width: 20px;

height: 146px;

clear:none;

}

#HeaderUpMiddle {

float: none;

background-image: url('images/header/Menu_Bar.png');

width: 958px;

height: 238px;

clear:none;

}

#HeaderUp {

float: none;

width: 100%;

background-image: url('images/header/Menu_Stretch.png');

height: 146px;

clear:none;

}

#Header {

overflow: visible;

width: 100%;

min-width:998px;

clear:none;

}

.ButtonHolder {

width:998px;

}

.Button_Portfolio {

padding-left:300px;

padding-top:87px;

}

-->

</style>

</head>

<div id="Header" align="center">

<div id="HeaderUp">

<div id="HeaderUpCornerLeft"></div>

<div id="HeaderUpCornerRight"></div>

<div id="HeaderUpMiddle"></div>

</div>

</div>

<div id="ButtonHolder" align="center" width:998px>

<div id="Button_Portfolio"><a href="portfolio.html"><img src="images/buttons/Button_Portfolio.png"/></a></div>

<div id="Button_Home"><a href="index.html"><img src="images/buttons/Button_Home.png"/></a></div>

</div>

</body>

</html>

</body>

[Coreper]

i changed a bit, and noticed some [a very little bit] improvement:

the buttons are now in the right section, but i cant get them next to eachother: the Home button wants to go down...

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Coreper - Online Portfolio</title>
<style type="text/css">
<!--
body {
	background-image: url(images/bg_mainframe.png);
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
#HeaderUpCornerLeft {
	float: left;
	background-image: url('images/header/Menu_Corner_Left.png');
	width: 20px;
	height: 146px;
	clear:none;
}
#HeaderUpCornerRight {
	float: right;
	background-image: url('images/header/Menu_Corner_Right.png');
	width: 20px;
	height: 146px;
	clear:none;
}
#HeaderUpMiddle {
	float: none;
	background-image: url('images/header/Menu_Bar.png');
	width: 958px;
	height: 238px;
	clear:none;
}
#HeaderUp {
	float: none;
	width: 100%;
	background-image: url('images/header/Menu_Stretch.png');
	height: 146px;
	clear:none;
}
#Header	{
	overflow: visible;
	width: 100%;
	min-width:998px;
	clear:none;
}
#Button_Portfolio {
	padding-left:300px;
	padding-top:87px;
}
#Button_Home {
}
-->
</style>
</head>

<div id="Header" align="center">
	<div id="HeaderUp">
	<div id="HeaderUpCornerLeft"></div>
	<div id="HeaderUpCornerRight"></div>
	<div id="HeaderUpMiddle">
	  <div id="Button_Portfolio"><a href="portfolio.html"><img src="images/buttons/Button_Portfolio.png"/></a></div>
		<div id="Button_Home"><a href="index.html"><img src="images/buttons/Button_Home.png"/></a></div>
	</div>
</div>

</body>

</html>

</body>

screenshot:

question:

why cant i just get the buttons to hover above the header...

[Mike567]

#Button_Portfolio {

padding-left:300px;

padding-top:87px;

clear:none

}

#Button_Home {

padding-right:300px;

padding-top:87px;

clear:none;

}

[Coreper]

too bad, it didnt work

this is what i get after applying that:

[Mike567]

the div box's act as 100% by default you have to specify them in the CSS.

#Button_Portfolio {

padding-left:300px;

padding-top:87px;

clear:none

width:45%;

}

#Button_Home {

padding-right:300px;

padding-top:87px;

clear:none;

width:45%;

}

[Coreper]

why 45%?

EDIT:

now they are both centered, thats good!

but how do i get them on their place? [left...]

[Mike567]

45% better to be safe than sorry :).

you can add align:left; and right.