Currently I find myself a table that contains within it a div with a video player, but is moved around on the left side of the screen, I'd like to hit GrindPlayer, how can I do?
<style type="text/css" media="screen">
#GrindPlayer p{
text-align:center;
}
#GrindPlayer{
margin:0 auto;
}
</style>
<table width="100%" border="0" cellspacing="5">
<tr>
<td>
<div id="GrindPlayer">
<p>
Alternative content
</p>
</div>
</td>
</tr>
</table>
and if I can put the full table at the top of the screen. Thank you
If you want the div inside the table at the center, this is the solution.
#GrindPlayer p{
text-align:center;
}
#GrindPlayer{
margin:0 auto;
}
<table width="100%" border="1" cellspacing="5">
<tr>
<td>
<div id="GrindPlayer">
<p>
Alternative content
</p>
</div>
</td>
</tr>
</table>
Related
I need to have some text next to an image on an HTML page. So I figured a table was the best way to go...
<table width="500px" >
<tbody>
<tr>
<td align="left">
<p>
<b>Isn't she hot??</b>
</p>
</td>
<td align="right">
<img width="150" height="150" src="http://pixel.nymag.com/imgs/daily/vulture/2015/11/25/25-jennifer-lawrence-directs.w529.h529.jpg" alt="" border="0"/>
</td>
</tr>
</tbody>
Fiddle https://jsfiddle.net/abuMariam/rsnc9vjp/
Problem is what if I want to move that text all the way up or all the way down. I can't because the image width makes both td elements to be wide so I have no way to vertically position the text within its td.
Can I still keep the table but still move the text up and down in its cell?
Yes, just use vertical-align="top" or vertical-align="bottom" on the td. Do you really need to use a table for this though? Tables should seldom be used nowadays, and only for tabular data.
<table width="500px" >
<tbody>
<tr>
<td align="left" style="vertical-align:top;">
<p>
<b>Isn't she hot??</b>
</p>
</td>
<td align="right">
<img width="150" height="150" src="http://pixel.nymag.com/imgs/daily/vulture/2015/11/25/25-jennifer-lawrence-directs.w529.h529.jpg" alt="" border="0"/>
</td>
</tr>
</tbody>
</table>
Here's one way you could do it without using a table, this method causes the divs to act like table cells:
.container {
width:500px;
display:table;
}
.container > div {
width:50%;
display:table-cell;
}
.container > div p {
margin:0;
}
.container .left {
vertical-align:top;
}
.container .right {
text-align:right;
}
<div class="container">
<div class="left">
<p>
<b>Isn't she hot??</b>
</p>
</div>
<div class="right">
<img width="150" height="150" src="http://pixel.nymag.com/imgs/daily/vulture/2015/11/25/25-jennifer-lawrence-directs.w529.h529.jpg" alt="" border="0"/>
</div>
</div>
When I have placed the table inside the div element, there is 0.565px gap.
I want to place that table exactly on div.
<div style="width: 72.956%; border:1px solid; padding:25px">
<div>
<div>
<div style="padding:0px; margin:0px; border:1px solid" >
<table style="width: 100%; margin:0px; padding:0px; border:1px solid">
<tbody>
<tr>
<td>05/15/1991</td>
<td> ALKI</td>
<td>1 </td>
<td>$6.89</td>d>
<td> 1003 </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
There might be a couple of reasons. Try using these and please give us more information if it's not working.
CSS:
div{
padding:0;
}
table{
width:100%;
}
Try cellpadding and cellspaceing 0
Set the div display as table
div
{
display :table;
}
then table exactly rendered on div element
I have a table with two columns. I want to center the right-most column with the page so the left column would hang off to the left.
<table width="960" border="0" cellpadding="0">
<tr>
<td width="100"><!--COLUMN TO HANG TO LEFT--></td>
<td><!--COLUMN TO BE CENTER WITH PAGE--></td>
</tr>
</table>
I'm assuming the solution will be CSS.
You are right - CSS is the way to go. Give the column an id or class that you can target and and in your CSS center it. Assuming your table width is where you want it, give it a width of your table subtracting the other column that is to the left.
Something like this:
HTML:
<table width="960" border="0" cellpadding="0">
<tr>
<td width="100"><!--COLUMN TO HANG TO LEFT--></td>
<td class="center"><!--COLUMN TO BE CENTER WITH PAGE--></td>
</tr>
</table>
CSS:
td.center {
text-align: center;
width: 860px;
}
Edit: Based on the comments below, here is a sample layout just using div's instead of a table
http://jsfiddle.net/willyrybone/8eR6G/
HTML:
<div id="page-wrap">
<div id="sidebar">
<p>this is some</p>
<p>sidebar content</p>
</div>
<div id="main-content">
<p>This is some</p>
<p>centered main content</p>
</div>
<div>
CSS:
#page-wrap {
width: 960px;
margin: auto;
}
#sidebar {
float:left;
width: 100px;
background: #eee;
}
#main-content {
text-align:center;
background:#bbb;
}
You'll have to wrap your table in a div, and center that:
<div style="width:1060px; margin: auto">
<table width="960" border="0" cellpadding="0">
<tr>
<td width="100">COLUMN TO HANG TO LEFT</td>
<td style="background: #ccc">COLUMN TO BE CENTER WITH PAGE</td>
</tr>
</table>
</div>
http://jsfiddle.net/9HgpM/embedded/result/
I want to create a table like this, but using div instead of table
<style type="text/css">
body{ font-family:"Segoe UI", "Tahoma" }
td {
padding:0px 5px 10px 5px;
}
.username {
white-space:nowrap;
vertical-align:top;
text-align:right;
width:auto;
color:DodgerBlue;
}
</style>
<table width="500px" >
<tr>
<td class="username">copperfield</td>
<td>How to create table by using div </td>
<td style="vertical-align:top">time </td>
</tr>
<tr>
<td class="username">copperfield</td>
<td>
How to create table by using div How to create table by sing div How to create table by to create table by using div <img src="images/thinking.gif"> </br>
</td>
<td style="vertical-align:top"> 8:00 </td>
</tr>
<tr>
<td class="username"> </td>
<td>
How to create table by using div</br>
</td>
<td style="vertical-align:top"> 8:00 </td>
</tr>
<tr>
<td class="username"> </td>
<td>
How to create table by using div</br>
</td>
<td style="vertical-align:top"> 8:00 </td>
</tr>
<tr>
<td class="username">michael</td> <td><img src="images/thinking.gif"> Gi ku </td>
<td style="vertical-align:top"> 8:00 </td>
</tr>
</table>
I try the following code but it is not successful
<style type="text/css">
body{
font-family:Segoe UI;
}
.all{
float:left;
display:block;
}
.chat{
width:700px;
float:left;
display:table-cell;
}
.us{
color:blue;
text-align:right;
float:left;
margin-right:10px;
}
.ct{
white-space:normal;
float:left;
margin-right:10px;
}
.t{
float:left;
width:auto
}
</style>
<div class="all">
<div class="chat">
<div class="us"> userna3 46346346me </div>
<div class="ct"> content </div >
<div class="t"> time </div>
</div>
<div class="chat">
<div class="us"> copperfield </div>
<div class="ct"> How to create table by using div How to create table by sing div How to create table by to create table by using div</div>
<div class="t"> 8:00 </div>
</div>
<div class="chat">
<div class="us"> copperfield </div>
<div class="ct"> How to create table by using div Ho </div>
<div class="t"> 8:00 </div>
</div>
</div>
This looks like what you want: http://jsfiddle.net/ttunW/. The key was using display:table; for .all, display:table-row;, for .chat, getting rid of the float:left properties on all the divs, and assigning display:table-cell; to the divs within .chat.
You can't have something floating in a float. It just doesn't work in some ugly browsers cough IE cough.
So change your all class in your css to look like this:
.all div {float:left;}
Then take away all the other floats from your classes. For the us, ct, and t just give them a set width inside of each chat div. Also change the div's inside of the chat div's to p tags.
Can anyone help me to make an HTML code based on DIV's which has a simular result as this TABLE based code:
<HTML>
<BODY>
<STYLE>
html,body {height:100%;}
</STYLE>
<TABLE cellpadding=0 cellspacing=0 height=100% width=100%>
<TR>
<TD bgcolor=pink>
Page content...<BR>111<BR>222<BR>333
</TD>
</TR>
<TR>
<TD bgcolor=yellow id=footer style="height:1%">
Footer...<BR>111<BR>222<BR>333<BR>
<BUTTON onclick="document.getElementById('footer').innerHTML+='<BR>more footer...';">Increase footer</BUTTON>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
add this as CSS to your footer..
#footer{
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background-color : //whichever color you want
}
You need to specify minimum height of the center div/element.
For example following HTML snippet would ensure that footer is always at least 600px from the top of the browser
<html>
<head>
</head>
<body>
<div style="min-height: 600px;" id="center-content">
</div>
<div id="footer">
</div>
</body>
</html>