Jul 26, 2008

Div Layer Help - Help me get css to not suck

Free Web Hosting, No Ads > CONTRIBUTE > Computers > Programming Languages > CSS (Cascading Style Sheets)
Pages: 1, 2

free web hosting

Div Layer Help - Help me get css to not suck

galexcd
Alright 20 credits goes to the first person to successfully solve my problem.

I need a div layer who's position is absolute to be 100 pixels from the top of the window and 0 pixels from the bottom without it going over. I have lost all faith in CSS because it cannot do this simple task that I require it to do.

Bonus points if you can get it to work on a div layer who's width isn't fixed.

EDIT: oh yeah It has to work in all browsers too...

Reply

kobra500
QUOTE
HAHA this is a first Alex needs help with a code... I'm only laughing mind cos I'm jealous and I too would not be able to do this but I get my laughs anyway (quoted since does not deserve credits and could be considered spam)

Reply

galexcd
QUOTE
HAHA this is a first Alex needs help with a code...


Ehh... not exactly the first time. You should read some of my early topics when I was a little noob programmer and didn't really know anything. But anyway, I wouldn't really consider css as a programming language, or even as "code". Its more like "annoying text that makes your page not suck as much when you can get it to work but otherwise is just a pain in the..." well you get the idea.

Reply

kobra500
I agree... if it were efficient I would sit down and use tables since they're easy but problem is you cant always do what you need to do!

Reply

sonesay
You need an expandable div that is set to limit of being 100pixels from the top of the window and goes all the way to the bottom? Sorry trying to make sure I understand correctly

Reply

galexcd
QUOTE(sonesay @ May 13 2008, 04:28 PM) *
You need an expandable div that is set to limit of being 100pixels from the top of the window and goes all the way to the bottom? Sorry trying to make sure I understand correctly


Yes thats exactly what I need. If you can make me something that works in all browsers to do this then you can have my 20 credits.

Reply

coolcat50
This sounds like you need some Javascript to insert dynamic CSS into the page and use AJAX to reload the page whenever the window size is changed. Or CSS I believe can do the trick. I know that you can stack another 100px div on top as a filler and have the other with a height of the rest of the window.

Reply

sonesay
This sounds like a challenge but I don't think I will be attempting this anytime soon. I've come across articles dealing with using JS to dynamically alter layouts on window resizing by the user but never looked into it. There would be no need for AJAX as JS alone should be enough since its all happening on the client side. If anyone comes up with a solution let us see!



Reply

coolcat50
Well, here is a small code that could do it. I am not sure if it works in all browsers. Check it. It uses a margin to lower it by 100px.

CSS:
CODE
* { padding: 0 0 0 0; }
//Must set padding to 0 for Opera.

body {
//Set top margin to be 100px
margin-top:100px;
//Set rest of margins to be 0
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
}

.lowereddiv {
//Set height to fill rest of page
height:100%
}




Reply

jlhaslip
I don't have time to work with the code, but check this out:

http://www.webmasterworld.com/forum91/3429.htm

Reply

Latest Entries

iGuest
css layer
Div Layer Help

Css layer examples / properties and layer attributes
Http://css-lessons.Ucoz.Com/css-layer-properties.Htm

-reply by sezer

Reply

galexcd
QUOTE(~Nick[; @ May 20 2008, 03:15 PM) *
CODE
<style>
#div{position:absolute;top:100px;bottom:0px;width:auto;left:0px;}
</style>

That good?



Yes that was my first attempt. I thought I found it and wouldn't have to post this on trap, but ran into the problem that mikeyboy discovered in his edit.

Reply

mikeyboy63
QUOTE(~Nick[; @ May 20 2008, 03:15 PM) *
CODE
<style>
#div{position:absolute;top:100px;bottom:0px;width:auto;left:0px;}
</style>

That good?



Nick's code works in both IE and FF. I don't have Opera. By giving it a bg color I can see that it works.

EDIT: It doesn't work if the content is longer than the screen length, i.e. if user needs to scroll down...interesting......this is the type of problem that I can become obsessed with......I----------must----------resist------------obsessing---------------

Reply

~Nick[;
CODE
<style>
#div{position:absolute;top:100px;bottom:0px;width:auto;left:0px;overflow:auto;}
</style>

Try it now.

Reply

jlhaslip
QUOTE(galexcd @ May 14 2008, 07:18 PM) *
Nevermind I can see now this is impossible without using JSS. I'm just going to use tables. Thats right. You guys heard me. Tables can do more than your stupid standards compliant div + css. Css and div layers are inferior.

I wouldn't say that. The biggest hurdle is cross-browser compatibility on this one. IE's failure to recognize min-height, for instance.
Might need to wait for CSS 3.0 for this issue to become a possibility. Using equations to calculate positioning and height/width, etc.

Reply



Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

(Maximum characters: 10,000)
You have characters left.
Confirm Code:

Pages: 1, 2
Recent Queries:-
  1. css div stack bottom - 4.75 hr back. (1)
  2. div layers - 6.49 hr back. (1)
  3. how to make a div layer on top of anther div layer - 10.78 hr back. (1)
  4. div layer examples - 12.70 hr back. (1)
  5. css layer with no fill - 17.42 hr back. (1)
  6. layer divs with css - 22.68 hr back. (2)
  7. expandable div height css - 22.81 hr back. (1)
  8. div layer express - 46.43 hr back. (2)
  9. div layer - 72.56 hr back. (1)
  10. css div layer - 79.50 hr back. (1)
  11. div layer position with window resize - 100.40 hr back. (3)
  12. layer div on bottom - 105.41 hr back. (1)
  13. dynamic div layer resizing in ie - 111.09 hr back. (1)
  14. how to stack div layers - 116.49 hr back. (1)
Similar Topics

Keywords : div layer css suck


    Looking for div, layer, css, suck

Searching Video's for div, layer, css, suck
advertisement



Div Layer Help - Help me get css to not suck



 

 

 

 

ADD REPLY / Got an Opinion! Remove these ADs! RAPID SEARCH! Free Web Hosting [X]
Express your Opinions, Thoughts or Contribute more info. to help others.
Ask your Doubts & Queries to get answers, So that "Together We can help others!"
Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.
500MB Space *No Ads*, CPanel, FTP, PHP, MySQL, EMails - 100% FREE