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
Related
I'm trying to create a table where in every cell, there is a small coloured square next to a text.
However, I want the square and the text to be on the same line, and I cannot do it.
Sadly I'm not a css or html master, I've tried many alignment options I found on this and other sites, but none of them worked.
You can look at a minimal example below to understand what I'm talking about.
Is there any way to do it in css? Thank you
.badge{
background-color: #000000;
width: 1em;
height: 1em;
border-radius: 25%;
}
<html>
<body>
<table border="1">
<tr>
<td>
<div class="badge"></div> not horizontally aligned text
</td>
</tr>
</table>
</body>
</html>
Instead of nesting a <div> for the badge, you could create a ::before pseudo element for each <td> and make it inline-block so the pseudo element stays inline with the text content. This way you can ensure each table data element will have the small colored square before the cells text content.
.badge::before {
content: "";
background-color: #000000;
width: 1em;
height: 1em;
border-radius: 25%;
display: inline-block;
vertical-align: middle;
}
/* Optionally, give the cells different colors */
.badge.two::before {
background-color: #ae7;
}
.badge.three::before {
background-color: #f06;
}
<html>
<body>
<table border="1">
<tr>
<td class="badge one">
some text in cell 1
</td>
<td class="badge two">
some text in cell 2
</td>
<td class="badge three">
some text in cell 3
</td>
</tr>
</table>
</body>
</html>
If you instead want to keep the same HTML structure, you could make the <td> a flexbox with display: flex to ensure the content is aligned in a row format (side-by-side). Using align-items will define how items are aligned along the cross axis.
.badge{
background-color: #000000;
width: 1em;
height: 1em;
border-radius: 25%;
}
td {
display: flex;
align-items: center;
}
<html>
<body>
<table border="1">
<tr>
<td>
<div class="badge"></div> not horizontally aligned text
</td>
</tr>
</table>
</body>
</html>
Use flexbox:
.badge {
background-color: #000000;
width: 1em;
height: 1em;
border-radius: 25%;
margin-right: 1em;
}
td {
display: flex;
align-items: center;
}
<html>
<body>
<table border="1">
<tr>
<td>
<div class="badge"></div>horizontally aligned text
</td>
</tr>
</table>
</body>
</html>
I'm trying to get my text to align with the top of the image in the cell beside it. Vertical-align top doesn't seem to be working? I think currently it's trying to center itself relative to the other cell. Maybe there's a better way to do this with floats or something?
Here's the CSS:
table#body1 {
padding: 0px;
vertical-align: top;
margin-bottom: 10px;
margin-top: 5px;
}
td#images {
width: 30%;
}
td#text {
width: 70%;
padding-left: 15px;
text-align: justify;
vertical-align: top;
}
And the HTML: (all the divs are inline-block elements if that makes a difference)
<table id="body1">
<tr>
<td id="images"><img class="halfimg1" src="titania2.jpg" alt="Queen Titania"><br></td>
<td id="text">
<div id="header">Wander in these woods.</div><br>
This is some Text.<br>
<div id="caption"><br>This is my caption.</div>
</td>
</tr>
</table>
Thanks in advance for helping!
Add vertical-align: top; to td#images as well.
Keeping in mind the comment I made above, you probably want to move the vertical-align: top; rule from td#text to td#images
jsFiddle example
I want to make a formatted paragraph whose image is located in left, the text is located in right with CSS.
However, it looks good when I type a single line text, but the top position is changed when I type two-line text or more.
Its source is on
http://jsfiddle.net/RXrvZ/1883/
and the main part of CSS is:
.post-container {
margin: 20px 20px 0 0;
border: 1px dotted #333;
overflow: auto;
}
.greenbox {
display: block;
border: 1px dotted #383;
width: 100%;
}
.redbox {
display: inline-block;
border: 1px dotted #f33;
width: 70%;
height: 100px;
}
.redbox10 {
display: inline-block;
border: 1px dotted #f33;
width: 20%;
height: 100px;
}
And its HTML code is like:
<div class="greenbox">
<div class="redbox10">
<img src="#">
</div>
<div class="redbox">
One Line Text
</div>
</div>
How can I place the top line same whatever I type in?
Thanks for your help.
Set the left column to align at the top.
.redbox10 {
vertical-align: top;
}
JSfiddle
You need to specify vertical align to be top:
.redbox, img{
display: inline-block;
vertical-align: top;
}
Here's the updated demo
you should use float:
.redbox {
float: left;
}
.redbox10 {
float: left;
}
you can give them a margin for some space.
Demo
Demo With Margin
This could be rather simplified if made using a table.
I hope this helps.
.mainTable{
padding: 10px;
}
.outerRow{
padding: 10px;
}
.imageColumn{
border: 1px solid;
padding: 10px;
vertical-align: top;
}
.textColumn{
border: 1px solid;
padding: 10px;
}
<div class="container">
<table class="mainTable">
<tr class="outerRow">
<td class="imageColumn">
<img src="#"/>
</td>
<td class="textColumn">
One Line Text
</td>
</tr>
<tr class="outerRow">
<td class="imageColumn">
<img src="#"/>
</td>
<td class="textColumn">
Two Lines Text - rai oda bi iod ieo idooosido oiojs oijodif oijoa oijsdf
</td>
</tr>
<tr class="outerRow">
<td class="imageColumn">
<img src="#"/>
</td>
<td class="textColumn">
Three Lines Text - rai oda bi iod ieo idooosido oiojs oijodif oijoa oijsdf hello hello hello hello hello hellohellohellohellohellohello
</td>
</tr>
</table>
</div>
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; }?
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