Jump to content

Table layout replacement help


Recommended Posts

I was recently reading up at http://www.safalra.com/web-design/ and had my views changed on uses of tables. Now I have a question -- I'm trying to stick to the XHTML Transitional DTD, but I don't know how to design the layout with <div>s. The catch is, I want the logo and footer always visible, i.e. the body doesn't scroll but the content does. How do I set up <div>s to do this? If I include the <!DOCTYPE>, the width and height 100%'s don't seem to work -- the <div>s just shrink. Logo {Width: 100%; Height: 128px} Menu {Width: 134px; Height: 100%} Content {Width: 100%; Height: 100%} Links {Height: 100%} Footer {Width: 100%; Height: 1em} Do the 100%'s fill extra space, or force more? I.e, does 134px + 100% = the page width, or 134px + 100% = page width + 134px?

Link to post
Share on other sites
I was recently reading up at http://www.safalra.com/web-design/ and had my views changed on uses of tables. Now I have a question -- I'm trying to stick to the XHTML Transitional DTD, but I don't know how to design the layout with <div>s. I would like this layout: Menulayout.png The catch is, I want the logo and footer always visible, i.e. the body doesn't scroll but the content does. How do I set up <div>s to do this? If I include the <!DOCTYPE>, the width and height 100%'s don't seem to work -- the <div>s just shrink. Logo {Width: 100%; Height: 128px} Menu {Width: 134px; Height: 100%} Content {Width: 100%; Height: 100%} Links {Height: 100%} Footer {Width: 100%; Height: 1em} Do the 100%'s fil extra space, or force more? I.e, does 134px + 100% = the page width, or 134px + 100% = page width + 134px?
This article will give you a good start on creating 3 column layouts. You can fiddle about with it once you've got the basics of it right and set the heights etc. http://www.alistapart.com/articles/holygrailYou might want to try overflow:auto or overflow:scroll in the CSS for the Content section.
Link to post
Share on other sites

This should work. I didn't test it myself, but it's basic and shouldn't have any problems. I'm not used to designing things to fit exceed the screen height though.CSS:

html,body { margin: 0; padding: 0; height: 100%; }#menu { float:left; width: 180px; height: 100%;}#logo { margin-left: 184px; height: 12%}#links { float: right; width: 180px; height: 88%}#content,#footer { margin: 0 184px; }#content { height: 76%; overflow: auto; }#footer { height: 12%; }

HTML:

<div id="menu">Menu</div><div id="logo">Logo</div><div id="links">Links</div><div id="content">Content</div><div id="footer">Footer</div>

Link to post
Share on other sites

There's no need for clearing the floats in the layout I've given. A floated box doesn't affect anything before it. I've placed the boaxes in the correct order so that they don't need to be cleared.

Link to post
Share on other sites

It didn't quite work. I want to have the menu be 134px wide, the links 188px wide, the header 128px high, the footer 1em high, and stay that way.But more importantly, I need this arrangement to fill the available space at all times (so that the footer is always at the bottom, even if there's not enough text).I also need the content to scroll inside, with the menu, links, header and footer staying still.Is it possible? I don't know if I know enough. Is it possible to add/subtract CSS values, e.g. 100% - 128px - 1em?

Link to post
Share on other sites

Unfortunately, it's not possible to add or subtract anything in CSS. All the vertical measurements have to be done in percentages which must sum up to 100% in order for the page to take the full height. All you can do it make the boxes taller or shorter by giving them more or less percent, making sure they still sum up to 100 between all of them.You can change the widths of the containers if you want to:

I want to have the menu be 134px wide, the links 188px wide
#menu { float:left; width: 134px; height: 100%;}#links { float: right; width: 188px; height: 88%}#content,#footer { margin: 0 190px 0 136px; }
Link to post
Share on other sites
But more importantly, I need this arrangement to fill the available space at all times (so that the footer is always at the bottom, even if there's not enough text).I also need the content to scroll inside, with the menu, links, header and footer staying still.
For your footer, supposing it's in a div id="footer"div#footer { position: absolute; width: 100%; bottom: 0; }There's a lot of CSS tutorials that'll teach you exactly what your looking for, unfortunatly the ones I am using are written in french so that won't help you, you'll have to find your own.
Link to post
Share on other sites
For your footer, supposing it's in a div id="footer"div#footer { position: absolute; width: 100%; bottom: 0; }There's a lot of CSS tutorials that'll teach you exactly what your looking for, unfortunatly the ones I am using are written in french so that won't help you, you'll have to find your own.
The reason I wouldn't do that is because content of other boxes will go behind this one rather than stop and scroll right where it starts.
Link to post
Share on other sites
But more importantly, I need this arrangement to fill the available space at all times (so that the footer is always at the bottom, even if there's not enough text).
Non-absolute positioned and bottom property-using solution: http://www.themaninblue.com/writing/perspective/2005/08/29/
Link to post
Share on other sites

I'm not sure If I'm communicating what I want properly. I'm want the edges (header, footer, sidebars) to stay fixed, never smaller than the browser and never larger. I don't want to body itself to scroll at all.Then, I want the content inside to act as a normal web page, scrolling etc.The best I've come up with has the whole page scrolling instead of just the content inside.Is this clear enough?

Link to post
Share on other sites

Have you tried using position:fixed? Experiment with it.

Link to post
Share on other sites

Unfortunately, this is an example where the CSS designers seem like they don't use the internet. There should be a way in CSS to easily specify that a certain element should stick to any one side of the viewport, but there isn't. This is a reason why tables are still used for layouts, this type of thing is really easy to do with a table.This isn't going to answer your question on how to create a tableless layout (because it uses tables), but you can always use a third-party toolkit to help you out.http://extjs.com/deploy/dev/examples/layout/complex.htmlhttp://extjs.com/deploy/dev/examples/desktop/desktop.htmlhttp://extjs.com/deploy/dev/examples/portal/portal.htmlhttp://extjs.com/deploy/dev/examples/feed-viewer/view.htmlhttp://extjs.com/deploy/dev/examples/layou...ut-browser.htmlHopefully some day one of the CSS designers will try to create a web page (one of them works for Opera - cmon buddy!) and realize that there are a lot of things that should be easy that CSS is lacking. Another one is constants, I can't believe we're on CSS 3 and still don't have constants. e.g.

@define $main_text: "#123456";@define $main_bg: "#987654";.h1 { color: $main_text; }.div {   color: $main_text;   background: $main_bg;}

I love finding and replacing across several files just as much as the next guy, but cmon.

Link to post
Share on other sites
Another one is constants, I can't believe we're on CSS 3 and still don't have constants. e.g.
I think the reason we don't have constants in CSS is that combination selectors should be able to select everything that requires that property, and thereby only having to write it once. E.g.
.h1, .div {	color:#123456;}.div {	background:#987654;}

Link to post
Share on other sites
I think the reason we don't have constants in CSS is that combination selectors should be able to select everything that requires that property, and thereby only having to write it once. E.g.
Maybe so, but that's not reality. Look at the stylesheet for this forum, "color: #222222" appears 8 times, the color #072a66 shows up 33 times. That's just the way people use CSS, there's not a good reason not to have constants that we can use. Moreover, using complicated selectors to try to define your attributes once just makes the file more confusing, and possibly larger in size because of the extra definitions. If you want to change the style of one class or element but not others then you probably have to rewrite your rules. Other people agree. But this is getting off-topic, CSS has it's issues like anything else and updates to it will probably address some of them eventually. I do wish they would add "top" and "bottom" as float properties though.<div style="float: top;">header!</div><div style="float: left;">nav!</div><div>content!</div><div style="float: right;">sidebar!</div><div style="float: bottom;">footer!</div>
Link to post
Share on other sites

Like this? Sorta aout the right thing? the centre content scrolls and the rest of the page is fixed? Might be able to mod the layout to include the menu sidebars, etc. Sorry, i simply do not have the time to play with this at present.http://www.jlhaslip.trap17.com/samples/tem...amed/index.html

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...