#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    36
    Rep Power
    11

    CSS Autostretch Problem; DIV's will jump down a line instead of compress


    Hello,
    I'm trying to make a autostrech page with CSS. I'm having a problem where a DIV jumps down a line instead of compressing.

    Here is a link to the problem page:
    http://www.nexpost.net/community/tem...all_header.htm

    Try resizeing it in your browser. Has anyone had a similar problem? Any fixes? Thanks for any help.
  2. #2
  3. This tagline is not long enoug
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2003
    Location
    Toronto, ON Canada! I AM CANADIAN
    Posts
    863
    Rep Power
    15
    Define the width of a containing div element. The problem with this, however, is that people will always have to scroll should their screen resolution not be greater than the ACTUALPIXEL_WIDTH

    Code:
    <div style="width:ACTUALPIXEL_WIDTH px>
    <div style="height: 75px; width: 100%; background-color: #333333; layer-background-color: #333333; border: 1px none #000000;">
    	<div style="float: left; ">
    	<div><img src="/community/templates/nexpost/images/header/images/header_01.gif" alt="nexPOST Community" /></div>
    	<div style="float: left"><img src="/community/templates/nexpost/images/header/images/header_05.gif" width="25" height="26" /></div>
    	<div style="float: left"><img src="/community/templates/nexpost/images/header/images/header_06.gif" alt="Community Home" width="156" height="18" /></div>
    
    	<div style="float: left"><img src="/community/templates/nexpost/images/header/images/header_07.gif" alt="Search" width="90" height="18" /></div>
    	<div style="float: left"><img src="/community/templates/nexpost/images/header/images/header_08.gif" alt="Profile" width="85" height="18" /></div>
    	<div style="float: left"><img src="/community/templates/nexpost/images/header/images/header_09.gif" width="128" height="26" /></div>
    	</div>
    	<div style="float: left; width: 48%; height: 75px; background-image: url(/community/templates/nexpost/images/header/images/header_02.gif)">&nbsp;</div>
    	<div style="float: left; height: 75px;"><img src="/community/templates/nexpost/images/header/images/header_04.gif" /></div>
    </div>
    </div>
  4. #3
  5. This tagline is not long enoug
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2003
    Location
    Toronto, ON Canada! I AM CANADIAN
    Posts
    863
    Rep Power
    15
    Another suggestion would be to use linked CSS to define a class for those div's and thier specific properties, such that you don't have to re-write your style inline everytime...
    Code:
    <style>
    .head {
    height: 75px; 
    width: 100%; 
    background-color: #333333; 
    layer-background-color: #333333; 
    border: 1px none #000000 }
    
    .floater_type1 {...}
    .floater_type2 {...}
    </style>
    then you can use
    Code:
    <div class='head'>
    <div class='floater_type1'>
    <div class='floater_type2'>
    ...
    What you are left with is cleaner, and easily editable CSS, especially if you link outside of the document. To a style sheet that bbrings conformity to your entire website...

    Any questions?
  6. #4
  7. nx
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2003
    Location
    USA
    Posts
    626
    Rep Power
    0
    id simply try sizing every single object using % values or em's...those are the most flexible ways other than using javascripts clientHeight and clientWidth elements..

    an example:

    http://terminal.x5788.net/index.xml
    (sorry if you cant view XML)

    heres my other one
    http://terminal.x5788.net/o2/index.php

    as you can see, they resize up to a certain point...however, thats certain point is rather small, and i doubt anyone has a browser or screen that miniscule

    terminal
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    36
    Rep Power
    11
    thanks for the replies. I know about linked classes but for example's sake I wanted to use inline. I will try your suggestions and post results. Thanks again for your help.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    36
    Rep Power
    11
    I havn't had much luck. When it comes to autostretching, are tables still a better solution?

    Setting every element to have a % width will not work becuase there need to bee some static elements for the images. All I really wanted for that page was to that one element extend to fill the entire width of the screen. Thanks.

    btw: what are ems?

IMN logo majestic logo threadwatch logo seochat tools logo