I'm working on my ASP.NET project (written in C#).
I can't code div to have the correct size for the text inside him. I want to have a div to capture the text well and resize itself when I shrink the page.
Can somebody help me, please?
Here is a photo with what happens.
Css code:
.box {
width: 500px;
height: 500px;
border: 1px solid #e0e4e8;
padding: 20px;
border-radius: 10px;
height: 100px;
color: #717171;
float: left;
position: relative;
display: block;
}
Html code:
<div class="box">
<p class="date">Datele contului</p>
<br />
<table class="profil">
<tr>
<td>Nume:</td>
<td>
<asp:Label ID="lblNume" runat="server" Text=""></asp:Label>
</td>
</tr>
<tr>
<td>Prenume:</td>
<td>
<asp:Label ID="lblPrenume" runat="server" Text=""></asp:Label>
</td>
</tr>
<tr>
<td>Email:</td>
<td>
<asp:Label ID="lblEmail" runat="server" Text=""></asp:Label>
</td>
</tr>
</table>
<hr />
</div>
Just remove the height attribute in css. (or)
Try Setting height to auto.
You have set height twice in your css. Remove Both.
Related
I made a HTML email layout using table, the design is working fine in my machine but when I put the code to test in putsmail the footer moves to the left when I view the mail in the dekstop.
It should come like this:
Its coming like this:
My HTML code:
<!--Footer-->
<table class="footer">
<tr>
<td style="padding: 50px;background-color: #f7f7f7">
<table width="100%">
<p style="text-align: center; font-size: 12px; line-height: 1.5;">
Having Trouble with something?
<br>
Reach out to us support#vantagecircle.com
</p>
<img style="display: block; margin-right: auto;margin-left: auto; padding-bottom: 25px;" src="https://i.ibb.co/1Z05xTH/vc-footer-logo.png" width="120px" />
</table>
</td>
</tr>
</table>
My CSS code:
.footer{
align-content: center;
width: max-content;
position: relative;
}
Thank You in advance
It’s safer to use inline CSS for email templates, I also don’t think any email clients supports the align-content property or even max-content on width. Maybe try it like this:
<table width="100%">
<tr width="100%">
<td style="padding: 50px;background-color:#f7f7f7">
<div style="margin-left:auto;margin-right:auto;">
<p style="text-align: center; font-size: 12px; line-height: 1.5;">
Having Trouble with something?
<br>
Reach out to us support#vantagecircle.com
</p>
<img style="display: block; margin-right: auto;margin-left: auto; padding-bottom: 25px;" src="https://i.ibb.co/1Z05xTH/vc-footer-logo.png" width="120px" />
</div>
</td>
</tr>
</table>
Note that I'm using width inline there, and added a div in the inner td to align to the center.
Change the width: max-content; to width: 100%; and it should work.
You can read more about how "max-content" works here
Use width: 100% for the table.
Hi I know this is a simple question. But I am unable to do it. I want to place images in a table. Everything is working fine in a new html file. But when I am trying to insert the table in my project file, the images are getting overlapped.They are not fitting in a table. What mistake am I doing? Kindly look at the image that is attached.
table,td,th {border: 3px solid black;padding: 15px}
<table>
<tr><th>Choose from the icons</th></tr>
<tr><td ><img src='http://www.freeiconspng.com/uploads/smiley-icon-1.png' width='20%'/></td></tr>
<tr><td ><img src='http://www.freeiconspng.com/uploads/smiley-icon-1.png'width=20%/></td></tr>
</table>
Try:
table,
td,
th {
border: 3px solid black;
padding: 15px
}
img.icon {
width: 20%;
height: auto;
}
<table>
<tr>
<th>Choose from the icons</th>
</tr>
<tr>
<td>
<img src='heart1.png' class="icon" />
</td>
</tr>
<tr>
<td>
<img src='heart1.png' class="icon" />
</td>
</tr>
</table>
this may works. if you have any query, you can comment and ask further.
this solution fix your image inside <td>
table,
td,
th {
border: 3px solid black;
padding: 15px
}
td img {
max-width: 100%;
height: auto;
}
<table>
<tr>
<th>Choose from the icons</th>
</tr>
<tr>
<td>
<img src='heart1.png' class="icon" />
</td>
</tr>
<tr>
<td>
<img src='heart1.png' class="icon" />
</td>
</tr>
</table>
First you should always specify both height and width.
Second you should specify the width in pixels. AFAIK, the image tag does not support percentages.
IMG tag
Third, your second image does not have quotes around the width value.
Ideally you should resize the image to work without a width and height defined.
The best way might be to set the image as the background image of the cell.
I'm writing a simple form for sending some data to a database.
I use it in my own company so I don't need to have a perfect style.
I am using a table for the layout (this is okay in this application).
<table width="500px" style="border:1px solid black; overflow:hidden">
<tr>
<td>Born <input type="text" name="nato_pf" /></td>
</tr>
</table>
I would like to set the width of the input text to 100% (to the end of the line) , but, if I do that, the input text wraps to a new line.
I have found solutions only using div and they are not for me at the moment.
EDIT: Sometimes I have two input (with different sizes) on the same line, so I think I cannot add other td tags.
http://jsfiddle.net/gmmr7/1
table {
border:1px solid black;
width: 200px;
}
.left {
float: left;
}
.left2 {
overflow: hidden;
padding: 0 4px;
}
.left2>input {
width: 100%
}
<table>
<tr>
<td>
<label class="left">Born</label>
<div class="left2">
<input type="text" name="nato_pf" />
</div>
</td>
</tr>
</table>
<table width="500px" style="border: 1px solid black; verflow: hidden">
<tr>
<td style="width: 50px;">
Born
</td>
<td>
<input type="text" name="nato_pf" style="width: 99%;" />
</td>
</tr>
</table>
99% of width because with 100% the textbox goes over the table's border :)
and also give a width to the first td ;)
jsFiddle http://jsfiddle.net/2yZmB/
you can define another td element
<table width="500px" style="border:1px solid black; overflow:hidden">
<tr>
<td>Born </td><td><input type="text" name="nato_pf" /></td>
</tr>
</table>
css
input{
width:99%;
}
I have created nested tables with the following markup, where the first table contains an example of a typical row:
<table class="outer">
<tr>
<td>
<table class="column" id="left_column">
<tr>
<td>
<table class="cell" id="t1">
<tr>
<td>
<asp:Literal runat="server" ID="t1r2c0" />
</td>
<td>
<asp:Literal runat="server" ID="t1r2c1" />
</td>
<td class="image">
<span id="s1" runat="server">
<asp:PlaceHolder ID="p1" runat="server">
</asp:PlaceHolder>
</span>
</td>
<td>
<asp:Literal runat="server" ID="t1r2c3" />
</td>
<td class="gray">
<asp:Literal runat="server" ID="t1r2c4" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="cell" id="t2">
<!-- ... -->
</table>
</td>
</tr>
</table>
</td>
<td>
<table class="column" id="rightColumn">
<!-- ... -->
</table>
</td>
</tr>
</table>
And here is the relevant CSS:
#rightColumn table, #leftColumn table {
width: 100%;
}
.cell {
border-collapse: collapse;
border: 2px solid black;
margin: 5px;
}
.cell td {
border-collapse: collapse;
border: 2px solid black;
text-align: center;
vertical-align: middle;
}
.image {
padding: 0;
margin: 0;
width: 75px;
}
In Firefox this renders like this:
but in IE6 it renders like this:
Two things are going wrong in IE:
The right hand border is missing from every table.
The 2nd and 3rd tables in the right hand column have arbitrary sizes for the last column despite the fact that these cells are class "image" and should have a fixed width of 75px.
Any advice is greatly appreciated.
EDIT: #rightColumn table, #leftColumn table { width: 100%; background: Red }
Check whether IE is rendering your page is in quirks mode or not. Quirks mode often affects element widths in particular, so I would suggest that this is a very strong candidate for the cause of your problem.
You should make sure the page is in standards mode in order to render correctly.
This is easily done by making sure the page has a valid doctype at the top of the page.
If you don't have a doctype, you can add any valid doctype to get it working in standards mode, but if you're not sure which one to use, just use the following:
<!DOCTYPE html>
Hope that helps.
Good day,
I've got a simple CSS question.
I'm trying to change a table into a CSS box, but aligning the table content is difficult to me right now.
Below there's an example of what's inside of the css box i created. How can I align these three elements (calendar and icon to the left , a text link to the center, and the other date field to the right ?) correctly ?
I've tried several things but the problem is getting it aligned properly. I want to change everything in this application that has been created with tables, to css. And I've been an 80% succesful so far.
I'd like to see some easy to understand code, to see how I can apply it on my code.
Thank you for your kind help. I might be burned out due to stress.
[Calendar (icon) Link Date]
UPDATE #1
This is the code for what I'm saying:
<asp:UpdatePanel runat="server" ID="updHoldingsPanel" UpdateMode="Always">
<ContentTemplate>
<div class="sitenote">
<table valign="absmiddle" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 19px">
<td valign="absmiddle" style="text-align: left; width: 9%;">
<asp:Panel ID="pnlDateZero" runat="server" Width="187px">
<table valign="middle" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle">
<asp:Label ID="Label1" runat="server" Text="As of" Width="40px"></asp:Label></td>
<td valign="middle" style="width: 80px">
<asp:TextBox ID="txtDate" runat="server" AutoPostBack="True" Width="80px" Height="15px" OnTextChanged="txtDate_TextChanged" ></asp:TextBox>
<%--<asp:TextBox ID="txtDate" runat="server" AutoPostBack="True" Width="80px" Height="15px" contentEditable="false" OnTextChanged="txtDate_TextChanged" ></asp:TextBox>--%>
</td>
<td valign="absmiddle">
<span style="float:left; vertical-align:top; padding-top:0px; padding-top:1px;">
<asp:ImageButton align="middle" ID="imgCalendar" runat="server" ImageUrl="~/images/calendar5.gif"/>
<%--<cc1:CalendarExtender ID="ceDate" runat="server" PopupButtonID="imgCalendar" Format="MM/dd/yyyy" TargetControlID="txtDate" FirstDayOfWeek="Monday"></cc1:CalendarExtender>--%>
</span>
</td>
</tr>
</table>
</asp:Panel>
<asp:Label ID="lblAsOf" Text="" runat="server" Visible="False"></asp:Label></td>
<td style="text-align:center; width: 27%;">
</td>
<td style="text-align:center; width: 11%;">
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">LINK</asp:LinkButton>
</td>
<td style="text-align:left; width: 2%;">
<asp:UpdateProgress AssociatedUpdatePanelID="updHoldingsPanel" id="UpdateProgress1" runat="server" DisplayAfter="100" DynamicLayout="false">
<ProgressTemplate>
<asp:Image ID="Image3" runat="server" ImageUrl="~/images/live_com_loading.gif">
</asp:Image>
</ProgressTemplate>
</asp:UpdateProgress>
</td>
<td valign="absmiddle" style="text-align: right; width: 1%;">
</td>
<td style="text-align: right; valign="absmiddle">
<asp:CheckBox ID="chkInclude" runat="server" AutoPostBack="true"
OnCheckedChanged="chkInclude_CheckedChanged" Text="Include Zero Holdings"
VerticalAlign="Middle" />
</td>
</tr>
</table>
</div>
AND THE CSS OF THE BOX IS :
.sitenote {
display:block;
padding:6px;
border:1px solid #bae2f0;
background:#e3f4f9;
line-height:130%;
font-size:13px;
margin-top: 0;
margin-right: 0;
margin-bottom: 0.5em;
margin-left: 0;
}
You need to combine float:left and float:right elements and text-align css property
Full code at : http://jsbin.com/ilano3/3/edit
<div style="float:left">left</div>
<div style="float:right">right</div>
<div style="text-align:center">center</div>
You can use something like this, I think that it's the simplest approach:
<style>
.wrapper {
width: 600px;
}
.column {
float: left;
width: 200px;
}
.first {
text-align: left;
}
.second{
text-align: center;
}
.third{
text-align: right;
}
</style>
<div class="wrapper">
<div class="column first">
icon
</div>
<div class="column second">
link
</div>
<div class="column third">
date
</div>
</div>
You can add CSS for .first, .second and .third to change their width, text alignment, color...
http://jsfiddle.net/T8JMM/2/
If you really need your data/text in columns, you shouldn't shun tables. Tables are used for tabular data and if that's what your data is then just keep using them. The only bad thing about tables is when you use it for design. It looks to me that what you are trying to display is tabular data so just use 'em :)
To check if your data is bound to be shown in tables, answer the following questions:
Should the icon, link and date be on the same row ALWAYS?
Is the date on the right side bound to the link on the left side?
If your answer is yes to both questions, just use a table.
Otherwise, use lists. Separate the icon, link and date data into lists like this:
<ul class="icon-list column">
<li>Calendar (icon)</li>
<li>Calendar (icon)</li>
<li>Calendar (icon)</li>
</ul>
<ul class="link-list column">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
<ul class="date-list column">
<li>Date</li>
<li>Date</li>
<li>Date</li>
</ul>
Then using css, just float them and add some width:
.column {
float: left;
width: 33%;
}
Don't forget to clear the floats! :)
Try something like this:
<style type="text/css" media="all">
.row { border: 1px solid black; text-align: center; }
.row > .left { float: left; }
.row > .center { display: inline-block; }
.row > .right { float: right; }
/* after/inline-block (FF, IE5.5-7, S2, O9) */
.row:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.row { display: inline-block; }
.row { display: block; }
</style>
<div class="row">
<div class="left">Calendar (icon)</div>
<div class="center">Link</div>
<div class="right">Date</div>
</div>
The left and right divs are simply positioned with float and are contained within the float by the .row:after… CSS at the end. The center div will accept the row's text-align: center, since it's inline-block.
Note that the center piece is aligned based on the available space between the floats; multiple rows have have mis-aligned centers. Also, as it stands, too narrow of a width will cause the last piece (of left/center/right) to go to a new line; there may be a way to truncate it with overflow, but that depends on what you're going for.
Hope this helps!