Can the size of an image be controlled by width: %;

[Bry Man]

Hi

I was wondering, since im trying to make a graphical skin for my site and whish to maintain screen size compatability, is it possible to have an image controlled by css's width: #%; command so that it will shrink or strech a graphic accordingly?

I would test this myself but my site is still down atm

[gsnedders]

Yes, it would work, but remember the image could look rather weird if stretched too much, I'd recommend making sure the image is high-enough quality for a 2560x1600 screen

[Bry Man]

most of my users are far below 2560x1600...lol I didnt even know they made screens with that high a res lol. I design on 1024x768 and I expect it to go at the max to 1280 MAYBE higher but definately not that high.

[gsnedders]

True, most people don't have them... but that's the size of my 30" Apple Cinema Display (Completely flat, of course :p)... It need's Dual DVI to power it...

[Bry Man]

bah u and your fancy montior lol, ive got my trusty 19 inch crt that I got fer free lol

[AaronW]

Good Lord... How the devil you afford that thing?! That display alone is like $3,300... In the words of Dicky Roberts: That's "nuckin' futs".

Annnnyway, the only reason you'd want to resize an image for liquid layout would be for something like a repeating header (1px tall/wide sort of image). I'd advise you just tile the image in the background of your container rather than stretching it. Both would work I guess, but the background method will let you plop text on top if you ever feel like it.

[gsnedders]

Good Lord... How the devil you afford that thing?! That display alone is like $3,300... In the words of Dicky Roberts: That's "nuckin' futs".
It's got to last for while (ie. Several Computers)
My Dad's paying for it :p

[Bry Man]

The image im using would look good being tiled, although I plan to do a verticle tile for my news box on my front page

[AaronW]

Your dad dropped 6 grand on a computer for his son? Ack.

Vertical tiling can be done too:

background-repeat: repeat-y ;)

Probably better than using height: X%, too. Percentage heights rarely work out well...

[gsnedders]

Your dad dropped 6 grand on a computer for his son? Ack.

Not that much in Great British Pounds :p but I have got to do a large job for him... which would take a year to do non-stop...

[bradyj]

Let's not hijack threads with monitor discussions:)

Now, you could also do it as a background image and give it some custom resizing:
http://browsehappy.com/people/david/

The part that has the 'Switched to Opera' artwork is this:

<dd class="switched-to">
<p>Switched to:</p>
<div><span><a href="/browsers/opera/" class="opera">Opera</a></span></div>
</dd>


with the CSS of:

/* "switched to" box */
#subject dd.switched-to {
background: url("../imgs/switched_right.gif") 100% 0 no-repeat;
padding: 10px 0 0 10px;
margin-top: 20px;
margin-bottom: 10px;
float: right;
width: 8em;
}

/* hide from Mac IE5 \*/
html>body #subject dd.switched-to {
width: auto;
}
/* END hide from Mac IE5 */

#subject dd.switched-to p {
background: url("../imgs/switched_left.gif") 0 0 no-repeat;
border-width: 0 2px;
margin: -10px 0 0 -10px;
padding: 10px 10px 0;
text-align: right;
}

#subject dd.switched-to div {
background: #FFF url("../imgs/switched_left.gif") 0 100% no-repeat;
margin: 0 0 0 -10px;
padding: 0 0 0 9px;
}

#subject dd.switched-to div span {
background: url("../imgs/switched_right.gif") 100% 100% no-repeat;
display: block;
padding: 4px 12px 5px 0;
text-align: right;
}

#subject dd.switched-to a {
background-repeat: no-repeat;
background-position: 100% 50%;
display: block;
font-size: 1.4em;
line-height: 30px;
padding-right: 35px;
}
/* END "switched to" box */


You'll notice the width of that is 8em, not a fixed pixel size. Here's the nice graphics:
http://browsehappy.com/_share/imgs/switched_right.gif
http://browsehappy.com/_share/imgs/switched_left.gif

And that seems to be it, but if you go to that page and resize it with text zoom, you'll notice it enlarges as needed. I see no reason why you cannot do something similiar to a different background image -- how you would get this to work at 100% of the browser is as good a guess as yours, I'm unsure about it... but if manually resizing can do it, than so could this.

[Bry Man]

This just came to me...I know it will shrink it, but will it stretch it, Ive been designing on a 1024 as I said and that means the graphics are built only for 1024 and down, I could super size the graphics but then they would look odd when they are shrunk. unless you have a high res computer


EDIT: Thats a new style of css to me, ive never seen it done that way so its kinda hard for me to comprehend lol, ill look at it a lil more in a minute. Also im not looking to make it 100% of the browser window, im just aiming to fix up my menu and news divs with same fancy graphics as an alternative to plain code designs

[Bry Man]

Now im running into the problem of getting my text awafy form the border... when I use padding: XX; it moves the text whatever distance away from the edge of the graphic but it also re-sizes my divs, which then conflicts with my design, heres the code

.mi {
background: url('/css/test/menumiddle.gif') scroll no-repeat top center;
background-repeat: repeat-y
padding: 3px;
margin-bottom:-1px;
font-size:13px;
border-collapse:collapse;
width: 100%;
height: 100%;
border:0px solid #000000;
border-top-width: 0px;
color: #FFFFFF;

Also, when I resize my browser window the div changes size, and the image stays the same

[bradyj]

Do you have a link?

You would need to apply a fixed size to your div, and then a size to the text in that div -- so that it wouldn't force a new div size... we'd need to see the full code, and a link with it interacting would be best.

As for the example, if you were to use an em similar to a percentage, it would be a standard size that would match their display. That's another discussion, but let's clean up your css:

.mi {
background: url('/css/test/menumiddle.gif') scroll repeat-y top center;
padding: 3px;
margin-bottom:-1px;
font-size:13px;
width: 100%;
height: 100%;
border: none;
color: #FFFFFF;


You had two border repeat properties, and if you don't want a border at all, just do border none - otherwise, you have multiple border elements that aren't needed. Padding will effect the total size, so you'd probably want to make a div that contains everything with 100% width and height and then add CSS to the inner elements:

<div>
<h1>A Header!</h1>
<p>sometimes I sit beneath a shade...</p>
</div>


so:

div {
width: 100%;
height: auto;
margin: 0px;
padding: 0px;
}
h1 {
padding: 3px;
margin: 0px;
}


Sorta like that. If you don't want padding to effect the container, don't give it padding, give that to the inside, same as margins.

[Bry Man]

heres me left.php, it contains the majority of what is affected

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Trio Productions</title>
<meta http-equiv="Content-Type" content="text/xhtml; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="/css/Default.css" />
<link rel="alternate stylesheet" type="text/css" href="/css/Default.css" title="Default" />
<link rel="alternate stylesheet" type="text/css" href="/css/Classic.css" title="Classic" />
<link rel="alternate stylesheet" type="text/css" href="/css/Orange.css" title="Orange" />
<link rel="alternate stylesheet" type="text/css" href="/css/Stone.css" title="Stone" />
<link rel="alternate stylesheet" type="text/css" href="/css/steel.css" title="Steel" />
<link rel="alternate stylesheet" type="text/css" href="/css/test/Default.css" title="test" />




<script type="text/javascript" src="themeswitch-ce.js"></script>
</head>
<body>


<div class="logo"></div>

<div class="col1">

<div class="header"><strong>Recent News:</strong></div>
<div class="scroller"><marquee height="80px" scrollammount="1" scrolldelay="135" onmouseover="this.stop();" direction="up" onmouseout="this.start();">
<font face="verdana" size="1">
<b>-: August 21st 2004</b><br /><br />
-: Downtime is over<br />
-: Fixing minor errors<br /><br /><br />
<b>-: August 3rd 2004</b> <br /><br />
-: Site is going good<br />
-: Start : Dark Fest 2004<br />
-: Gathering Recorded Games<br /><br /><br />
<b>-: August 2nd 2004</b><br /><br />
-: Added 14 Scenarios<br />
-: Recieved 7 more<br />
-: Having logo problems<br /><br /><br />
<b>-: August 1st 2004 </b><br /><br />
-: New Tutorial<br />
-: Added Counter<br />
-: Fixed Bugs<br />
-: Recieved 14 Scenarios<br />
</marquee>
</div>
<div></div>
<br />

<div class="header">-: Menu :-</div>
<div class="mi"><a href="http://www.trio.5gigs.com/index.php">Home</a></div>
<div class="mi"><a href="http://www.trio.5gigs.com/guestbook/index.php">Guest Book</a></div>
<div class="mi"><a href="http://www.trio.5gigs.com/profiles.php">Profiles</a></div>
<div class="mi"><a href="http://www.trio.5gigs.com/phpBB2/index.php">Forums</a></div>
<div class="mi"><a href="http://www.trio.5gigs.com/tutorials.php">Tutorials</a></div>
<div class="mi"><a href="http://www.trio.5gigs.com/scenarios.php">Scenarios</a></div>
<div class="mi"><a href="http://www.trio.5gigs.com/zoneskins.php">Zone Skins</a></div>
<div class="mi"><a href="http://www.trio.5gigs.com/upload.php">File Uploader</a></div>
<div class="mi"><a href="mailto:darknight@trio.5gigs.com?subject=Site%20Support%20Link&body=Enter%20a%20discription%20of%20what%20this%20e-mail%20contains!">Contact Me</a></div>
<div class="mi"><a href="http://www.trio.5gigs.com/disclaimer.php">Disclaimer</a></div>
<div class="footer"></div>
<br />


<div class="header">-: Your Visitor # :-</div>
<div class="counter"><br />
<?php
$file = "count.txt";
$open = fopen($file, "r");
$size = filesize($file);
$count = fread($open, $size);
$count1 = $count+1;
echo($count1);
fclose($open);

$open = fopen($file, "w");
fwrite($open, $count1);
fclose($open);
?>
<br /><br /></div></div>

<div class="col2">

Here is the full css, its the one im testing on for the graphical layout and i gave up about half way thru so alot of things are prolly wrong

body {
background-color: #333333;
color: #888888;
}

a, a:link, a:visited, a:active {
color: #6495Ed;
text-decoration: none;
background-color: transparent;
}

a:hover {
color: #6F90AF;
Text-decoration: underline;
background-color: transparent;
}

.col1 {
border-collapse:collapse;
position:absolute;
top:167px;
left:0px;
width:14%;
border:0px solid #00ff00;
padding:3px;
}

.col2 {
border-collapse:collapse;
position:absolute;
top:167px;
left:15%;
right15%;
width:70%;
border:0px solid #009900;
padding:3px;
}

.col3 {
border-collapse:collapse;
position:absolute;
top:167px;
right:0px;
width:14%;
border:0px solid #009900;
}
.counter {
margin-bottom:-1px;
font-size:13px;
border-collapse:collapse;
width: 100%;
background-color:#304459;
border:1px solid #000000;
border-top-width: 0px;
color: #888888;
text-align: center;
}
.mi {
background: url('/css/test/menumiddle.gif') scroll no-repeat top center;
background-repeat: repeat-y
padding-left: 10px;
margin-bottom:-1px;
font-size:13px;
border-collapse:collapse;
width: 100%;
height: 100%;
border:0px solid #000000;
border-top-width: 0px;
color: #FFFFFF;
}

.header {
background: url('/css/test/menutop.gif') scroll no-repeat top center;
margin-bottom: -1px;
border-collapse:collapse;
width:100%;
color:#000000;
font-size:15px;
border:0px solid #000000;
text-align: center;
}
.footer {
background: url('/css/test/menubottom.gif') scroll no-repeat top center;
margin-bottom: -1px;
border-collapse:collapse;
width:100%;
color:#FFFFFF;
font-size:15px;
border:0px solid #000000;
text-align: center;
}
.date {
padding-right:1px;
margin-bottom: -1px;
border-collapse:collapse;
width:100%;
background-color:#011B35;
color:#FFFFFF;
font-size:15px;
border:1px solid #000000;
text-align: center;
}
.news {
padding-left:1px;
padding-bottom:1px;
padding-top:1px;
margin-bottom:-1px;
font-size:13px;
border-collapse:collapse;
width: 100%;
background-color:#304459;
border:1px solid #000000;
border-top-width: 0px;
color: #FFFFFF;
}

.logo {
background: transparent url('defaultlogo.jpg') scroll no-repeat top center;
text-align:center;
position:absolute;
top:50px;
left: 50%;
width:468px;
height:60px;
margin: 0px 0px 0px -234px;
padding: 0px;
}
.topsite {
border-collapse:collapse;
width:88px;
height:31px;
}
.scroller {
cellpadding:0px;
cellspacing:0px;
width:100%;
border:1px solid #000000;
background-color:#304459;
color:#FFFFFF;
font-size:15px;
}

.name {
margin-bottom: -1px;
border-collapse:collapse;
width:50%;
background-color:#011B35;
color:#FFFFFF;
font-size:15px;
border:1px solid #000000;
text-align: center;
}
.size {
margin-bottom: -1px;
border-collapse:collapse;
width:25%;
background-color:#011B35;
color:#FFFFFF;
font-size:15px;
border:1px solid #000000;
text-align: center;
}

.name2 {
font-size:13px;
margin-bottom:-1px;
border-collapse:collapse;
width: 50%;
background-color:#304459;
border:1px solid #000000;
color: #FFFFFF;
}

.size2 {
font-size:13px;
margin-bottom:-1px;
border-collapse:collapse;
width: 25%;
background-color:#304459;
border:1px solid #000000;
color: #FFFFFF;
}

and heres a link to the actual site http://www.trio.5gigs.com

Also the styles are located at the right side onthe home page, the style im referring to for this thread will be "test skin"