PDA

View Full Version : Nesting table within css layout


borderfox
05-07-2007, 10:49 AM
I want to place an image within the left hand column of this (http://www.energysurveyor.net/index_c.html) page - to be positioned right at the bottom. Do I need to nest a table within that column in order to position this? If so, dreamweaver doesnt seem to be giving me the option of doing this?

Any help or links to tutorials appreciated as always.

domedia
05-07-2007, 12:39 PM
use css positioning, and set bottom position to 0.

.classonyourimg {position: absolute; bottom: 0;}

borderfox
05-07-2007, 01:39 PM
Ok, I added this to the end of the main.css page:


#image positioning {
.classonyourimg {position: absolute; bottom: 0;
}

In the xhtml page, I added this within the div that sets out the left column;

<img class="classonyourimg" src="images/sei_logo.gif"/>


Its displaying - but not at the bottom of the column. How have I fudged it?

chriskq
05-08-2007, 03:34 AM
i think maybe just some margin-top should do it

<img src="images/sei_logo.gif" style="margin:100px auto 0;" />

the auto might help center it (should in FF, IE might need tweaking)

let us kno whow go. nice foundation u got

borderfox
05-08-2007, 09:14 AM
i think maybe just some margin-top should do it

<img src="images/sei_logo.gif" style="margin:100px auto 0;" />

the auto might help center it (should in FF, IE might need tweaking)

let us kno whow go. nice foundation u got

Chris, you've just thrown me a lifeline on this one! :mrgreen:

Works like a charm.

Thanks again guys.

domedia
05-08-2007, 03:28 PM
Chris' suggestion will work great if your parent element does not change height.

The reason my suggestion did not work for you, is that you probably don't know CSS yet. You made a CSS unique ID, tried to call it with a classname, didn't matter really since the ID name didn't even match the classname..
'positioning' <- this element does not exist in CSS so you can't call this either.. Then you try to make a CSS declaration by nesting declarations somehow.. hmmm :)
you need a CSS primer, I don't think you really know what you wrote up there , and it will come in very handy later ;)

The correct code would be:

CSS:
#bottomimage { position: absolute; bottom: 0; }

HTML:
<img id="bottomimage" src="images/sei_logo.gif"/>

Make sure the parent element has position: relative set for this to work.

borderfox
05-08-2007, 04:08 PM
you need a CSS primer, I don't think you really know what you wrote up there , and it will come in very handy later.
Agreed. I have an interest in it but its one of a list of things that I would like to look at and the time isn't there (the business pertaining to the site is mine - and its in the process of being established).

I got a hold of this opensource css template and thought I could get the benefit of that layout without having to delve into css (right now).

Similarly, Flash is another area would have liked to work on myself but I know it would take too long to get up to an acceptable standard for this site - so i've farmed that out to someone who knows what they're doing.

I have css cbts and hope I will get the chance to get my head round it in the not too distant future. In the meantime, I think I will leave it as it is for now as I will only break it if i try and implement your suggestion.

Thanks for all of your help.