6 replies [Last post]
nmiddleweek
Offline
Regular
London
Last seen: 13 years 1 week ago
London
Joined: 2008-11-12
Posts: 14
Points: 0

Ah... Smile normally people are asking about column layouts but I'm stuck with a 3 row layout and am really hoping someone can help me cause I seem to have lost it...

Row 1: is to be at the top about 15px in height.
Row 2: is to be flexible depending on screen size.
Row 3: is to be fixed at the bottom of the screen about 40 - a bit like a status bar.

What is the best way to achieve this?

I'm going to be putting a table of data inside Row 2 which may need to scroll.

I will send you a beer (if you're in the UK) if you can help! Smile

Cheers,
N

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 20 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

This should do the trick. I

This should do the trick. I added background color for testing. Its always good to "see" whats going on.

XHTML

<div id="rowOne">content</div>
<div id="rowTwo">Content</div>
<div id="rowThree">Content</div>

CSS

DIV#rowOne {width: 100%; height: 15px; background: green;}
DIV#rowTwo {width: 100%; background: limegreen;}
DIV#rowThree {width: 100%; position: fixed; clear: both; background: green; position:absolute; bottom:0; left:0;}

nmiddleweek
Offline
Regular
London
Last seen: 13 years 1 week ago
London
Joined: 2008-11-12
Posts: 14
Points: 0

You seem to know

You seem to know everything... thank you!

Up until your post, I was thinking of using JavaScript to get the available screen height, etc and set the heights like that... much prefer your way...

Here it is on the web for all to see: http://www.getdiverted.com/test/row3.html

I've put a red background on the BODY, what is the best way to close off the top and left 'border' ? I've tried using top:0px; left:0px but no luck with that.

Thanks!
N

nmiddleweek
Offline
Regular
London
Last seen: 13 years 1 week ago
London
Joined: 2008-11-12
Posts: 14
Points: 0

I overlooked the BODY

I overlooked the BODY margin:0px;

Problem solved... well, that one Smile

Tony, you're a legend! Cheers!

Do you know of any decent books on CSS? I'd like to study and fully understand it.

I've just read up about position:fixed; Am I right in thinking you put absolute as well to force IE6 into using absolute instead of the default position:static; ?

If I wanted scrollbars just on the DIV#rowTwo, would I need to use the overflow:scroll property but in order for it to work properly, I'm guessing I'd need to set the height of it as well?... Would this require JavaScript to do this dynamically depending on the screen size?

This is for a mobile device by the way... iPhone, nokia, etc so the browsers are mixed.

Once again, thanks!

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 20 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

nmiddleweek wrote: Do you

nmiddleweek wrote:

Do you know of any decent books on CSS? I'd like to study and fully understand it.

I have a few that have help. I have "CSS Web Site Design" by Eric Meyer.
http://www.lynda.com/store/ProductInfo.aspx?productid=553

I also have "Transcending CSS" by Andy Clarke.
http://www.amazon.com/Transcending-CSS-Design-Voices-Matter/dp/0321410971/ref=pd_bbs_sr_1?ie=UTF8&s=books&qid=1228486778&sr=8-1

http://transcendingcss.com/

nmiddleweek wrote:

If I wanted scrollbars just on the DIV#rowTwo, would I need to use the overflow:scroll property but in order for it to work properly, I'm guessing I'd need to set the height of it as well?...

Correct!

nmiddleweek wrote:

Would this require JavaScript to do this dynamically depending on the screen size?

No, you make it liquid with %'s.

nmiddleweek wrote:

This is for a mobile device by the way... iPhone, nokia, etc so the browsers are mixed.

You should have two different style sheets then. One for "screeen", the other for "handheld". You would link them like this...

<link href="styles/style.css" rel="stylesheet" type="text/css" media="screen" />
<link href="styles/handheld.css" rel="stylesheet" type="text/css" media="handheld" />

Now, the screen style sheet is for computer screens, and handheld for mobile devices. Handhelds screen sizes will vary, but the most commonly used are 176x208, 240x320. Because phone tech is evolving so rapidly, its best to make your "handheld" style sheet liquid so it stretches to fill the screen. Mobile style sheets should be a tamed-down version of the screen style sheet. You can use my website as an example. I have screen and handheld style sheets. For my handheld style, i took out much of the graphics, and focused on content. I have attached a screenshot of what it looks like. Hope this helps you in you quest for greatness.

AttachmentSize
phone.jpg 98.21 KB
nmiddleweek
Offline
Regular
London
Last seen: 13 years 1 week ago
London
Joined: 2008-11-12
Posts: 14
Points: 0

Thanks for the tip about the

Thanks for the tip about the different styles depending on screens!

Sounds like you try do everything with CSS, is that to not break the 'rules'?

xmas, is round the corner so thanks for the book links! Smile

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 28 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

I bought Bulletproof CSS a

I bought Bulletproof CSS a while back and was probably one of the best things I've bought.
http://www.amazon.com/exec/obidos/ASIN/0321509021/

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph