I can't get right positions for my tables. I have code like this:
<div style="width: 1270px;">
<div>
<table style="float:left>
<tr><td>something1</td></tr>
<tr><td>something2</td></tr>
</table>
<img src="some_sorce">
<table style="float:left>
<tr><td>something3</td></tr>
<tr><td>something4</td></tr>
</table>
</div>
</div>
And I have two problems:
First I want tables to be placed in bottom of containing div. I try some kind of "vertical-align" in some places but it fail for me. Secoundly i want the image to be in center of div, "text-align: center" don't do the trick. Could someone help me anyhow?
Instead of:
<table>
<img src="some_sorce">
it should be:
</table>
<img src="some_sorce">
And by default images have display: inline attribute so You need to do something like:
<img src="some_sorce" style="display: block">
to center image
Related
I need to position this form into place on top of the image in sidebar of my blog posts page:
http://insightcxo.com/category/blog/
Right now the image and the form are in the same container but are below one another.
Your markup has several issues in it. This is what I'm seeing in the provided link:
<td align="center" valign="top">
<a href="http://insightcxo.com/wp-content/uploads/2015/08/blog-form-background.png">
<img class="aligncenter size-full wp-image-1035" src="http://insightcxo.com/wp-content/uploads/2015/08/blog-form-background.png" alt="blog form background" width="370" height="400">
</a>
<p></p>
<table class="bodyContainer webFormBodyContainer" width="100%" cellspacing="0" cellpadding="20" bgcolor="#FFFFFF">
<!-- form is in here -->
</table>
</td>
First, you've got an <a> tag with an <img> in it, which has a height of 400px. So that's pushing your <table> (which includes your <form>) down.
What you want to do is only have that image as a background image, and not a background of an <a> tag. That way, you can nest your <form> inside the container with the background image.
Something along the lines of this:
<div style="background: url('http://insightcxo.com/wp-content/uploads/2015/08/blog-form-background.png');">
<form></form>
</div>
Although a few extra pointers:
Don't use <table> tags for layout purposes. Only use them for actual data tables.
Avoid inline styles (I've done that above just to show you where the background image style should go. Instead, set a class, like .form-container, and apply your styles in a separate CSS file.
Avoid having extra markup. What's that empty <p> tag doing there?
I have this table, which is how it will look when a user posts. When a large amount of content is entered in the second td, the first td does what it should naturally do and center itself with the second one. Here is what it looks like:
http://puu.sh/YdaE
Is it possible to make it so the first td stays at the top and doesn't center itself with the second one? Because it looks kind of silly when it does...
Here is the basic jist the code:
<div id="feed">
<div class="post">
<table>
<tr>
<td><img src="images/profile-pic.jpg"></td>
<td>
<div class="name">Kevin Jones</div>
<div class="message">Hanging out with my girlfriend, etc.</div>
</td>
</tr>
</table>
</div>
</div>
Any help is appreciated, thanks.
Yes, with CSS.
vertical-align: top;
So you could just give a class to your first TD and apply the above-mentioned CSS.
I'm not sure I understood your question, but if you want to prevent the image on the first td to be vertically aligned just specify vertical alignment via HTML attribute as shown here:
<div id="feed">
<div class="post">
<table>
<tr>
<td valign="top"><img src="images/profile-pic.jpg"></td>
<td>
<div class="name">Kevin Jones</div>
<div class="message">Hanging out with my girlfriend, etc.</div>
</td>
</tr>
</table>
</div>
</div>
Add valign="top" attribute to the td tag
I have used <div align="center"> and put the image inside the div tag. Well the image is at the center but not at the middle. The image started from the top of div tag and placing at the center but I want it to be placed at the middle not at the top.
When I googled it I found <td valign="middle">. and its working as I intended and below is what I have designed after googling,
<div align="center" style="width:510px;height:510px;margin-left:300px">
<table style="width:510px;height:510px">
<tr>
<td align="center" valign="middle">
<img id="main" src="dock.jpg" style="max-width:500px;max-height:500px"/>
</td>
</tr>
</table>
</div>
But using a table for these purpose is it harmful ? Because I have tried <div align="center" style="vertical-align:middle"> but does not seem to work as i expected and please let me know if there is a way to do without table ?
You shouldn't be using <div align="center"> either really, its been deprecated:
http://reference.sitepoint.com/html/div/align
This attribute is deprecated. The correct method for aligning a div is
to use the CSS text-align attribute.
I'm not certain on the best way of vertically aligning div's (although you may find this article worth reading), but I know that you are right, you shouldn't use tables as a solution. Table should only be used when creating a table of data results for example, never layout purposes.
This will help you i think so:
just give #to div. and then style it in CSS as follow:
position: absolute;
left: 50%;
right: 50%;
width: _px;
height: _px;
margin: half of the width, half of the height;
Try this. May help you.
<div style="width:510px;height:510px;border:1px solid;margin:auto;">
<table style="width:100%; height:100%;">
<tr>
<td align="center">
<img id="main" src="wp1.JPG" style="max-width:300px;max-height:300px;"/>
</td>
</tr>
</table>
</div>
I have two tables. One above the other. I want to move the bottom table to the right of the top table. Right now when I run the server, the top table is positioned above the bottom table. Is there a way to move the bottom table to the right side of the top table?
<table>
<tr><th>Type</th><th>Quantity</th></tr>
</tr><td>Tape + Film</td><td>{{total_tape_and_film_items}}</td></tr>
</tr><td>Electrical Equipment</td><td>{{total_electrical_equipment_items}}</td></tr>
</tables>
<table>
<tr><th></th><th>Status</th><th>Quantity</th></tr>
<tr><td><a id="new_client" href='{% url tiptop.views.in_items client.pk%}'/>View</a></td><td>In</td><td>{{in_items|length}}</td</tr>
<tr><td><a id="new_client" href='{% url tiptop.views.out_items client.pk%}'/>View</a></td><td>Out</td><td>{{out_items|length}}</td</tr>
<tr><td><a id="new_client" href='{% url tiptop.views.empty_items client.pk%}'/>View</a></td><td>Empty</td><td>{{empty_items|length}}</td</tr>
</table>
Change <table> to <table style="float: left">
After the last </table> add <div style="clear: both"></div>. This is to make sure nothing goes to the right of the second table.
Set both tables to have a fixed width and then float them using CSS:
table { float:left; width:400px; }
Something like this should work:
<div style="width: 400px;">
<div style="width: 200px; float: left;">
<table>
<tr><th>Type</th><th>Quantity</th></tr>
</tr><td>Tape + Film</td><td>{{total_tape_and_film_items}}</td></tr>
</tr><td>Electrical Equipment</td><td>{{total_electrical_equipment_items}}</td></tr>
</tables>
</div>
<div style="width: 200px; float: left;">
<table>
<tr><th></th><th>Status</th><th>Quantity</th></tr>
<tr><td><a id="new_client" href='{% url tiptop.views.in_items client.pk%}'/>View</a></td><td>In</td><td>{{in_items|length}}</td</tr>
<tr><td><a id="new_client" href='{% url tiptop.views.out_items client.pk%}'/>View</a></td><td>Out</td><td>{{out_items|length}}</td</tr>
<tr><td><a id="new_client" href='{% url tiptop.views.empty_items client.pk%}'/>View</a></td><td>Empty</td><td>{{empty_items|length}}</td</tr>
</table>
</div>
<div style="clear: both;"></div>
</div>
You should move the CSS to your stylesheet instead if you apply this to production. Good luck.
If you don't have to support IE<8, you can set display: inline-block on the tables. This will make them behave like inline elements on the outside, but block-level elements on the inside. You'll also want to explicitly set the table widths, as well as the width of the containing block, unless you want the second table to pop below the first one when there's not enough room.
I have two buttons on a webpage, I am trying to make the Clear button be a little lower, to align with the Search button. Why is the Clear button so high?
Here is a live example: http://www.davidjpotter.com/temp/test.php
<table border=1>
<tr>
<td>
<button type="submit">Search</button>
<img src="../images/button-clear.png">
</td>
</tr>
</table>
Replace this:
<img src="../images/button-clear.png">
with this:
<img src="../images/button-clear.png" style="vertical-align: bottom; ">
It's high because the default value of the vertical-align CSS property is baseline. This applies to all elements with display: inline, which includes <img> elements.
Try instead setting it to middle:
<img src="../images/button-clear.png" style="vertical-align:middle" />
This has to do with vertical alignment of the image which is an inline element and it's set to the baseline. Add 'vertical-align:bottom' to line them up.