Topic: img next to img not touching (Page 1 of 1)

I need help, my images are not touching.
I have the following (all on one line):
<img src="images/top_goldgrey.gif" width="20" height="90" border="0"/><img src="images/splash2black_02.gif" width="540" height="90" border="0"/><img src="images/splash2black_03.gif" width="200" height="90" border="0"/><img src="images/top_goldgrey.gif" width="23" height="90" border="0"/>

They line up in a row touching. They don't touch. There is gap between each image. What is wrong?

Karl..

Its so frustrating. I can't get the images to touch. I've used the following CSS to kill borders and padding, plus I've put all the images on a single line in source. Errr, no luck.

img
{
padding:0;
border:0;
margin:0;
}

Quick, someone intervene! I am fighting the urge to use tables!

What do get in the DOM inspector ? what is the computed style of your IMGs ?

Anyway, by the name of your images I'm pretty sure you could do something like :

CSS

#bloodySplash
{
    background:url(top_goldgrey.gif);
    padding:0 23px 0 20px;
    border:0;
    margin:0;
    width:783px !important; /* for that pile of crap of IE */
    width:740px;
    height:90px;
}
#bloodySplash img
{
    border:0;
    margin:0;
    padding:0;
    width:740px;
    height:90px;
}

HTML

<div id="bloodySplash">
    <img src="images/splash2black.gif"/>
</div>

... or something like that

Hope that helps,



(Edited by poi on 03-24-2006 10:06)

A link would be helpful - seeing what it is you are trying to accomplish may open up other methods, as Poi suggested.
I'm not sure what the problem would be off-hand, as I haven't set anything up like that in years.

Also, as a side note - get that "border=0" out of there. Borders should be defined in your CSS, not in your markup!

Working on posting a sample... (sorry, stuck on dev box at the moment)


-signed
"committed to figuring this out w/CSS, in Phoenix"

Sample is up. Can you please review my CSS. Please be critical! I am trying to learn this stuff.

Karl..

http://meetscoresonline.com/ah/

CSS:
http://meetscoresonline.com/ah/style/ah.css

Um, OK. I don't have time to fiddle with this right now, but it seems to me that the easiest solution would be to just keep it as one big image. Why are you slicing it up like that? I don't get it. I mean, it's just a splash image, right? It seems like you're going through a lot of trouble for no reason.


___________________________
Suho: www.liminality.org | Cell 270 | Sig Rotator | the Fellowship of Sup

exactly.

I don't understand, in particular, why the top image is divided into two parts.

However, I don't see anything to justify multiple images at all, other than perhaps the repeating bars- and that can be done with just a single background image, with one big image as the only element on the page.

When I have a little more time, I will try to take a look at the CSS more critically as well...

This is not just a splash page, but a template. So the middle portion gets swapped out with content from the new pages. So the Lighter grey and yellow top and bottom graphics are the template.
The top lighter grey portion has a little green tip of the logo in it from the "splash" or middle graphic area. I am hoping that I can swap out that image as the user peruses into other pages that use this template; so expecting to swap that image, actually I guess I just need to remove the image for correct display on sub pages of the template since the background image will be sufficient here.

Karl..

..ready for more input please.

http://meetscoresonline.com/ah/

CSS:
http://meetscoresonline.com/ah/style/ah.css

I see you changed the page... now you just have the single header graphic there. Did you change your mind about how you are going to do this?

Not that this is related to your former spacing problem, but you don't need all those "div"s in the style declarations. You can simply define a class as ".class" and then you will be able to apply it to anything (including divs).

OK, on to your problem. I'm just going from memory since I think you've changed the code a bit since I first saw it. Here's an idea: rather than having two separate divs holding the split header image, have one full-length header image (this will be the image without that little bit of green) as a background image. Then, inside that div, you put that tiny "green fleck" image and position that separately. Whenever you don't need it, you just hide it (change the visibility, make the left-margin -1000, whatever). Does that make sense?

Of course, I think that's a lot of hassle for what you're trying to accomplish, especially if this is going to be a template and that green fleck is only going to be present on the splash page. If you're going to do this with PHP, for example, it won't be a simple matter of just including content in the content area--you're also going to have to take that green fleck into account. It may be a simple matter to make it appear and disappear in testing, but it's going to add another layer of complexity to your design once you start actually implementing the template.

Honestly, if I were you, I would move that graphic down about twenty pixels or so and make sure it didn't overlap the header image. Problem solved. I don't think it really adds that much to the presentation anyway, and it definitely does not add enough value to outweigh the hassle factor.

Just my two cents. Don't know if that helps.


___________________________
Suho: www.liminality.org | Cell 270 | Sig Rotator | the Fellowship of Sup