image alignment issues.

[jonese]

ok i have 3 images. I need the first all the way to the left. the 2nd in the middle and the 3rd all the way to the right. and i need a background image to repeat across the x axis behind all of this.

here is what i have

CSS

 #head_top{
position: absolute;
top: 0px;
left: 0;
width: 100%;
height: 95px;
background-image: url(/images/all_sites/head_back.gif);
}
#head_image_left{
position: absolute;
margin-top: 24px;
width: 62px;
float: left;
}
#head_image_title{
position: absolute;
margin-top: 31px;
text-align: center;
}
#head_image_right{
position: absolute;
margin-top: 24px;
width: 83px;
right: 0px;
}

HTML

 <div id="head_top"></div>
<div id="head_image_left"><img src="/images/all_sites/mi_insig.jpg" width="62" height="71"></div>
<div id="head_image_title"><cfoutput>
<cfif IsDefined("h.title_image_link" ) AND #h.title_image_link# IS NOT ''>
</cfif>
<a href="#h.title_image_link#"><img src="/images/header_title/#h.title_image_name#" alt="#h.title_image_description#" 
width="333" height="64" border="0" align="absbottom"></a>
<cfif IsDefined("h.title_image_link" ) AND #h.title_image_link# IS NOT ''>
<a href="#h.title_image_link#"></a>
</cfif>
</cfoutput></div>
<div id="head_image_right"><cfoutput>
<cfif IsDefined("h.header_image_link" ) AND #h.header_image_link# IS NOT ''>
</cfif>
<a href="#h.header_image_link#"><img src="/images/header_image/#h.header_image_name#" alt="#h.header_image_description#" 
width="83" height="71" border="0"></a>
<cfif IsDefined("h.header_image_link" ) AND #h.header_image_link# IS NOT ''>
<a href="#h.header_image_link#"></a>
</cfif>
</cfoutput></div>

[vgarcia]

 #head_top{ 
 padding-top: 24px;
 width: 100%; 
 height: 95px; 
 background-image: url(/images/all_sites/head_back.gif); 
 } 
 #head_image_left{ 
 width: 33%;
 float: left; 
 text-align: left;
 } 
 #head_image_title{ 
 width: 33%; 
 text-align: center; 
 float: left;
 } 
 #head_image_right{ 
 width: 33%;
 text-align: right;
 float: left;
 }

This should be a little more cleaned up and easier to use.

Hope this helps!

[jonese]

yes it did. after tweaking it a bit i came up with:

#head_top{
 position: absolute;
 top: 0px;
 left: 0;
 width: 100%;
 height: 95px;
 background-image: url(/images/all_sites/head_back.gif);
}
#head_image_left{
 position: absolute;
 margin-top: 24px;
 width: 33%;
 float: left; 
 text-align: left;
}
#head_image_title{
 position: absolute;
 margin-top: 31px;
 width: 100%; 
 text-align: center; 
 float: left;
}
#head_image_right{
 position: absolute;
 margin-top: 24px;
 right: 0px;
}

This does exactly what i wanted it to

[vgarcia]

Cool. I didn't know if the absolute positioning was necessary, but that looks like it works well!

yes it did. after tweaking it a bit i came up with:

#head_top{
 position: absolute;
 top: 0px;
 left: 0;
 width: 100%;
 height: 95px;
 background-image: url(/images/all_sites/head_back.gif);
}
#head_image_left{
 position: absolute;
 margin-top: 24px;
 width: 33%;
 float: left; 
 text-align: left;
}
#head_image_title{
 position: absolute;
 margin-top: 31px;
 width: 100%; 
 text-align: center; 
 float: left;
}
#head_image_right{
 position: absolute;
 margin-top: 24px;
 right: 0px;
}

This does exactly what i wanted it to