I’ve create a html item called header. I’ve clicked in the header item and inserted two html items. This all works as expected.
However, if I insert a graphic item (for the logo) and then a html item for some text, it all goes wrong.
FW inserts a carriage return (I promise you I haven’t entered it) which moves the two items apart. The distance between the two items looks suspiciously like the line spacing I’ve used for my p tag style.
See http://www.mylifestorybook.co.uk. The logo is inserted between p tags making the distance between the logo and nav bar greater than intended.
How do I insert a graphic item within a box model?
Brilliant. The nav bar now sits directly under the image.
However…
I’ve floated the image in the right hand column left (see http://www.mylifestorybook.co.uk) and the text under the image, in FW, now sits directly under the image. I’ve added a little padding to seperate the two items. But in the browser the text has moved down further than I want. Any ideas why?
The other thing I noticed, my container ‘right-column’ is 240px wide. If I made the Graphic Item within the container the same width the html item under it was pushed down (in FW). But if I made the Graphic Item 239px wide it all works. Why is this?
Is this because the Graphic Item is inserted into ‘text’ (between p tags) and if the Graphic Item is the same width as the container the carriage return, or text, gets pushed down a line? Hence seperating the graphic item and the html item.
When using the box model should I not use FW Graphic Items? But then how do I get images on to my page?
Further to the above, when using the box model should I use ‘pass-through’ to get my images into a HTML item (rather than a graphic item which seems to be giving me grief)?
If I want an image in a box model website, I don’t insert a graphic item into my container. I insert a HTML item into my container, and then within the html item I insert a graphic item. And the html item and the inserted graphic item can be the same size.
This way the image is within its own div rather than within the text or p tag (which seems to be a problem).
This also means I don’t have to “import” the image as a background to a html box, which is a pain to create alt tags and I have to use a pass-through image.