dcsimg
A Flash Developer Resource Site

Results 1 to 6 of 6

Thread: CSS Help Please!!!

  1. #1

    CSS Help Please!!!

    here's my project:

    I have this info capture box that sits on the left of the page that looks great in my resolution, but looks way too big on anything else. i'm looking for something that can change the dimensions of the table based on what resolution they are on.
    i was told the best way to handle this would be via CSS....so i need to make some additions to the stylesheet on my site.

    i am REALLY NEW to writing new code in CSS, usually I just take an existing sheet somewhere and modify it.

    anyways, as you can see i need to have this box that is sized bigger for the higher resolutions and smaller for the lower resolutions.

    i need to put in variables to change font size, form size, and table size. so far i've got this:

    Code:
    .capturebig { font-family: verdana; font-size: 5; font-style: none; color: black }
    input.capturebig {background-color: #ffffff; font-size: 5px; color: black;}
    .capturesmall { font-family: verdana; font-size: 3; font-style: none; color: black }
    input.capturesmall {background-color: #ffffff; font-size: 3px; color: black;}
    i know i didn't put anything in to resize the tables, but i couldn't find any tutorials that really helped about that.

    am i even slightly moving in the right direction?


    also, i have to put in something where if they are under 1024x768, then the css defaults to the "capturesmall" variables. the IT manager here at my office said this whole process would be like 6 lines of code, but being new to it i don't even know where to start.

  2. #2
    OOP is one letter from OOPS kortex's Avatar
    Join Date
    Aug 2005
    Location
    New Hope, PA
    Posts
    2,668
    Why not just set the table widths using percentages?
    Jeremy Wischusen
    Flash - Flex - LAMP - Web Developer Purple Inc
    AS OOP FAQ-Best Practices Thread | Flashkit OOP Tutorials | Purple Inc (day job) | Blog


  3. #3
    Genesis of creative reflexes.. mysticpixels's Avatar
    Join Date
    Jan 2005
    Posts
    163
    i dont think you can resize table size using css. But if u r using div u can set that. The best idea would be as kortex said, set the width of the table in percentage, to your need.

    Cheers..
    • Innovative Websites - (Flash/HTML-CSS)
    • Flash Intros/Animations
    • Interface/Layout Designing/Logo Designing

  4. #4
    twisted eye
    Join Date
    Dec 2001
    Location
    london, england
    Posts
    134
    you can resize a table with css using the tag table:

    table {
    height: 320px;
    width: 300px;
    }


    or place the table inside a div and using:

    #nameofDiv table {
    height: 320px;
    width: 300px;
    }

    hope this helps
    everything takes time, of which i have none.

  5. #5
    Quote Originally Posted by kortex
    Why not just set the table widths using percentages?
    percentages wont change the size of the form fields.

  6. #6
    Senior Member catbert303's Avatar
    Join Date
    Aug 2001
    Location
    uk
    Posts
    11,222
    CSS can't detect screen size (well it can using CSS media queries, but I think they're only supported in Opera and possibly very recent versions of Safari)

    But working with percentages it should be possible to create a layout that resizes everything based on the size of the viewport (set the widths of tables, cells, input fields etc...) here's a quick example - the 2 input fields should be 25% of the width of the viewport regardless of how the window gets resized.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <style type="text/css">
    html, body, table {
      margin: 0; padding: 0;
      width: 100%;
    }
    td {
      width: 50%;
    }
    input.txt {
      width: 50%;
    }
    </style>
    </head>
    <body>
    
     <table>
       <tr>
         <td><input type="text" class="txt" name="test1" value="Hello"></td>
         <td><input type="text" class="txt" name="test2" value="World"></td>
       </tr>
     </table>
    
    </body>
    </html>
    Alternatively if you want the layout to switch depending on screen resolution one possible solution could be to have some Javascript to detect the resolution, then use this to set a class on the body tag. This would allow you to write your CSS selectors so that different values could be applied depending on the value of the body class,

    Another a very quick example that makes a div a different size depending on your screen resolution,

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <script type="text/javascript">
    onload = function() {
        if (!document.getElementsByTagName) return; // the browser doesn't support the features we want to use
        var b = document.getElementsByTagName('body')[0];
        b.className =  (screen.width < 1024) ? 'small-screen' : 'large-screen'; // set the class on the body depending on screen size
    };
    </script>
    <style type="text/css">
    body.small-screen div {
      width: 500px; height: 400px;
    }
    body.large-screen div {
      width: 800px; height: 600px;
    }
    
    div {
      background: #ccc;
    }
    </style>
    </head>
    <body>
    
     <div>
       The size of this div changes according to screen resolution, 
       if your resolution is greater less than 1024 x 768 the div will 
       be smaller (500 x 400) if it's greater than 1024 by 768 the 
       div will be 800 x 600
     </div>
    
    </body>
    </html>

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center