I have an image and text beside it with this code. A sample can be seen here:
The problem is that the text is starting from the center of the image (on the right side) whereas i want the text to start from the top right-hand side of the image.
Here is my code:
<table width="550">
<tr>
<td>
<div id="i1">
<img src="<? echo $row_array[3];?>" height="225" width="225">
</div>
</td>
<td>
<div id="i2">
<span style="position: relative; top: 0px; left: 0px;">
<? echo $row_array[4];?>
</span>
</div>
</td>
</tr>
<tr></tr>
<?} ?>
</table>
I have even tried to remove span but it still shows the same way.
i1 in css: margin-left:0px;
i2 in css:
#i2
{
display: inline;
margin: 0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
I think, unless I'm missing something, that the following should achieve your aims:
td {
vertical-align: top;
}
This will obviously apply to all tds, so you may wish to specify a particular class or id.
Add valign="top" attribute to the <td> that contains the text.
Related
I have a very simple situation that I can't for some reason resolve. In ASP.NET I am trying to align the textbox inside the inline table with the text so that the text will point at the middle of the textbox, not at its foundation
Here is the markup
<span style="margin-bottom:10px">This is the text</span>
<table class="inlineTable" border="1">
<tr>
<td style="vertical-align:bottom;padding: 0; margin: 0;">
<input name="TextBox1" type="text" id="TextBox1" />
</td>
</tr>
</table>
Here is the css
.inlineTable {
display: inline-table;
padding: 0;
border-spacing: 0;
border-collapse: collapse;
}
Here is how it looks
As it is seen in the attachment, the text points at the base. How can I move the textbox a bit down so that the text would point to the middle of the left side?
Thank you very much in advance
try vertical-align:middle on the table
.inlineTable {
display: inline-table;
padding: 0;
}
table{
vertical-align:middle;}
<span >This is the text</span>
<table class="inlineTable" border="1">
<tr>
<td style="vertical-align:middle;padding: 0; margin: 0;">
<textarea ID="TextBox1">hi</textarea>
</td>
</tr>
</table>
I want to display a vertical text on the header of a table; the header has a fixed height. And I want to hidden the overflow too.
My html is:
<table border='1px solid black'>
<thead>
<tr style='font-weight:bold; color:blue'>
<td width="60"> Data </td>
<td width="35"> Voto </td>
<td width="50"> Tipo </td>
<td width="10"> I </td>
<th style="color:red; height:200px; vertical-align:bottom" width="20">
<span>
<div style="width:100%;height:100%;overflow:hidden;"> Hi everybody </div>
</span>
</th>
<td> Annotazioni </td>
</tr>
</thead>
</table>
And my CSS:
table
{
border-collapse:collapse;
table-layout: fixed;
width: 400px;
}
th span {
writing-mode: tb-rl;
filter: flipv fliph;
-webkit-transform:rotate(-90deg);
white-space:nowrap;
display:block;
}
I have a problem: it appears only a couple of letters of the vertical text. Why?
Here you can see better: Example
Thank you very much for your help!
This seems like a strange layout for a table, and I'm not sure of the use case. Therefore, I'm not sure how flexible it needs to be, but adding this to th span fixes your example:
width: 200px;
text-align: center;
margin-left: -90px;
Also, add vertical-align: middle; to its containing th.
http://jsfiddle.net/m7nfU/22/
Remove overflow: hidden on the div encasing "Hi Everybody" which is hiding the rest of the letters.
<th style="color:red; height:200px; vertical-align:bottom" width="20">
<span>
<div style="width:100%;height:100%;">Hi everybody</div>
</span>
</th>
Then add, vertical-align: middle to the parent <th>, I further had to add a negative margin to make "Hi Everybody" to match the centre, as the text string started from the centre origin.
Fiddle: http://jsfiddle.net/m7nfU/24/
I searched a lot, but now want to ask because I found no answer:
If have two div elements that should be located next to each other with full width (each exactly 50% of the full width). It could be that the first or the second div is hidden (style="display=none"). In this case the other div should be displayed in full width.
My solution is this:
<table style="width: 100%;">
<tr>
<td style="padding: 0px;">
<div id="div1">
...
</div>
</td>
<td style="padding: 0px;">
<div id="div2">
...
</div>
</td>
</tr>
</table>
That works almost perfect, BUT when both divs are displayed the first one seems to be 55% and the second one 45% of the width.
If course I can set the width of the div when hiding the other to 100%, but I want to avoid doing that.
Does anyone have a solution to make them both 50% when both are displayed.
A JQuery approach with no tables
You can achieve this with JQuery (or plain javascript) which I am assuming you are using to show/hide the elements anyway.
$("#ButtonOne").click(function () {
$(".one").toggle();
if($(".one").is(":visible")){
$(".two").css("width", "50%");
}
else{
$(".two").css("width", "100%");
}
});
$("#ButtonTwo").click(function () {
$(".two").toggle();
if($(".two").is(":visible")){
$(".one").css("width", "50%");
}
else{
$(".one").css("width", "100%");
}
});
The above JQuery assumes two buttons for toggling the visibility of the elements.
Here is an example
With the example, it should be noted that using 50% width with inline-block requires zero whitespace in between the elements. Hence the </div><div... requirement.
You will need some vertical-align:top; aswell to ensure the DIV elements stay in line.
Incase the link ever breaks, here is the accompanying HTML...
<div class="main">
<div class="one">this is one</div><div class="two">this is two</div>
</div>
<input type="button" id="ButtonOne" value="Toggle one" />
<input type="button" id="ButtonTwo" value="Toggle two" />
...and CSS...
body{
margin:0;
padding:0;
}
div{
margin:0;
padding:0;
}
.one {
background-color:red;
height:100px;
width:50%;
display:inline-block;
}
.two {
background-color:blue;
height:100px;
width:50%;
display:inline-block;
}
Can you place both divs in the same table cell?
<table style="width: 100%;">
<tr>
<td>
<div id="div1">
...
</div>
<div id="div2">
...
</div>
</td>
</tr>
</table>
You could simply toggle a class....
table { width: 100%; padding:0; }
td { padding:0; margin:0; }
td > div { width: 50%; display: block; float: left; height: 50px; cursor: pointer; }
#div1 {background: #a00;}
#div2 {background: #00a;}
.wide {width: 100%;}
.hide { display: none;}
and the jquery...
$('div').click(function () {
$(this).toggleClass('wide');
$('div').not(this).toggleClass('hide');
});
DEMO HERE
Would work for multiple divs easily: demo 2
Use table-layout:fixed:
EDIT:
You have to set the display:none on the td, not on the div.
<table style="width: 100%; table-layout:fixed">
<tbody>
<tr>
<td style="padding: 0px; width:50%">
<div id="div1" style="border: 1px solid black">
This is a long text This is a long text This is a long text This is a long text This is a long text This is a long text This is a long text This is a long text This is a long text This is a long text
</div>
</td>
<td style="padding: 0px; width:50%; display: none;">
<div id="div2" style="border: 1px solid black">
This isn't as long as the other text.
</div>
</td>
</tr>
</tbody>
</table>
I've tested it on Chrome, Firefox and IE10
ok guys,
thanks for your help. now i found what i was searching for:
<table style="width: 100%;">
<tr>
<td id="td1" style="padding: 0px; min-width:50%;">
<div>
...
</div>
</td>
<td id="td2" style="padding: 0px; min-width:50%;">
<div>
...
</div>
</td>
</tr>
</table>
both td tags are next to each other and both take exactly 50%. when hiding td1 or td2, the other td goes into full width automatically.
best regards...
You can achieve this by setting width in the td itself, and when you want to hide any one div just add "display:none;" in the specified td instead of the div, then the remaining div will have 100% width.
<table style="width: 100%;">
<tr>
<td style="padding: 0px; width:50%;">
<div id="div1" >
hii
</div>
</td>
<td style="padding: 0px;width:50%;">
<div id="div2" style="">
byyee
</div>
</td>
</tr>
</table>
I know this is similar to my other question but I made it too hard to understand so I have made this one
I have two tabs:
"Search" and "Tags"
"Search" is the default tab so I have a rounded edge box in the table behind the text BUT not as a background
I want this rounded edge box to be behind the 'Tags' tab when i put the mouse over 'Tags'
How do I do this?
HTML:
<table height="20" width="30" cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="roundedcornr_box_407494">
<div class="roundedcornr_top_407494"><div></div></div>
<div class="roundedcornr_content_407494">
<font color="#ffffff" size="2" face="helvetica">
Search
</font>
</div>
<div class="roundedcornr_bottom_407494"><div></div></div>
</div>
</td>
</tr>
</table>
</td>
<td>
<div style="margin-left:10px;" />
<center>
<table height="20" width="30" cellpadding="0" cellspacing="0" >
<tr>
<td>
<center>
<div class="roundedcornr_box_235759">
<div class="roundedcornr_top_235759"><div></div></div>
<div class="roundedcornr_content_235759">
<font color="#585858" size="2" face="helvetica">
Tags
</font> </div>
<div class="roundedcornr_bottom_235759"><div></div></div>
</div>
</center>
</td>
</tr>
</table>
CSS:
.roundedcornr_box_407494 {
background: #bdbdbd;
}
.roundedcornr_top_407494 div {
background: url(roundedcornr_407494_tl.png) no-repeat top left;
}
.roundedcornr_top_407494 {
background: url(roundedcornr_407494_tr.png) no-repeat top right;
}
.roundedcornr_bottom_407494 div {
background: url(roundedcornr_407494_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_407494 {
background: url(roundedcornr_407494_br.png) no-repeat bottom right;
}
.roundedcornr_top_407494 div, .roundedcornr_top_407494,
.roundedcornr_bottom_407494 div, .roundedcornr_bottom_407494 {
width: 100%;
height: 5px;
font-size: 1px;
}
.roundedcornr_content_407494 { margin: 0 5px; }
Thanks!
James
You can give your tab div an ID, and then when mouseover change its class to the same as Seach, and then back on mouse out.
You should try and put all your styling in the CSS, as you have center and font tags in the mix. Also, alot of new browsers offer rounded corner support for css3, maybe not a fix for you but just wanted to point that out.
I have an image, which I am trying to create a border around it, to make it look nicer. I have sliced an image, to have an image for top right, top, top left, right, left, bottom right, bottom left and bottom..
The border is all fine, except for the corners, can any body help me out here? I think Im missing some CSS. The image appears to be sliced fine - but Im open to suggestions.
Thanks and kind regards
This is the HTML
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td >
<img alt="Corner" src="graphics/bgTopLeft.PNG" width="15px" height="13px" /></td>
<td class="AdminBoxTitleMainTop" >
</td>
<td>
<img alt="Corner" src="graphics/bgTopRight.PNG" /> </td>
</tr>
<tr>
<td class="AdminBoxTitleMainLeft">
</td>
<td> <img id="afMgrPhoto" alt="Affiliate Manager" src='#' runat="server" />
</td>
<td class="AdminBoxTitleMainRight">
</td>
</tr>
<tr>
<td>
<img alt="Corner" src="graphics/bgBottomLeft.PNG" /> </td>
<td class="AdminBoxTitleMainBottom">
</td>
<td >
<img alt="Corner" src="graphics/bgBottomRight.PNG" /> </td>
</tr>
</table>
This is the CSS
.AdminBoxTitleMainTop {
background-image: url(../graphics/bgTop.PNG);
background-repeat: repeat-x;
height: 17px;
}
.AdminBoxTitleMainBottom {
background-image: url(../graphics/bgBottom.PNG);
background-repeat: repeat-x;
height: 17px;
}
.AdminBoxTitleMainRight {
background-image: url(../graphics/bgRight.PNG);
background-repeat: repeat-y;
height: 17px;
}
.AdminBoxTitleMainLeft {
background-image: url(../graphics/bgLeft.PNG);
background-repeat: repeat-y;
height: 17px;
}
You can try setting the width property for the rightmost and the leftmost cells (td elements). I guess you are trying to give a border using supplementary images which is not the best practice in HTML unless you're doing some rounded corner stuff. But if you don't want rounded corners. You can just use an IMG element and give a border (event with some padding) to make it look nice (and fewer HTML codes, which is nicer.)
<img style="padding: 5px; border: solid 1px #dedede" src="img.png" alt="" />
You can event shift the border color for the mouseover event of the image (works only if you place the img element inside element) without any javascript.
<a href='#'><img src="img.png" alt="" /></a>
Style:
a img
{
border: solid 1px #dedede;
padding: 5px;
}
a:hover img
{
border-color: #069;
}