css brainfart part II

Discussion in 'OT Technology' started by P07r0457, Feb 24, 2007.

  1. P07r0457

    P07r0457 New Member

    Joined:
    Sep 20, 2004
    Messages:
    28,491
    Likes Received:
    0
    Location:
    Southern Oregon
    I'm trying to create a row of tabs in html/css.... If anyone here has seen Visage Mobile, I would like to emulate the functionality of their tabs. Thus far, I have a basic design for the tabs:

    [​IMG]

    I am doing this with 3 divs per tab... One for the "left", one for the "body", and one for the "right" areas of each tab. I am using the "float: left;" css property to get them to look proper and not be on seperate lines. When the browser is sufficiently wide, it all looks fine.

    However, if the browser is not wide enough, it all goes downhill:

    [​IMG]

    How can I get the divs to align in a nice row without wrapping? If there is a more elegant solution than divs, I would love to see that, too.


    Furthermore, I wish to mimick Visage Mobile's tab-scroll functionality, but am at a loss on how to do so. Their tabs extend well beyond the screen, however there is no scroll bar in the browser. You simply press a left or right arrow that they have provided and the tabs scroll left or right, one tab at a time... The tabs are of varying widths, and they always scroll one full tab. Any ideas how to accomplish this?

    Also, how can I create a layout that has a fixed-height header (always at the top) and a fixed-height footer (always at the *very* bottom) and a variable-height middle div? basically I want to have a div that is *always* at the very bottom of the browser. I wish to then use an iframe/object/layer for the middle content so that when the content is too large to be displayed all at once, the scroll bar is only for the content div... the header and footer would remain visible at all times.

    Any help is appreciated.
     
  2. mobbarley

    mobbarley Active Member

    Joined:
    Mar 4, 2005
    Messages:
    9,256
    Likes Received:
    2
    Location:
    Sydney
    put the tabs within a blank div (you may need to set margin:0; padding:0; etc) and set a width property. This should make them static when the browser is resized.
     
  3. jdw

    jdw New Member

    Joined:
    Dec 31, 2005
    Messages:
    4,429
    Likes Received:
    0
    Location:
    ND
    To set a fixed-height header/footer just create a div and set your height and width values (and I'd set max-height and max-width values as well)

    To set them at the top and bottom give them an absolute position and set the top value for the header and bottom value for the footer. Then your center div can have an auto height and fixed width.

    Code:
    (css)
    body {
    margin: 0px; /*to set all 4 margins to 0 so your header and footer extend to the very edge of the browser*/
    }
    #container {
    width: Z;
    max-width: Z;
    }
    
    #header {
    position: absolute;
    height: X;
    max-height: X;
    width: Y;
    max-width: Y;
    top: 0px;
    }
    
    #content {
    position: absolute;
    height: auto;
    width: Y;
    max-width: Y;
    }
    
    #footer {
    position: absolute;
    height: A;
    max-height: A;
    width: Y;
    max-width: Y;
    bottom: 0px;
    }
    (endcss)
    
    <div id="container">
       <div id="header">headercontent</div>
       <div id="content">content</div>
       <div id="footer">footercontent</div>
    </div>
    

    widths 'Z' and 'Y' should reference the total width of your tab group
     
  4. P07r0457

    P07r0457 New Member

    Joined:
    Sep 20, 2004
    Messages:
    28,491
    Likes Received:
    0
    Location:
    Southern Oregon
    if the browser window width is *less* than the width of the tab group, the scroll bar appears. how do I prevent this? Then, how would I do my one push buttons to allow tabs to be moved left/right, one tab at a time?
     
  5. mobbarley

    mobbarley Active Member

    Joined:
    Mar 4, 2005
    Messages:
    9,256
    Likes Received:
    2
    Location:
    Sydney
    control the scroll bars with the overflow: property.
     
  6. P07r0457

    P07r0457 New Member

    Joined:
    Sep 20, 2004
    Messages:
    28,491
    Likes Received:
    0
    Location:
    Southern Oregon
    and then how do I make my own left-right buttons to handle the scrolling???
     
    Last edited: Feb 25, 2007
  7. P07r0457

    P07r0457 New Member

    Joined:
    Sep 20, 2004
    Messages:
    28,491
    Likes Received:
    0
    Location:
    Southern Oregon
    and doing overflow: hidden; sets the scroll bars to not show, but does not prevent the user from scrolling... How can I prevent them from scrolling?
     
  8. mobbarley

    mobbarley Active Member

    Joined:
    Mar 4, 2005
    Messages:
    9,256
    Likes Received:
    2
    Location:
    Sydney
    try auto or none, it has been a while
     
  9. mobbarley

    mobbarley Active Member

    Joined:
    Mar 4, 2005
    Messages:
    9,256
    Likes Received:
    2
    Location:
    Sydney
    you mean arrows to change the current tab left or right?

    this would depend on however you are doing your linking, either links to other pages or load them through js/ajax :dunno:
     
  10. P07r0457

    P07r0457 New Member

    Joined:
    Sep 20, 2004
    Messages:
    28,491
    Likes Received:
    0
    Location:
    Southern Oregon
    it shouldn't matter how I generate the links...

    For sake of argument, say that I'm simply keeping them static. Assume that I have 10 tabs that take up 2000px in width. However, the browser is only 600px wide. The left/right buttons will "scroll" the tab strip left/right to allow the user to view/click tabs that would otherwise be hidden.

    any ideas?
     
  11. P07r0457

    P07r0457 New Member

    Joined:
    Sep 20, 2004
    Messages:
    28,491
    Likes Received:
    0
    Location:
    Southern Oregon
    neither worked. However I think I've found a solution. It involves rendering the page so nothing is rendered outside the visible area and this is possible by not using a div for the content, and instead filling it with an object if position absolute, specifying a top, bottom, and width. Overall, the exact effect that I was after.
     
  12. mobbarley

    mobbarley Active Member

    Joined:
    Mar 4, 2005
    Messages:
    9,256
    Likes Received:
    2
    Location:
    Sydney
    sorry, thought you were talking about a tab with an arrow which cycled through the active tabs.
     
  13. jdw

    jdw New Member

    Joined:
    Dec 31, 2005
    Messages:
    4,429
    Likes Received:
    0
    Location:
    ND
    You should be able to clip the content inside of a div as well (actually I know you can, I was just reading about it earlier).


    As far as cycling through the tabs. The only way I can think of at this time is using DHTML.

    Have the buttons call a javascrip function that pulls the width of whatever div from your CSS information (I'm assuming that the portion of the tab with the text varies and you want the shift to relate to size) and then shifts all divs whichever direction (just pass the direction with the function call). Now you should be able to program so that it 'actually' scrolls instead of just clicks over. Need to have some variable holding the information for what div is in focus and and if statements to stop at the ends.

    Now, with the idea I've got in my head right now you'll need an array/list of the tabs. I'm sure there's a way to set it up to do everything dynamically, but frankly I don't know enough DHTML at this point to tell you the exact syntax to do the above without digging through this book I've got.
     
  14. P07r0457

    P07r0457 New Member

    Joined:
    Sep 20, 2004
    Messages:
    28,491
    Likes Received:
    0
    Location:
    Southern Oregon
    I have not found a way to clip content without the user being able to scroll (don't want that).

    I can't find any examples of this in action :(
     
  15. jdw

    jdw New Member

    Joined:
    Dec 31, 2005
    Messages:
    4,429
    Likes Received:
    0
    Location:
    ND
    PHP:
    overflowhidden;  
    for the content DIV won't do it?
     
  16. P07r0457

    P07r0457 New Member

    Joined:
    Sep 20, 2004
    Messages:
    28,491
    Likes Received:
    0
    Location:
    Southern Oregon
    nope... user can still press middle mouse button and it will scroll. The browser may not display the scroll bar, but that doesn't prevent them from scrolling. And because there's no scrollbar, it makes it quite confusing/awkward for the user...
     
  17. mobbarley

    mobbarley Active Member

    Joined:
    Mar 4, 2005
    Messages:
    9,256
    Likes Received:
    2
    Location:
    Sydney

    your div is being resized, are you sure you have set a width? it may need position:absolute :dunno:
     
  18. P07r0457

    P07r0457 New Member

    Joined:
    Sep 20, 2004
    Messages:
    28,491
    Likes Received:
    0
    Location:
    Southern Oregon
    width: 100%
     
  19. mobbarley

    mobbarley Active Member

    Joined:
    Mar 4, 2005
    Messages:
    9,256
    Likes Received:
    2
    Location:
    Sydney
    well there is your problem... why wouldnt you use a fixed with? 100% is proportional to either the browsers with or the containing div.
     
  20. P07r0457

    P07r0457 New Member

    Joined:
    Sep 20, 2004
    Messages:
    28,491
    Likes Received:
    0
    Location:
    Southern Oregon
    because people run different screen resolutions... So my page must work in all situations.
     
  21. mobbarley

    mobbarley Active Member

    Joined:
    Mar 4, 2005
    Messages:
    9,256
    Likes Received:
    2
    Location:
    Sydney
    yes, but the tab bar doent need to be resized, it should be fixed.
     
  22. P07r0457

    P07r0457 New Member

    Joined:
    Sep 20, 2004
    Messages:
    28,491
    Likes Received:
    0
    Location:
    Southern Oregon
    it will need to be the width of the browser... so unless you know some magical way that's different than 100% then don't tell me what it does and doesn't need to be.
     
  23. mobbarley

    mobbarley Active Member

    Joined:
    Mar 4, 2005
    Messages:
    9,256
    Likes Received:
    2
    Location:
    Sydney
    Normally a tab bars with is in relation to size of the tabs, number of tabs. It sits on top of your main content, which you can then have resizing to the browser window. But sure, whatever :ugh2:
     
  24. P07r0457

    P07r0457 New Member

    Joined:
    Sep 20, 2004
    Messages:
    28,491
    Likes Received:
    0
    Location:
    Southern Oregon
    You're not listening to me.

    There's gonna be like 2 dozen tabs. It's going to be too wide, even for a 1280x1024 screen. I want it to be 100% width, and then the user needs to scroll.
     
  25. mobbarley

    mobbarley Active Member

    Joined:
    Mar 4, 2005
    Messages:
    9,256
    Likes Received:
    2
    Location:
    Sydney
    alright. why not have a look at the code from the site you want to mimic?
     

Share This Page