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!
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>
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/
I have 3 tables, cascading one after the other. I have a div, that I want to place on right side of these tables. The height of div may vary according to text inside. Currently the div is displayed below tables, like the image below;
<table class="class1" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell1</td>
<td class="cell2">Cell2</td>
</tr>
<tr>
<td class="cell1">Cell3</td>
<td class="cell2">Cell4</td>
</tr>
</table>
<table class="class2" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell5</td>
<td class="cell2">Cell6</td>
</tr>
<tr>
<td class="cell1">Cell7</td>
<td class="cell2">Cell8</td>
</tr>
</table>
<table class="class3" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell9</td>
<td class="cell2">Cell10</td>
</tr>
<tr>
<td class="cell1">Cell11</td>
<td class="cell2">Cell12</td>
</tr>
</table>
<div class="mydiv">mydiv</div>
But I want to place the div next to tables, so that it can extend downwards.
Here is the working fiddle http://jsfiddle.net/ZHVuf/1/
You should add a container around you table like this :
Html
<div id="container">
<!-- Your table -->
</div>
And make him float left, like your div #myDiv
Css
#container {
float:left;
}
see updated fiddle.
On this second updated fiddle, I added a wrapper with a clearfix !
insertusernamehere commented that you could use overflow:hidden instead of the clearfix, see here for a new working way to do this with less code.
Apply float:left; to all the table and add clear:both; to second and third table.
now you already has float:left; for div just add position:relative;top:0; and see.
OR
create two divs and add tables in one with left floating and you already have second div.
<div class="tableContainerDiv" style="float:left;">
<table><tr><td></td></tr></table>
<table><tr><td></td></tr></table>
<table><tr><td></td></tr></table>
</div>
<div class="yourDiv" style="float:left;"></div>
html
<div class="cl">
<div style="float: left">
your tables
</div>
<div class="mydiv" style="float: left">mydiv</div>
</div>
css
.cl:after{ content: " "; display: block; height: 0px; clear: both; visibility: hidden;}
.cl {display: inline-block;}
/* Hides from IE-mac \\*/
* html .cl {height: 1%;}
.cl {display: block;}
/* End hide from IE-mac */
move tables inside another div , float to left;
HTML
<div class="table-wrap">
<table class="class1" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell1</td>
<td class="cell2">Cell2</td>
</tr>
<tr>
<td class="cell1">Cell3</td>
<td class="cell2">Cell4</td>
</tr>
</table>
<table class="class2" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell5</td>
<td class="cell2">Cell6</td>
</tr>
<tr>
<td class="cell1">Cell7</td>
<td class="cell2">Cell8</td>
</tr>
</table>
<table class="class3" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell9</td>
<td class="cell2">Cell10</td>
</tr>
<tr>
<td class="cell1">Cell11</td>
<td class="cell2">Cell12</td>
</tr>
</table>
</div>
<div class="mydiv">mydiv</div>
CSS
.class1{
width: 100px;
height: 100px;
background: orange;
}
.class2{
width: 100px;
height: 100px;
background: green;
}
.class3{
width: 100px;
height: 100px;
background: gray;
}
.mydiv{
width: 200px;
background: blue;
float: left
}
.table-wrap{float:left;}
<table>
<tr><td>
<table class="class1" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell1</td>
<td class="cell2">Cell2</td>
</tr>
<tr>
<td class="cell1">Cell3</td>
<td class="cell2">Cell4</td>
</tr>
</table>enter code here
<table class="class2" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell5</td>
<td class="cell2">Cell6</td>
</tr>
<tr>
<td class="cell1">Cell7</td>
<td class="cell2">Cell8</td>
</tr>
</table>
<table class="class3" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell9</td>
<td class="cell2">Cell10</td>
</tr>
<tr>
<td class="cell1">Cell11</td>
<td class="cell2">Cell12</td>
</tr>
</table>
</td>
<td>
<div class="mydiv">mydiv</div>
</td>
</tr>
</table>
I've been working on this site a lot lately, because I really want to get it done, but sadly I just keep getting problem after problem. So this time, I set up the div perfect, but when you are on a lower resolution, the div decides to move down. I don't understand it. If I zoom in it happens. Or if I zoom out on a low resolution, it's perfect.
The CSS:
#states{
float:left;
background-color:#EEEEEE;
overflow: auto;
display:inline-block;
font-size:14;
}
#container{
position:relative;
margin-bottom:40%;
margin-left:11%;
}
#index{
float:left;
}
The HTML:
<table width="100%" align="center" border="1" cellspacing="1" cellpadding="5">
<tr>
<td width="100%" valign="top">
<?php states(); ?>
<div id="container">
<!--Start Content-->
<div id="index">
<table align="center" width="100%" class="test" border="0" cellspacing="1" cellpadding="15">
<tr align="left">
<th>Posted</th>
<th>Title</th>
<th>Description</th>
<th>Location</th>
<th>User</th>
</tr>
</table>
</div>
<!--End Content-->
</div>
</td>
</tr>
</table>
Maybe you should try a tableless approach.
is a DIV inside a TD a bad idea?
If you use a div in a td you will however get in a situation where it might be hard to predict how the elements will be sized.