Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Oct 2012
    Location
    mother land --india
    Posts
    179
    Thanks
    39
    Thanked 2 Times in 2 Posts

    CSS layout issue...

    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
    Last edited by nani_nisha06; 10-07-2012 at 09:17 AM.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,714
    Thanks
    25
    Thanked 660 Times in 659 Posts
    Hard to do without code, but remove the width from your header & footer.

  • #3
    Regular Coder
    Join Date
    Oct 2012
    Location
    mother land --india
    Posts
    179
    Thanks
    39
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by sunfighter View Post
    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

  • #4
    Regular Coder
    Join Date
    Oct 2012
    Location
    mother land --india
    Posts
    179
    Thanks
    39
    Thanked 2 Times in 2 Posts
    Can Any one please help me this is still bugging issue for me ?????????/
    Attached Thumbnails Attached Thumbnails CSS layout issue...-test.jpg  
    Last edited by nani_nisha06; 10-09-2012 at 05:20 PM.

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,714
    Thanks
    25
    Thanked 660 Times in 659 Posts
    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.

  • #6
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    184
    Thanks
    3
    Thanked 56 Times in 56 Posts
    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...
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon

  • #7
    Regular Coder
    Join Date
    Oct 2012
    Location
    mother land --india
    Posts
    179
    Thanks
    39
    Thanked 2 Times in 2 Posts
    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>

  • #8
    New to the CF scene
    Join Date
    Oct 2012
    Location
    kevinmark
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #9
    Regular Coder
    Join Date
    Oct 2012
    Location
    mother land --india
    Posts
    179
    Thanks
    39
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by kevinmark2 View Post
    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

  • #10
    Regular Coder Redcoder's Avatar
    Join Date
    May 2012
    Location
    /dev/null
    Posts
    335
    Thanks
    2
    Thanked 49 Times in 48 Posts
    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.

  • Users who have thanked Redcoder for this post:

    nani_nisha06 (10-24-2012)

  • #11
    Regular Coder
    Join Date
    Oct 2012
    Location
    mother land --india
    Posts
    179
    Thanks
    39
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Redcoder View Post
    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
    Last edited by nani_nisha06; 10-27-2012 at 07:30 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •