CSS make everything within a  div smaller then originally intended

itnifl
itnifl used Ask the Experts™
on
Is there a way to make everything within a div a certain percentage smaller then it would be if the div was not there? I was thinking maybe with a CSS class or something in that direction. With this I mean that if a height and width is originally 100 on tables and images and son on, then it is  auitomatically reduced to 70 next time the page loads if I insert the div there with serverside scripting. I am trying to avoid rewriting all the heights and widths, I just want to downsize them by 30% in this example, all together.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
if you have the items already connected to a class you can do the following

substitute the code inside the css for what yu want it to accomplish : ie: height, width


CSS sheet:


.area1
{
        border:1px solid black;
}
.area1 .item
{
    color:red;
}
.area2
{
    border:1px solid blue;
}
.area2 .item
{
    color:blue;
}




HTML

<div class="area1">
    <table>
        <tr>
                <td class="item">Text Text Text</td>
                <td class="item">Text Text Text</td>
        </tr>
    </table>
</div>
<div class="area2">
    <table>
        <tr>
                <td class="item">Text Text Text</td>
                <td class="item">Text Text Text</td>
        </tr>
    </table>
</div>
itniflProgrammer

Author

Commented:
None of this is actually what I was looking for. I was looking for a way to wrap an area of a html page and resize it smaller then originall. Thus resizing by a percentage of what is coded there from before.
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Robert SchuttSoftware Engineer
Commented:
You can use zoom/scale in the style. Here is an example:

<html>
<head>
<title> Test Q_27725260 </title>
<script type="text/javascript">
function setzoom() {
 var zm = document.forms['frm'].elements['zmperc'].value * 1;
 if (zm > 9 && zm < 1001) {
  with (document.getElementById('zm').style) {
   zoom  = zm + "%";
   MozTransform = 'scale(' + (zm/100) + ')';
   WebkitTransform = 'scale(' + (zm/100) + ')';
  }
 }
}
</script>
<style type="text/css">
.zm {
 background-color: silver;
 border: 1px solid red;
 width: 300px;
 text-align: center;
}
</style>
</head>
<body>
<div id="zm" class="zm">
<form name="frm" onsubmit="return false;">
<br>
Test zoom: <input name="zmperc" value="100">
<br><br>
<button type="button" onclick="setzoom()">set zoom</button>
</form>
<div>
</body>
</html>

Open in new window

Software Engineer
Commented:
in a server side script you could write out the correct percentage/fraction straight away and use that class on the div:

.zm {
 zoom: 50%;
 -moz-transform: scale(0.5);
 -webkit-transform: scale(0.5);
}
Commented:
you can wrap by putting into a table inside the div

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial