SOLVED by P. Leger:
In my CSS I simply added/changed the vertical-align to top.
This worked for me
I am developing a simple schedule where the admin can manage users and add users to a specific date.
I want the '+' icon at the top of <td> inside a <table>.
Because if there are 3 people planned in on Monday and there are 2 people planned in on thuesday, the icons will be outlined by each other.
This is how it is right now:
You see the red line is straight if there are an equally number of values in a table
This is how I want it (photoshopped):
The red lines are in all rows straight.
The red lines are just an indication on how I want it to be (because in real they aren't there of course).
My code right now inside the <td></td>:
echo '<img src="../rooster/images/add.png" width="15" align="left" class="imgtable"><br/>
</div>';
And the class imgtable:
.imgtable {
float:top;
}
I tried every position and float. But I just need something that the image is fixed inside the table.
Currently I am just using a simple image, but I prefer using a font awesome icon.
I hope that you will understand my question.
Thanks for reading
Just position the icon absolutely and make sure the cell (, or whatever the icon's parent is) is positioned relatively. Then you can position the icon with left/right, and top/bottom.
<td style="position relative...">
<img src="..." style="position: absolute; left: 5px; top: 5px">
</td>
that should position them all in the same spot relative to their parent (the table cell).
Example: https://jsfiddle.net/silvertail/cej23cbh/
There is no float: top.
float: left | right | none | inherit
I think, you don't want the <a ...><img src=... /></a> fixed, but at the top of <td>. Therefore you have to access the <table> id or class. And from there the <td>. And set vertical-align: top.
HTML
<table id="myTable">
<tr>
<td>box</td>
...
</tr>
...
</table>
CSS
#myTable td {
vertical-align: top;
}
Example
Related
If I have HTML like this:
<table>
<tr>
<td>
<img src="a.png">
</td>
<td>
<p>Sunday</p>
<p>Sunday</p>
<p>Sunday</p>
<p>Sunday</p>
<p>Sunday</p>
</td>
</tr>
</table>
The second column can have a variable number of paragraphs, so the height will be different. Whatever height the row is, I want the image to be that height. I tried this:
img {
height: 100%;
}
but it didn't seem to do anything. I would like to avoid changing the HTML if possible, can I do this with only CSS?
So the reason I wanted to increase the height of the image, was because the
second column can be much larger, which pushes the image way down with the
default table vertical centering. Instead of focusing on the image size, I
instead just moved the image to the top:
td {
vertical-align: top;
}
If someone has a solution to the original question I am still interested, but
this should do as a workaround.
I have created a couple of tables. now i need both tables to be next to each other and not one table on top of each other. how can i position the second table next to the first one (to the right) but with sufficient space in between?
this is some code of my second table:
<table>
<h3>Personaldaten</h3>
<tr>
<td>Externe Referenz:</td>
<td colspan="2">
<input class="LargeText" type="text" style="width: 150%">
</td>
</tr>
<tr>
<td>Titel:</td>
<td colspan="2">
<input class="LargeText" type="text" style="width: 150%">
</td>
</tr>
above are 2 entities from the first table, how do i proceed like this?
Try to use a wrapper around the tables and use float:left;
//margin: top right bottom left
<div style="width:500px; margin: 30px 0px 0px 320px">
<table style="width:240px; float:left; margin-right:20px;">
</table>
<table style="width:240px; float:left;">
</table>
</div>
get rid of your absolute positioning if you don't really need it and use CSS like
table{
float:left;
margin:0px 5px;
}
You have two choices really.
If you're happy creating your layout with tables, then put both of your tables within another table. i.e.
<table>
<tr>
<td>
<table>{ table 1 stuff }</table>
</td>
<td>
<table>{table 2 stuff }</table>
</td>
</tr>
</table>
Or you can start looking into 'float'ing your elements.
You can create a new table with 1 row and 2 columns and place your first table inside the first column and your second table inside the second column.That way both tables can be displayed side by side
If it were me, I would surround your tables in a div layer, specifying the width and height of the div layer to force the tables next to each other.
For example:
<div id="tablecontainer">
<table id="lefttable"></table>
<table id="righttable"></table>
</div>
And in the CSS:
table
{
margin: 5px;
}
#lefttable
{
float: left;
}
Obviously, this code isn't going to be exactly what OP wants, but you get the idea.
Either use float: left or display: inline-block.
#1:
table {
margin: 10px;
float: left
}
#2:
table {
margin: 10px;
display: inline-block
}
See http://shaquin.tk/experiments/tables2.html and http://shaquin.tk/experiments/tables3.html.
First, fix the syntax and styling. A table element cannot have an h3 child. Either put the h3 inside a cell (which is inside a tr), or turn it to a caption. Don’t set a width of 150%, as this would make the a cell occupy 150% of the width of the available space. The width of an input field set is best set in characters, using the size attribute in HTML.
Then you can float the tables in CSS as suggested in other answers, or by using align=left in table tags. To create horizontal spacing between the tables, you can set e.g. margin-right on the first table.
Note that for usability and accessibility, forms should normally be presented so that there is one input item with its label on one line, so that filling out the form proceeds vertically in a simple manner. So you might be solving the wrong problem.
I recently applied a hover feature to a set of buttons. When applied to a different website the coding was fine. When applied to this site the link/hotspot goes to the next button. For example: I have buttons home/about/gallery/blog/prints/contact and you would think with the dimensions set in CSS style sheet that the link would only apply to those dimensions. Not with this one. The link/hotspot shows linked to index.shtml from the edge of the table to the other side of the home button. There are spaces between buttons but the link/hotspot goes 50%across the space until it hits the next buttons link/hotspot. And the final button "contact" spans across to the opposite edge of the table. Any clues as to what I am doing wrong?
CSS:
div.nav-home {
margin-top: 10px;
margin-bottom: 0px;
margin-left: 130px;
Margin-right: -60px;
background-position: right top;
background-repeat: no-repeat;
width: 75px;
height: 64px;
}
#home {
background-image: url('img/home.png');
}
#home:hover {
background-image: url('img/home_hover.png');
}
Index.shtml:
<table width="1213" height="64" align="center" background="img/tablebg2.png">
<!--#include file="menubuttons.html" -->
menubuttons.html:
<tr>
<td align="center" width="75">
</div>
</td>
<td align="center" width="86">
</div>
</td>
<td align="center" width="94">
<a href="/gallery.shtml" title="GALLERY" ><div id="gallery" class="nav-gallery">
</div></a>
</td>
<td align="center" width="63">
</div>
</td>
<td align="center" width="85">
<a href="/prints.shtml" title="PRINTS" ><div id="prints" class="nav-prints">
</div></a>
</td>
<td align="center" width="103">
<a href="/contact.shtml" title="CONTACT" ><div id="contact" class="nav-contact">
</div></a>
</td>
</tr>
FIXED: (maybe not properly?)
I have only been coding for 2 months and have a pretty good idea on how to write it out, but I don't know what everything means such as the DIV tag. I know I was searching on here last night and I assumed I was to put the div inside a TD.
I was able to fix everything by simply adding a few spacer.png's before the first button in between each set of buttons and after the last button. This also fixed my spacing issues on the sides.
Thanks for the help. I simply am trying to find an easy way to make my buttons change on hover. This method was the first I found last night on here and am now trying to perfect it.. well in my head at least. I need to research on the unordered list a little because I have heard that that makes things more simple...
Here is the link(based off the back end of a site I recently finished) www.blackmarkettattoos.com/amysesco/index.shtml
I think the problem is the fact that you are using DIV, which is a container tag inside table's cell, and for both you apply style (to the DIV as class and to the TD as inline).
Generally, it is better to create menus with lists, but if you must use the code you provided, then try to remove width: 75px; from the div.nav-home.
Check these two links for how to create CSS menus with lists:
css.maxdesign.com.au
Dynamic Drive CSS Library
I have a HTML table, I would like to show an image as the content of a <td> element, and make the image occupy the whole <td> content area, so, I did the following thing:
<td id="my-img">
<img border="0" src="images/my.png" alt="Logo" width="60px"/>
</td>
I also used CSS to define the width of <td> which has the same width value as the <image> tag:
#my-img{
width: 60px;
}
But, the image does not occupy the whole <td> area, there are white spaces around the image always, why? how to get rid of it? (I am sure the white spaces are not from the PNG image file)
Try what Nick Brunt wrote, but also include the following for the css for the image:
margin: 0px;
Two things:
Firstly, when defining width as an attribute of an html tag, you don't need the px, just width="60" will do.
Secondly, the spaces around the image are probably caused by padding around the table cell. Add this CSS:
#my-img{
width: 60px;
padding: 0px;
}
As a side note, simply changing the width of the picture will cause it to stretch, you need to make sure you change the height as well otherwise the aspect ratio will be off.
Table cells have padding on them by default, which pushes the content in from the border.
You can either do:
<table cellpadding="0">
or you can do
<td style="padding: 0">
Depending on if you want to apply the zero padding to all table cells or just that specific table cell.
Also, providing the entire table in your question might allow us to help you further.
Try a different doctype for your html document:
http://www.w3schools.com/tags/tag_doctype.asp
XHTML sometimes solves similar problems.
If this doesn't help, consider using my.png as a background with background-repeat: no-repeat css style.
#my-img{
width: 60px;
background: no-repeat url(images/my.png);
}
I'd like to make a (non-numbered or bulleted) list of items, where each item has some text that is adjacent to an image. It's important that the text be vertically aligned to the center of the image, and that there will enough top and bottom padding so that each pair of text and image do not vertically overlap. I tried using something like this:
img.floatRight { float: right; margin-bottom: 2px; border: 0px; vertical-align: text-middle}
.myitem { font-size: 12pt; margin-bottom: 50px; margin-top: 130px; vertical-align: middle}
in body of HTML page:
<!-- item 1 -->
<img src="item1.jpg" class="floatRight"><p class="myitem">Description of item 1</p>
<!-- item 2 -->
<img src="item2.jpg" class="floatRight"><p class="myitem">Description of item 2</p>
the problem is that the items overlap -- so the images are not vertically aligned which each other, which i'd like them to be. the margin-top and margin-bottom don't seem to add the right level of padding to achieve this. also, the vertical-align parameter does not seem to vertically align the text to the center of the image.
finally, I'm not sure if I should use p class="" or div class="" here... again, it's important not to have overlap between each items'
any ideas on how to fix this? thanks very much.
I would start with putting the images inside the p.myitem block and giving it a:
p.myitem {
overflow: hidden;
}
That should take care of the overlap.
About the vertical align of the images and the text, that can be tricky using css. If the vertical-align solution does not work and you know the height of the images and it is only one line of text, the easiest solution is giving the paragraph a line-height equal to the images.
Vertical aligning things without using tables is a pain in the butt! You're better off using a table for this. Are your images all using the same width? If not, you can remove the fixed width in td.item_photo{} and td.item_photo img{}. Also you can change table.items width from auto to 100% or a px amount (eg: 400px) if you want.
I hope this helps solve your problem.
table{margin:0;padding:0;border-collapse:collapse}
table.items{width:auto}
td.item_photo{vertical-align:middle;text-align:left;width:200px;padding:0 0 15px 15px}
td.item_text{vertical-align:middle;text-align:left;padding:0 0 15px 0;font-size:12px;line-height:16px}
td.item_photo img{display:block;width:200px}
<table class="items">
<tr>
<td class="item_text">Item 1 Description</td>
<td class="item_photo"><img src="/images/item1.jpg" /></td>
</tr>
<tr>
<td class="item_text">Item 2 Description</td>
<td class="item_photo"><img src="/images/item2.jpg" /></td>
</tr>
</table>