Three seperate images along the header.

[FragaGeddon]

Trying to get three seperate images along the header.
This is what I have so far.
This sort of was the code I'm using for a single header image with 3 links, except I took out the background image from the imageheader and added 1 each to the rest of the code.

They just float next to each other and not the way I want them too.
One should be left aligned, one center, and the other right aligned.

#imagemapheader {
width: 1024px;
height:150px;
margin-top:0px;
display: block;   margin-left: auto;   margin-right: auto;
}

#club {
background-image: url(../images/Headerl.jpg);
background-repeat: no-repeat;
float: left;
position: absolute;
width: 238px;
height: 150px;
margin-left: 0px;
margin-top: 0px;
}

#ps {
background-image: url(../images/Headerc.jpg);
background-repeat: no-repeat;
float: center;
position: absolute;
width: 573px;
height: 150px;
margin-left: 274px;
margin-top: 0px;
}

#calander {
background-image: url(../images/Headerr.jpg);
background-repeat: no-repeat;
float: right;
position: absolute;
width: 164px;
height: 150px;
margin-left: 860px;
margin-top: 0px;

[kobra]

float: center; is not valid

use text-align: center;

[gjh42]

Also,
float: right;
and
position: absolute;
do not go together; it will be either one or the other, and since the position: absolute; comes later, that is what governs. But an absolotely positioned element that you want at the right edge needs to have
right: 0;
to make it hug the right edge.

[Design75]

Silly question maybe, but why don;'t you make one big picture of the three ?

[gjh42]

Adapting to a fluid width layout would be a good reason to do it this way. Of course, the width here does appear to be fixed at 1024px (which, by the way, will force a horizontal scrollbar in a 1024x768 screen).

[FragaGeddon]

Adapting to a fluid width layout would be a good reason to do it this way. Of course, the width here does appear to be fixed at 1024px (which, by the way, will force a horizontal scrollbar in a 1024x768 screen).

Yeah that was from the code for a single image.

#imagemapheader {
width: 1024px;
height:150px;
background-image: url(../images/Header.jpg);
background-repeat:no-repeat;
margin-top:0px;
display: block;   margin-left: auto;   margin-right: auto;
}

#club {
float:left;
position:absolute;
width: 238px;
height: 150px;
margin-left:0px;
margin-top:0px;
}

#ps {
float:left;
position:absolute;
width: 573px;
height: 150px;
margin-left:274px;
margin-top:0px;
}

#calander {
float:left;
position:absolute;
width: 164px;
height: 150px;
margin-left:860px;
margin-top:0px;
}

I'll try and do what you guys said and see how it works. I'll also need all three image to have a link.

[shanesoine]

Hi also looking to add an additional image to my header as well as additional txt and a link sounds great! wondered how far you had got with your solution - would rather take some advice than try invent this wheel!

[clydejones]

Trying to get three seperate images along the header.
This is what I have so far.
This sort of was the code I'm using for a single header image with 3 links, except I took out the background image from the imageheader and added 1 each to the rest of the code.

They just float next to each other and not the way I want them too.
One should be left aligned, one center, and the other right aligned.

#imagemapheader {
width: 1024px;
height:150px;
margin-top:0px;
display: block;   margin-left: auto;   margin-right: auto;
}

#club {
background-image: url(../images/Headerl.jpg);
background-repeat: no-repeat;
float: left;
position: absolute;
width: 238px;
height: 150px;
margin-left: 0px;
margin-top: 0px;
}

#ps {
background-image: url(../images/Headerc.jpg);
background-repeat: no-repeat;
float: center;
position: absolute;
width: 573px;
height: 150px;
margin-left: 274px;
margin-top: 0px;
}

#calander {
background-image: url(../images/Headerr.jpg);
background-repeat: no-repeat;
float: right;
position: absolute;
width: 164px;
height: 150px;
margin-left: 860px;
margin-top: 0px;

You could also use the multiple background capabilities of CSS3

#imagemapheader {
width: 1024px;
height:150px;
margin-top:0px;
background: url(../images/bg-2.png)top left no-repeat, url(../images/bg-3.png)top center no-repeat, url(../images/bg-1.png)top right no-repeat #E3E0D4;
}

This will work in FF, Opera, Safari and Chrome.

It will be ignored in IE7/8 unless your combine the three images into one image and modify the above as follows:

#imagemapheader {
width: 1024px;
height:150px;
margin-top:0px;
background: url(../images/bg-main) top left no-repeat #E3E0D4;
background: url(../images/bg-1.png)top left no-repeat, url(../images/bg-2.png)top center no-repeat, url(../images/bg-3.png)top right no-repeat #E3E0D4;
}

[FragaGeddon]

You could also use the multiple background capabilities of CSS3

#imagemapheader {
width: 1024px;
height:150px;
margin-top:0px;
background: url(../images/bg-2.png)top left no-repeat, url(../images/bg-3.png)top center no-repeat, url(../images/bg-1.png)top right no-repeat #E3E0D4;
}

This will work in FF, Opera, Safari and Chrome.

It will be ignored in IE7/8 unless your combine the three images into one image and modify the above as follows:

#imagemapheader {
width: 1024px;
height:150px;
margin-top:0px;
background: url(../images/bg-main) top left no-repeat #E3E0D4;
background: url(../images/bg-1.png)top left no-repeat, url(../images/bg-2.png)top center no-repeat, url(../images/bg-3.png)top right no-repeat #E3E0D4;
}

Thanks dude. I'll have to try that out. Is there a way to have each image linked to a url?
Also can the outer images float? Because when using top left and top right.
Another thing that I just noticed is that if you resize the window, the images don't move, so you could loose the right image.
Oh well it's getting there.

[clydejones]

Thanks dude. I'll have to try that out. Is there a way to have each image linked to a url?
Also can the outer images float? Because when using top left and top right.
Another thing that I just noticed is that if you resize the window, the images don't move, so you could loose the right image.
Oh well it's getting there.

Do a google for css3 multiple images.

There are several tutorials and articles on implementing this ability.