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
Related
I'm trying to get the text to display over each individual image, I can't figure out why it's not displaying at all. From what I can tell I don't have the text hidden or anything, it's just not displaying on top of the corrisponding images.
I'm very new to html/css so i'm proberly missing someting quite obvious.
<html>
<body>
<table class="index">
<tr>
<td>
<img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Care-Guide.jpg">
Care guides
</td>
<td>
<img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Prop.jpg">
Propagation
</td>
<td>
<img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Trouble.jpg">
Troubleshooting
</td>
</tr>
<tr>
<td>
<img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Easy.jpg">
Easy plants
</td>
<td>
<img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Pilea.jpg">
Pilea
</td>
<td>
<img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Pets.jpg">
Pets & plants
</td>
</tr>
</table>
</body>
</html>
table.index{
table-layout: fixed;
border-spacing: 25px 35px;
font-size: 20px;
color: #575151;
padding-left: 180px;
padding-right: 180px;
}
table.index td {
height: 220px;
width: 360px;
min-width: 200px;
position: relative;
border: 1px solid black;
background-color: #575151;
vertical-align: middle;
text-align: center;
}
table.index td img {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
div.index {
width: 100%;
}
You should put your text in an HTML element for example p tag: <p>Easy plants</p>
Give the p element a relative position: position: relative;
This will position it over the absolutely positioned image.
If you happen to change the order of the images and the text elements later, you should give the text elements a higher z-index value than the images.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I have a problem, I would like to put the qr code close to the margin, but I can't remove that white margin. I'm generating it as follows:
<table>
<tr>
<td>
<img src="https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl={link}">
</td>
</tr>
</table>
How can I do it?
I cropped your qr code by moving it into div, which is smaller and positions image outside its boundary. Thanks to the overflow hidden, the contents of the image, outside div is cropped.
.wrapper {
overflow: hidden;
position: relative;
width: 140px;
height: 140px;
}
.wrapper > img {
position: absolute;
top: -30px;
left: -30px;
}
<table border=1>
<tr>
<td>
<div class=wrapper>
<img src="https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl={link}">
</div>
</td>
</tr>
</table>
The white space around the QR code is the margin created by default. You can manage it by passing the chld parameter in your URL.
chld=<error_correction_level>|<margin>
The error_correction can be set to "L", which is also by default L, if you don't pass the chld parameter. And the margin can be any number, remember it is rows not pixels.
So by changing your code to the below will get your desired result.
https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl={link}&chld=L|2
Try changing the number after | in the above code and you'll know the difference.
For reference, go to Google Charts and see the chld=<error_correction_level>|<margin> section.
Thanks
<table border=1>
<tr>
<td>
<div class=wrapper>
<img src="https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl={link}&chld=L|2">
</div>
</td>
</tr>
</table>
img {
object-fit: none;
width: 150px;
height: 150px;
}
I use the same code for generating QR code for my website but i am not getting any margin like that,
instead of using Wrapper and CSS use Style for margins and change chs = 140x140 in the URL.
<img src="https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl={"Link"}&choe=UTF-8" class="card-img" id="myImg" alt="QR Code" style="float:right;margin-right:15px;"/>
.qr {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid green;
width: 150px;
height: 150px;
}
.qr img {
z-index: -1;
}
<table>
<tr>
<td class="qr">
<img src="https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl={link}">
</td>
</tr>
</table>
This white margin is a part of image which is generated, So If you want to remove white space from image you need to crop that image, and for that you can try this.
.cropImg {
width: 150px; /* width of container */
height: 150px; /* height of container */
overflow: hidden;
border: 5px solid black;
}
.cropImg img {
margin: -35px -35px -35px -25px;
}
<table>
<tr>
<td class="cropImg">
<img src="https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl={link}">
</td>
</tr>
</table>
I'm struggling to get my 3 tables to be centered in the page.
Here's a picture of what it looks like currently:
Basically (from look at the image), I want the second/middle table ("Work" table) to be the only table in center, and the other 2 tables ("About" and "Collaborate" tables; left and right from the middle, respectively) to have spread out a bit (using margin, I would assume).
Here's my HTML:
.fixedWidth2 {
margin: 0 auto;
width: 1000px;
height: 350px;
background-color: green;
border: 2px solid yellow;
}
.tableProp1 {
width: 200px;
float: left;
margin-left: ;
}
.tableProp1 tr td {
height: 200px;
color: red;
}
.tableProp2 {
margin-left: 40px;
width: 200px;
float: left;
}
.tableProp2 tr td {
height: 200px;
color: pink;
}
.tableProp3 {
margin-left: 40px;
width: 200px;
float: left;
}
.tableProp3 tr td {
height: 200px;
color: blue;
}
<div id="mainContent">
<div class="fixedWidth2">
<table class="tableProp1" border="1">
<tr>
<th>About</th>
</tr>
<tr>
<td>Learn more about me and my accomplishments.</td>
</table>
<table class="tableProp2" border="1">
<tr>
<th>Work</th>
</tr>
<tr>
<td>I tend to get involved with a lot of different projects. Ranging from a simple photoshop gig to having a small role in a television/pilot</td>
</tr>
</table>
<table class="tableProp3" border="1">
<tr>
<th>Collaborate</th>
</tr>
<tr>
<td>Have a brand new or idea of a project? Whatever help you may need, I may be of some assistance to</td>
</tr>
</table>
</div>
<!-- Fixed Width 2 DIV for Main Content DIV -->
</div>
<!-- mainContent DIV -->
Since you are using fixed widths for your tables and you're floating them, I would wrap them in a container, set the width on that to match all three tables+margin and set margin: auto on the container
.table-wrapper{
width: 680px;
margin: auto;
}
JSFIDDLE
Alternatively you can just use display: inline-block instead of float:left and add text-align: center to .fixedWidth2
ALT FIDDLE
I would not use <table> at all... table are good for tabular content, not for templating....
I would use DIV or even HTML5's <article> and <section>.
Think also about SEO, <h2> is a better mirror to your website semantic toward search engines than table's TH ...
To center three elements you can simply set them display: inline-block; with some vertical-align, than just setting the <div class="centered"> to text-align: center; will center-align your inner elements. You can also use float:left; but I've not covered that example.
http://jsbin.com/roruqo/1/
<div id="container">
<div id="slider"></div>
<div id="mainContent">
<div class="centered">
<div class="fixedWidth2">
<h2>About</h2>
<p>Learn more about me and my accomplishm...</p>
</div>
<div class="fixedWidth2">
<h2>Work</h2>
<p>I tend to get involved with a lot of d...</p>
</div>
<div class="fixedWidth2">
<h2>Collaborate</h2>
<p>Have a brand new or idea of a project?...</p>
</div>
</div>
</div><!-- mainContent DIV -->
</div>
h2, p{
padding:15px;
margin:0;
}
#container{
width:960px;
margin:0 auto;
background:#eee;
}
#slider{
background:blue;
height:400px;
}
.centered{
text-align:center;
}
.centered > div{
text-align:left;
}
.fixedWidth2{
min-height:170px;
background:#ddd;
display:inline-block;
vertical-align:top;
width: 250px;
margin: 15px;
}
.fixedWidth2 h2{
text-align:center;
background:#aaa;
}
<div id="mainContent">
<div class="fixedWidth2">
<div class="row">
<table class="tableProp1" border="1">
<tr>
<th>About</th>
</tr>
<tr>
<td>Learn more about me and my accomplishments.</td>
</table>
<table class="tableProp2" border="1">
<tr>
<th>Work</th>
</tr>
<tr>
<td>I tend to get involved with a lot of different projects. Ranging from a simple photoshop gig to having a small role in a television/pilot</td>
</tr>
</table>
<table class="tableProp3" border="1">
<tr>
<th>Collaborate</th>
</tr>
<tr>
<td>Have a brand new or idea of a project? Whatever help you may need, I may be of some assistance to</td>
</tr>
</table>
</div>
</div>
</div>
add this style in style sheet
.row {
margin: 0 auto;
width: 680px;
}
add "row " division and apply this style then check it's working properly.
Here is the html code that makes the table:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="profile">
<img src="http://www.teleread.com/wpcontent/uploads/2009/05/image18.png" />
</div>
</td>
<td>Hello</td>
</tr>
</table>
Here is the css:
.profile img {
width: 120px;
height: 125px;
float: left;
margin-right: 4px;
margin-top: 4px;
margin-bottom: 4px;
border: 1px #cc1212 solid;
clear: both;
}
Here is the code in action on jsfiddle:
http://jsfiddle.net/Yeqnn/
THE ISSUE: The word "Hello" is vertically centered in the right column
How do I fix this? BTW, the image has to be in the table and floated left to work with my current theme... any ideas, if so drop an answer plz.
Simply put vertical-align: top; on your <td> elements.
Demo
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; }?