File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes image placement with CSS Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "image placement with CSS" Watch "image placement with CSS" New topic
Author

image placement with CSS

Kristin Stromberg
Ranch Hand

Joined: May 17, 2005
Posts: 91
I hope this question isn't too out of place here... I have a table displaying phone numbers. If a phone number is the user's primary phone number, I'd like to display an image to the left of the table cell containing the number (like an arrow or a checkmark.... something to make it stand out from the others). It doesn't look like I can do this using background image of the table cell because the image will actually need to be to the left of the cell (outside of the table altogether). Can someone point me in the right direction here?

So here's what I would like to see (second number in the list is the primary phone #):

Because of the way the page is formatted (this is actually an embedded table), I don't want to add another column to the table to contain the arrow.
[ October 06, 2008: Message edited by: Kristin Stromberg ]
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61766
    
  67

Why can't you just put an image element in the cell before the data?


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Kristin Stromberg
Ranch Hand

Joined: May 17, 2005
Posts: 91
There's no cell before the data.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61766
    
  67

I was talking about the cell with the data.

Trying to place the marker outside of the table is just not feasible. You are either going to have to place the image in the cell with the data, or add another column in which to place the marker.

If you want to try and be tricky, you could try to use a background image will some cell padding, but that's starting to get needlessly complicated. I'd just place an image with your marker in the marked cells, and if you need things to line up, use CSS padding in the non-marked cells.
[ October 06, 2008: Message edited by: Bear Bibeault ]
Kristin Stromberg
Ranch Hand

Joined: May 17, 2005
Posts: 91
Ah, gotcha. Thanks Bear, that's what I was thinking as well. However, I did manage to get close to what I'm looking for by adding the image inline to the table cell but then positioning it outside the cell like so:

.primary_address {
position: relative;
left: -30px;
margin-right: -20px;
}

This renders pretty consistently in IE and FF. Am afraid to check other browsers :-)
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61766
    
  67

Yeah, that's really fragile and I'd not rely upon it.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: image placement with CSS