H4 With A Background Goes Under A Floating Image

[glopal]

For my h4 headers, I have white text on a blue background. The background goes all the way across the screen, or all the way across the container in my case.Now lets say I have an image floating to the right. The header background will go under the image and pop out a little on the other side. I want the h4 to treat an image as a boundary, so the background of the h4 stops at the image (or a little before if there is a margin).My only solution at the moment is going display:inline. But I like when it goes across the screen, so I'm not happy with this solution.Any ideas?

[Ingolme]

For my h4 headers, I have white text on a blue background. The background goes all the way across the screen, or all the way across the container in my case.Now lets say I have an image floating to the right. The header background will go under the image and pop out a little on the other side. I want the h4 to treat an image as a boundary, so the background of the h4 stops at the image (or a little before if there is a margin).My only solution at the moment is going display:inline. But I like when it goes across the screen, so I'm not happy with this solution.Any ideas?

Apply a margin-right on the <h4> element that is equal to or greater than the width of the image.

[glopal]

Apply a margin-right on the <h4> element that is equal to or greater than the width of the image.

While that will work, seems a little impractical, as you'd have to do it for each image you have on the site.

[Ingolme]

While that will work, seems a little impractical, as you'd have to do it for each image you have on the site.

It the exact same principle used in column layouts with CSS. You apply a margin equal to the width of the things that are next to a block element to prevent it from getting behind.Other solutions would be to give the <h4> a fixed width or display it as inline.

[glopal]

It the exact same principle used in column layouts with CSS. You apply a margin equal to the width of the things that are next to a block element to prevent it from getting behind.Other solutions would be to give the <h4> a fixed width or display it as inline.

Ya, good point. My only idea at this point is to add a little automation by using javascript. Would the following work?

<h4 onLoad="marginFix('room.jpg',this)">

Then something like this...(pseudo-code-ish)

function marginFix(pic,header){var imageNum;for (i=0;i < document.image[].length;i++){   if(document.image.src = pic)   {	   imageNum = i;	   break;   }}document.header.style = "marginRight:" + (document.image[imageNum].width + 10) + "px";}

I mean, would probably use a while to avoid using the break. But do you think something like that would work... with a bit of tinkering.

[Ingolme]

<h4> doesn't have an onload attribute. If you were going to add that to each <h4> element it's hardly any more work than adding the CSS necessary to give it a right margin.

[glopal]

<h4> doesn't have an onload attribute. If you were going to add that to each <h4> element it's hardly any more work than adding the CSS necessary to give it a right margin.

Its not for every <h4> though, just ones that happen to be beside an image.Your right though, its not that hard.

<h4 style="margin-right:310px">

Its just that I'm making the site really easy to maintain. Mind you, if that javascript was to work, you'd have to have set the width attribute of the <img> (which I do for all the images anyways), so its really not that hard to just take the width and add a handful of pixels to it.Just another idea I thought of. Lets say you put the onLoad on the body (which i know you can do). Is there a way to find the absolute position of an element? For the purpose of seeing whether or not a header is beside an image?I know it's more work than I need do, but it's a good learning experience, and like I said, would make it easier to maintain.EDIT: Found some code to find absolute position. I'll let you know if I get anywhere with it.

[glopal]

Aha! I got it working! Pretty sure it's 100%, but I have a bit more testing to do.The javascript

function getY( oElement ){	var iReturnValue = 0;	while( oElement != null ) {		iReturnValue += oElement.offsetTop;		oElement = oElement.offsetParent;	}	return iReturnValue;}function fix(){	var headers = document.getElementsByTagName("h4");	var images = document.getElementsByTagName("img");	for (var i=0;i<images.length;i++)	{		var img=images[i];		var imgY=getY(img);		for (var c=0;c<headers.length;c++)		{			var header=headers[c];			var h4Y=getY(header);						if((h4Y + 20) >= imgY && h4Y < (imgY + img.height))			{				header.style.marginRight = (img.width + 10) + "px";			}		}	}	}

The HTML

<body onLoad="fix()">

[thescientist]

couldn't you just make a class for the <h4>'s you wanted with the margin? Why use javascript, which can be disabled by the user, when CSS would be safer and more reliable?

[glopal]

couldn't you just make a class for the <h4>'s you wanted with the margin? Why use javascript, which can be disabled by the user, when CSS would be safer and more reliable?

I could, but it's not that easy. For that to work, you'd have to assume all of the images had the same width, which they dont.This way it is easier for my client to maintain, less things to worry about.And worse case scenario, it degrades fairly gracefully without the js, doesnt look quite as nice, but its nothing major.