School Assignment? Project Due Tomorrow? Chat LIVE With A Programming Expert!

Programming Help

Web Development



What's Here?

  • Members: 300,431
  • Replies: 826,045
  • Topics: 137,460
  • Snippets: 4,419
  • Tutorials: 1,148
  • Total Online: 1,495
  • Members: 78
  • Guests: 1,417

Welcome to Dream.In.Code
Become an Expert!

Join 300,431 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,495 people online right now. Registration is fast and FREE... Join Now!




Aligning a picture with CCS / HTML

 

Aligning a picture with CCS / HTML
Saldash

3 Jul, 2009 - 08:43 AM
Post #1

New D.I.C Head
*

Joined: 20 Dec, 2008
Posts: 33


My Contributions
Hi folks,

This is a bit more complex than the title suggests so here goes.

How do I get an image to stay at the bottom-right corner of a cell no matter how tall or wide the cell
AND have text that can appear on top of the image?

I have used tables so far but this off-centers the text, I could use a cell at the bottom of the table but I would have a huge gap
which i don't want.

I don't know if it is CSS or java or something else that can do it, i've never done anything like this before.

does anyone know of something that can help me?

Thanks

User is offlineProfile CardPM
+Quote Post


BetaWar

RE: Aligning A Picture With CCS / HTML

3 Jul, 2009 - 09:41 AM
Post #2

#include <soul.h>
Group Icon

Joined: 7 Sep, 2006
Posts: 4,729



Thanked: 269 times
Dream Kudos: 1400
My Contributions
CSS an do it easily.

Here is what you do:

First, decide which table cell you want to have the image on the bottom of. Then add this to the cell:
CODE

class="bl_image"

It will look like so:
CODE

<td class="bl_image">

Don't forget the other parameters that you may have in the cell.

Then, add this to the head:
CODE

<style>
  .bl_image{
    background url(IMAGE URL HERE) bottom right no-repeat transparent;
  }
</style>


That will place the image in the background of the table cell and align it to the bottom right, then tell it to not repeat the background image and set the background color to transparent.

Hope that helps.
User is offlineProfile CardPM
+Quote Post

Saldash

RE: Aligning A Picture With CCS / HTML

3 Jul, 2009 - 10:45 AM
Post #3

New D.I.C Head
*

Joined: 20 Dec, 2008
Posts: 33


My Contributions
Thanks for the reply,

but it doesn't seem to be working.
Here is my test page, as you can see the style info is in the header, and the cell is correctly named.
But no image appears at all.

The target image does exist, and is accessible, I have tried the url with double quote marks and single quote marks and without, nothing makes a difference.

I'm really at a loss, it looks simple enough.

CODE

<html><head><meta http-equiv="Content-Language" content="en-gb">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Testing CSS</title>

<style>
  .bl_image{
    background url(www.world-recoded.co.uk/images/folder2.png) bottom right no-repeat transparent;
  }
</style>

</head>
<body>

<table border="1" width="1121" id="table1" height="295">
    <tr>
        <td class="bl_image"><p align="center">Cell content</td>
    </tr>
</table>

</body>
</html>
User is offlineProfile CardPM
+Quote Post

Saldash

RE: Aligning A Picture With CCS / HTML

3 Jul, 2009 - 11:05 AM
Post #4

New D.I.C Head
*

Joined: 20 Dec, 2008
Posts: 33


My Contributions
Actually don't worry about it,

I found one of my books and read up on CSS.

I got it working using:
CODE
<style>
td.blbg
{
  background-image: url("images/folder2.png");
  background-repeat: no-repeat;
  background-position: bottom right;
  background-color: none;
  }
</style>


But thanks a lot anyway, I wouldn't have figured it out otherwise smile.gif

This post has been edited by Saldash: 3 Jul, 2009 - 01:42 PM
User is offlineProfile CardPM
+Quote Post

BetaWar

RE: Aligning A Picture With CCS / HTML

3 Jul, 2009 - 11:21 AM
Post #5

#include <soul.h>
Group Icon

Joined: 7 Sep, 2006
Posts: 4,729



Thanked: 269 times
Dream Kudos: 1400
My Contributions
Okay, glad to hear you got it working. There wasn't much of a problem with your previous code (up 2 posts). Just had to have been either:
CODE
background: url(http://www.world-recoded.co.uk/images/folder2.png) bottom right no-repeat transparent;

or
CODE
background: url(images/folder2.png) bottom right no-repeat transparent;


You forgot the http:// in the first one, and you also forgot the : after background.

HTH
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic

Time is now: 11/8/09 12:42AM
Invision Power Board v2.1.7 © 2009  IPS, Inc.
Licensed to: MediaGroup1

Live Help!

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter Fan Us On Facebook

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month