Wrox Programmer Forums
| Search | Today's Posts | Mark Forums Read
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old October 10th, 2004, 09:36 PM
Authorized User
 
Join Date: Aug 2003
Location: Nicholasville, KY, USA.
Posts: 54
Thanks: 0
Thanked 0 Times in 0 Posts
Default Keep Div at Top of Window

I'm putting a div along the left margin. Height is set for 100%.

When I scroll,however, the div height does not resize to fit the window. After thinking about it for a minute, I understand why this occurs.

So, what is the easiest and best method for having the div stay on the screen using the style sheet and without having to create a separate "onscroll" function? Is there a property that that can be used?

Best regards,
sabertec2
  #2 (permalink)  
Old October 11th, 2004, 06:18 AM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

Again, a test case would be marvelous.

I assume you want a <div> to remain fixed in place and not move when the page is scrolled. If that is the case, then position: fixed is what you're after. Like so many of the coolest CSS properties, it doesn't work in IE, but it can with JavaScript or behaviors. For instance, IE7, http://dean.edwards.name/ie7.

If, on the other hand, liquid height is what you're after then the best solution is /not/ using a percentage height, but instead using a combination of the four offset properties. For instance:

div.liquid {
   position: absolute;
   top: 0;
   bottom: 0;
}

When both the top and bottom property are provided, height is implied, which makes a liquid layout.

HTH!

Regards,
Rich

--
[http://www.smilingsouls.net]
[http://pear.php.net/Mail_IMAP] A PHP/C-Client/PEAR solution for webmail
  #3 (permalink)  
Old October 11th, 2004, 05:14 PM
Authorized User
 
Join Date: Aug 2003
Location: Nicholasville, KY, USA.
Posts: 54
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Thanks, Rich,
I like the liquid concept but was not able to implement it successfully. I even tried a simple htm page with nothing but one DIV, and a style sheet with nothing but your short div.liquid style. All I added in my trial was background color and width property to the div.liquid style.

What I really need is a much better understanding on how to properly implement the Liquid concept. So, it's off to the races. Any suggestions on some good sites or books that cover this in detail?

Best regards,
sabertec2
  #4 (permalink)  
Old October 11th, 2004, 07:35 PM
Friend of Wrox
 
Join Date: Nov 2003
Location: , , .
Posts: 1,285
Thanks: 0
Thanked 2 Times in 2 Posts
Default

I found this site searching- it seems pretty complete, explaining everything from what liquid design is to how to implement it.

http://www.mardiros.net/liquid-design.html
http://www.mardiros.net/liquid-css-layouts.html

HTH!

-Snib <><
Try new FreshView 0.2!
There are only two stupid questions: the one you don't ask, and the one you ask more than once ;)
  #5 (permalink)  
Old October 11th, 2004, 07:38 PM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

What are you testing this in? Have you a link to your testcase?

Regards,
Rich

--
[http://www.smilingsouls.net]
[http://pear.php.net/Mail_IMAP] A PHP/C-Client/PEAR solution for webmail
  #6 (permalink)  
Old October 17th, 2004, 07:49 PM
Authorized User
 
Join Date: Aug 2003
Location: Nicholasville, KY, USA.
Posts: 54
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Sorry for the delay. I'm often on the road and don't have easy access to the net.

The application is an ebook, so, I typically don't get too complicated and never anything server side.

As for testing, following is the code I ran. As you can see, it's as basic as it gets. I typically start here when working on a function, method or property with which I'm unfamiliar.

I've tried changing the CSS to div.liquid and tried creating my own class, but the results are the same.

I ran a quick test to get feeback on the value of the "bottom" property. It is not recognized?

I gotta be doing something wrong.

Thanks for everyone's help.

Code:
//htm page

<html>
<head>
<LINK rel="stylesheet" type="text/css" name="X0CSS" href="sample.css">
</head>

<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000">

<h1></h1>
<div id="sample1"></div>

</body>
</html>


//css page sample.css


div {
   position: absolute;
   left:0;
   top: 0;
   bottom:0;
   width:100px;
   background-color: blue;
}
  #7 (permalink)  
Old October 21st, 2004, 02:25 PM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

So I assume you're using IE to test this on (ebook with IE backend??). The top and bottom combination of properties to imply a liquid height does not work in IE. It can, however, work in IE with some Javascript. For instance, IE7 http://dean.edwards.name/IE7. It doesn't require much to get this working in IE though. If you look at Dean Edward's project in any depth you'll see that it is modularized so that you can only load the IE bug fixes that you need.

Other than that it looks good. Run it in Firefox and be dazzeled as the <div> stretches from the top to the bottom of the window.

Regards,
Rich

--
[http://www.smilingsouls.net]
[http://pear.php.net/Mail_IMAP] A PHP/C-Client/PEAR solution for webmail
  #8 (permalink)  
Old October 22nd, 2004, 08:59 PM
Authorized User
 
Join Date: Aug 2003
Location: Nicholasville, KY, USA.
Posts: 54
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Thanks Richard,
You're correct. The ebook has an IE backend. Unfortunately, the target market has a 4th grade reading level (I mean this literally and not to degrade). Therefore, I have to go with what's most widely used.

I'll take a good look at your JavaScript solutions. I'm sure they'll be much more concise than those I've attempted. (I've already created a couple, but was hoping for an easier solution.)

I'll also take a look at your other suggestions. I will probably be able to apply them in other applications.

Till then, thanks!!!

Best regards,
sabertec2
  #9 (permalink)  
Old October 22nd, 2004, 09:36 PM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

> You're correct. The ebook has an IE backend. Unfortunately, the target market has a 4th
> grade reading level (I mean this literally and not to degrade). Therefore, I have to go
> with what's most widely used.

I'm a little lost at this point. This statement doesn't make any sense. What are you saying? You can't observe the correct behavior of a design technique in Firefox because your audience has a fourth grade reading level?

Since you're creating an ebook you've already got a captive audience with a pre-defined captive browsing environment. I hardly see why this statement is relevant. In fact if I were stuck with IE in an ebook project, I might place less emphasis on standards and dream up some tag soup concoction that simply meets my needs, given the target browser. Of course I wouldn't be in that situation in the first place, I'd find an ebook that uses Gecko as its backend, since its a superior browser. At any rate, I fail to see how the backend makes any impact on the usability of said application.

If, on the other hand, the pages used for this ebook must also be used in a website, then I would strongly suggest using interoperable standards in the creation of that and start with the most standards compliant browser as a starting point for that design. Of course, tweaking things that IE doesn't like along the way with hacks.

Just my .02 anyway :-)


Regards,
Rich

--
[http://www.smilingsouls.net]
[http://pear.php.net/Mail_IMAP] A PHP/C-Client/PEAR solution for webmail
  #10 (permalink)  
Old October 23rd, 2004, 04:24 AM
Authorized User
 
Join Date: Aug 2003
Location: Nicholasville, KY, USA.
Posts: 54
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Hi Rich,
It may take awhile, but if I save up all the .02 I get from knowledgeable people, someday I'll be rich! So, I'll take your opinion and .02 anytime. Here's my response.

Quote:
quote:I'm a little lost at this point. This statement doesn't make any sense. What are you saying? You can't observe the correct behavior of a design technique in Firefox because your audience has a fourth grade reading level?
No, of course not. What I tried to say was that the target audience is not so computer and internet savvy. As such, I need to keep things simple. The most common browser is IE. Although unfortunate, to ask the audience to use any other browser would drastically reduce my ability to reach that audience. The end result is, the ebook software I've chosen has an IE backend.

Quote:
quote:Since you're creating an ebook you've already got a captive audience with a pre-defined captive browsing environment. I hardly see why this statement is relevant. In fact if I were stuck with IE in an ebook project, I might place less emphasis on standards and dream up some tag soup concoction that simply meets my needs, given the target browser.
I believe this is my situation. I'll just have to deal with the shortcomings imposed by IE.


Quote:
quote:Of course I wouldn't be in that situation in the first place, I'd find an ebook that uses Gecko as its backend, since its a superior browser. At any rate, I fail to see how the backend makes any impact on the usability of said application.
Maybe you can help me out a little, then? As I don't work with the web, ebooks or scripting on a regular basis, I haven't any exposure to alternate browsers and other ebook software. Does using software that uses a different backend than IE require the end user to use that browser?

Thanks again,
sabertec2




Similar Threads
Thread Thread Starter Forum Replies Last Post
How to pop up a window ON TOP OF the Start Bar. BananaJim Javascript How-To 1 February 27th, 2007 06:28 AM
margin-top on main wrap div not working in IE avail1now CSS Cascading Style Sheets 3 April 8th, 2006 11:26 PM
show div over top of selects (drop downs) crmpicco Javascript How-To 10 February 14th, 2006 05:48 AM
Pop-up window, on top of webpage Burton HTML Code Clinic 5 September 3rd, 2003 04:29 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.