...

View Full Version : Layout Problem



Anishgiri
06-17-2010, 11:38 AM
In this layout, when I click the magnifier button, and it display the data, I want the height of white color (center container) to adjust.


http://i5.photobucket.com/albums/y154/reno_of_the_turks/layout3.jpg

The problem is when data are displayed the white color does not adjust.

http://i5.photobucket.com/albums/y154/reno_of_the_turks/layout4.jpg

The white container has a height specified here which is 850px;. Is there a solution to this?

effpeetee
06-17-2010, 11:42 AM
We really need to see your code, or better still a link.

My Sources program (http://www.exitfegs.co.uk/Sources.html) may help you.

EQUAL HEIGHT or FAUX COLUMNS.

Frank

Zoic
06-17-2010, 11:54 AM
If your layout is done in tables, add in valign="top" attribute into your <td> tags. This will vertically align text to the top of the table cell.

Anishgiri
06-17-2010, 12:13 PM
css code



@charset "utf-8";
/* CSS Document */

#wrapper{
width:1100px;
margin: 0 auto;



text-align:left;
background-color:#FFF;
height:609px;


}



html,body {
background:url(images/backgroundimage.jpg);
margin:0;
padding:0;

font-family:Trebuchet MS,Arial;




}



ul li{
list-style-type:none;
text-align:center;
}



ul{
list-style-type:none;

clear:both;

}
li{
display:inline;
}
a{
float:left;

text-decoration:none;
color:white;
font-weight:bold;
background:#2eafa4;

font-family:Trebuchet MS,Arial;
width:86px;
height:22px;
font-size:12pt;
margin-left:5px;
text-align:center;


}
a:hover{
background:#ed1a3b;
}


.button {
border: none;
width: 86px;
height: 22px;
background: url(images/submitrollover.gif) no-repeat top left;
}

.button:hover {
background-position: -90px 0









<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Search Contacts</title>

<link rel="stylesheet" type="text/css" href="layout.css" title="" />
<style type="text/css" media="screen">

ul {
list-style-type:none;
position:relative;
top:5px;


}



body
{

color: #ed1a3b;
font-family:Trebuchet MS,Arial;

}




h3

{

color: #ed1a3b;

font-size:24pt




}

p {
color: #ed1a3b;
font-size:12pt;

}

.box
{

margin-left:55px;

float:left;
font-size:18pt;
color:#ed1a3b;
font-family:Trebuchet MS,Arial;
font-weight:bold;
margin-top:9px;


}

.box2
{
margin-left:

}

.container

{
float:left;
margin-top:15px;



}




.searchbox
{
float:right;
margin-top:-490px;
margin-right:15px;


}

.boxposition
{
position:relative;
left:15px;

}

.header

{
float:left;
height:60px;
margin-top:15px;


}

</style>
</head>


<body>


<div id="wrapper">
<div class="header">
<img src="images/BDOlogo.gif" alt="" align="" style="float:left; margin-left:15px">

<div class="box"> INTRANET </div>
</div>
<ul >
<li><a href="search_display3.php"> Home</a></li>
<li><a href="new.php"> New </a> </li>
</ul><br>




<br> <br>



<?php


if(isset($_POST['submit_x'])){
if(isset($_GET['go'])){
if(preg_match("/[A-Z | a-z]+/", $_POST['name'])){

$pangalan = $_POST['name'];

//connect to the database
$db=mysql_connect ("localhost", "root") or die ('I cannot connect to the database because: ' . mysql_error());

//-select the database to use
$mydb=mysql_select_db("records2");

//-query the database table
//$sql="SELECT id, fname, lname FROM table1 WHERE fname LIKE '%" . $name . "%' OR lname LIKE '%" . $name ."%'";

//$sql="SELECT *FROM table1 WHERE fname LIKE '%" . $pangalan . "%' OR lname LIKE '%" . $pangalan ."%' UNION SELECT *FROM table2 WHERE fname LIKE '%" . $pangalan . "%' OR lname LIKE '%" . $pangalan ."%' ";
$sql="SELECT *FROM table1 WHERE fname LIKE '%" . $pangalan . "%' OR lname LIKE '%" . $pangalan ."%' ";


$result=mysql_query($sql);
while($row=mysql_fetch_array($result)){


$FirstName =$row['fname'];
$LastName=$row['lname'];
$PhoneNumber=$row['phone'];
$Email=$row['email'];
$position=$row['position'];
$image=$row['imagepath'];
$doc=$row['docpath'];

//-display the result of the array

?>

<br> <br>

<div class="container" >
<table style='color: #ffffff; font-size:19px; position:relative; left:15px;' bgcolor='#62cae3' cellspacing='2' cellpadding='3' >
<tr> <td colspan='7' style='color: #FFF; font-size:18pt; ' >

<strong> PERSONAL INFORMATION </strong>
</td>

<tr> </tr> <tr> </tr> <tr> </tr> <tr> </tr> <tr> </tr>
</tr>
<tr> <td rowspan='3'> <?php echo " <img src =\"" . $row['imagepath']."\" width='110'> " ?></td>
<td>Last Name</td>
<td>:</td>
<td><input name='lname' type='text' id='name' size='20' value="<?php echo $LastName; ?>"></td>

<td>Middle name</td>
<td>:</td>
<td colspan='4'><input name='mname' type='text' id='name' size='20' value='Torres'></td>
</tr>
<tr>
<td>First Name</td>
<td>:</td>
<td><input name='fname' type='text' id='name' size='20' value="<?php echo $FirstName; ?>"></td>
<td>Age</td>
<td>:</td>
<td><input name='age' type='text' id='name' size='3' value='25'></td>

<td>Sex</td>
<td>:</td>
<td><input name='sex' type='text' id='name' size='3' value='M'></td>
</tr>
<tr>
<td>Position</td>
<td>:</td>
<td><input name='position' type='text' id='name' size='20' value="<?php echo $position; ?>"></td>
<td>Group</td>
<td>:</td>
<td colspan='3'><input name='group' type='text' id='name' size='20' value='ARMCI'></td>
</tr>
<tr> <tr> <tr>



<?php

//echo "<ul>\n";
//echo "<li>Name: &nbsp;" . $FirstName . " " . $LastName . "</li>\n";
//echo "<li>Phone Number: &nbsp; " . $PhoneNumber . "</li>\n";
//echo "<li>" . "<a href=mailto:" . $Email . ">" . $Email . "</a></li>\n";
//echo "</ul>";

//echo "<tr>";
//echo "<td><img src =\"" . $row['imagepath']."\"></td>";
//echo "</tr>";



echo "</tr>";
echo " </div> ";
echo "</table>" ;
?>

<br>
<div class="boxposition">
<?php
echo '<a href="edit(for_search).php?id=' . $row['id'] . '">Edit</a>';
?>
</div>

<?php
echo " <a href='$doc' style='position:relative; left:15px;'>Resume</a> ";
echo "</div> ";

}
}
else{
echo "";
}
}
}
?>

<div class="searchbox">
&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
<img src="images/locatorTop.gif" >
<p style="font-size:18px">Search Employee Details <p>
<p style="font-size:12pt; color:#685040">You may search either by first or last name</p>
<form method="post" action="search_display3.php?go" id="searchform">


<input type="text" name="name" style="float:left;" >

<input type="image" value="Submit" class="search_button" src="images/magnifying.gif" name="submit" >



<!--<input type="submit" name="submit" value="Submit"> -->
</form>
<br>
&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; <img src="images/locatorBottom.gif">

</div>
</div>
</body>
</html>




I know the codes are a bit messy( I am not an expert, and I lack time), in which there are uncessesary codes. There intranet have a specific width and height

Anishgiri
06-17-2010, 12:16 PM
If your layout is done in tables, add in valign="top" attribute into your <td> tags. This will vertically align text to the top of the table cell.

Thanks for the input, but my problem is how to let the height adjust to the contents.? Height:auto does not work here.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum