Has anybody got any idea of how to merge the borders of the 3 elements so that they join together.This is what I currently have:
<div style="float: left; padding-left: 0px; padding-bottom: 2px;">
<table id="table": cellpadding="0" cellspacing="0" border="0">
<tr align="center" valign="middle" >
<td style="padding-left: 1px; padding-right: 0px; padding-bottom: 1px;">
<div id="schedulePrevDay" title="Previous Day" class="borderRad_3Left"> </div>
<asp:TextBox ID="txtDate" runat="server" CssClass="compactDate" MaxLength="10" Width="65px"></asp:TextBox>
<div id="scheduleNextDay" title="Next Day" class="borderRad_3Right"> </div>
</td>
</tr>
</table>
</div>
It seems to me that you're using border-right and border-left 1px solid #fff. So, just remove the border from there:
#schedulePrevDay{
border-right: none;
}
#scheduleNextDay{
border-left: none;
}
Or, you may use negative margin on them.
Maybe a negative margin as Bhojendra Nepal suggested, so it will look something like this
<div style="float: left; padding-left: 0px; padding-bottom: 2px;">
<table id="table": cellpadding="0" cellspacing="0" border="0">
<tr align="center" valign="middle" >
<td style="padding-left: 1px; padding-right: 0px; padding-bottom: 1px;">
<div id="schedulePrevDay" title="Previous Day" class="borderRad_3Left" style="margin-right:-1px;"> </div>
<asp:TextBox ID="txtDate" runat="server" CssClass="compactDate" MaxLength="10" Width="65px"></asp:TextBox>
<div id="scheduleNextDay" title="Next Day" class="borderRad_3Right" style="margin-left:-1px;"> </div>
</td>
</tr>
</table>
Ive used styles but you should also check if there is no padding, margin or borders on these elements before doing a negative margin.
Related
I am trying to vertical-align an image and a text-element (span) within the same TD.
Heres my code:
<table bgcolor="#ff0000" style="background-color: #ff0000;">
<tbody>
<tr>
<td valign="middle" height="20" style="height: 20px; padding: 5px; vertical-align: middle;">
<a href="#">
<img height="20" width="25" style="display: inline; height: 20px; width: 25px; vertical-align: middle;" src="https://s3-eu-west-1.amazonaws.com/files.crsend.com/181000/181395/images/cart.png"/>
<!--#text_line #-->
<span style="vertical-align: middle; color: #fff;"> 10,95€</span>
<!--#/text_line#-->
</a>
</td>
</tr>
</tbody></table>
Example-Image
I cannot seperate the img-element and the text-element into seperate TD's, because it has to be a single anchor-element wrapping both the image and the text. I cannot wrap the TD's with an anchor-element since it is not HTML-valid and won't work in outlook.
Any Suggestions?
Greetings
Set your table border-collapse to collapse, your td padding to 0 and your anchor display to block. In this way, the anchor element will fit completely your td without useless margins. Then just set vertical-align to middle for both img and anchor element to align them on the same line.
<table style="background-color: #ff0000; border-collapse: collapse;">
<tbody>
<tr>
<td style="padding: 0;">
<a href="#" style="display: block; color: #fff; text-decoration: none; padding: 5px;">
<img src="https://s3-eu-west-1.amazonaws.com/files.crsend.com/181000/181395/images/cart.png" style="height: 20px; width: 25px; vertical-align: middle;" />
<!--#text_line #-->
<span style="vertical-align: middle;"> 10,95€</span>
<!--#/text_line#-->
</a>
</td>
</tr>
</tbody>
</table>
The problem :
HTML
<div class="visible-sm visible-xs " id="aatablet" style="padding-left: 0px; padding-bottom:10px; padding-top:10px; text-align: center;">
<table border="1">
<tr>
<td colspan="4" class="item_title">
<div style="padding-top:5px;">
Available at:
</div>
</td>
</tr>
<tr>
<td >
<img src="img/amazon-lrg.gif" alt="amazon" />
</td>
<td>
<img src="img/ebay-lrg.gif" alt="ebay" />
</td>
<td >
<img src="img/tomatomill-lrg.gif" alt="tomatomill" />
</td>
<td ><img src="img/BBG-lrg.gif" alt="BBG" />
</td>
</tr>
<tr>
<td >
</td>
<td>
<img src="img/sears-lrg.gif" alt="sears" />
</td>
<td >
<img src="img/healthcraft-home-logo.gif" alt="Healthcraft" title="Healthcraft" />
</td>
<td >
<img src="img/paradisecozycabins.jpg" alt="paradisecozycabins" title="paradisecozycabins" />
</td>
</tr>
</table>
</div>
CSS
#aatablet > table {
margin:0 auto;
}
Framework:bootstrap 3.4.
I want to make td of tomato logo width 100px not 178px like Helt Craft and td of Paradise(last td) 50px not 150px like BIGGAME.
Can someone help me ?I'm not good at making custom tables.Is it possible to do it whit only CSS?
Ty all.
You can give inline:block for td and give separate widths. Target each td using :nth-of-type
td{
display: inline-block;
}
tr:first-child td:nth-of-type(3){
width: 100px;
}
tr:last-child td:nth-of-type(4){
width: 50px;
}
I have been looking for a solution for this for like a day or two but as I'm not used to coding web applications I can't seem to find the problem..
I have a hunch it has to do with that I do float two divs to the left.
Question is why doesn't my main div enclose the whole page?
This is my html..!
<body onLoad="initializePage()">
<script type="text/javascript">
$('#Button1').click(function() {
});
</script>
<input type="button" id="Button1" value="korv" onClick="hidedivs()" />
<div id="main">
<div id="searchholder">
<div id="slider" class="searching"></div>
</div>
<div class="left">
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<table id="mytable" cellspacing="0">
<thead>
<tr>
<th scope="col" abbr="Sidor/Artiklar" class="nobg">Sidor/Artiklar</th>
<th scope="col" abbr="Mozrank">MozRank</th>
<th scope="col" abbr="PR">PR</th>
<th scope="col" abbr="Dual 1.8GHz">Fri tillgång</th>
<th scope="col" colspan="2" abbr="Dual 2.5GHz">Välj själv</th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tr data_id='<%# DataBinder.Eval(Container.DataItem, "pr_domain")%>'>
<th scope="row" abbr="Model" class="spec"><%# DataBinder.Eval(Container.DataItem, "namn_domain")%> </th>
<td class="alt" ><%# DataBinder.Eval(Container.DataItem, "moz_domain")%></td>
<td class="alt"><%# DataBinder.Eval(Container.DataItem, "pr_domain")%></td>
<td class="alt"><b></b>
<input type='<%# DataBinder.Eval(Container.DataItem, "type_domain")%>' name='<%# DataBinder.Eval(Container.DataItem, "idtag_domain")%>' value='<%# DataBinder.Eval(Container.DataItem, "faccess_domain")%>' onClick="calculatePrice();disableTB(this.name);" />
"Fri tillgång" </td>
<td class="alt"><input type="radio" name='<%# DataBinder.Eval(Container.DataItem, "idtag_domain")%>' value="0" onclick="calculatePrice();enableTB(this.name, this.checked)" />
"Skriv ditt antal själv" </td>
<td class="alt" data_id='<%# DataBinder.Eval(Container.DataItem, "pr_domain")%>'><input type="text" name='<%# DataBinder.Eval(Container.DataItem, "moz_domain")%>' id='<%# DataBinder.Eval(Container.DataItem, "idtag_domain")%>' Enabled="false" Width="40px" onKeyUp="calculatePrice()" style="background-color:#eeeeee" /></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
<div id="pricingdetails" class="price">Priset för dina artiklar blir: </div>
</div>
And my .css styles are
.price
{
font-family:"Verdana";
font-size:40px;
color:Green;
float: left;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
color: #797268;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
background: -moz-linear-gradient(center top , #FFFFFF 0%, #EDEDED 100%) repeat scroll 0 0 transparent;
display: inline;
}
div.searchholder
{
position: absolute;
top: 0px;
left: 50%;
margin-left: -70px;
width: 480px;
}
div.main
{
}
div.left
{
float: left;
}
.searching
{
}
The issue here is that since the elements inside your #main div are floated, they're considered in a different flow than your div, and thus it doesn't resize to fit them. Ways to fix this are:
Add overflow: hidden; to your #main styling.
Float your #main by adding float: left;.
Append this to your #main div: <div style = "clear: both;"></div> (this is the least preferable method).
You need to clear the floats of the child elements for #main
Instead of doing what some of the others have suggested (adding an element for the purpose of clearing your floats; bad practice), use a pseudo-element. Just use the following CSS and voila!
#main::after {
clear:both;
content: "";
display: table;
}
Here's a fiddle. This pink background is there to show the result of the above for #main.
Your main div (#main) isn't floated yet you have floated elements inside it.
To clear the float add the CSS:
#main {
overflow: hidden;
}
Add a clear before the ending tag.
<div style="clear:both"></div>
I have a apsx page and in that page I have two buttons called save and cancel, i need to display this with some css style, my script is
<table>
<tr>
<td align="right" class="bar">
<table>
<tr>
<td>
<asp:Button ID="btnSave" runat="server" Text="Save"/>
</td>
<td>
<asp:Button ID="btnCancel" runat="server" Text="Cancel" />
</td>
</tr>
</table>
</td>
</tr>
and my css script is
.bar
{
background-position: center;
border-width: 1px;
border-color: #CCCCCC;
vertical-align: middle;
height: 30px;
border-top-style: solid;
}
and am getting the style as
I have few more controls above these save and cancel buttons...the problems is this save and cancel buttons with the bar style comes right after the controls above them....
now these buttons are displaying at the center of the page and I need to display these save and cancel buttons with the bar style at the bottom of the page....how can I do this..
note:I put the position:absolute, it will disturb the alignments in other forms, coz am using this same bar style in all my forms......in other forms I have the controls that fills the page and automatically the save cancel buttons are coming at the bottom, but here I have only 4 controls...so the save and cancel button is at center, thats what am trying to display at the buttom
Here's the solution in JSFiddle:
http://jsfiddle.net/SX7n3/6/
For one, lose the table...
<div id="content">
Hello World!
</div>
<div class="clear"> </div>
<div class="bar">
<div class="buttons">
<button type="button" id="submit">Submit</button>
<button type="button" id="cancel">Cancel</button>
</div>
</div>
.content
{
min-height:800px;
width: 100%;
}
.bar
{
padding-top: 4px;
border-width: 1px;
border-color: #000;
background-color: #ccc;
height: 30px;
border-style: solid;
}
.buttons
{
float: right;
}
.clear
{
clear: both;
}
Your question is not clear, what I got you want to move buttons at bottom of page:
<div class="bottomBar">
<table>
<tr>
<td align="right" class="bar">
<table>
<tr>
<td>
<asp:Button ID="btnSave" runat="server" Text="Save"/>
</td>
<td>
<asp:Button ID="btnCancel" runat="server" Text="Cancel" />
</td>
</tr>
</table>
</td>
</tr>
</div>
and css
.bottomBar
{
float :bottom;
}
.bar
{
background-position: center;
border-width: 1px;
border-color: #CCCCCC;
vertical-align: middle;
height: 30px;
border-top-style: solid;
}
Add those two lines to your .bar:
.bar
{
position:absolute;
bottom:0;
/* the rest of your code */
}
Hi now you can define table align right and two class create in css as like this
Css
.bar
{
background-position: center;
border-width: 1px;
border-color: #CCCCCC;
vertical-align: middle;
height: 30px;
border-top-style: solid;
}
.save{width:100px;
height:20px;
background:green;
display: inline-block;}
.cancel{width:100px;
height:20px;
background:red;
display: inline-block;}
HTML
<table align="right">
<tr>
<td align="right" class="bar">
<table>
<tr>
<td>
<asp:Button ID="btnSave" runat="server" Text="Save" class="save"/>
</td>
<td>
<asp:Button ID="btnCancel" runat="server" Text="Cancel" class="cancel"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
Live demo http://jsfiddle.net/rohitazad/a9uym/
I have written an application from which you can write checks and I have the following markup on one of the pages to view and edit some of the fields of the check.
#CheckInformation {
border: 1px solid #aaa;
padding: 10px;
background-color: #E2F0F9;
margin-top: 15px;
}
#CheckInformation #PropertyAddress {
font-size: .87em;
width: 200px;
float: left;
text-align: center;
}
#CheckInformation .label-column {
width: 100px;
}
#CheckInformation .payto-col {
width: 570px;
}
#CheckInformation .line {
border-bottom: 1px solid #aaa;
}
#CheckInformation #PayTo {
width: 540px;
}
#CheckInformation #Address {
width: 200px;
height: 45px;
}
#CheckInformation #Memo {
width: 400px;
}
#CheckInformation #NumberWords {
margin: 3px;
font-style: italic;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" rel="stylesheet" />
<div id="CheckInformation">
<table>
<tr>
<td class="top" colspan="2" rowspan="2">
<div id="PropertyAddress">
1234 Main St
<br />Some city, State 50000
</div>
</td>
<td class="text-right label-column">Date</td>
<td>
<input type="text"></input>
</td>
</tr>
<tr>
<td class="text-right">Check Number</td>
<td>
<input type="text"></input>
</td>
</tr>
<tr>
<td>Pay to</td>
<td class="payto-col line">
Some person
</td>
<td class="text-right">Amount</td>
<td class="text-right line">
70.00
</td>
</tr>
<tr>
<td></td>
<td class="line" colspan="3">
<div id="NumberWords">Zero Dollars & Zero Cents</div>
</td>
</tr>
<tr>
<td class="top">Address</td>
<td colspan="3">
<div id="Address">
1234 Main St
<br />Some city, State 50000
</div>
</td>
</tr>
<tr>
<td>Memo</td>
<td colspan="3">
<input type="text"></input>
</td>
</tr>
</table>
</div>
It is supposed to have a bottom border on the tds that displays who the check was written to and the amount but not on the labels for those cells. It actually sees to appear correctly in IE and FireFox but in Chrome, I get a bottom border under the Amount label as well.
Running IE 9, FireFox 6.0.2, and Chrome 16.0.912.63
Anyone else see the issue?
Adding table{border-collapse:separate} seems to fix it but I don't know why. I'll update the answer if I figure out more.