Topic: img next to img not touching (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=27683" title="Pages that link to Topic: img next to img not touching (Page 1 of 1)" rel="nofollow" >Topic: img next to img not touching <span class="small">(Page 1 of 1)</span>\

 
Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 03-24-2006 04:59 Edit Quote

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

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 03-24-2006 05:54 Edit Quote

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;
}

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 03-24-2006 06:11 Edit Quote

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

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 03-24-2006 10:04 Edit Quote

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

code:
#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

code:
<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)

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 03-24-2006 13:54 Edit Quote

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!

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 03-28-2006 07:06 Edit Quote

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


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

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 03-29-2006 07:57 Edit Quote

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

Suho1004
Maniac (V) Mad Librarian

From: Seoul, Korea
Insane since: Apr 2002

IP logged posted posted 03-30-2006 03:03 Edit Quote

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

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 03-30-2006 03:41 Edit Quote

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

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 03-30-2006 06:13 Edit Quote

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

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 03-30-2006 08:53 Edit Quote

..ready for more input please.

http://meetscoresonline.com/ah/

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

Suho1004
Maniac (V) Mad Librarian

From: Seoul, Korea
Insane since: Apr 2002

IP logged posted posted 03-30-2006 11:21 Edit Quote

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



Post Reply
 
Your User Name:
Your Password:
Login Options: Remember Me On This Computer
 
Your Text:
Loading...
Options: Show Signature
Enable Slimies
Enable Linkwords

« BackwardsOnwards »

Show Forum Drop Down Menu