PDA

Click to See Complete Forum and Search --> : Resizable Website

Dysan
02-25-2008, 01:40 PM
Hi,

How do I create whats shown in the following, so that it resizes upon the user changing the browsers text size?

http://www.freewebs.com/ticstacs/image.bmp
Centauri
02-25-2008, 05:23 PM
If you follow the general principals I outlined when you asked this before (http://www.webdeveloper.com/forum/showthread.php?t=174000) (and never replied to), then nothing special needs to be done to accommodate text resize - the length of the white section will naturally increase to accept the resize.
Dysan
02-25-2008, 06:55 PM
could you give me an example?

Much Appreciated!
afigueroa
02-25-2008, 07:00 PM
www.w3schools.org ?
fpmarin
02-26-2008, 08:04 PM
Hi,

How do I create whats shown in the following, so that it resizes upon the user changing the browsers text size?

http://www.freewebs.com/ticstacs/image.bmp
/* CSS code */
#your_img
{
position:absolute;
left:0;
top:0;
height:100px; /* just an example */
width:100%; /* This is important. It and 'position' make the trick */
}

<!--xhtml code-->
<img src="your_image.gif" id="your_img" />
Centauri
02-27-2008, 03:48 AM
could you give me an example?


A quick example of that layout. Resize the text and the content height increases to allow for it.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
*{
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
p {
margin-bottom: 1em;
}
#wrapper {
width: 750px;
margin: 0 auto;
background-color: #000000;
color: #FFFFFF;
border-bottom: 1px solid #666666;
}
#left-col {
width: 150px;
float: left;
}
#header {
height: 50px;
background-color: #FF0000;
margin-left: 150px;
}
#content {
margin-left: 150px;
overflow: hidden;
}
#content img {
float: left;
padding: 5px;
background-color: #FFFFFF;
color: #000000;
}
#content p {
margin: 0em;
background-color: #FFFFFF;
padding: 1em;
color: #000000;
}
-->
</style>
</head>

<body>
<div id="wrapper">
<div id="left-col">left col</div>
<div id="header">header</div>
<div id="content">
<img src="image.jpg" width="300" height="350" alt="image">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis accumsan auctor nunc. Integer erat lacus, venenatis nec, egestas at, eleifend et, enim. Cras pellentesque dui. Donec massa. Integer eu enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam et lacus. Nulla purus. Morbi nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aenean pretium neque non massa.</p>
</div>
</div>
</body>
</html>