Page 2 of 2

Posted: Thu Jul 14, 2005 4:30 pm
by ol4pr0
reloads the window if Nav4 resized :roll:

Thats all it does
Without it should work aswell, ofcourse youll have that resize problem.

Posted: Fri Jul 15, 2005 11:05 am
by nielsene
What's the current state of your attempts. That looks like a very simple CSS layout to acheive -- something I do relatively often. I'm no longer sure what problem you're trying to solve so I can't give my suggested solution yet....

Posted: Fri Jul 15, 2005 11:46 am
by pickle
My current state is to go back to tables - and they're working perfectly.

It's not imperative that this page uses a DIV layout. I was just making an interface to help me code some backend stuff - the designers will be making the real template. I was just trying to make a DIV layout to see if I could and what the difficulties were in doing so.

That said, anyone who can show me the light will be my friend for at least the next 25 minutes.

The template is currently using this code:

Code: Select all

<html>
  <head>
    <link rel=&quote;stylesheet&quote; type=&quote;text/css&quote; href=&quote;<?PHP echo $base_href ?>/common/style.css&quote; />
  </head>
  </body>
  <div style = &quote;background-image:url('http://my.server.ca/images/header.jpg');border:1px solid #333333;margin-bottom:2px;height:67px;&quote;>
    &nbsp;
  </div>
  <div style = &quote;background-color:#509a5e;margin-bottom:2px;padding:2px;border:1px solid #333333;&quote;>
    ::PRIMARY::
  </div>
  <div style = &quote;background-color:#509a5e;margin-bottom:2px;padding:2px; border:1px solid #333333;&quote;>
    ::SECONDARY::
  </div>
  <div>
    ::BREADCRUMBS::
  </div>
  <table cellspacing = &quote;2&quote; cellpadding = &quote;2&quote; width = &quote;100%&quote;>
    <tr>
      <td style = 'border:1px solid #333333;width:20%;vertical-align:top;'>
	::CONTEXT-LINKS::
      </td>
      <td style = 'border:1px solid #333333;vertical-align:top;'>
	::BODY::
      </td>
    </tr>
    <tr>
      <td style = 'border:1px solid #333333;height:50px;text-align:center;' colspan = '2'>
	::FOOTER::
      </td>
    </tr>
  </table>
</body>
</html>
Thanks everyone!

Posted: Fri Jul 15, 2005 12:35 pm
by nielsene
Is this what you want?
http://www.mit.edu/~nielsene/devnet/index.html or
http://www.mit.edu/~nielsene/devnet/index2.html

(The latter moves the footer to the base of the viewport. Neither expand the links/body to the full availible height of the browser unless one or the other have sufficient content. Do so tends to require tricks that won't be safe across browsers, especially as old as NS4.x's.

There are several possible tweaks to it, but before I do those, I want to see if this is on the right track....

Posted: Fri Jul 15, 2005 1:04 pm
by pickle
Wow! Very impressive. That's almost exactly what I was looking for. The only problem with the first page (the second, with the footer at the bottom, is cool but not necessary), is that the links div can shrink smaller than the content. If you make your window very small, you'll see ::LINKS:: start to overlap into the ::BODY:: div. While this is very minor, it will be a bigger problem when the links are quite a bit wider.

It's a very small thing for sure, but I want a div layout that can be 100% as powerful as a table layout (right now you're 99%+ :wink: )

Thanks again

Posted: Fri Jul 15, 2005 1:07 pm
by nielsene
Yup I thought that would be one of your concerns, ok give me a few minutes for some different options.

One question, how important is the ability for uses to change font-size to you? versus how important is pixel level accuracy across browsers?

[EDIT: ON]

OK, I've revised the first display at the first URL. I reserve
a fixed width (in em's not percent) for the links column, while letting the body expand the rest of the way. This is one of my preferred styles as you often don't want the navlinks to continually expand. It does slightly make things less good at very narrow windows, but as from web developers seeing how narrow can your design get, not (m)any users seem to really do that.

[EDIT: OFF]

Posted: Fri Jul 15, 2005 1:12 pm
by nielsene
pickle wrote:
It's a very small thing for sure, but I want a div layout that can be 100% as powerful as a table layout (right now you're 99%+ :wink: )

Thanks again
One minor point: I personally think that div layouts are vastly more powerful than table layouts, but there is about a very small area where they can't directly match a table layout...

Ie if a Table Layout can doo 100 "things" a div layout can do 200 "things", 98 of which or so are from the list of table things and 102 are unique to div, etc

Good div layout can be much, much lighter weight and vastly more accessible/maintainable in my opinion, but you do lose one or two specific layout solutions.

Posted: Fri Jul 15, 2005 3:27 pm
by pickle
That's it! Until 2:50 (my time) ~nielsene is my friend (and probably after that too).

That's exactly the interface I was looking for. I'll integrate it this afternoon and let you know how it goes. Thanks a million.

Posted: Fri Jul 15, 2005 4:53 pm
by pickle
Update: I've integrated the css into my page and it works beautifully. In an ideal world, though, I'd like the menu div to expand to the same height as the main content div. This is a perk I'm willing to go without, but if you know how to do this, great!

Posted: Fri Jul 15, 2005 5:19 pm
by nielsene
pickle wrote:Update: I've integrated the css into my page and it works beautifully. In an ideal world, though, I'd like the menu div to expand to the same height as the main content div. This is a perk I'm willing to go without, but if you know how to do this, great!
A List Apart (http://www.alistapart.com) has several great articles on doing that.

The simplest is Faux Columns I'ld take a look at that, first. If you want to get fancier, try Creating Liquid Layouts with Negative Margins which I find myself using almost everywhere these days.

The first one simply has you create a vertically tile-able background that you put on the body element. (Your header/footer's image will hide it.) Thus generating a fake background that looks like the two columns. The second one uses the same trick, but adapts it for more flexibility and more columns if needed.

I had meant to include it in the mockup I did, but didn't get too it. I'm sorry about that. Let me know if you have trouble with the referenced articles and I'll try to play some more.

Posted: Fri Jul 15, 2005 5:31 pm
by pickle
Thanks - I'll take a look.