17 replies [Last post]
norrash
Offline
Regular
Last seen: 14 years 6 weeks ago
Joined: 2004-09-17
Posts: 15
Points: 0

i want to position a graphic on the lower right hand corner of my site- OUTSIDE the main container...

i am sure i have to use absolute positioning
and have looked around at every article
i can find on this but i just cant seem to figure out the codes for both the css and html

i feel like i am close but just not there ??????

#boop {
background-image: url(../images/boop3b.jpg );
position: absolute;
left: ????;
height: 394px;
width: 176px;
}

what is html?
<div-id="boop">
????????????????
:?

mybrain is mush right now-- need to hit the hay
maybe in the morning i can see
the answer more clearly..think i am on
css overload!

thanks in advance

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 42 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Image Positioning Question...

Unless anyone else jumps in and corrects me, try this:

#boop {
position: absolute;
right: 0px;
bottom: 0px;
height: 394px;
width: 176px;
margin: 0;
border: 0;
padding: 0;
background-image: url(../images/boop3b.jpg);
}

<div id="boop">content</div>

Life's a b*tch and then you die!

norrash
Offline
Regular
Last seen: 14 years 6 weeks ago
Joined: 2004-09-17
Posts: 15
Points: 0

Image Positioning Question...

wow thanks alot--
it works better but i would like the image to be much lower
i would think with a margin of 0 that would force it to the bottom of the page-- but it doesnt????

also the word "content" shows up?
thanks alot for your help-- i knew i was close but just got too overloaded to figure it out

http://www.creativedistortion.com/artistamp.html

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 42 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Image Positioning Question...

norrash - I have used the word 'content' to illustrate where your content (i.e. the HTML code for your picture) should go Wink.

Life's a b*tch and then you die!

norrash
Offline
Regular
Last seen: 14 years 6 weeks ago
Joined: 2004-09-17
Posts: 15
Points: 0

Image Positioning Question...

DUH--- man do i feel stupid... i just woke up and havent had my morning coffee yet--

i KNEW that-- i just wasnt thinking-
:oops:

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 42 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Image Positioning Question...

Laughing out loud Wink

Life's a b*tch and then you die!

natimage
Offline
Regular
Last seen: 16 years 31 weeks ago
Joined: 2004-10-08
Posts: 19
Points: 0

Image Positioning Question...

Theoretically, this shouldn't work if margin: 0px doesn't work, but you can try it anyway. Replace

margin: 0px;

WITH

margin-right: 0px;
margin-bottom: 0px;

If that doesn't help, maybe you could place another "container" below your primary container and place this content inside the second container...????

Tracy Smith

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 42 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Image Positioning Question...

Tracy - I think the second problem was caused by not putting the picture inside the div, which then sat below the picture; hence the gap; hence my response.

margin: 0; does exactly the same thing as specifying them individually, except that by not specifying all four sides, you risk inheritance problems.

Life's a b*tch and then you die!

natimage
Offline
Regular
Last seen: 16 years 31 weeks ago
Joined: 2004-10-08
Posts: 19
Points: 0

Image Positioning Question...

roytheboy wrote:
Tracy - I think the second problem was caused by not putting the picture inside the div, which then sat below the picture; hence the gap; hence my response.

margin: 0; does exactly the same thing as specifying them individually, except that by not specifying all four sides, you risk inheritance problems.

I reckon I should've specified that I was just referring to the first problem. I agree with you fully that what I suggested was the same thing. I just always try such things when I'm having a problem like that with IE. I, however, don't know enough about CSS to know about all the inheritance issues. In that case, I would try specifying all of them seperately to see if IE liked it any better. Once again...I know it's the same thing and shouldn't work!!! And most likely it won't. I just never ignore an avenue when dealing with IE because you just never know with that browser!! Wink

Tracy Smith

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 42 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Image Positioning Question...

Unless I'm missing something here, there is no problem with margins (is that now the case norrash?). The margin of zero was for the #boop div, but norrash was not then putting the picture inside the div.

As for trying everything and anything with IE; yes I know exactly what you mean, but I can confirm that thankfully margin: 0; is something that IE interprets correctly.

Life's a b*tch and then you die!

natimage
Offline
Regular
Last seen: 16 years 31 weeks ago
Joined: 2004-10-08
Posts: 19
Points: 0

Image Positioning Question...

Maybe I'm the one missing something. I just saw this comment in an above post and thought some help was still needed:

Quote:
wow thanks alot--
it works better but i would like the image to be much lower
i would think with a margin of 0 that would force it to the bottom of the page-- but it doesnt????

Maybe the problem is indeed fixed and I just need more coffee!!! :?

Tracy Smith

norrash
Offline
Regular
Last seen: 14 years 6 weeks ago
Joined: 2004-09-17
Posts: 15
Points: 0

Image Positioning Question...

well i am still having a problem plus now have another one --

first problem - the pic isnt down any farther on the page-
i have tried every kind of html and nothing seems to work so i must have the wrong idea--
so if one of u could tell me the correct code--
i am stuck--
i thought i knew what to do but obviously i dont -- DUH--AGAIN

second problem - my code is not validating because i am using the height and width properties in a container--

i have several thrumbnails and i want them to all be approximately the same size--
some of them are quite large jpgs......
so how do i apply a size to individual images with out having to redo the jpgs into a smaller size? too much work-

link to page is above
here is link to css

[url] http://www.creativedistortion.com/artistamp.css [/url]

natimage
Offline
Regular
Last seen: 16 years 31 weeks ago
Joined: 2004-10-08
Posts: 19
Points: 0

Image Positioning Question...

For the thumbnail problem, you should be able to specify width and height attributes to your img tags in the html to make them all the same.

I'm still not sure about the first problem. I believe that I had a similar problem one time. I can't remember what I did to solve it. Was adding a second container to put it in not an option?

Tracy Smith

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 42 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Image Positioning Question...

norrash,

I did not look at your code before because (a) you did not give it, and (b) when you did, your problem seemed so straightforward that it did not warrant it. Had I seen your code originally I would not have responded because I do not have the experience or time to help you as well as others on this forum can. However; I will now try to point you in the right direction...

I am no expert when it comes to doctypes, but if you use a transitional doctype, you should find that your bottom image will work correctly with the code I suggested (also note the change of <html> tag)...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-UK">

...then start again with your code validation checks.

Next look at your design as a whole. What happens when someone views your site using a 760px viewport, or smaller? 760px is very common!

Think about the download overhead that your boop images are adding and use the correct image width for boop3b.

Code more cleanly and with less white space as it is a pain trawling through badly written code.

Look again at the paths to your images and stop using white space in the tag attributes.

The whole point of using thumbnails is to decrease the load time of the page. If you simply shrink the images with the img tag dimensions (which will work), they'll still take ages to download, plus they'll look cr*p!

Like I say, I'm no expert and others here will put me to shame, but I think you need to learn to walk a little better before you try to run. Seriously: start with very simple pages, code them cleanly and get them working on all the main browsers. Then work your way up to more complex stuff. Then, if you have specific problems of the sort that an expert can help you with in seconds, post away on this forum. Always remember that the better the coder, the more likely that they will be very busy.

Hope that helps (feel free to disagree or correct me anyone).

Life's a b*tch and then you die!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 18 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Image Positioning Question...

Your not wrong Roy Smile ,
norrash, you can move the image down by using top:1000px; but you really need to get back to basics somewhat and try to go with the
flow. Strip out the contents try a new overall wrapper and set that with the image i.e #wrapper{background: url(boop.jpg) 100% 100% no-repeat;} to set the image in the bottom right hand corner then bring the rest of the content divs to nest within it your content divs should expand the wrapper height as needed but you may need to play around with height attributes.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Stuart
Stuart's picture
Offline
Enthusiast
UK
Last seen: 17 years 11 weeks ago
UK
Joined: 2004-02-27
Posts: 107
Points: 0

Image Positioning Question...

norrash,

I'm not quite sure what it is you require (so forgive me if this is not what you want!)

  1. Go to your html and move the 'boop' <div> to the bottom (just before the closing </body>)

  2. Replace your #boop rule with:

    #boop  {
    position:     relative;  /* changed from 'absolute' */
    float: right;  /* added */
    margin: -394px 20px 0 0; /*changed values (-394px figure raises container by it's height!) */
    height:     394px;
    width:      145px;
    border:      0;
    padding:     0;
    background-image:  url(../images/boop3b.jpg);
    }

Other than that, I'd have to go along with roytheboy's sentiments - especially those regarding the thumbnails and the whitespace within your code.

If you write your code cleanly, finding bugs can occasionally prove a little easier.

If you simply resize the image using html height/width parameters, you will p**s some people off - in particular non-broadband users (or maybe broadband users too if the filesize of your images is particularly large!)

Hope this helps - best of luck norrash! Smile

Stuart

[/]
Stuart
Stuart's picture
Offline
Enthusiast
UK
Last seen: 17 years 11 weeks ago
UK
Joined: 2004-02-27
Posts: 107
Points: 0

Image Positioning Question...

... or follow Hugo's reply (he beat me! Tongue )

norrash
Offline
Regular
Last seen: 14 years 6 weeks ago
Joined: 2004-09-17
Posts: 15
Points: 0

Image Positioning Question...

thanks SO MUCH to all for your input--
i do really appreciate the time it takes and the HELP

i wondered about the Doc type
i had read some articles about it
not sure i totally understand the difference?!?!

i knew the code was kind of sloppy--
trying to find where errors were when validating
and continuous editing led to white spaces--
this is now FIXED- and the code is much cleaner--

i had not considered 760 viewing
nothing i have come across mentioned it
so once again i am clueless...
will look around net for more info on this...

i am redoing the boop graphics-- will make them smaller i thiink --
and also thumbnails to the correct screen size...
i lost my orginal stamps in a computer upgrade-
so didnt want to have to do them all over again --
but u are right
better to have them the correct size--

i am on overload with all of this--
it is so time consuming plus frustrating
but that is what happens when learning something new

i will stick with it and
with the great help i have gotten here
am sure i WILL SUCCEED! Smile