PDA

View Full Version : Need text-containing div to resize based on window size along with images



johnmiles27
Sep 12th, 2010, 12:50 AM
Hi guys and gals. Just discovered this forum after a quick Google search. It looks like a good resource for web developers; I suspect I'll end up sticking around as I continue to develop my web design skills.

So anyway, I don't know if the title of this post makes much sense. You'll probably have to take a look at what I'm doing to get an idea of what I'm going for here. I have a website that that has a fixed, horizontally and vertically centered design, and I'm currently redesigning it to be completely elastic to browser height and width (for reference, here (http://johnmilesart.com/main.php?cmd=imageview&var1=038selfidentity2.jpg) is a page from my current site, and here (http://johnmilesart.com/test/testimage.html) is a test page for my new design that I'm trying to get to look as much like the current design as possible. Try resizing your browser window on that second page to get an idea of what I'm doing).

So I've found out how to get all the image elements to resize with the window by setting their heights as percentages in CSS and moving them from the horizontal center of the window with transparent spacer .gifs. Where I've hit a snag is with text. I'd like to have a box of text to the right of the portfolio work image, as in the original design. Like the images, I want the text box to resize proportionally based on window height so that the text will break accordingly and always stay within the bounds I want it to. I'll probably also use javascript to adjust the font size based on window height.

Anyone have an idea of how this could be done? As you'll see from checking out the code, I have an image titled textspacer.gif that resizes along with window height that I'd like to use to stretch and shrink a div, and I'd like the contained text to break along with the div size as defined by the image rather than the text stretching the div, but I don't know if this is possible.

I'm posting this in the CSS forum because I'd like to find a CSS solution if possible, although I suspect the answer may lie in a bit of javascript that resizes a div based on window dimensions, or as a last resort a PHP text to image script that would allow me to position my text as an image (although I haven't stumbled upon one yet that would automatically break text within a predefined boundary).

I hope this doesn't all sound too convoluted and that someone can catch the gist of what I'm trying to do and offer some help. For reference, below is the HTML and CSS I have so far:

Original page: http://johnmilesart.com/test/testimage.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Untitled Document</title>

<style type="text/css">

body {
height:100%;
margin: 0px 0px 0px 0px;
overflow:hidden;
overflow:-moz-scrollbars-none;
background-color:#447e9e;
}

div.outercontainer {
height:100%;
width:100%;
text-align:center;
overflow:hidden;
}

div.bgcontainer {
position:absolute;
height:100%;
width:100%;
text-align:center;
vertical-align:middle;
word-wrap:break-word;
overflow:hidden;
z-index:1;
}

img.background {
position:relative;
height:100%;
width:auto;
margin-left: -41%;
margin-right: -41%;
-ms-interpolation-mode: bicubic;
z-index:3;
}

div.innercontainercontainer {
height:100%;
width:100%;
text-align:center;
overflow:hidden;
}

div.innercontainer {
position:absolute;
height:100%;
width:100%;
text-align:center;
vertical-align:middle;
word-wrap:break-word;
overflow:hidden;
z-index:1;
}

img.image {
position:relative;
top:23.5%;
left:auto;
right:auto;
height:55%;
width:auto;
z-index:3;
}

div.textcontainercontainer {
position:absolute;
height:100%;
width:100%;
text-align:center;
vertical-align:middle;
word-wrap:break-word;
overflow:hidden;
z-index:4;
}

div.textcontainer {
position:relative;
top:22%;
left:auto;
right:auto;
height:43%;
width:100%;
text-align:center;
vertical-align:top;
word-wrap:break-word;
z-index:5;
}

img.textspacer {
position:absolute;
left:auto;
right:auto;
height:100%;
width:auto;
vertical-align:top;
align:right;
z-index:3;
}

</style>

</head>

<body scroll="no">

<div class="outercontainer">

<div class="bgcontainer">

<img src="imgbackgroundbig.jpg" class="background" />

</div>

</div>

<div class="innercontainercontainer">

<div class="innercontainer">

<img src="image.jpg" class="image" /><img src="imagespacer.gif" class="image" />

</div>

</div>

<div class="textcontainercontainer">

<div class="textcontainer">

<img src="textspacer.gif" class="textspacer" />text text text

</div>

</div>

</body>

</html>

johnmiles27
Sep 13th, 2010, 08:25 AM
I finally got this working if anyone's interested. I ended up using a nifty bit of jQuery javascript code to get css size, margin, and font-size properties to resize with window height.

Here's an example of it at work (http://johnmilesart.com/test/testimage6.html) (yes, I'm aware it looks like ****e for people using IE6 or with javascript disabled; I plan to use conditional comments to feed a fixed design to them).

And here's the javascript:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>

<script type="text/javascript">
$(document).ready(function() {

function divresize() {
var contentwidth = $('#textcontainercontainer').width();
var contentheight = $('#textcontainercontainer').height();
if ((contentheight) < '400'){
$('.textcontainer').css('width',contentheight / 3.9)
$('.textcontainer').css('height',contentheight / 2.5);
$('.textcontainer').css('margin-left',contentheight / 4.1);
$('.textcontainer').css('margin-top',-contentheight / 4.75);
$('.text').css('font-size',contentheight / 51);
} else {
$('.textcontainer').css('width',contentheight / 3.9)
$('.textcontainer').css('height',contentheight / 2.5);
$('.textcontainer').css('margin-left',contentheight / 4.1);
$('.textcontainer').css('margin-top',-contentheight / 4.75);
$('.text').css('font-size',contentheight / 51);
}
}

divresize();

$(window).bind("resize", function(){
divresize();
});

});
</script>

Navizurc
Oct 7th, 2010, 10:49 PM
johnmiles27, tyvm for your post!! :thumbsup: I was having the same problem till I found your code :D