I have designed this signup form. The problem is that there is too much space between the two rows i.e. the id and password parts.How do I reduce the space?
CSS (inside HTML / Head / Style elements)
<html>
<head>
<title>Signup</title>
<style>
div
{
position:absolute;
top:300px;
left:550px;
width:200px;
}
table
{
height:150px;
border:1px solid black;
border-radius:10px;
box-shadow:0px 0px 2px #777;
}
td
{
padding:10px;
}
.ip
{
border-radius:5px;
border:1px solid grey;
}
.label
{
color:#EE6AA7;
font-family:Helvetica;
font-size:17px;
}
</style>
</head>
HTML(Inside HTML/Body)
<body>
<div>
<form>
<table>
<tr>
<td class="label">Id</td>
<td><input type="text" name="id" class="ip"></td>
</tr>
<tr>
<td class="label">Password</td>
<td><input type="text" name="pswrd" class="ip"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
That's because you have table height 150px and rows became 75px height each (150/2).
To solve this problem, just remove height from the table and set height for td elements.
For example:
table{
padding: 10px;
/*height:150px;*/
border:1px solid black;
border-radius:10px;
box-shadow:0px 0px 2px #777;
}
td{
height:20px;
/*padding:10px;*/
}
Use style="border-collapse: collapse" on the table.
Related
I can't seem to get media queries to work - at least for the one relevant style which needs to work - padding for the table-wrapper class. The padding set inline always wins.
I believe I need to have !important set for the media query so I do have that.
Media queries are at the top of the html
This is at the top of the html - <meta name="viewport" content="width=device-width">
The rest of the styles are inline / done by an app.
Anyone know what I might be missing?
https://codepen.io/lg00/pen/LvrXVY
<html xmlns="http://www.w3.org/1999/xhtml">
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title></title>
<style>
/* Responsive */
#media screen and (max-width: 700px) {
.table-wrapper {
width: 100% !important;
margin-top: 0px !important;
border-radius: 0px !important;
padding: 5px 15px !important;
}
.header {
border-radius: 0px !important;
}
.header-title {
padding-left: 20px !important;
padding-right: 20px !important;
}
.header-title h1 {
font-size: 25px !important;
}
}
</style>
<div class="email-wrapper" style="background-color:#F5F6F7">
<table width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<!-- PADDING SET HERE -->
<table cellpadding="0" cellspacing="0" class="table-wrapper" style="margin:auto; margin-top:50px; background-color:#fff; padding:64px 100px">
<tbody>
<tr>
<td class="container header" style="background-repeat:no-repeat; border-top-left-radius:6px; border-top-right-radius:6px; text-align:center; color:#000; padding-bottom:32px; display:block !important; margin:0 auto !important; clear:both !important">
<div class="header-title" style="font-weight:bold">Test</div>
</td>
</tr>
<tr>
<td class="content" style="border-bottom-left-radius:6px; border-bottom-right-radius:6px; margin:0 auto !important; clear:both !important">
<div class="header-title" style="color:#000; text-align:center">
<h1 style="font-family:Helvetica Neue, Helvetica, Arial, sans-serif; margin-bottom:15px; color:#47505E; margin:0px 0 10px; line-height:1.2; font-weight:200; line-height:45px; font-weight:bold; margin-bottom:30px; font-size:28px; line-height:40px; margin-bottom:32px; font-weight:400; color:#000; padding-top:0px">Test The Length of the Title - Will it Wrap</h1>
</div>
<table width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="text-center" style="text-align:center">
Test
</td>
</tr>
</tbody>
</table>
<table class="data-table bordered" width="100%" cellpadding="0" cellspacing="0" style="padding-top:32px; padding-bottom:32px; border-top:1px solid #DBDBDB; border-bottom:1px solid #DBDBDB">
<tbody>
<tr>
<td class="data-table-title" style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; font-weight:bold; font-size:20px; padding-top:0px">Test</td>
</tr>
<tr>
<td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px">Test</td>
<td class="text-right" style="text-align:right; letter-spacing:0.6px; padding-top:5px; padding-bottom:5px">Test</td>
</tr>
<tr class="bordered" style="border-top:1px solid #DBDBDB; border-bottom:1px solid #DBDBDB">
<td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; border-top:1px solid #DBDBDB">Test</td>
<td class="text-right" style="text-align:right; letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; border-top:1px solid #DBDBDB">test</td>
</tr>
</tbody>
</table>
<table class="data-table" width="100%" cellpadding="0" cellspacing="0" style="padding-top:32px; padding-bottom:32px">
<tbody>
<tr>
<td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; vertical-align: top; ">
<p style="margin-top: 0px; ">
<span class="bold" style="font-weight:bold">Test</span><br>
test<br>
</p>
</td>
<td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; width: 20%"></td>
<td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; vertical-align: top; ">
<p style="margin-top: 0px; ">
<span class="bold" style="font-weight:bold">Test2</span><br>
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div class="footer" style="width:100%; text-align:center; clear:both !important">
<p class="text-center" style="text-align:center; font-size:12px; color:#666">Test</p>
</div>
<br>
</td>
</tr>
</tbody>
</table>
</div>
It is a specificity issue in your media queries. Move .header-title above .table-wrapper since the padding is overriding what is being set in .table-wrapper
.header-title {
padding-left: 20px !important;
padding-right: 20px !important;
}
.table-wrapper {
width: 100% !important;
margin-top: 0px !important;
border-radius: 0px !important;
padding: 5px 15px !important;
}
.header {
border-radius: 0px !important;
}
Change your css to this, I hope it will work.
<style>
//Default styling
.table-wrapper {
width: 50%;
margin-top: 0px;
border-radius: 0px;
padding: 5px 15px;
}
/* Responsive */
#media screen and (max-width: 700px) {
.table-wrapper {
width: 100%;
margin-top: 0px;
border-radius: 0px;
padding: 5px 15px;
}
.header {
border-radius: 0px;
}
.header-title {
padding-left: 20px;
padding-right: 20px;
}
.header-title h1 {
font-size: 25px;
}
}
</style>
Please check the CSS specificity, as you said the in-line style is the most specific selector and "wins".
CSS specificity:
Inline Style
ID, Class
Pseudo-class, atributes
Elements, pseudo-element
This question already has answers here:
How to overlay a simple div directly on top of a simple html table td?
(1 answer)
Absolute position is not working
(6 answers)
Closed 3 years ago.
I would like to have divs that overlay their td container while filling them completely (width and height). They should also be on top of the td content (above its text)
The problem is that the table is responsive and thus, the td's have variable widths.
One important thing: the number of columns is unknown and can be changed by the user in real time. So I can't use 'calc( (100% /x) - 1px )'...
How can I achieve that?
Here's the jsFiddle:
https://jsfiddle.net/4vq8ao6r/4/
The attempt is using an absolute positioned div but I tried many things with no satisfying result.
I can achieve this with jQuery but it's resource heavy (especially on resize) and I would like to just use css if possible.
html:
<table>
<thead>
<tr>
<th></th>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row1</td>
<td>
Data1
<div class="overlay"></div>
</td>
<td>
Data2
<div class="overlay"></div>
</td>
<td>
Data3
<div class="overlay"></div>
</td>
<td>
Data4
<div class="overlay"></div>
</td>
</tr>
<tr>
<td>Row2</td>
<td>
Data1
<div class="overlay"></div>
</td>
<td>
Data2
<div class="overlay"></div>
</td>
<td>
Data3
<div class="overlay"></div>
</td>
<td>
Data4
<div class="overlay"></div>
</td>
</tr>
</tbody>
</table>
CSS:
html,body{
pointer-events: auto;
width:100%;
height:100%;
margin:0px;
padding:0px;
background:#212933;
color:#e5ebea;
font-family:'lato';
font-weight:400;
font-size:11px;
user-select:none;
text-align:center;
}
table{
display:table;
white-space:nowrap;
border-collapse:collapse;
table-layout:fixed;
user-select:none;
width:100%;
}
tr{
display:table-row;
}
th {
display:table-cell;
text-overflow:ellipsis;
vertical-align:middle;
padding-right:19px;
padding-left:10px;
background:#2e3844;
border:1px solid #56647c;
overflow:hidden;
height:40px;
}
th:first-child{
background:#212933;
}
td {
display:table-cell;
vertical-align:middle;
padding:6px;
border:1px solid #56647c;
overflow:hidden;
height:40px;
}
td:first-child{
background:#28303a;
}
.overlay{
background:red;
height:40px;
position:absolute;
opacity:0.5;
width:100px;
}
How about this? Basically - make the td position: relative; and then your abs positioned overlay can have top/right/bottom/left all set to 0
html,body{
pointer-events: auto;
width:100%;
height:100%;
margin:0px;
padding:0px;
background:#212933;
color:#e5ebea;
font-family:'lato';
font-weight:400;
font-size:11px;
user-select:none;
text-align:center;
}
table{
display:table;
white-space:nowrap;
border-collapse:collapse;
table-layout:fixed;
user-select:none;
width:100%;
}
tr{
display:table-row;
}
th {
display:table-cell;
text-overflow:ellipsis;
vertical-align:middle;
padding-right:19px;
padding-left:10px;
background:#2e3844;
border:1px solid #56647c;
overflow:hidden;
height:40px;
}
th:first-child{
background:#212933;
}
td {
display:table-cell;
vertical-align:middle;
padding:6px;
border:1px solid #56647c;
overflow:hidden;
height:40px;
position: relative;
}
td:first-child{
background:#28303a;
}
.overlay{
background:red;
height:40px;
position:absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity:0.5;
width:100px;
}
https://jsfiddle.net/chmxnvzb/ ?
How can I write the following html table attributes into an equivalent css?
<table bgcolor="#ffffff" align="center" border="0" style="width:600px;border: 1px solid #cccccc"></table>
Thanks.
So simple. Look at the following.
<table class="test">
.test
{
background-color:#fff;
text-align:center;
margin:0px auto;
width:600px;
border:1px solid #ccc;
}
table {
background-color: #fff;
text-align: center;
border: 1px solid #ccc;
width:600px;
}
This should do it.
The following code is a equivalent to your code:
table {
background-color:#fff;
border:1px solid #ccc;
margin:0 auto;
width:600px;
}
<table>
<tr>
<td>Col1</td>
<td>Col2</td>
</tr>
</table>
To see the (non existing) difference, here your example with a row:
<table bgcolor="#ffffff" align="center" border="0" style="width:600px;border: 1px solid #cccccc">
<tr>
<td>Col1</td>
<td>Col2</td>
</tr>
</table>
I would like my "feild labels" to be aligned in the center of their corresponding text fields. I have tried many different ways, and to get it centered on the page, I used tables. I am currently using "display: inline-block;" and "vertical-align: middle;" with no success.
Image Link
My HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>DNA Translator</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script.js"></script>
<script></script>
</head>
<body>
<div>
<form>
<table valign="center" id="table1">
<tr>
<td class="labels">DNA:</td>
<td class="spacer"></td>
<td><input type="text" name="dna" placeholder="DNA"></td>
</tr>
<tr>
<td class="labels">mRNA:</td>
<td class="spacer"></td>
<td><input type="text" name="mrna" placeholder="mRNA"></td>
</tr>
<tr>
<td class="labels">tRNA:</td>
<td class="spacer"></td>
<td><input type="text" name="trna" placeholder="tRNA"></td>
</tr>
<tr>
<td class="labels">Amino Acids:</td>
<td class="spacer"></td>
<td><input type="text" name="aminoAcids" placeholder="Amino Acids"></td>
</tr>
<tr>
<td></td>
<td class="spacer"></td>
<td class="button"><button id="button_translate" type="button">Tanslate</button>
<button id="button_clear" type="button">Clear</button></td>
</tr>
</table>
<!--<div id="text">
<p>DNA: </p><input type="text" name="dna" placeholder="DNA"><br>
<p>mRNA: </p><input type="text" name="mrna" placeholder="mRNA"><br>
<p>tRNA: </p><input type="text" name="trna" placeholder="tRNA"><br>
<p>Amino Acids: </p><input type="text" name="aminoAcids" placeholder="Amino Acids"><br>
</div>
<div>
<button id="button_translate" type="button">Tanslate</button>
<button id="button_clear" type="button">Clear</button>
</div>-->
</form>
</div>
</body>
</html>
My CSS (as you can see I've tried a lot of things):
div.container {
width:98%;
margin:1%;
}
table#table1 {
margin-left:auto;
margin-right:auto;
/*width:530px;*/
}
td {
height:20px;
}
td.button {
height:40px;
}
td.labels {
width:89px;
display: inline-block;
text-align:right;
vertical-align: middle;
}
td.spacer {
width:15px;
}
#button_translate
{
opacity: 0.7;
display: inline-block;
height:35px;
width:200px;
background-color:#293FE3;
font-family:arial;
font-weight:bold;
color:#ffffff;
border-radius: 5px;
text-align:center;
margin-top:2px;
/*display: block;*/
margin: 15px auto;
}
#button_clear
{
opacity: 0.7;
display: inline-block;
height:35px;
width:200px;
background-color:#293FE3;
font-family:arial;
font-weight:bold;
color:#ffffff;
border-radius: 5px;
text-align:center;
margin-top:2px;
/*display: block;*/
margin: 15px auto;
}
input[type="text"]
{
width: 390px;
display:/*block;*/ inline-block;
vertical-align:middle;
height:20px;
padding:4px 6px;
margin-bottom:20px;
font-size:14px;
line-height:20px;
color:#555;
vertical-align:middle;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px
background-color:#fff;
border:1px solid #ccc;
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition:border linear .2s,box-shadow linear .2s;
-moz-transition:border linear .2s,box-shadow linear .2s;
-o-transition:border linear .2s,box-shadow linear .2s;
transition:border linear .2s,box-shadow linear .2s
}
#text
{
width: 450px ;
margin-top; 800px;
margin-left: auto ;
margin-right: auto ;
}
You can add padding to your .labels css property, in your case, around 6px should do it!
td.labels {
width: 89px;
display: inline-block;
text-align: right;
padding-top: 6px;
vertical-align: middle;
}
Also, you have way too many elements for something that could be so simple:
DEMO: http://jsfiddle.net/shannonhochkins/d4rLD/2/
I currently have two divs that are within another div, one is a table with a list of items that is updated by using a textbox that is positioned next to it, I am trying to position the textbox in the bottom right corner, I have tried floating/positioning and it doesn't seem to have any real effect on it, the first image is how it currently is, the second image is how I would like it to be.
ASP.NET code:
<asp:Content ID="Content1" ContentPlaceHolderID="PrimaryContentPlaceHolder" runat="Server">
<%--<div style="margin-bottom: 20px; width: 300px;">--%>
<table class="Grid" style="width:300px;float:left; margin-right:10px;" >
<tr>
<th>
Banned Domains
</th>
<td runat="server" id="bannedDomains">
</td>
</tr>
</table>
<%-- </div>--%>
<div style="position:relative; bottom:0px;">
<asp:TextBox ID="bannedDomainText" runat="server" Rows="5" TextMode="SingleLine"
Width="150px" Height="19px" />
<asp:Button ID="btnSave" runat="server" OnClick="btnSave_Click" style="padding: 2px 5px 2px 5px;" PostBackUrl="~/admin/bespoke/Green-FreeShipping.aspx"
Text="Add to List" />
</div>
</asp:Content>
css:
#Content table
{
border-collapse: collapse;
}
#Content table.Grid
{
width: 100%;
clear: both;
margin: 12px 0 12px 0;
}
#Content table.Grid th, #Content table.Grid td
{
background-color: White;
border-top: 1px solid #cccccc;
padding: 2px 6px 2px 6px;
}
#Content table.Grid th
{
background-color: #f5f5f5;
}
#Content table tr:hover td
{
background: #f9f9f9;
}
Here you go, use it like this
Demo
CSS
.Grid {
border: 1px solid #ff0000;
height: 400px;
width:300px;
position: relative;
}
div.wrapper {
position: relative;
display: inline-block;
}
textarea {
position: absolute;
bottom: 0;
right: -200px;
}
HTML
<div class="wrapper">
<table class="Grid">
<tr>
<th>
Banned Domains
</th>
<td runat="server" id="bannedDomains"></td>
</tr>
</table>
<textarea></textarea>
</div>
here's one way to do it: http://jsfiddle.net/5DjM9/
<div class="div1">LEFT</div>
<div class="div2"><div>RIGHT</div></div>
.div1 {
width:200px;
height:200px;
background:#ccc;
float:left;
margin-right:10px;
}
.div2 {
width:200px;
height:200px;
background:#ccc;
float:left;
position:relative;
}
.div2 div {
width:200px;
position:absolute;
bottom:0;
background:red;
}
demo : http://jsfiddle.net/nobuts/WzUjr/
<div class="big_box">
<div class="cols"><div id="table">div/table</div></div>
<div class="cols"><div id="textbox">div/textbox</div></div>
<br style="clear:both">
</div>
.big_box{
background:red;
color:#000;
height:250px;
padding:5px;
}
.cols{
height:240px;
float:left;
margin:5px;
position:relative;
}
#table{
background:#ff9900;
height:100%;
width:250px;
}
#textbox{
background:#ff9900;
bottom:0px;
height:30px;
top:auto;
position:absolute;
width:100px;
}
the problem is that the float:left on the <table> element is "stuck" the solution is:
add a <div style="clear:both;"></div> right after the <table> ( it can be empty ).
remove float from table and play with position.
hope it helped :-)