Arghhhhh! Box model killing me

Hello

I am following Dan’s Inline Box Model screencast. I’ve created a header, body and footer. I’ve then created a header-wrap (for my centered page). I’ve then inserted a graphic item, html item and a graphic item into the header-wrap for my logo, nav bar and photograph.

But the three items are not touching - there is a gap between them. See

http://www.practicalintelligence.org.uk/test/

How do I remove this gap and why is it there?

If I insert three HTML items there is no gap. The problem seems to arise when I insert graphic items.

THANKS FOR ANY HELP

Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If I insert three HTML items there is no gap. The problem seems to arise when I insert graphic items.

Did you “insert” the graphic into the html box same as you inserted the html? Have you tried inserting the graphics into the html item as a background?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yes the first thing I would do is remove any ‘lone’ graphics from the layout ie

Either put them in an HTML container set to float in your layout or the same approach with the graphic as a background to your HTML item.

Also apply a style to your content/HTML items with 0 space before and after.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks for your advice.

I’ve actually side stepped the issue by having the ‘header’ items, such as logo, nav bar and image as absolute items rather than use box model items.

Once again thanks


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi David

I’m coming back to this issue…

So in FW, when using the box model, you don’t ‘insert graphic item’? You insert a html item and then put the image in as a background to that html item?

This certainly works well for me. But there are a few issues. Is there a way to enter alt text? And it is a pain having to create pass through graphics.

You mentioned “put the image in a HTML container set to float”. Do you mean create a html item, then insert a graphic item into it, exactly the same size as it, and then import the image as normal. So in effect there are two containers for the image, both the same size. I presume this allows me to import tiff images, resize and give alt text?

Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

This certainly works well for me. But there are a few issues. Is there a way to enter alt text?

If you go the route of applying the image as a background via CSS then the alt tag is a non-issue. Alt tags apply to the tag. But there is a way to add text to the image, albeit not as an alt tag. Type whatever text you want in the box as usual then create a new style that sets the margin-left to some huge negative value, say, -4000px and apply it to the run of text or the element. What this does is move the text out of the box so the visitor doesn’t see it but it’s still visible in the code for search engines to chew on. The downside is that if the visitor has disabled images they won’t see anything, no image or text, but that’s not something I would worry too much about.

The technique is referred to as “image replacement”.

Todd

Skype: toddbrilliant
Twitter: @ImXiiro


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The technique is referred to as “image replacement”.

Oops, I made a mistake in my previous post. Let me be more accurate. The CSS would look something like this if your element were named “image”:

#image {
	background: url(../Resources/my_background_image.jpg) no-repeat;
	width: 400px;
	height: 200px;
	text-indent: -4000px;
}

Todd

Skype: toddbrilliant
Twitter: @ImXiiro


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

And there’s an Action for that, called Image Replacement.

Walter

On Nov 24, 2011, at 12:28 PM, Todd wrote:

The technique is referred to as “image replacement”.

Oops, I made a mistake in my previous post. Let me be more accurate. The CSS would look something like this if your element were named “image”:

#image {
	background: url(../Resources/my_background_image.jpg) no-repeat;
	width: 400px;
	height: 200px;
	text-indent: -4000px;
}

Todd

http://www.xiiro.com
Skype: toddbrilliant
Twitter: @ImXiiro


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options