help doing a 4 picture header

[Nasr]

Hello everyone,

Still learning how to style my forums...

I've managed to do a three picture fluid header, and it works wonderful in IE. Now, I have another style I need to port to xF, the header is a three pictures and a filler, I'm pretty sure it's possible to be done with a table, but is it possible to be done in CSS as a div instead?

this is what i am trying to achieve, Left pic, filler, center pic, filler, right pic... Any kind of help will be appreciated.. thank you

 

[anotheralias]

I'm trying to convert a regular old HTML table to CSS too, so I'm glad you're asking.

 

[Jake Bunce]

I just spent some time trying to make this work with CSS and divs. I was successful at coming up with a 3 picture fluid layout but not 5 pictures.

Goooo tables!

 

[anotheralias]

I just spent some time trying to make this work with CSS and divs. I was successful at coming up with a 3 picture fluid layout but not 5 pictures.

Hey, I'll take it!

I am so sorry to see the end of tables, I understood them way better than I understand CSS. I just can't visualize the code at all. :/

 

[Blandt]

Use floating PNGs instead (Some times it doesn't work though )

 

[Jake Bunce]

Hey, I'll take it!

Oh I thought you already got 3 working so I didn't post my code. Here it is:

<div style="background: black; height: 100px;">
	<div style="background: green; height: 100px; float: left; width: 100px;">
		
	</div>

	<div style="background: red; height: 100px; float: right; width: 100px;">
		
	</div>
</div>

Put this in your templates to see what it does. It has different colored backgrounds for the purpose of visualizing.

Note that I don't have a lot of experience with div layouts. This code might not be the best but it works.

 

[Nasr]

ok thank you guys, though i still havent figured it out, but here is what I was thinking.

Is it possible to create a div with the filler as the back ground and that div will contain the three pics, the left, center and right pics? How would I go about creating that?

 

[anotheralias]

Oh I thought you already got 3 working so I didn't post my code. Here it is:

Thank you so much!

 

[Nasr]

Here is where I'm at right now, maybe someone will have a better idea. I've been looking for a way to do this, and this is the best way so far, except my images arent floating to the right place,
CSS:

.redlogo{
background-image: url(./styles/red/images/headerbg.jpg);
background-repeat: repeat-x;
height: 246px;
width: 100%;
margin-right: auto;
margin-left: auto;
}
#headerL{
height: 246px;
width: 253px;
float: left;
}
#headerC{
height: 246px;
width: 268px;
float: center;
}
#headerR {
background-image: url(./styles/green/images/headerR.jpg);
background-repeat: no-repeat;
height: 246px;
width: 252px;
float: right;
}

HTML:

<div class="redlogo">
                                <div id="headerL"><img src="./styles/red/images/headerL.jpg"></div>
                                <div id="headerC"><img src="./styles/red/images/headerC.jpg"></div>
                                <div id="headerR"><img src="./styles/red/images/headerR.jpg"></div>
                          </div>

any idea or comment is greatly appreciated

 

[Jake Bunce]

You can't float center:

http://www.w3schools.com/css/pr_class_float.asp

I had trouble with that center image too. I couldn't make it work.

 

[Nasr]

You can't float center:

http://www.w3schools.com/css/pr_class_float.asp

I had trouble with that center image too. I couldn't make it work.

My infinite gratitude for your help sir, but I found out a way to do it, and it works perfect. Here is the CSS

#redlogo {
background:url(./styles/red/images/headerbg.jpg) repeat-x;
height:246px;
position:relative;
}
#redlogo .right {
background:url(./styles/red/images/headerR.jpg) no-repeat;
float:right;
width:252px;
height:246px;
position:relative;
}
#redlogo .right .links {
position:absolute;
bottom:67px;
right:47px;
width:135px;
height:20px;
}
#redlogo .right .links a {
float:right;
width:65px;
height:20px;
display:block;
margin:0px 0px 0px 5px;
}
#redlogo .left {
background:url(./styles/red/images/headerL.jpg) no-repeat;
float: left;
width: 253px;
height: 246px;
position: relative;
}
#redlogo .left .links {
position:absolute;
bottom:67px;
left: 47px;
width: 135px;
height: 20px;
}
#redlogo .left .links a {
float:right; width:65px;
height: 20px; display:block;
margin: 0px 0px 0px 5px;
}
#redlogo .center {
background:url(./styles/red/images/headerC.jpg) no-repeat;
width: 268px;
height: 246px;
margin: 0px auto;
}

<div id="redlogo">
<div class="right">
<div class="links">
<a href="index.php"></a>
<a href="register.php" style="margin:0px;"></a>
</div></div>
<div class="left">
<div class="links">
<a href="usercp.php"></a>
<a href="sendmessage.php" style="margin:0px;"></a>
</div>
</div>
<div class="center"></div>
</div>

And that way, I got the header working....

 

[Elizabeth]

Which css file are you working with cause I can't get it to work. I think I have the css figured out and have my images and I can replace ONE at a time, but not the ones I want.

I want to replace both the moderation menu and the navigation menu. Do I need to work with the moderator_bar.css and the navigation.css? If so, I'm trying, just getting it to work is beating me up.

 

[Nasr]

Which css file are you working with cause I can't get it to work. I think I have the css figured out and have my images and I can replace ONE at a time, but not the ones I want.

I want to replace both the moderation menu and the navigation menu. Do I need to work with the moderator_bar.css and the navigation.css? If so, I'm trying, just getting it to work is beating me up.

I'm not sure which part you need replaced. However, I put my CSS in header.css. and I put my div's in logo_block template. As for the moderation, I havent really messed with that part.

 

[Elizabeth]

I'm not sure which part you need replaced. However, I put my CSS in header.css. and I put my div's in logo_block template. As for the moderation, I havent really messed with that part.

Thanks for that help, I appreciate it.