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
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?
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?
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”.