Google Sign in options
Remember me
This is not recommended for shared computers

Privacy Policy
Sign In
Create Account

Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

Subscribe to HRA Now!

Are you a Google Analytics enthusiast?

Share and download Custom Google Analytics Reports, dashboards and advanced segments--for FREE!

www.CustomReportSharing.com

From the folks who brought you High Rankings!

Positioning An Object Bottom-right

Started by qwerty , Aug 19 2007 04:09 PM

Next

Please log in to reply

15 replies to this topic

#1 qwerty

HR 10

Moderator
8,295 posts

Location:Somerville, MA

Posted 19 August 2007 - 04:09 PM

I have a set of images, all of them the same size (140 x 500px), and I want to put them in the page's bottom-right corner. I made the class of images a child of the container div (which is a set width and contains everything but the background color that shows up beyond that width). I set it up this way:

CODE

img.bldg {position:relative; padding:0; top:-500px; left:615px; }

The left position works perfectly, no matter how wide I make the window. Setting the top to -500px puts it in the right place -- the image is 500px tall, so I want the top of it 500px above the bottom of the parent element -- but it adds an additional 500px of empty space below it.

I've tried setting the bottom to 0 just puts the image inside that extra 500px.

You can see an example of the problem here.

Back to top

#2 jehochman

Jonathan Hochman

Active Members
1,555 posts

Location:Connecticut - Land of Steady Habits

Posted 19 August 2007 - 06:48 PM

Using the edit HTML feature in Firefox with the developers' extension, I can get this to work:

CODE

Test in IE. YMMV.

Back to top

#3 qwerty

HR 10

Moderator
8,295 posts

Location:Somerville, MA

Posted 19 August 2007 - 06:58 PM

That works in FF, but in IE 7 it adds that extra 500px below it

Back to top

#4 jehochman

Jonathan Hochman

Active Members
1,555 posts

Location:Connecticut - Land of Steady Habits

Posted 19 August 2007 - 09:55 PM

Remove the image tag completely. I tested the first line of code within the body like this and it works in FF.

CODE

Done deal, if it works in IE.

Back to top

#5 qwerty

HR 10

Moderator
8,295 posts

Location:Somerville, MA

Posted 19 August 2007 - 10:53 PM

Better... it works in FF and IE with the container div defined as

CODE

#container {
  width: 760px;
   \width: 780px;
   w\idth: 760px;
   margin: auto;
    margin-bottom:40px;
    padding: 0;
    color: #434343;
    border: 2px #365FB7;
    border-style: none solid solid none;
    background: #EFEAB3;
    background-image:url(/images/bldg-01.jpg);
    background-position:bottom right;
    background-repeat:no-repeat;
    }

But the idea is to use different images in that spot, so I tried creating different classes for the div that use a different background image. No luck there.

Back to top

#6 piskie

HR 7

Active Members
1,092 posts

Location:Cornwall

Posted 20 August 2007 - 06:58 PM

qwerty, can You tell me why so many designers use #id to set styles instead of .class as I myself favor.
In the past, I have experienced more cross browser glitches using #id than .class mainly for positional issues.

Back to top

#7 qwerty

HR 10

Moderator
8,295 posts

Location:Somerville, MA

Posted 20 August 2007 - 11:14 PM

They do the same thing, but they're intended to serve a slightly different purpose. When you put an ID onto some section of a page, it's to label it as the one area with that name, so you can stick a given class onto any number of elements, but you're only supposed to give one element a given ID.

Back to top

#8 jehochman

Jonathan Hochman

Active Members
1,555 posts

Location:Connecticut - Land of Steady Habits

Posted 20 August 2007 - 11:44 PM

Qwerty, you should be able to say id="container" class="imageX" in that div. Remove the background image CSS def from #container, and make up as many .imageX class definitions as you need. That should work. You'll have to change the class on each page. That shouldn't be too much trouble.

Back to top

#9 qwerty

HR 10

Moderator
8,295 posts

Location:Somerville, MA

Posted 21 August 2007 - 01:16 AM

Nope, I tried that. No dice.

I'm thinking I'll just artfully scatter images around the site rather than having a single spot for them. That way I don't have to crop them down to that odd size (unless I choose to stick one in that right column).

Back to top

#10 chrishirst

A not so moderate moderator.

Moderator
5,886 posts

Location:Blackpool UK

Posted 21 August 2007 - 05:59 AM

Using IDs for elements also makes it a easy task to target elements when using DOM scripting

Back to top

#11 Dimmerswitch

HR 3

Active Members
72 posts

Location:Madison, Wisconsin

Posted 10 September 2007 - 12:04 PM

Color me late to the party, but is there a reason you wouldn't class the body element, in conjunction with a background-image on the container div?

So you could have something like:

[codebox]#container {
width: 760px;
\width: 780px;
w\idth: 760px;
margin: auto;
margin-bottom:40px;
padding: 0;
color: #434343;
border: 2px #365FB7;
border-style: none solid solid none;
background: #EFEAB3;
background-image:url(/images/bldg-01.jpg);
background-position:bottom right;
background-repeat:no-repeat;
}[/codebox]

which would set bldg-01.jpg as a 'default' image.

Then you could override that on a per-page basis with something like

[codebox]

QUOTE(HTML file)

QUOTE(CSS file)

body.cv #container {
background-image:url(/images/bldg-01.jpg);
}

[/codebox]

Untested, but I'm fairly sure that should work across any reasonably-modern browser.

Back to top

#12 jehochman

Jonathan Hochman

Active Members
1,555 posts

Location:Connecticut - Land of Steady Habits

Posted 10 September 2007 - 10:57 PM

QUOTE

Untested

That one word says it all. When it comes to CSS support by modern browsers, you need to test.

Back to top

#13 qwerty

HR 10

Moderator
8,295 posts

Location:Somerville, MA

Posted 10 September 2007 - 11:23 PM

I gave up on getting it to work -- not because I concluded it was impossible, but I noticed that, on the browsers where I had it working, I didn't care for the way it looked.

Back to top

#14 piskie

HR 7

Active Members
1,092 posts

Location:Cornwall

Posted 11 September 2007 - 03:19 AM

Incidentaly, why did you wrap the image in a paragraph tag

CODE

instead of assigning a class to the image?

Back to top

#15 Dimmerswitch

HR 3

Active Members
72 posts

Location:Madison, Wisconsin

Posted 11 September 2007 - 09:31 AM

QUOTE(jehochman @ Sep 10 2007, 10:57 PM)

That one word says it all. When it comes to CSS support by modern browsers, you need to test.

My use of the word "untested" was perhaps overcautious, and I should have been more clear. I have used (and tested) nearly identical techniques with other projects successfully. The approach I outlined should work across FF > 1.0, Opera > 8.0, all released versions of Safari, and IE/Win > 5.5.

Sounds like it's a moot point in this case, but I wanted to offer a solution in case someone has a similar situation down the road.

Back to top

Next

Back to CSS/XHTML Discussion and Questions

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Google Sign in options

Subscribe to HRA Now!

Are you a Google Analytics enthusiast?

More SEO Content

Sponsored Content

Positioning An Object Bottom-right

#1 qwerty

#2 jehochman

#3 qwerty

#4 jehochman

#5 qwerty

#6 piskie

#7 qwerty

#8 jehochman

#9 qwerty

#10 chrishirst

#11 Dimmerswitch

#12 jehochman

#13 qwerty

#14 piskie

#15 Dimmerswitch

0 user(s) are reading this topic