Programming Forums - View Single Post

somehollis · May 20th, 2006, 1:34 AM

I think this can actually be done rather easily without messing with floats, or positioning. Just using a bit of CSS ought to do the trick.

CSS Section:

(Toggle Plain Text)

#heading {
	text-align:center;
}
#headimage {
	background-image:url(images/someimage.jpg);
	background-repeat:no-repeat
}

And the xhtml to go with it:

(Toggle Plain Text)

<div id="heading">
	 <div id="headimage">
	     <p>Title Here</p>
	</div>
</div>

I tested this very hastily in firefox and IE 6 in Windows, and it appeared to work fine. Let me know if any of this is unclear, and I'll try to say it better.

May 20th, 2006, 1:34 AM	#2
somehollis Programmer Join Date: May 2006 Location: Memphis, TN Posts: 31 Rep Power: 0	I think this can actually be done rather easily without messing with floats, or positioning. Just using a bit of CSS ought to do the trick. CSS Section: (Toggle Plain Text) #heading { text-align:center; } #headimage { background-image:url(images/someimage.jpg); background-repeat:no-repeat } #heading { text-align:center; } #headimage { background-image:url(images/someimage.jpg); background-repeat:no-repeat } And the xhtml to go with it: (Toggle Plain Text) <div id="heading"> <div id="headimage"> <p>Title Here</p> </div> </div> <div id="heading"> <div id="headimage"> <p>Title Here</p> </div> </div> I tested this very hastily in firefox and IE 6 in Windows, and it appeared to work fine. Let me know if any of this is unclear, and I'll try to say it better.