473,791 Members | 3,360 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

How to build a dynamic container box?

162 New Member
I'm trying to build a box that i can place content in. This box should dynamically change width and height to accommodate the content inside. I have build out a non-working example here http://sb.cesarvillaca.com/demo/box/box.php. It looks like i want it to be, but it doesn't work dynamically. Can someone please help me get this working, or show me an example i can work from online? Thanks.

Here is my html with php for height/width (non-dynamic) values
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.  <head>
  3.   <title> new document </title>
  4.  
  5. <style type="text/css" title="">
  6. #box_t_body {
  7.     background-image:url('box_t_body.jpg');
  8.     background-repeat: repeat-x;
  9.     height:11px;
  10.     float:left;
  11. }
  12.  
  13. #box_b_body {
  14.     background-image:url('box_b_body.jpg');
  15.     background-repeat: repeat-x;
  16.     height:11px;
  17.     float:left;
  18. }
  19.  
  20. #box_l_body {
  21.     background-image:url('box_l_body.jpg');
  22.     background-repeat: repeat-y;
  23.     float:left;
  24. }
  25.  
  26. #box_r_body {
  27.     background-image:url('box_r_body.jpg');
  28.     background-repeat: repeat-y;
  29.     float:right;
  30.     width:11px;
  31. }
  32.  
  33. #box_tl_corner {
  34.     background-image:url('box_tl_corner.jpg');
  35.     background-repeat: no-repeat;
  36.     height:11px;
  37.     width:11px;
  38.     float:left;
  39. }
  40.  
  41. #box_tr_corner {
  42.     background-image:url('box_tr_corner.jpg');
  43.     background-repeat: no-repeat;
  44.     height:11px;
  45.     width:11px;
  46.     float:right;
  47. }
  48.  
  49. #box_bl_corner {
  50.     background-image:url('box_bl_corner.jpg');
  51.     background-repeat: no-repeat;
  52.     height:11px;
  53.     width:11px;
  54.     float:left;
  55. }
  56.  
  57. #box_br_corner {
  58.     background-image:url('box_br_corner.jpg');
  59.     background-repeat: no-repeat;
  60.     height:11px;
  61.     width:11px;
  62.     float:right;
  63. }
  64.  
  65. #box_body {
  66.     background-color:#ffffff;
  67.     float:left;
  68. }
  69.  
  70. /*   .clear prevents divs from flaotin gout side a container div.   */
  71. .clear{
  72. height:0;
  73. font-size:0;
  74. line-height:0;
  75. clear:both;
  76. }
  77.  
  78. </style>
  79.  
  80. </head>
  81.  
  82. <body>
  83.  
  84. <?php
  85. $width=600;
  86. $height=600;
  87. ?>
  88.  
  89. <div id="box_t_body" style="width:<?= $width ?>px;"><div id="box_tl_corner" style=""></div><div id="box_tr_corner" style=""></div></div>
  90. <br class="clear">
  91.  
  92. <div id="box_body" style="height:<?= $height ?>px;width:<?= $width ?>px;">
  93.  
  94.     <div id="box_l_body" style="height:<?= $height ?>px; padding-left:20px;">
  95.  
  96.         <div id="" class="" style="width:550px;">Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.</div>
  97.  
  98.     </div>
  99.  
  100.     <div id="box_r_body" style="height:<?= $height ?>px;"></div>
  101.  
  102. </div>
  103. <br class="clear">
  104.  
  105. <div id="box_b_body" style="width:<?= $width ?>px;"><div id="box_bl_corner" style=""></div><div id="box_br_corner" style=""></div></div><br class="clear">
  106.  
  107. </body>
  108. </html>
Sep 22 '08 #1
5 8366
David Laakso
397 Recognized Expert Contributor
I think you'll need a programming language to make it change width and height dynamically. You could use CSS to set min/max height and width. Min-height will prevent your current set-up from shooting the text out the bottom of the container for those among us who stress test sites. Neither min/max height or width is supported in IE/6-- you'll need to use "IE expressions" or a javascript work around if you need to support that browser.

Either-way, you'll want to use a strict doctype (and validate to it) and proper character encoding if your intent is to have it work reliably and consistently cross-browser.
Sep 22 '08 #2
empiresolutions
162 New Member
ok ok curse me as you will, but until i can find a CSS solution I have reverted back to tables.... ahh i said it. here's my code. File is here, http://sb.cesarvillaca .com/demo/box/box2.php.

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.   <title> new document </title>
  5.  
  6. <style type="text/css" title="">
  7. #box_t_body {
  8.     background-image:url('box_t_body.jpg');
  9.     background-repeat: repeat-x;
  10.     height:11px;
  11. }
  12.  
  13. #box_b_body {
  14.     background-image:url('box_b_body.jpg');
  15.     background-repeat: repeat-x;
  16.     height:11px;
  17. }
  18.  
  19. #box_l_body {
  20.     background-image:url('box_l_body.jpg');
  21.     background-repeat: repeat-y;
  22.     width:11px;
  23. }
  24.  
  25. #box_r_body {
  26.     background-image:url('box_r_body.jpg');
  27.     background-repeat: repeat-y;
  28.     width:11px;
  29. }
  30.  
  31. #box_tl_corner {
  32.     background-image:url('box_tl_corner.jpg');
  33.     background-repeat: no-repeat;
  34.     height:11px;
  35.     width:11px;
  36. }
  37.  
  38. #box_tr_corner {
  39.     background-image:url('box_tr_corner.jpg');
  40.     background-repeat: no-repeat;
  41.     height:11px;
  42.     width:11px;
  43. }
  44.  
  45. #box_bl_corner {
  46.     background-image:url('box_bl_corner.jpg');
  47.     background-repeat: no-repeat;
  48.     height:11px;
  49.     width:11px;
  50. }
  51.  
  52. #box_br_corner {
  53.     background-image:url('box_br_corner.jpg');
  54.     background-repeat: no-repeat;
  55.     height:11px;
  56.     width:11px;
  57. }
  58.  
  59. #box_body {
  60.     background-color:#ffffff;
  61.     padding:10px;
  62. }
  63.  
  64. </style>
  65.  
  66. </head>
  67.  
  68. <body>
  69.  
  70. <table border=0 cellspacing=0 cellpadding=0>
  71.     <tr>
  72.         <td id="box_tl_corner"></td>
  73.         <td id="box_t_body"></td>
  74.         <td id="box_tr_corner"></td>
  75.     </tr>
  76.     <tr>
  77.         <td id="box_l_body"></td>
  78.         <td>
  79.             <div id="box_body" style="width:600px; height:200px;">Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.</div>
  80.         </td>
  81.         <td id="box_r_body"></td>
  82.     </tr>
  83.     <tr>
  84.         <td id="box_bl_corner"></td>
  85.         <td id="box_b_body"></td>
  86.         <td id="box_br_corner"></td>
  87.     </tr>
  88. </table>
  89.  
  90. </body>
  91. </html>
  92.  
Sep 22 '08 #3
empiresolutions
162 New Member
SOLVED - Ok i have two alternates... better than table solution. The first is close to my example and works 100%. The second is a frikin no brainer and all who looked at my post should have picked it of right away. It makes me think i should have not skipped that on CSS class in college! Thanks much to all who spent time on this issue, your help is much appreciated.

First Example - thanks to *msuffern*
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <head>
  6.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  7.  
  8.     <title>untitled</title>
  9.  
  10.     <style type="text/css" title="">
  11.  
  12.         #box_tl_corner {
  13.             background-image:url('http://sb.cesarvillaca.com/demo/box/box_tl_corner.jpg');
  14.             background-repeat: no-repeat;
  15.             height:11px;
  16.             width:11px;
  17.             position:absolute;
  18.             z-index:5;
  19.             top:0px;
  20.             left:0px;
  21.         }
  22.  
  23.         #box_t_body {
  24.             background-image:url('http://sb.cesarvillaca.com/demo/box/box_t_body.jpg');
  25.             background-repeat: repeat-x;
  26.             height:11px;
  27.             position:relative;
  28.         }
  29.  
  30.         #box_tr_corner {
  31.             background-image:url('http://sb.cesarvillaca.com/demo/box/box_tr_corner.jpg');
  32.             background-repeat: no-repeat;
  33.             height:11px;
  34.             width:11px;
  35.             position:absolute;
  36.             z-index:5;
  37.             top:0px;
  38.             right:0px;
  39.         }
  40.  
  41.         #box_body {
  42.             background-image:url('http://sb.cesarvillaca.com/demo/box/box_l_body.jpg');
  43.             background-repeat: repeat-y;
  44.             padding-left:15px;
  45.         }
  46.  
  47.         #box_r_body {
  48.             background-image:url('http://sb.cesarvillaca.com/demo/box/box_r_body.jpg');
  49.             background-repeat: repeat-y;
  50.             background-position:right;
  51.             padding-right:15px;
  52.         }
  53.  
  54.         #box_bl_corner {
  55.             background-image:url('http://sb.cesarvillaca.com/demo/box/box_bl_corner.jpg');
  56.             background-repeat: no-repeat;
  57.             height:11px;
  58.             width:11px;
  59.             position:absolute;
  60.             z-index:5;
  61.             top:0px;
  62.             left:0px;
  63.         }
  64.  
  65.         #box_b_body {
  66.             background-image:url('http://sb.cesarvillaca.com/demo/box/box_b_body.jpg');
  67.             background-repeat: repeat-x;
  68.             height:11px;
  69.             position:relative;
  70.         }
  71.  
  72.         #box_br_corner {
  73.             background-image:url('http://sb.cesarvillaca.com/demo/box/box_br_corner.jpg');
  74.             background-repeat: no-repeat;
  75.             height:11px;
  76.             width:11px;
  77.             position:absolute;
  78.             z-index:5;
  79.             top:0px;
  80.             right:0px;
  81.         }
  82.  
  83.     </style>
  84.  
  85. </head>
  86.  
  87. <body>
  88.  
  89.     <div style="width:500px;">
  90.  
  91.         <div id="box_t_body"><div id="box_tl_corner"></div><div id="box_tr_corner"></div></div>
  92.  
  93.         <div id="box_body">
  94.  
  95.             <div id="box_r_body">
  96.  
  97.                 <div id="" class="">
  98.  
  99.                 Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.
  100.  
  101.                 </div>
  102.  
  103.             </div>
  104.  
  105.         </div>
  106.  
  107.         <div id="box_b_body"><div id="box_bl_corner"></div><div id="box_br_corner"></div></div>
  108.  
  109.     </div>
  110.  
  111.  
  112. </body>
  113. </html>
  114.  
Second Example - thanks to *SJL*
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title> new document </title>
  6. <style type="text/css">
  7. <!--
  8. .box {
  9.     border:#A85742 1px solid;
  10.     background-color:#D6C768;
  11.     padding:10px;
  12. }
  13. .boxed {
  14.     background-color:#FFFFFF;
  15.     padding:10px;
  16. }
  17. -->
  18. </style></head>
  19.  
  20. <body>
  21. <div class="box" style="width:500px;">
  22.   <div class="boxed">
  23.  
  24.     Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.
  25.  
  26.   </div>
  27. </div>
  28. </body>
  29. </html>
  30.  
Sep 22 '08 #4
empiresolutions
162 New Member
I'm running into an issue in IE7 with one of these box choices. When using a *float:left;* style it pulls the padding (color) from the top, down into the box. This is not how I want it to react. It does show correct in standards browsers.

See the example here, http://www.cesarvillac a.com/temp/temp1.php

The source will tell you everything I'm working with. Thank you for the help.
Oct 28 '08 #5
empiresolutions
162 New Member
Solution: Adding *overflow: hidden;* to my #boxed class did the job.

Expand|Select|Wrap|Line Numbers
  1. #box {
  2.     border:#A85742 1px solid;
  3.     background-color:#D6C768;
  4.     padding:10px;
  5. }
  6.  
  7. #boxed {
  8.     background-color:#FFFFFF;
  9.     padding:10px;
  10.     overflow: hidden;
  11. }
  12.  
Oct 28 '08 #6

Sign in to post your reply or Sign up for a free account.

Similar topics
0
1635
Dynamic Template - linking Button events
by: Pat Sagaser via .NET 247 | last post by:
I'm using a repeater with a dynamic template. I don't know the fields to display (or how many) until runtime. I have everything working except for linking Button events to the repeaters ItemCommand (see below). I've found plenty of examples for doing it using <ItemTemplate> in the aspx file, but I'm stumped when it comes to doing it dynamically at run time. /////////////////////////// .apsx file: <%@ Page language="c#"...
ASP.NET
0
1999
Repeator Dynamic Template - bubbleing LinkButton click event to containing Repeator.
by: Pat Sagaser via .NET 247 | last post by:
I'm trying to add LinkButtons to a Repeater control using adynamic template. The docs state that you should be able tobubble the click event to the containing Repeater. There areplenty of examples in the documentation for doing this using an<ItemTemplate> tag, but I haven't found any indication for howyou would do this in a dynamic template (implementing theITemplate interface). I'm adding the LInkButton in the TemplateDataBinding...
ASP.NET
7
1440
Dynamic Table Question
by: Stan Sainte-Rose | last post by:
Hi, I use this bit of code to generate dynamic tables in the page load section .... Dim ntable as New Table For i = 1993 To 2008 ntable = New Table ntable.ID = "Q" + i.ToString .... ....
ASP.NET
6
4760
create dynamic thumbnails on form or pannel using a picturebox?
by: Rich | last post by:
Hello, I want to simulate the dynamic thumbnail display of Windows Explorer (winxp) on a form or pannel container. If I place a picture box on my container form/pannel and dimension it to the size of a thumbnail and set the sizemode to Stretch -- I get one thumbnail. I want to retrieve all the picture files (jpg, bmp) in a directory into an array list and then display this list as thumbnails on my form dynamically. So my question is...
Visual Basic .NET
0
1241
Dynamic Templates for a datalist
by: KT | last post by:
Hi Everybody I'm hoping that someone can help me as I'm totally stumped. I am trying to populate a datalist using the dynamic templates. I have used the example on Microsofts site, I can't get the data to bind using the databinder.eval. Here is my code... on the aspx page
Visual Basic .NET
13
14623
Dynamic polymorphism vs. Static polymorphism
by: Krivenok Dmitry | last post by:
Hello all! Perhaps the most important feature of dynamic polymorphism is ability to handle heterogeneous collections of objects. ("C++ Templates: The Complete Guide" by David Vandevoorde and Nicolai M. Josuttis. Chapter 14.) How to implement analogue of this technique via static polymorphism? Perhaps there is special design pattern for this purpose...
C / C++
1
4267
Website won't build -- build failed with no errors, warnings or messages (VS2005)
by: | last post by:
I'm having a problem finding the cause for this problem. I have a solution in Visual Studio 2005 that contains two projects -- a Web Site and a Class Library. The web site references the class library. After the project became larger, the build process would sometimes fail with no errors. The "quick fix" for this was to rebuild the whole solution and things seemed ok. When this didn't solve the problem any longer, I went to the property...
ASP.NET
10
2646
hoist1138
IE7 javascript using DOM wont output Dynamic Text?
by: hoist1138 | last post by:
Thanks to anyone who may be able to steer me in the right direction :) Interesting that this works fine in All Browsers BUT Internet Explorer. fairly simple goal...... get a "src" img element attribute and display it (by manipulating DOM elements) on the webpage under a graphic...(for a dynamic label) var mainPic = document.getElementById("placeholder"); var picSrc = mainPic.getAttribute("src");
Javascript
1
2711
mouseover function not work on firefox with dynamic created dropdown menu
by: SunshineInTheRain | last post by:
The following code is dynamic create dropdownmenu which data within pulled from database However, the code work well on IE but not on Firefox. On Firefox, the whole mouseover and mouseout function din't work. what is not supported on Firefox? the javascript syntax? please help as i am not familiar with javascript. thanks in advanced. this is quite urgent.... please.. By the way hope there has somebody may help me find out why the design may...
Javascript
0
9669
marktang
What is ONU?
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
General
0
9517
Changing the language in Windows 10
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
Windows Server
0
10428
Oralloy
Problem With Comparison Operator <=> in G++
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
C / C++
0
10207
jinu1996
Maximizing Business Potential: The Nexus of Website Design and Digital Marketing
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
Online Marketing
0
9997
tracyyun
Discussion: How does Zigbee compare with other wireless protocols in smart home applications?
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
General
1
7537
isladogs
Access Europe - Using VBA to create a class based on a table - Wed 1 May
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
Microsoft Access / VBA
0
5435
Trying to create a lan-to-lan vpn between two differents networks
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
Networking - Hardware / Configuration
2
3718
muto222
How to add payments to a PHP MySQL app.
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
PHP
3
2916
bsmnconsultancy
Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
General

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes
How to Post and Respond on Bytes
How to Promote and Link on Bytes
How to increase your Ranking on Bytes
Become a Recognized Expert on Bytes
Feedback Welcomed! Contact Us