Topic: Img positioning question Pages that link to <a href="https://ozoneasylum.com/backlink?for=28175" title="Pages that link to Topic: Img positioning question" rel="nofollow" >Topic: Img positioning question\

 
Author Thread
krets
Paranoid (IV) Mad Scientist

From: Right-dead center
Insane since: Nov 2002

IP logged posted posted 07-06-2006 16:32 Edit Quote

I have a question about the best way to position an image and text at the bottom of a div. Here's what they want:



Here's the entire page if you want a feel for it: http://www.11oh1.net/kamel

What would be the best way to do that? I know I could position the image down there by simply setting margins for it but what about getting the text next to it? Should I use a p-tag and set margins for that? Put it in a div? Float it?

I haven't done much coding in a while so I'm fairly rusty and out of date on the different techniques.

:::11oh1:::

Blaise
Paranoid (IV) Inmate

From: London
Insane since: Jun 2003

IP logged posted posted 07-06-2006 16:55 Edit Quote

Yes float the image, I recommend reading Maxdesign's float tutorial for a good understanding of how this will work.

Cheers,

krets
Paranoid (IV) Mad Scientist

From: Right-dead center
Insane since: Nov 2002

IP logged posted posted 07-06-2006 18:33 Edit Quote

Thanks Blaise, that worked to position the text where I want in relation to the image.

Now, what's the best way to force that sucker to always be at the bottom? I could do it by fiddling with the top margin but that doesn't work so well as the browser is resized to strange dimensions.

:::11oh1:::

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 07-06-2006 20:13 Edit Quote

You want #imgcaption to always be at the bottom of #mainarea?

krets
Paranoid (IV) Mad Scientist

From: Right-dead center
Insane since: Nov 2002

IP logged posted posted 07-06-2006 20:23 Edit Quote

Yep, that's the idea. Always at the bottom but with some padding on the left so it doesn't bunch up against the browser.

I worked it out using some absolute and relative positioning but I'd rather not resort to something like that if I can help it.

:::11oh1:::

CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

IP logged posted posted 07-06-2006 21:43 Edit Quote

I would like to see if there's a better way to do this as well. I have always just used absolute positioning with the bottom set to 0px. It works I guess.

On a side note, the address stuff I would change. I just don't like using breaks like that. I've always been told that, that is using html to format the text when that is what CSS is for. So...how about using a list and set the ul list-style-type:none ?

Just a thought

Later,

C:\

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 07-06-2006 22:05 Edit Quote

I generally place illustrative images in a P tag with a class called figure which is basically a float, with some margin to not stick to the surrounding content, and styling for the caption ( the text in the P tag ). I also set the clear attribute of the Hx tags to make sure they're messed up.

krets
Paranoid (IV) Mad Scientist

From: Right-dead center
Insane since: Nov 2002

IP logged posted posted 07-07-2006 05:40 Edit Quote

Well I thought I had this all fixed till my gf looked at it in Safari and it looks like zees:



It looks nice and pretty in IE and FF 1.5 so what's the dealio? http://www.11oh1.net/kamel

I did it by relatively positioning the main div and absolutely positioning the div with the image and address info. Seemed to be the only solution I could find.

:::11oh1:::

Ramasax
Maniac (V) Inmate

From: PA, US
Insane since: Feb 2002

IP logged posted posted 07-07-2006 06:27 Edit Quote

It is the only solution that comes to mind, and is actually similar to something I had to do on a recent site I coded.

I noticed that if your content goes down further or if you increase your text size it overlaps the absolutely positioned element. This is no good.

Maybe try wrapping your copy in a new div and set the bottom-padding to about 180px to account for the #bottom element (with a little extra breathing room). This should get rid of the overlap. If that doesn't work, you could always use a table.

code:
<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td>#copy</td>
        <td rowspan="2">#rightimg</td>
    </tr>
    <tr>
        <td valign="bottom">#bottom</td>
    </tr>
</table>




As far as the Safari thing goes, try setting a width to #bottom. Looks like the div does not know how wide it should be, so it is only getting as wide as the image and just pushing the text down.

Ram

krets
Paranoid (IV) Mad Scientist

From: Right-dead center
Insane since: Nov 2002

IP logged posted posted 07-07-2006 16:43 Edit Quote

Seems like there's not really any good way to do this aside from using a table or using JS. I would have no idea how to go about it using JS either.

I tried the padding thing but that doesn't fix the overlapping copy/image, all it does is expand the main div below the right image when the browser shrinks but the store image remains static.

Setting a width for #bottom fixed the Safari issue though so at least that one is done.

:::11oh1:::

divinechaos
Nervous Wreck (II) Inmate

From:
Insane since: Dec 2001

IP logged posted posted 07-08-2006 10:11 Edit Quote

Definitely with CPrompt on this one.

One of the least known positioning (I find) features in CSS is that an absolutely positioned element in a relatively position element is positioned in relation to the former. So, by setting #mainarea to relative and #bottom to absolute, giving #bottom a bottom:0; makes it sit just right. Doesn't matter in this fixed-height scenario here, your top-positioning works okay, but with a variable-height column you couldn't do what you're doing now. However, the above works fine in IE6/PC & FF1.5/PC, and I suspect it might even work in SAF & OP, too.

Re: Ramasax, giving #mainarea a padding-bottom:135px; would keep the content from overlapping. (Edit: this has to be done in conjunction with the paragraph above.) It isn't perfect, but does account for #bottom being removed from the document flow. As I noted above, however, this layout doesn't really allow #mainarea to stretch (given the image on the right), but otherwise this could be worked around.

HTH,
DC

(Edited by divinechaos on 07-08-2006 10:13)

Steve
Maniac (V) Inmate

From: Boston, MA, USA
Insane since: Apr 2000

IP logged posted posted 07-08-2006 18:46 Edit Quote

Hey krets - there might be some material in this article at Community MX that would be helpful:
http://www.communitymx.com/content/article.cfm?cid=97480

It's meant for a series of "teaser" thumbnails and descriptions but - might be something in there you could pick out.



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu