Hi All,

Newbie here..... knows enough to break things :-)

Im using an existing HTML Template. I've made some changes to include a banner and remove the existing header layout.

Now in the header I have 2 images. i need to move the second "red" image to the right to align with the Navigation below it.

Here is the current code



I have attached a screenshot showing how this currently displays.

Also, how can I remove or shrink the spacing between the Header (green line across the top) and the new banner as well as the spacing below the banner and the image? Ive played around in the styles.css but cant seem to get it.

Thanks in advance.
Glenn

First issue sorted using



too easy

Still working on the second issue

try



tweak the padding value to get the alignment.

should work...

See if there are any margins or padding set up for the new banner. If not you might have to add in some new margin banners for the top image. In David's snippet of code there is only one for the margin-right as follows.



Try this maybe:


Now you can experiment with those 4 different margin values bearing in mind that they refer to the top, right, bottom and left reading left to right. You can even try using a minus value for the bottom to bring the two images closer to one another.

eg.

See how this works for you. It might even mean that you can remove that no-break space you used earlier

David and Janys,

Thanks so much for that. This stuff can do your head in.

I tried all the options and decided to use Janys' option with the margin and apply it to both images.



I also changed the styles.css for the header to this



previously the width was set to 920. Changing it to 940 removed the extra padding.

When I preview it, it looks perfect. However when I open in browser the bottom 3/4s of both images is cut off, just leaving a white or blank space?

Any ideas?

Somewhere you must have declared the height of the space where the image is which now needs to be changed to take into account the amount of margin/padding you have. Try changing by the same amount and that should fix it... that is... add the amount you have used as the margin (and/or the padding) to the height.

Thanks again Janys

To try and troubleshoot this what I did was take it back to standard image display. This showed both the images side by side, but not aligned correctly.

Then I added the code with the margin

from this


to this



Does that code that you provided add any margin value or padding by default? I have all my margins set to 0, but it seems to have added margin by 10 in places?

Almost over it. Just about to log a support ticket.

All sorted.

I went back to the &nbsp and its all good :-)

Thanks again

You mustn't forget that if you add 5 at the top and 5 at the bottom, in some places that will become doubled up because you have, let's say, 2 images, side by side or above one another, each with 5 all around.

If there are default settings (as can be the case) they may be coming from an application or similar which already has some margins set up. I advise you to get a pixel ruler to use on your desktop. Great for checking out measurements without having to delve into code.

Here is one for instance:
http://www.mioplanet.com/products/pixelruler/
I think I saw something similar for a firefox addon the other day too.

you could try a display:block in the style bit on your image tag - that might cut out the difference between image default margin or none....

perhaps also remove the align="" from the end of the image tag