I have this table at the top of my page...
<table width="95%" border="0" cellspacing="0" cellpadding="0" style="position:fixed; z-index:99999;">
<tr>
<td><img src="logo.png" width="282" height="41" /></td>
<td align="right">Hello <?php echo $_SESSION["forename"]; ?> | Logout</td>
</tr>
</table>
it always stays at the top of the page however when scrolling down, all the content on the page goes behind the table and you can see it behind
does anyone know what i can do to stop this from happening?
EDIT:
This is my full code...
<style type="text/css">
body,html {
height:100%;
}
#top-bar {
width:100%;
padding:10px 10px 80px 10px;
margin:0 0 100px 0;
border-bottom:solid 1px #000000;
top:0;
left:0;
}
#left-bar {
width:170px;
display:inline;
float:left;
}
#right-bar {
width:80%;
display:inline;
float:right;
}
</style>
</head>
<body>
<div id="top-bar">
<table width="95%" border="0" cellspacing="0" cellpadding="0" style="position:fixed">
<tr>
<td><img src="logo.png" width="282" height="41" /></td>
<td align="right">Hello <?php echo $_SESSION["forename"]; ?> | Logout</td>
</tr>
</table>
</div>
<div id="left-bar"><iframe src="header.php" width="180px" height="100%" frameborder="0" scrolling="no"></iframe></div>
<div id="right-bar">
<iframe name="rightiframe" src="dash.php" width="100%" height="100%" frameborder="0" scrolling="yes"></iframe>
</div>
</body>
You're most probably looking for this:
<table width="95%" border="0" cellspacing="0" cellpadding="0" style="position:fixed;z-index:999;top:0;left:0;background-color:#fff">
<tr>
<td><img src="logo.png" width="282" height="41" /></td>
<td align="right">Hello <?php echo $_SESSION["forename"]; ?> | Logout</td>
</tr>
</table>
The background-color makes sure you can't see any content that is behind the table.
JsFiddle: http://jsfiddle.net/CRHxk/
Related
In the code below, div with red background gets 0 height when the image is there but with image node removed, it gets the correct height of 60px from the parent. Why is it and how can it be corrected?
Here is also the jsfiddle link: https://jsfiddle.net/zuymamq7/
html,body{
width:100%;
height:100%;
}
<table style="width:100%;height:100%;">
<tr style="height:60px;">
<td>
<div style="width:100%; height:100%; background-color:blue;">
<img src="http://www.bensound.com/bensound-img/betterdays.jpg" style="width:60px; height:60px;"></img>
<div style="display:inline-block;width: 10%; height:100%; background-color:red;">
</div>
</div>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
Biggest thing that I noticed as I began to edit this:
You added a close image tag (</img>). Those don't exist. The correct syntax is either <img src="something.jpg"> or more technically <img src="something.jpg" /> Threw off some things a lot (especially in the editor)
I'm thinking this is what you want, or at least, I hope.
html,
body {
width: 100%;
height: 100%;
}
<table style="width:100%;height:100%;">
<tr>
<td style="height:60px">
<div style="width:100%; height:100%; background-color:blue;">
<img src="http://www.bensound.com/bensound-img/betterdays.jpg" style="width:60px; height:60px;" />
<div style="display:inline-block;width: 10%; height:100%; background-color:red;">
</div>
</div>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
Other Way
If you can change up the HTML a bit, then this should work too.
html,
body {
height: 100%;
width: 100%;
}
table {
border-collapse: collapse;
}
<table style="width:100%;height:100%;">
<tr style="background-color:blue">
<td style="height:60px;width:60px;">
<img src="http://www.bensound.com/bensound-img/betterdays.jpg" style="width:60px; height:60px;" />
</td>
<td style="background-color:red; width:10%">
Text
</td>
<td> </td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
<body bgcolor="#f6f6f6" style="background:#f6f6f6; border:0; color:#9e9e9e; margin:0; padding:0;">
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%" bgcolor="#f6f6f6" style="table-layout: fixed; margin: 0 auto; background:#f6f6f6;">
<tr>
<td width="100%" valign="top">
<table cellpadding="0" cellspacing="0" bgcolor="#f6f6f6" border="0" align="center" width="600" class="fullWidth">
<tr>
<td><img src="spacer.gif" width="100%" height="30" alt="" /></td>
</tr>
</table>
<!-- More tables with content -->
</td>
</tr>
</table>
</body>
I've done a lot of testing on this and research. I believe that I am doing this correctly however when I go to test it expecting the table to be centered in yahoo it isn't!
The fix is supposed to be putting table-layout: fixed; on the outer table with 100% width on.
which I've done.
So can anyone spot what I've done wrong here to not make this work?
Cheers
The code below should fix it. Your email code just needs a few more CSS resets.
<html>
<head>
<style>
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
</style>
</head>
<body bgcolor="#f6f6f6" style="background:#f6f6f6; border:0; color:#9e9e9e; margin:0; padding:0;">
<center style="width: 100%; background: #f6f6f6;">
<!-- Your Email Code Begins Here -->
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%" bgcolor="#f6f6f6" style="table-layout: fixed; margin: 0 auto; background:#f6f6f6;">
<tr>
<td width="100%" valign="top">
<table cellpadding="0" cellspacing="0" bgcolor="#f6f6f6" border="0" align="center" width="600" class="fullWidth">
<tr>
<td><img src="spacer.gif" width="100%" height="30" alt="" /></td>
</tr>
</table>
<!-- More tables with content -->
</td>
</tr>
</table>
<!-- Your Email Code Ends Here -->
</center>
</body>
</html>
How to change image to full Responsive image? i have following image top of the site page ? trying to change Responsive image ? not working any idea for it ?
<html>
<head>
<title>LearningFox</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css">
#media only screen and (max-width: 480px) {
table[class=container],
table[class=content],
table[class=wrap-table],
table[class=table],
table[class=id]
{
width: 100% !important;
}
}
</style>
</head>
<link href="../style.css" rel="stylesheet" type="text/css">
<body bgcolor="#FFFFFF" TOPMARGIN="0" LEFTMARGIN="0" RIGHTMARGIN="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="container" >
<tr>
<td align="center">
<table width="800" height="600" border="0" cellspacing="0" cellpadding="0" class="content" >
<tr bgcolor="#366C88">
<td colspan="2" style="background-image:url('../site_conf/images/det_banner.jpg'); background-repeat:no-repeat; background-position:center;" width="100%" height="100" align="right">
<?php
if(!is_null($sid)&&$session_error=="none")
{
$_SESSION['lms_username']=$lms_username;
?>
<TABLE BORDER="0" CELLPADDING="2" CELLSPACING="0" WIDTH="190" class="wrap-table" >
<TR>
<TD><FONT FACE="VERDANA" SIZE="1" COLOR="#000000">Logged in as: <B><?php echo $lms_username; ?></B></TD>
</TR>
<?php
if($lms_groups=="on" && $lms_user_group!=""){
?>
<TR>
<TD><FONT FACE="VERDANA" SIZE="1" COLOR="#000000"><?php echo"$lms_gtitle: "; if($lms_groups=="on"){echo"<B>$lms_user_group</B>";}?></TD>
</TR>
<TR>
<TD><FONT FACE="VERDANA" SIZE="1" COLOR="#000000"><?php echo "$lms_sgtitle: "; if($lms_groups=="on"){echo"<B>$lms_user_subgroup</B>";}?></TD>
</TR>
<tr>
<TD><FONT FACE="VERDANA" SIZE="1" COLOR="#000000"><?php if($section=="reports" && $report){echo"<A HREF='index.php?section=reports&sid=$sid'>Back to Detailed Reports Section";}?></FONT></TD>
</tr>
<?php }?>
</TABLE>
<?php
}
?></td>
</tr>
<tr>
<td colspan="2" height="20" bgcolor="" background="images/bg.gif">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" class="table" >
<tr>
<td> </td>
<TD align="right"><?php
if(!is_null($sid)&&$session_error=="none")
{
?><a style="" href="index.php?section=<?php echo $section; ?>&logout=YES&sid=<?php echo $sid; ?>"><img src="images/logout.png" border="0" align="ABSMIDDLE" alt="Click here to Log Out"></a><?php
}
?></TD>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" width="198">
<!---------BEGIN SIDE NAV TABLE------------->
<table width="198" border="0" cellspacing="0" cellpadding="0" class="id" >
<tr valign="top">
<td width="198"></td>
</tr>
<tr><td> </td></tr>
<tr>
<td></td>
</tr>
</table></td>
<!--<td class="boxcontent" VALIGN="TOP" width="602" style="border:1px solid red;">-->
<td class="boxcontent" VALIGN="TOP" >
<?php
include($mysection);
echo("$mysection");
?></td>
</tr>
<tr>
Here update my full code i set remain part Responsive but i cant able to that image part? please any idea about it..how to change that image part change the Responsive design?
background-size: cover;
Try this, it should do what you need.
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Suppose you have an div with a class.
<div class="resp"></div>
With CSS you can do something like :
.resp {
height: 500px;
width: 500px;
background: url(../img/waddup.png) center center no-repeat fixed;
background-size: cover;
}
Booyah.
CSS:
td.banner{
background-image:url('../site_conf/images/det_banner_new.jpg') !important;
}
Becuase of using inline style attribute to set background image, Its required to have "important" in you media css.
JQuery:
$(window).resize({
if($(window).width()<768){
$("td.banner").attr("backgroundImage","url('../site_conf/images/det_banner_new.jpg')");
}else{
$("td.banner").attr("backgroundImage","url('../site_conf/images/det_banner_old.jpg')");
}
});
You can use following CSS.
Just change the selector to what you want.
.responsive {
width: 100%;
max-width: 400px;
height: auto;
}
I have a website that has a footer. The footer is a simple gray background. I want to center some absolutely sized content in that footer. In an effort to do this, I tried the following:
<div style="background-color:gray; font-size:10pt; width:100%;">
<div style="margin-left:auto; margin-right:auto; text-align:center;">
<table border="0" cellpadding="0" cellspacing="0" style="width:800px; padding:8px 0px; text-align:center;">
<tr>
<td><img alt='' height="75" width="75" src="/images/img1.png" /></td>
<td><img alt='' height="75" width="75" src="/images/img2.png" /></td>
<td style="text-align:center; color:White;"><table border="0" cellpadding="0" cellspacing="0" style="text-align:center; width:100%;">
<tr><td>
<a href='index.html'>HOME</a> |
<a href='about.html'>ABOUT</a> |
<a href='contact.html'>CONTACT US</a>
</td></tr>
<tr><td>123 Pine Street | City, State 12345 | 1-800-555-5555</td></tr>
<tr><td style="font-size:8pt;">Copyright Company, Inc. | All Rights Reserved</td></tr>
</table></td>
<td><img alt='' height="75" width="75" src="/images/img3.png" /></td>
<td><img alt='' height="75" width="75" src="/images/img4.png" /></td>
</tr>
</table>
</div></div>
Why won't my 800px table center within the footer?
Thank you!
You need to set the width of the second nested div to 800px for the auto margin to work. Right now it's the same width as the containing div so the margin has no effect. You can also put auto margins on the table as the other answers point out.
text-align doesn't apply to the table itself. Try margin: auto on the table.
A really simple example:
<table style="background: #0f0; width: 800px; margin: auto"><tr><td>content</td></tr></table>
remove the div around the table and add the following style to the table:
margin: 0 auto;
So, I have a predicament. My tabs are pushing down the content below it. Here is some of the code:
<div id="navigation">
<div id="test" class="blue">
<p>Home</p>
<p class="subtext">View/update contact information</p>
</div>
<div id="lessons" class="blue">
<p>Projects</p>
<p class="subtext">Create/open projects, view existing reports</p>
</div>
<div id="test" class="blue">
<p>Help</p>
<p class="subtext">If something doesn't work, click here</p>
</div>
</div>
<div id="contain3">
<table id="maintable" align="center" width="940" cellspacing="0" cellpadding="0" class="lessontablemain">
<tr align="center" valign="top">
<td height="500" cellpadding="0" cellspacing="0">
<!--<div id="maincontent">-->
<table align="left" cellspacing="4" cellpadding="4" style=" margin-top:10px; background-color:transparent; border: 0;" width="100%" class="textfont_charms">
<tr>
<td cellspacing="0" cellpadding="0" align="center" valign="top">
<br>
<!--template up-->
<!--side bar table below -->
<? include_once("sidebar.php"); ?>
</td>
<td cellspacing="0" cellpadding="0" width="100%" valign="top" align="center">
<table id="maintable" style=" margin-top:10px; background-color:transparent; border: 0;" cellspacing="0" cellpadding="0" height="100%" valign="top" width="100%">
<tr>
<td valign="top" align="center" width="100%" cellspacing="0" cellpadding="0" height="100%">
<div align="center" id="content" style="vertical-align: top;"></div>
</td>
</tr>
</table>
<!--template down-->
</div>
</td>
</tr>
</table>
</tr>
<tr valign="bottom">
<td style="background-color: #E2E2E2;">
<?
include('template/footer_tmpl.php');
?>
</td>
</tr>
</table>
</div>
Here is my css:
#contain3{
width:940px;
margin-left:auto;
margin-right:auto;
text-align:left;
/*position: absolute;*/
top: 137;
z-index: -1;
}
#navigation{
width:940px;
margin-left: 8px;
text-align:left;
font-family:"Lucida Grande","Lucida Sans",sans-serif;
font-size:12px;
top: 109;
/*position: absolute;*/
z-index: 2;
}
To see what I'm talking about, my site is: http://www.charmscorp.com/inspect/projects.php - click on the tabs up above. Don't mind the slowness of the site, it's a server issue... so you have to wait a few seconds for the tabs to initialize.
Also, as you can see, I commented out position absolute. I thought that would be the answer, but instead, it just put the tab div on top of the content... Please help, this is giving me a headache!
Instead of making the divs with class "blue" higher - and thus revealing the drop down - why don't you show() the paragraphs with class "subtext" themselves instead?
Have them set to display: none by default, and use JavaScript to reveal them. You'll need to set them to position: absolute also, so they don't push any content down.
ok, I fixed this. I made the position: absolute, and then margin-top:27px, which pushed the content div down to where I wanted it to be. Another problem arose though, which is IE related. I'll start a new thread for that one though, as it's a new problem. Thanks!