[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Using DIV Tag to display dynamic result on a Page

Posted on 2006-05-07
14
Medium Priority
?
240 Views
Last Modified: 2013-11-19
Hi All,
I have the contents of a query appearing inside a Div Tag. The only problem is that when the query returns a large amount of information the Div Tag extents but the information underneath the Div Tag is now displayed underneath it and does not allow room for the extented Div Tag. How can I make it so that if the Div Tag is required to be extended, the rest of the contents of the page are corresponding shifted underneath it. I'm using Dreamweaver 8 by the way.
Thanks,
Derek
0
Comment
Question by:dereksheahan
  • 7
  • 6
14 Comments
 
LVL 25

Expert Comment

by:Rouchie
ID: 16629060
It sounds like you need to clear the DIV.  Try this

<div>
  database results here
     <div style="clear:both;">&nbsp;</div>
</div>
<div style="clear:both;">&nbsp;</div>
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 16633930
Derek,

You can also set the div to overflow: scroll which will keep it at the size you define but add scrollbars for the rest of the content.
0
 

Author Comment

by:dereksheahan
ID: 16635286
Hi guys,
I tried the ( <div style="clear:both;">&nbsp;</div>) solution but that doesn't seem to work. I can set the overflow to scroll but that doesn't look ideal for what I want. What I'd really like is for the div tag to expand based on the amount of entries from the database. At the moment it expands the div tag over the tag underneath it. I've also ticked the "prevent overlaps" in  the CSS layers panel but that only seems to apply to actually drawing the layers not when the page is loaded is the browser? Here's the code to the page if it helps.
Thanks a mil

<?php require_once('../Connections/GSM_mobile.php'); ?>
<?php
$colname_rsPostalResults = "-1";
if (isset($_GET['postal_variable'])) {
  $colname_rsPostalResults = (get_magic_quotes_gpc()) ? $_GET['postal_variable'] : addslashes($_GET['postal_variable']);
}
mysql_select_db($database_GSM_mobile, $GSM_mobile);
$query_rsPostalResults = sprintf("SELECT mod_model_id, mod_model_name, mod_type_id FROM model_table WHERE mod_type_id = %s", $colname_rsPostalResults);
$rsPostalResults = mysql_query($query_rsPostalResults, $GSM_mobile) or die(mysql_error());
$row_rsPostalResults = mysql_fetch_assoc($rsPostalResults);
$totalRows_rsPostalResults = mysql_num_rows($rsPostalResults);
?><!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.style1 {font-family: Arial, Helvetica, sans-serif}
.style2 {color: #993333}
.style3 {color: #000000}
#Layer1 {
      position:absolute;
      left:12px;
      top:112px;
      width:417px;
      height:132px;
      z-index:1;
      overflow: auto;
}
#Layer1 {
      border: thin dotted #333333;
}
Pos {
      overflow: visible;
}
#Layer2 {
      position:absolute;
      left:9px;
      top:258px;
      width:683px;
      height:120px;
      z-index:2;
}
-->
</style>
</head>

<body>
<div id="Layer1">
  <p><span class="style1 style2">
    <?php do { ?>
    <span class="style3"><?php echo $row_rsPostalResults['mod_model_name']; ?></span>
    <?php } while ($row_rsPostalResults = mysql_fetch_assoc($rsPostalResults)); ?>
  </span></p>
</div>

<div id="Layer2">
  <p><a href="postalmain.php">Search again </a></p>
  <p>If your phone model is not listed then please <a href="../support.php">contact us</a> to make sure we can unlock your phone before sending.</p>
  <p>If your phone is listed then please complete this <a href="../Files/postal unlocking form.doc">contact form</a></p>
</div>
<form id="form1" name="form1" method="post" action="">
  <p>The following is a list of models that we support:</p>
  <p>Image of Brand Type: </p>
  <p>&nbsp;</p>
  <p class="style1 style2">&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</form>
</body>
</html>
<?php
mysql_free_result($rsPostalResults);
?>
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 16635422
Derek,

Don't define a height for that div.  Let the content push the border.
0
 

Author Comment

by:dereksheahan
ID: 16635482
Hi Jason,
Changed the height to "auto" and tryed the "clear" property and all of its options (left,right,both,none). Still the div tag undeneath stays there and is overrun by the text in this div tag
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 16635505
Okay, great.

Give me a few minutes to play with the file and I will post revised code that pushes the second div.
0
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 1200 total points
ID: 16635558
<?php require_once('../Connections/GSM_mobile.php'); ?>
<?php
$colname_rsPostalResults = "-1";
if (isset($_GET['postal_variable'])) {
  $colname_rsPostalResults = (get_magic_quotes_gpc()) ? $_GET['postal_variable'] : addslashes($_GET['postal_variable']);
}
mysql_select_db($database_GSM_mobile, $GSM_mobile);
$query_rsPostalResults = sprintf("SELECT mod_model_id, mod_model_name, mod_type_id FROM model_table WHERE mod_type_id = %s", $colname_rsPostalResults);
$rsPostalResults = mysql_query($query_rsPostalResults, $GSM_mobile) or die(mysql_error());
$row_rsPostalResults = mysql_fetch_assoc($rsPostalResults);
$totalRows_rsPostalResults = mysql_num_rows($rsPostalResults);
?><!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.style1 {font-family: Arial, Helvetica, sans-serif}
.style2 {color: #993333}
.style3 {color: #000000}
#Layer1 {
     left:12px;
     top:112px;
     width:417px;
     height:auto;
     z-index:1;
}
#Layer1 {
     border: thin dotted #333333;
}
Pos {
     overflow: visible;
}
#Layer2 {
      width:683px;
      clear: both;
      float: none;
}
-->
</style>
</head>

<body>

<div id="Layer1">
  <p><span class="style1 style2">
    <?php do { ?>
    <span class="style3"><?php echo $row_rsPostalResults['mod_model_name']; ?></span>
    <?php } while ($row_rsPostalResults = mysql_fetch_assoc($rsPostalResults)); ?>
  </span> blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
</div>
<div id="Layer2">
  <p><a href="postalmain.php">Search again </a></p>
  <p>If your phone model is not listed then please <a href="../support.php">contact us</a> to make sure we can unlock your phone before sending.</p>
  <p>If your phone is listed then please complete this <a href="../Files/postal unlocking form.doc">contact form</a></p>
</div>
<div>
  <form id="form1" name="form1" method="post" action="">
    <p>The following is a list of models that we support:</p>
    <p>Image of Brand Type: </p>
    <p>&nbsp;</p>
    <p class="style1 style2">&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </form>
</div>
</body>
</html>
<?php
mysql_free_result($rsPostalResults);
?>
0
 

Author Comment

by:dereksheahan
ID: 16635590
Jason your a legend! That works great. Just one question, the handlers for the div tags seem to have disappeared! Is it because you have set "float" to none. How do I get them back if I need to resize things?
0
 

Author Comment

by:dereksheahan
ID: 16635619
For example, I need a title above the display section but can't seem to make space for it. Is it because the positions of the Div Tags have been make absolute?
Thanks,
D
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 16635636
No, nothing is absolute anymore.  You can't make a div absolute and also ask it to resize based on content.

To make room above or below something, add a new div tag and create a new class to handle it.  The major attributes to make this work correctly are:

clear: both;
float: none;

You can set anything else you like (margins: auto, width: auto or 100%) to make the layout work.
0
 

Author Comment

by:dereksheahan
ID: 16638856
Thanks
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 16641007
You're welcome.

Derek,  you should take a look at oswd.org when you have some free time.   It's a great place to learn about CSS
0
 

Author Comment

by:dereksheahan
ID: 16641064
Thanks Jason, Still working on that scroller section at the moment though. Reverted back to marquee and think I nearly have it in order :)
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 16641121
LOL.  Oh well.  There is a javascript out there that will do what you want, it's just a matter of finding it.  Heck, you should post the challenge in the JS forum here...
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question