I have searched quiet a bit and found a lot of css that I tested but margin: 0 auto; has not worked and. I cannot get my footer to stay center and also at the bottom. I can get it to the bottom and I can get it centered but not both.
Here is the HTML
<div align="center">
<table class="copyrightbar">
<tr>
<td class="noborder">
<img class="ledge" src="images\lefthalfcircle.png">
</td>
<td class="noborder" >
<img class="copyrightimg" src="images\copyright.png">
</td>
<td class="noborder">
<img class="redge" src="images\righthalfcircle.png">
</td>
</tr>
</table>
</div>
Here is the CSS
.copyrightbar
{
border-collapse: collapse;
border: 0px;
padding: 0px;
float: left;
position: fixed;
bottom: 10px;
display:block;
}
I am not sure why it won't stay centered or what I am doing wrong. Right now the thin is set up to stay at the bottom only.
Try this jsfiddle
I know the images aren't actually showing, but it should display as you required.
HTML:
<div class="wrapper">
<table class="copyrightbar">
<tr>
<td class="noborder">
<img class="ledge" src="images\lefthalfcircle.png">
</td>
<td class="noborder" >
<img class="copyrightimg" src="images\copyright.png">
</td>
<td class="noborder">
<img class="redge" src="images\righthalfcircle.png">
</td>
</tr>
</table>
</div>
CSS:
.wrapper {
position: fixed;
bottom: 10px;
width: 100%;
}
.copyrightbar {
margin: 0 auto;
border-collapse: collapse;
border: 0px;
padding: 0px;
}
What is the point to using float:left ? If you want it centered, floating this entire element to the left serves no purpose since it does the exact opposite of what you want.
However, if you want to keep it, then your wrapper div should be given an id, lets say id="footer" then use this css
#footer {
width:400px (not sure if that is too wide or not, you can play around with it until it is the right width)
margin: 0 auto;
}
Add a class or ID to the wrapper div. Then use CSS to place it at the bottom using `position: fixed'.
Then set a width on your table (via CSS) and use the margin: 0 auto declaration you mention above. (Oh and remove position: fixed from the table)
May be because your CSS file has { float: left; }?
Related
What I want is the image to be the same height of the td when the image isn't there, i.e. 300px, not the height of the image src. I can't specifiy the height of the image, td or table since the parent div represents the height of a responsive container. I've spent far too long on this and tried many things and for some reason the image always insists on being its full height.
<div style='height:300px;width:300px;'>
<table style='height:100%;width:100%;'>
<tr>
<td>
<img style='height:100%;width:100%;' src='https://placehold.it/1920x1200'>
</td>
</tr>
</table>
</div>
Try using CSS instead of inline styles. This helps keep your code more flexible. I've set the height and width to be auto and the max-height and max-width to be at 100% so that the image is contained inside the table cell, but also correctly scaled.
.table-container {
height: 300px;
width: 300px;
padding: 5px;
border: 1px solid red;
}
table td {
border: 1px solid blue;
padding: 0;
}
table td img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
<div class='table-container'>
<table>
<tr>
<td>
<img src='https://placehold.it/1920x1200' />
</td>
</tr>
</table>
</div>
Try This, added "overflow: hidden;position: relative;" to parent and "position: absolute;" to child
<div style='height:300px;width:300px;'>
<table style='height:100%;width:100%; overflow: hidden;position: relative;'>
<tr>
<td style='position: absolute;'>
<img style='height:100%;width:100%;' src='https://placehold.it/1920x1200'>
</td>
</tr>
</table>
</div>
output screen
I'm trying to align three images in a class div into a straight horizontal line.
<div class="topimages">
<img src="code/images/image_personallogo.png" alt="personallogo">
<img src="code/images/image_propercorn.png" alt="propercorn">
<img src="code/images/image_christmas.png" alt="christmascard">
</div><!--top images-->
and the CSS so far
.topimages {
display: table;
width: 1024px;
margin: 40px auto;
}
.topimages img {
width:319px;
height:319px;
}
So the problem is that the images are almost perfectly aligned except that there is different space between the second and third image than between the first and second image. This is what I am talking about : http://postimg.org/image/y00x4nvtr/
Anyone knows what cause this and how I can fix it?
Thanks.
The nicest way is to use a table with one tr:
HTML:
<table id="myImages">
<tr>
<td>
<img src="code/images/image_christmas.png" alt="christmascard" />
</td>
<td>
<img src="code/images/image_propercorn.png" alt="propercorn" />
</td>
<td>
<img src="code/images/image_christmas.png" alt="christmascard" />
</td>
</tr>
</table>
To change margin in a table, you must use border-collapse and border-spacing
CSS:
#myImages {
border: 1px solid silver;
padding: 50px;
margin: 0px auto;
border-collapse: separate;
border-spacing: 20px;
}
#myImages img {
width: 320px;
height: 320px;
}
In a table or (display: table) there is no need to set a whole width to use margin: 0 auto to center the element. The width comes from the width of the elements within. And from paddings and margins.
https://jsfiddle.net/ka827L97/
I'm trying to make a simple web interface with a table with two columns:
Left: width 400px
Right: the rest of avalaible width
I think that is very simple, but i can't do it. The more closer that I were from the success was with this code
HTML:
<table id="container">
<tr>
<td style="width: 20%">
<div id="sidebar" style="z-index:1;"></div>
</td>
<td style="width: 80%">
<div id="map_canvas" style="z-index:10;"></div>
</td>
</tr>
</table>
CSS:
#map_canvas {
position: absolute;
min-height: 99%;
height: auto !important;
height: 99%;
_height: 99%;
width: 80%;
}
but always appears the horizontal scroll bar and the map overflows the width of the window
Thanks, and sorry about my bad english...
The scroll is probably for the default margin of the body and also the border of your table. You can try this
HTML
<table id="container">
<tr>
<td style="width:400px">
<div id="sidebar" style="z-index:1;"></div>
</td>
<td>
<div id="map_canvas" style="z-index:10;"></div>
</td>
</tr>
</table>
CSS
* {
padding:0;
margin:0;
}
table {
width:100%;
border-collapse:collpse;
border:0 none;
}
Review this Demo http://jsfiddle.net/pTZKa/
Edit
As an asnwer for your commentary : That happens because you have positon:absolute so he is searching for his closest parent with a non absolute position declared to be positioned. To fix that add this on the css:
table td {
position:relative;
}
New Demo http://jsfiddle.net/pTZKa/4/
I've been trying to align an image to the center of the table td. It worked with setting margin-left to a specific value but it also increased the size of td too and that isn't exactly what I wanted
Is there any efficient ways of doing this? I used percentages for the height and witdh of the table.
<td align="center">
or via css, which is the preferred method any more...
<td style="text-align: center;">
Simple way to do it for html5 in css:
td img{
display: block;
margin-left: auto;
margin-right: auto;
}
Worked for me perfectly.
Center a div inside td using margin, the trick is to make the div width the same as the image width.
<td>
<div style="margin: 0 auto; width: 130px">
<img src="me.jpg" alt="me" style="width: 130px" />
</div>
</td>
This fixed issues for me:
<style>
.super-centered {
position:absolute;
width:100%;
height:100%;
text-align:center;
vertical-align:middle;
z-index: 9999;
}
</style>
<table class="super-centered"><tr><td style="width:100%;height:100%;" align="center" valign="middle" >
<img alt="Loading ..." src="/ALHTheme/themes/html/ALHTheme/images/loading.gif">
</td></tr></table>
Set a fixed with of your image in your css and add an auto-margin/padding on the image to...
div.image img {
width: 100px;
margin: auto;
}
Or set the text-align to center...
td {
text-align: center;
}
<table style="width:100%;">
<tbody ><tr><td align="center">
<img src="axe.JPG" />
</td>
</tr>
</tbody>
</table>
or
td
{
text-align:center;
}
in the CSS file
td image
{
display: block;
margin-left: auto;
margin-right: auto;
}
Another option is the use <th> instead of <td>. <th> defaults to center; <td> defaults to left.
As per my analysis and search on the internet also, I could not found a way to centre the image vertically centred using <div> it was possible only using <table> because table provides the following property:
valign="middle"
I want to keep the tables but use css to achieve the same positioning result with a strict doctype. This is the design that does exactly what I need.
Notice the <br> tags in the last (bottom) <td> cell. As this area grows, the position of the data within two other <td> cells above it do not change position.
<table cellpadding="0" cellspacing="0" border="1" width="400" height="100%">
<tr>
<td valign="top">
<table cellpadding="0" cellspacing="0" border="0" height="100%">
<tr>
<td valign="top">ds</td> <----- The position here is important
</tr>
<tr>
<td valign="bottom">ds</td> <----- The position here is important
</tr>
</table>
</td>
<td valign="top">ada adf ad<br><br><br><br><br><br><br><br><br></td>
</tr>
</table>
I made an example for you here to show you how easy it is to duplicate that table with Divs and CSS:
HTML:
<div id="main-div-wrap">
<div class="left-content">
<span class="top">ds</span>
<span class="bottom">ds</span>
</div>
<div class="right-content">
ada adf ad
</div>
</div>
CSS:
#main-div-wrap
{
position: absolute;
width: 400px;
height: 200px;
border: 1px solid #000;
}
.left-content
{
width: 18%;
float: left;
height: 100%;
}
.right-content
{
margin-left; 18%;
width: auto;
float: left;
height: 100%;
border-left: 1px solid #000;
}
.top
{
position: absolute;
display: block;
top: 0;
}
.bottom
{
position: absolute;
display: block;
bottom: 0;
}
All semantic, no hacks, will validate and if you need to change it for browsers, theres more than enough tools out there to help you.
I'm not sure what you mean with "keep the tables for the structure", but I guess you what something like this, however if the content is too short, then the "top" and "bottom" texts will overlap.
http://jsfiddle.net/HsmKA/
Variant with CSS styled tables:
http://jsfiddle.net/JmQ55/
You can find all you want here.
Coming from a tables word myself I've always found the DIV layout a pain in the a$$.
Check out blue print css its a very easy to use CSS framework. Might sort you out