Welcome to WebmasterWorld Guest from 54.196.243.192

Forum Moderators: not2easy

Message Too Old, No Replies

Can the red cross be replaced by css

Css

     
9:38 pm on Apr 8, 2008 (gmt 0)

New User

5+ Year Member

joined:Apr 8, 2008
posts: 2
votes: 0


Hi Everyone,

I need to get irregular thumbnail gaps in my CSS gallery but when I remove a thumbnail I get the dreaded red cross.

Does anyone know if the red cross can be replaced by a css style with a no image tag to display nothing but also keep the orginal image dimensions?

Thanks

10:00 pm on Apr 8, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
posts:4783
votes: 0


Welcome suzzylou,

red cross: I presume you mean it's what your browser shows for a broken image ?

Changing the token for the broken image itself isn't something that's part of the CSS spec as far as I know.

But perhaps taking a step back and preventing the image from not being found would be a much easier solution, why don't you show us some simple code what's causing your problem ?

11:00 pm on Apr 8, 2008 (gmt 0)

New User

5+ Year Member

joined:Apr 8, 2008
posts: 2
votes: 0


Hi Swa66 and thanks for answering.

My problem is that instead of creating a list in regular thumbnails say 3 columns by 4 rows containing 12 thumbnails. I would like to remove certain thumbnails so that row 2 has 2 thumbs (instead of 4) and row 2 has three thumbs but in different columns for a modern irregular staggered look.

I have a faded image background which makes it rather difficult to use an image that is just a colour. Please see demo example: <removed> the black squares are the thumbnails and the top of the image is what I'm getting at the moment, second half is what i would like to see.

I'm sure my question will be clear once you see the image. It would be great if you could help. thanks

[edited by: jatar_k at 3:30 am (utc) on April 9, 2008]
[edit reason] no urls thanks [/edit]

12:40 am on Apr 9, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
posts:4783
votes: 0


So you want the images distributed in a matrix like fashion but only put them in certain spots and skip over the others ?

I see a number of ways: float your images in there and float a dummy class that's just a given size but displays nothing in there for the empty spots. This will however put layout in your html and as such isn;t the best approach in a purist book.

Or use absolute positioning to put the images exactly where you want them. This has as drawback that the layout will not flow when the browser window is changed, bt I guess it's closer to what you seek..

html:

<img src="#" id="img1" alt="image" />

css:
#img1 {
position: absolute;
top: 100px;
left: 100px;
height: 50px;
width: 50px;
}

I typicaly don't use much absolute positioning, but this would be a good moment to use it.

4:34 pm on Apr 9, 2008 (gmt 0)

New User

5+ Year Member

joined:Apr 3, 2008
posts:10
votes: 0


You could make a blank graphic to place in those spots you want to remain blank - it depends if you've got a backdrop though.
9:10 am on Apr 13, 2008 (gmt 0)

Junior Member

10+ Year Member

joined:Feb 13, 2003
posts:80
votes: 0


I've got a 10 x 10 transparent.gif, it could be pared down to 1 or 2 pixels even. Just use whatever file dimensions you need held open, browser will stretch it.
11:46 am on Apr 13, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
posts:4783
votes: 0


Avoiding transparent gifs was for me one of the reasons to become interested in CSS (along with having nested tables too complex to understand anymore)
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members