CSS website help needed

Discussion in 'CSS' started by nals, Dec 5, 2007.

  1. #1
    Can someone please make me a css code looks like this image attached.

    Description on the picture.

    Black bg
    Box size 700px and height is 500px
    - Hide Scrollbar
    - The box must be middle of the screen, equal top height, bottom height, left and right.
    - Background color - #000000
    - box color - #333333
    - Thin border color - #999999
     

    Attached Files:

    • css.jpg
      css.jpg
      File size:
      6.1 KB
      Views:
      98
    nals, Dec 5, 2007 IP
  2. manishk

    manishk Peon

    Messages:
    63
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Do you want to do this with a table or with a div?
     
    manishk, Dec 5, 2007 IP
  3. nals

    nals Peon

    Messages:
    168
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    If you can with div tag or else with a table fine.

    Thanks :)
     
    nals, Dec 5, 2007 IP
  4. Emathia

    Emathia Active Member

    Messages:
    917
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    58
    #4
    Divs are probably easier ;)
     
    Emathia, Dec 5, 2007 IP
  5. manishk

    manishk Peon

    Messages:
    63
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #5
    This link will help you:

    http://murphy.cz/victoria-s-vertical-centering/
    Code (markup):
     
    manishk, Dec 5, 2007 IP
  6. nals

    nals Peon

    Messages:
    168
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Anything I dond mind as long as the scroll bar is locked, and the box is middle of the window with any monitor size.
    Thank you
     
    nals, Dec 5, 2007 IP
  7. manishk

    manishk Peon

    Messages:
    63
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Tables are much easier for this but I do not prefer to use tables for layout purposes.
     
    manishk, Dec 5, 2007 IP
  8. nals

    nals Peon

    Messages:
    168
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Hi Manishk
    Thanks for your link, it looks good , but when i add a flash movie inside the box
    the movie come outside when i make the screen smaller. ??
    maybe with a table disabling scrollbar, I know there is a javascript thing that can do to the table,, but cant find it
     
    nals, Dec 5, 2007 IP
  9. manishk

    manishk Peon

    Messages:
    63
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #9
    If you have a link then I can have a look at it.

    Achieving the same effect with tables:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style>
    html,body{height:100%;padding:0;margin:0}
    #container{width:100%;height:100%}
    #inner{background:red;height:300px;width:50%;margin:auto;}
    </style>
    </head>
    
    <body>
    <table id="container">
      <tr>
        <td><table id="inner">
          <tr>
            <td>&nbsp;</td>
          </tr>
        </table></td>
      </tr>
    </table>
    </body>
    </html>
    
    Code (markup):
     
    manishk, Dec 5, 2007 IP
  10. nals

    nals Peon

    Messages:
    168
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Manishk
    I think thats what i m looking for, I think this will fine i will use the table then,
    Thank you very much for your time.

    Ah I have made one with div tag, but something wrong,, view this with both browsers, ie and Firefox.
    http://www.hfolder.com/div_center/center.htm
     
    nals, Dec 6, 2007 IP
  11. nals

    nals Peon

    Messages:
    168
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Manishk
    I think the one you sent me with table is great !!
    I m going to use that, Thank you for your time.
    Just one more question , Which is best to use with all browsers, is it Table or using table with div??
     
    nals, Dec 6, 2007 IP
  12. serialCoder

    serialCoder Guest

    Best Answers:
    0
    #12
    hi nals, tables are originally meant for well, tabular data, so for layout purposes i think its better to avoid tables as much as possible, table-less designs are much more flexible,customizable, and loads faster (although the learning curve is a bit harder) :D
     
    serialCoder, Dec 6, 2007 IP
  13. manishk

    manishk Peon

    Messages:
    63
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #13
    I prefer div for layout. It takes a while to get a hang of it but its really worth the effort... and as serialCoder said table is indeed meant for displaying tabular data and not for layout. Having said that, you can use tables until you are comfortable with div.
     
    manishk, Dec 6, 2007 IP