Page 2 of 2

Posted: Sat Sep 09, 2006 2:20 am
by alex.barylski
Oh man...I tried your code...

And it rendered nicely considering it just used CSS...

Awesome job...you taught me new techniques in CSS...

But...

Code: Select all

<div style="position: absolute; top 0%; left: 0%; width: 100%; height: 100%; background-color: #ff0000; overflow: auto">
  Content<br />
  Content<br />
  Content<br />
  Content<br />
  Content<br />
  Content<br />
  Content<br />
  Content<br />
  Content<br />
  Content<br />
  Content<br />
  Content<br />
  Content<br />
  Content<br />
  Content<br />
  Content<br />
  Content<br />
  Content<br />
  Content<br />
  Content<br />
 <div style="position: absolute; margin-top: -30px; top: 100%; left: 0%; width: 100%; height: 30px; background-color: #696969;">
    | Tab 1 | Tab 2 | Tab 3 |
 </div>
</div>
Run at 800x600 and you'll see what happens...the tabs need to remain at the bottom, but within viewable screen limits, the scrolls bars are for the container only and should not be a part of the TAB area...

I think thats where my problem is with CSS...learning it that is...it's a very different mind set with embedding DIV's using CSS than it is if you provide the layout manually using javascript, which is what I am typically used too :?

Any other ideas???

Posted: Sat Sep 09, 2006 2:48 am
by matthijs
I choose neither as well.

The thing you want to accomplish is perfectly possible to design in css. Only takes some effort. Simulating frames in css is also perfectly possible. Although IE needs a few rules of it's own for that. But you were feeding IE it's own stylesheet already, weren't you?

The faux column thing and the positioning of those elements at the bottom: try absolute positioning inside a relative positioned parent element.

I'm afraid you'll just have to accept css has a steep learning curve after one has learned the basics. I understand that that's quite frustrating for some people. You know, building a webpage can be done by a 6 year old nowadays isn't it? It used to be very simple. Slap some tables in there, cut and paste your images, ready. Starting with css is also not too hard. Only after you start dealing with browser bugs, specific layout wishes things get difficult.

I've been doing this for a few years now and in my opinion the advantages of a clean seperation of responsibilities (html,css,js) win it from some of the disadvantages. (although I never experienced those disadvantages as I never learned to design with tables and co.). The ease of maintainance, clean code and of course issues as accessibility far outweight the short term benefit of hacking something together with a mix of html/javascript because IE displays element X 10px too far to the right.

That said, sometimes javascript can have it's place. Take dropdown navigations for example. In Html you'd code a nice list, with js you make the list behave like you want and finally you make it pretty with css.

When using js in cases like this I think the terms gracefull degradation and progressive enhancement are the key words. So if you use some js to achieve a specific effect and you make sure that: 1) you don't mess up your html and 2) without js everything degrades nicely, you should be ok and you should not be afraid to be hunted by the standardistas police :)

[edit: you might be interested in this recent article on "css frames" or stuarts layouts or more on fixed layouts on gunlaug.

Posted: Sat Sep 09, 2006 3:20 am
by alex.barylski
The thing you want to accomplish is perfectly possible to design in css. Only takes some effort. Simulating frames in css is also perfectly possible. Although IE needs a few rules of it's own for that. But you were feeding IE it's own stylesheet already, weren't you?
Do you mind showing me how??? :P I haven't even the slightest clue as how to start...

I'm using FRAMES for a reason...to avoid AJAX for generating a display mostly...and because the dragging of layers isn't as fluid/clean as FRAMES are when resized.

There are a few other reasons as well...but for now...is getting my tree control to display as you say it's possible...I quite interested in seeing how this can be done...

Do you mind helping/showing me along the way, step by step like...how CSS is doing what it's doing...

This isn't something you can read up on...as it requires understanding CSS caveats...I know the fundementals but lack the life experience to get it going...and my CSS designs tend to be very...ummmm...well the wrong approach :P :lol:
The faux column thing and the positioning of those elements at the bottom: try absolute positioning inside a relative positioned parent element
I've actually disabled FRAME borders, so I'll be resizing the Frame B by clicking & dragging the parent div and the child DIV will have a margin-right: 10px

But those tabs at the bottom MUST NOT be part of the scrollable tree view...and the scrollbars for vertical should be on the left side of the emulated DRAG FRAME BAR...

If that makes any sense...I'm not doughting you...but I'm curious to see how it's done...
I'm afraid you'll just have to accept css has a steep learning curve after one has learned the basics.
Way a head of you...why do you think I'm here asking questions? :P

It's all the damn caveats and browser differences that make it a pain...like writing cross browser javascript... :? Experience would help I'm not denying that :)
I've been doing this for a few years now and in my opinion the advantages of a clean seperation of responsibilities (html,css,js) win it from some of the disadvantages
I agree...but functionally...I'm not convinced CSS is *as* flexible as Javascript...in fact I almost gaurantee it by the nature of the fact that CSS like HTML is a declarative language...whereas javascript is imperative...
although I never experienced those disadvantages as I never learned to design with tables and co.).
When I started getting into web stuff...I was introduced using Mosaic...I'm not even sure CSS was on the radar at that point...I can't even remember tables...until IE 3 or so when I began "designing" web pages and not just boldifying text :P
That said, sometimes javascript can have it's place. Take dropdown navigations for example. In Html you'd code a nice list, with js you make the list behave like you want and finally you make it pretty with css.
I dunno...I have seen some really cool exmaples of JS driven layouts which degrade acceptablly well...

The way I see it...as long as all links, content etc is availble to a user without javscript...regardless of possibly messy layout...thats good.

1) Google will appreciate CSS/JS layouts as much as a strictly CSS layout
2) Most users have JS enabled, so long as it's cross browser friendly giver..
3) Those with JS disabled are likely advanced users who should know how to re-activate JS inorder to properly view a web page.

Disadvantage is of course, that javascript requires lightly more power than strictly CSS driven layouts...Javascript cannot begin to correct layout until onload has fired :P

And the extra weight of Javascript running when browser windows resize, etc can possibly cause problems with very complicated design layouts. But if your just resizeing a few stubborn or hard to fix DIV's that CSS doesn't seem to cut the mustard...

Big deal??? It's almost entirely for aesthetics... :P

Ideally I would like a CSS as much as possible as it cuts down development times of writing JS code to rearrange DIV, etc...

Additionally...you can use JS to circumvent some CSS issues...

p.s-I'd still like to see how my tree could be done using solely CSS though :)

Cheers :)

Posted: Sat Sep 09, 2006 9:11 am
by matthijs
Of course saying something like that almost forces me to back up my words .. :)

Well, I'm willing to help. But can't promise miracles. I did not say it would be easy. Coding a full frame-simulating, fixed- bottom- tree hugging collapsing flexible-fluid layout (or something like that ..) isn't something I whip together in a few minutes in between reading some threads here :) You know, getting some layouts to work pixel perfect fully cross browser may take me hours or days as well. Rereading articles on positioniseverything etcetera..

But we can take it one step a time. What do you want to start with? The frame simulation? (see the articles I linked to). Or the sticky footer tabs? What do you want to do with the tree?

You know, it's not that I know everything about css. But I have seen and read a lot. So what I do is keep a long list of bookmarks and snippets of code. Whenever I have to do something which isn't the standard 2 or 3 col layout I'll try to remember were I read something about that specific situation and see what I can use. It's almost impossible to remember every little browser bug in each specific situation. Luckily others have done all the hard work (like Roger from 456bereastreet or stuart from cssplay or eric meyer on meyerweb).

Posted: Sat Sep 09, 2006 2:40 pm
by alex.barylski
Of course saying something like that almost forces me to back up my words .. :)
That was on purpose ;)
But we can take it one step a time. What do you want to start with? The frame simulation? (see the articles I linked to). Or the sticky footer tabs? What do you want to do with the tree?
Cool cool...well for now I'll stick with FRAMES as it serves a functional purpose which could be rectified with AJAX, but there is no reason. So FRAMES it is :)

The tree's container should adjust to the height of the visible screen area, regardless of what comes before it.

Here is what I am envisioning the layout to be, but obviously it doesn't work without some JS controlling sizes, etc...

Code: Select all

<frame>
  Some Content: 
  <select>
    <option>Option</option>
    <option>Option</option>
  </select>
  <input />
  <div id="container" style="scroll: auto">
    <!-- margin-right 10 is to display the container and use it as drag bar to resize -->
    <div style="width: 100%; margin-right: 10px">
      This are will dislpay the list of nodes and should be the height of it's container
    </div>
    <div style="image: url('blah.jpg'); repeat-x; height: 45px">Tab 1 | Tab 2</div>
  </div>
</frame>
From this you should be able to tell where I expect scrollbars, etc, tabs (pushed to bottom, but always visible - scrolling occurs to keep tabs visible, but tree nodes are clipped)
You know, it's not that I know everything about css. But I have seen and read a lot. So what I do is keep a long list of bookmarks and snippets of code.
As do I...although admittedly CSS isn't something I read that frequently...I do read articles on things like faux columns, etc...occassionally...

Cheers

p.s-Thanks for the help ;) You da' man dude!!!

Posted: Sat Sep 09, 2006 3:59 pm
by matthijs
Well, ok lets start with the basics then. You have the frames in place, but for the html that shouldn't matter I guess because they are just 2 seperate html pages right?

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!-- 
/* first remove all margin and padding */
* {margin:0;padding:0;}

/* step one: full height */
html,body {
	height: 100%;
}
div#leftcol {
	height: 100%;
}
/* step 2: we want the tabs at the bottom */
#leftcol {
	background:red;
	width:200px;
} 


div#fixme-bottom {
position: fixed; 
bottom:0; 
left: 0;
z-index: 2;
background:green;
width:200px;
}

@media screen {

* html, 
* html body { 
overflow-y: hidden!important; 
height: 100%;
margin: 0;
padding: 0; 
}
* html #iefix { 
height: 100%;
overflow-y: scroll;
position: relative;
}

* html div#fixme-bottom,  {
position: absolute;
}

}
-->
</style>

</head>
<body>
<div id="leftcol">
  Some Content:
 some<br>
some more<br>
some more<br>
some more<br>
some more<br>
some more<br>
  <div id="fixme-bottom">Tab 1 | Tab 2</div>
</div>  
</body>
</html>
For a good explanation on full height see http://www.quirksmode.org/css/100percheight.html and to see were I copy pasted the fixed bottomstuff got from see http://www.gunlaug.no/contents/wd_additions_17.html (both great resources by the way) And I think the article on 456bereastreet handles much of the fixed height framelike css stuff.