Forum Moderators: not2easy
I can define a CSS style - call it .bottom and place the Div immediately below the Body tag, absolute positioning, say 700 px from the top and a width of say 400 px. By dragging it to the "right" position, it also gets indented by say, 300 px.
While that works for a certain screen resolution, it's no good at others.
Am I expecting too much from CSS in this situation or can I do it?
I use the reverse technique - one of my sites has some bulky navigation code that needs to be visible high on the page, but pushes the page content way down if coded that way in the HTML. Rather than make bots fight through all the navigation code, I push it down in the HTML and display it with absolute positioning.
By what you are describing it may be better to split your table, i.e. put that <tr> containing the image into a seperate <div> it can still be a table inside the div if you want..
then put it at the bottom of the HTML and use absolute positioning to position it back at the top of the page.
leaving the content rich row to be first in the HTML. Then just put a top margin on the content table big enough to leave room for the image div that will appear.
It sounds like you also may be centering the whole design which is why it's not being very flexible at different screen resolutions. If so if you wrap the whole layout in a "wrapper" div and explicitly give it position: relative; anything inside it that is then positioned absolutely will be in relation to this div as opposed to the viewport.
These are just a few quick points and the difficulty as I see it from your description is which bit to position and which bit to leave as naturally flowing .
Point to note:
it is not possible to position/move a bit of a table
but
it is possible to position/move a whole table or div
Suzy
Yes, the page is centred. I think I tried everything suggested but I am missing something.
yes the bit where you can't move/position a bit (cell or row) of a table. That is you cannot (yet anyway ;)) move a table cells position in relation the the rest of the table. The <table> itself is the only bit that can be manipulated/positioned.
In your code you have the table intact and then you're attempting to make it look as if the text is inside the table by positioning the div containing the keyword text on top of the correct cell.
To my mind that is not necessary and you will have difficulty with different sized bits of text as the text is now in a div that "stuck" on top of the table it will not stretch the table cell to the required height.. and unless you know the height of the other rows before it it will be impossible to give it top co-ordinates too.
So it requires a bit of different thinking, don't worry I'm not going to tell you you don't need tables. I don't know the content of your page and you may well be better with them. but you don't have to put all your layout into a table or at least not the same one ;)
your image is still positioning itself in respect to the viewport because its containing block is the <table> and not the wrapper div. A table has rules and laws unto itself which I am not fully conversant with but enough to know that it's a cross browser nightmare. Some people have test pages up showing the "pretty" things that CSS will be able to with tables in the future but that is a long time away so there's no point in even going there yet ;)
so instead of thinking how to get that rich content row to play ball change the thinking and move everything else!
I'm going to do the example without tables but as long as you remember you can put entire tables inside the divs (.keytext and .logo) if required, the theory is still the same...
HTML being used:
<div class="wrapper">
<div class="keytext"><p>Keyword rich text here. Keyword rich text here.</p></div>
<div class="logo">(Image.jpg at the top)</div>
</div><!-- close wrapper -->
First and a little tip if you're not already doing it
set html, body {margin: 0; padding: 0;}
this removes all "extra" default paddings or margins that browsers may apply differently so you know that you're working with the whole viewport.
then
body {
background: #eee;
text-align: center; /* ie 5.x center wrapper */
}
background colors are there so you can see what's happening and as you're centering IE doesn't play ball properly and this is the "old fashioned" way to center for it.
now bring in the wrapper:
.wrapper {
position: relative;
width: 600px;
margin: 0 auto; /* proper center wrapper */
text-align: left; /* reset back to left for text */
background: #ccc;
}
positioned relatively as discussed before. Width same as your table, margin 0 auto; is the correct way to center, text align left sets the default text alignment back to normal after IE has done it's centering.
Now the (table) keytext div:
The top margin on this should be enough to leave room for the image which will be the one that's positioned:
example is 95px height + 10px top and 10px bottom
.keytext {margin-top: 115px; background: #fff;}
so what you have now is the .keytext div "appearing" further down the page with a space above it. You now just need to position the image into that space..
.logo {
position: absolute;
top: 10px;
left: 73px;
width: 454px;
height: 95px;
background: #ffc;
}
the reason to do it this way is that you know the dimensions of the image so it's the easiest thing to displace.
If you then have other content (navigation) that you want to "displace" too just make the top margin of the keytext bigger and position the navigation the same as the image. Although this will work better if the navigation has a fixed height too.
Key: when absolutely positioning an element you are taking it out of the flow of the rest of the page and sticking it onto the screen (like a post-it note) so the rest of the page cannot then take any dimensions from it.. in this case if the .logo div becomes taller than 115px the keytext div will not move itself down the logo div will just start covering it up..
Quick intro to CSS-P, but I hope there's something in there which might help..
Suzy
It will inspire me to use CSS more often.
Ash
