CSS layout issue...

nani_nisha06 · 10-07-2012, 08:14 AM

Hi friends,

I have develop a website which generates tons of data from Mysql and project to the user but when actually if the user is selected more then a specific data the data is been projected on the header & footer as well but it looks so odd because header & footer it is not stretching as per data.

can any once please help me to resolve.

In summary: I want my CSS to stretch at width & footer for my data as required.

Please help me how can i do this .

Regards,
Nani

sunfighter · 10-07-2012, 03:33 PM

Hard to do without code, but remove the width from your header & footer.

nani_nisha06 · 10-07-2012, 06:08 PM

Quote:

Originally Posted by sunfighter

Hard to do without code, but remove the width from your header & footer.

Hi Sunfighter,

I am sorry for not adding code in my last comment.

Code:

#headerbg1
	{
		width:100%;
		height:209px;
		float:left;
		margin:0px;
		padding:0px;
		background-image: url(images/headerbg.jpg);
		background-repeat:repeat-x;
	}
#headerblank
	{
		width:1024px;
		height:50px;
		float: none;
		margin:0 auto;
		padding:0px;
	}
#header
	{
		width:700px;
		height:309px;
		float: left;
		margin:0px;
		padding:0px;
		background-image:url(images/headerbg.jpg);
		background-repeat:no-repeat;
	}

<-------footer code-------->
#footerbg1
	{
		width:160%;
		height:154px;
		float:left;
		margin:0px;
		padding:0px;
		background-image: url(images/footerbg.jpg);
		background-repeat:repeat-x;
	}
#footerblank
	{
		width:1004px;
		height:154px;
		float:none;
		margin:0 auto;
		padding:0px;
	}

I have also observed an change in the template when i am trying to open the webpage in mozilla firefox....

Please suggest.

Regards,
Nani

nani_nisha06 · 10-09-2012, 04:09 PM

Can Any one please help me this is still bugging issue for me ?????????/

sunfighter · 10-10-2012, 04:06 PM

Nani, what is the problem your having? Is it that your html table can open very wide, but the header/footer does not expand with it? Maybe setting the width property to 100% will make it work, but I don't know for sure cause I just have a little of your css and need the html. Try the 100% though.

Candygirl · 10-10-2012, 06:13 PM

I dont think a 100% width will solve the issue as it is 100% of the parent's element.

The default behavior is that child takes his width from his parent.
Here we want the opposite: an element that fixe his width according to his content.

Some properties can change the rule: absolute position, float or display:table, for exemple, can force a parent to grow with his children.

This is hard to answer without the HTML, but basicly the idea is to give to the footer/header and table's container a property that will make it grow with the content. So then, the footer and header will take all the room in the parent = the longest content's width.

I'm not sure that's clear...

A simple example to show what I mean:

Code:

<!DOCTYPE html>
<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>
	#main {position:absolute;left:0;top:0;min-width:100%;}
	#header {background:red;}
	#footer {background:green;}
</style>


</head>

<body>
	<div id="main">
		<div id="header">header</div>
		<table><tr><td>wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</td></tr></table>
		<div id="footer">footer</div>
	</div>
</body>
</html>

Maybe there are other/better way to make it working...

nani_nisha06 · 10-10-2012, 07:08 PM

Hi,

Still I see It doesn't work for me. However i am sharing my HTML code please let me know it I am doing anything wrong.

Code:

<?php session_start(); 
if(!isset($_SESSION["myusername"]))
{
die(header("location:index.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></title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="icon" href="images/icon.ico" />
<script language="javascript" type="text/javascript" src="js/tablefilter.js"></script>
</head>
<body>
<div id="headerbg1">
  <div id="headerblank">
<div style="width:650px; height:15px; float: right; margin:125px -50px 0 0; padding:0px;">
<div class="horizontalcssmenu">
<ul id="cssmenu1">
<li><a href="main.php">Home</a></li>
<li><a href="new_user_update.php" >NewUser Update</a></li>
<li><a href="" >UserName:<?= $_SESSION['myusername'] ?></a></li>
<li><a href="logout.php" >Logout</a></li>
</ul>
</div>
<br style="clear: left;" />
</div>
      </div>
  </div>

<!-- Start of Data -->

<?php
if(!isset($_SESSION["myusername"]))
{
die(header("location:index.html"));
} 
else
{
$host="localhost"; // Host name 
$username=""; // Mysql username 
$password=""; // Mysql password 
$db_name=""; // Database name 
$tbl_name=""; // Table name 
$pagelimit = 2000;
$offset = @$_POST['cPage']?@(($_POST['cPage']-1)*$pagelimit):0 ; 
// Connect to server and select databse.
require_once('classes/tc_pageNav.php'); //include pageNav class
mysql_connect("$host", "$username", "$password")or die("cannot connect"); 
mysql_select_db("$db_name")or die("cannot select DB");

 $data = mysql_query("SELECT SQL_CALC_FOUND_ROWS * FROM $tbl_name order by `ticket` DESC LIMIT $offset, $pagelimit ") 
 or die(mysql_error()); 
 
 $res = mysql_fetch_array(mysql_query("select FOUND_ROWS()"));
 $totalRecords = $res[0];

$page_nav = new tc_pageNav($totalRecords);
$page_nav->setPerPage($pagelimit);

$page_nav->calculate();
?>
 <center>
 <table border= "3" Id="table1" cellspacing="0" class="mytable filterable">
 <tr>
			
			<td>TicketNumber</td>
			<td>Creation Date</td>
			<td>Resolved Date</td>
			<td>Analyst</td>
			<td>Email Address</td>
			<td>Status</td>
			<td>Mail Sent</td>
			<td>Call Made</td>
			<td>Doc verf</td>
			<td>Change2analyst</td>
			<td>Change3analyst</td>
		 </tr>
		 </color>
		 </center>
		<?php
 while($info = mysql_fetch_array( $data ))
 { ?> 
			<tr>
			    <td><?=$info['ticket']?></td>
				<td><?=$info['Creation_Date']?></td>
				<td><?=$info['Resolved_Date']?></td>
				<td><?=$info['Analyst']?></td>
				<td><?=$info['Email_Address']?></td>
				<td><?=$info['Status']?></td>
				<td><?=$info['Mail_Sent']?></td>
				<td><?=$info['Call_Made']?></td>
				<td><?=$info['Doc_verf']?></td>
				<td><?=$info['Change2analyst']?></td>
				<td><?=$info['Change3analyst']?></td>
			</tr>
			
	<?php } ?>
	
 <tr> <td colspan = '34'> <?php echo $page_nav->printNavJump(); ?><td></tr>

 </table>
 <script>
	var table3Filters = {
		col_1: "select",
		col_2: "select",
		col_3: "select",
		col_5: "select",
        col_6: "select",
        col_7: "select",		
	}
	setFilterGrid("table1",1,table3Filters);
</script>
 <?php 
}
?>

<!-- End of Data -->
  
</div>
<div id="footerbg">
  <div id="footerblank">
    <div id="footer">
      <div id="footerlinks"><a href="#" class="footerlinks">Home</a> | <a href="#" class="footerlinks">About Us</a> | <a href="#" class="footerlinks">Support</a> | <a href="#" class="footerlinks">Forum</a> | <a href="#" class="footerlinks">Development</a> | <a href="#" class="footerlinks">Conact Us</a></div>
      <div id="copyrights">Copyright © 2012. All Rights Reserved</div>
      <div id="validation"><a href="http://validator.w3.org/check?uri=referer" class="xhtml">xhtml</a><a href="http://jigsaw.w3.org/css-validator/check/referer" class="css">css</a></div>
    </div>
  </div>
</div>
</body>
</html>

kevinmark2 · 10-11-2012, 08:11 AM

The content of your website should have a bottom padding equal to the height of your footer, and that will give you enough room for the footer and won't let any content get below the footer.

Let me know if you understood what I tried to explain and good luck with your project!

nani_nisha06 · 10-11-2012, 01:17 PM

Quote:

Originally Posted by kevinmark2

The content of your website should have a bottom padding equal to the height of your footer, and that will give you enough room for the footer and won't let any content get below the footer.

Let me know if you understood what I tried to explain and good luck with your project!

can I have some sample code.....if you can rectify me on the above code will help me easy understand

Redcoder · 10-20-2012, 05:27 PM

I don't do a lot of front-end stuff, but for this, you need a scripting language as the width's will vary depending on the tables' width. HTML alone cannot do this for you.

You need Javascript/JQuery or PHP for this. Personally, i'd use PHP to determine the needed width values as i'm primarily a PHP guy, but for you, you should try JQuery.

For example, for JQuery, try something of this sort:

PHP Code:


			
<script>

$(document).ready(function(){

var thewidth = $('#MyTable').width();



//Then add width to header and footer

$('#myheader').width(thewidth);

$('#myfooter').width(thewidth);



}



//Then you can apply this width to the header and footer

<script>

Try something along those lines. JQuery really makes work easier

. Less code, more logic packed in.

nani_nisha06 · 10-27-2012, 06:27 PM

Quote:

Originally Posted by Redcoder

I don't do a lot of front-end stuff, but for this, you need a scripting language as the width's will vary depending on the tables' width. HTML alone cannot do this for you.

You need Javascript/JQuery or PHP for this. Personally, i'd use PHP to determine the needed width values as i'm primarily a PHP guy, but for you, you should try JQuery.

For example, for JQuery, try something of this sort:

PHP Code:


			
<script>
$(document).ready(function(){
var thewidth = $('#MyTable').width();

//Then add width to header and footer
$('#myheader').width(thewidth);
$('#myfooter').width(thewidth);

}

//Then you can apply this width to the header and footer
<script>

Try something along those lines. JQuery really makes work easier

. Less code, more logic packed in.

Hi Redcoder,

As you suggested i have try to add & edit above code to my HTMl and I dont see any effect on the Header or footer.

I understand that this can be may be I beacuse I dont have Jquery knowledge...any chance you can help in this case.

Also, After long thinking I have understand one thing is this header and footer are not inherited with the body that is the reason when body is getting stretch with the data header & footer stretch is not happening.....

I am worried with issue coz almost 70% of my website is done....and my deadline is near by to complete this task ???

And

Another issues i am trying to fight with is a inline editing in the form with DB update parallel but, I don't find any help so, any help from your end is much more appreciated

.

Let me know if you want sample of my CSS and template....?

Thanks A head.

Regards,
Nani