Am trying to get rid of a space in my divs that look like this and if i try pushing the image up it work but the containers height wont change is there anyway to fix it i mean to make them align in the same position?
HTMl
<div class="addtocart-holder shadow">
<div class="cart-img"> <img src="img/product4.jpg"> </div>
<div class="cart-image-details">
<div class="cart-item-name"> <h3> Feather Dress With Embellished Lace Top</h3> </div>
<div class="cart-item-details"> <table>
<tr>
<td>Price Before:</td>
<td class="old">$200</td>
</tr>
<tr>
<td>Price: </td>
<td>$100</td>
</tr>
<tr>
<td>You Saved:</td>
<td class="saved">$100</td>
</tr>
<tr>
<td>Shippment :</td>
<td class="free">Free</td>
</tr>
</table> </div>
<div class="cart-item-add"> <table>
<tr>
<td>Quantity:</td>
<td class="old"><input type="text" class="form-control" value="1" /></td>
</tr>
<tr>
<td></td>
<td><div class="buy-ico"> Add To Cart</div></td>
</tr>
</table> </div>
</div>
CSS
.addtocart-holder{
min-width: 700px;
margin-top:100px;
padding:5px;
backround: #fff;
}
.cart-img, .cart-image-details{
border:1px solid #f00;
display: inline-block;
position: relative;
}
.cart-img{
height:190px;
width:26%;
}
.cart-img img{
width:100%;
height:100%;
}
.cart-image-details{
width:73%;
}
.cart-item-name{
width:100%;
text-align: center;
}
h3{
text-decoration: none;
text-align:center;
margin: 5px 0;
color:#888;
font: italic normal 17px georgia;
font-style: italic;
}
.cart-item-details, .cart-item-add{
width:49%;
border:1px solid #000;
display: inline-block;
}
table{
border:1px solid #fff;
width: 100%;
color: #888;
}
td{
padding:4px;
font-size:16px;
font-weight:500;
}
.shadow{
height: auto !important;
-webkit-box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.31);
-moz-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.31);
box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.31);
}
You have to set vertical-align property of .cart-image-details to top.
.cart-image-details {
vertical-align: top;
}
Fiddle: http://jsfiddle.net/u9mtyjoe/
The initial value of vertical-align is baseline, so changing to top will help you align divs properly.
Reference: MDN
Related
I have some HTML markup; I created a each table for one record but as shown in img. The text is not aligned properly and ignores <% %> inside there are deluge script, I remove deluge script for easily understandable purpose. I want to display in center even if word is too long, then it should not affect on next row.
Code:
* {
box-sizing: border-box;
}
.row {
margin-left:-5px;
margin-right:-5px;
}
.column {
float: left;
width: 32%;
padding: 5px;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
style=whitespace-wrap:nowrap;
}
tr, td {
padding: 20px;
margin-bottom: 10px;
background-color: #f2f2f2;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.2);
color:#000000;
whitespace-wrap:nowrap;
}
a {
color:#000000;
}
[class*="column"] {
width: 100%;
}
<div class="row">
<div class="column">
<table>
<tr>
<td><%=rec1%></td>
<td><%=s1%></td>
</tr>
</table>
</div>
<div class="column">
<table>
<tr>
<td><%=rec2%></td>
<td><%=s2%></td>
</tr>
</table>
</div>
<div class="column">
<table>
<tr>
<td><%=rec3%></td>
<td><%=s3%></td>
</tr>
</table>
</div>
<div class="column">
<table>
<tr>
<td><%=rec4%></td>
<td><%=s4%></td>
</tr>
</table>
</div>
<div class="column">
<table>
<tr>
<td><%=rec5%></td>
<td><%=s5%></td>
</tr>
</table>
</div>
<div class="column">
<table>
<tr>
<td><%=rec6%></td>
<td><%=s6%></td>
</tr>
</table>
</div>
</div>
<div>No Country Available!</div>
</table>
Thanks in advance.
I think i understood what you said.
You should apply a 50% width for every
This will be the css
* {
box-sizing: border-box;
}
.column {
padding: 5px;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #ddd;
width: 100%;
}
tr,
td {
width: 50%;
text-align: center;
padding: 20px;
margin-bottom: 10px;
background-color: #f2f2f2;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2);
color: #000000;
whitespace-wrap: nowrap;
}
a {
color: #000000;
}
Here is a Codepen
Code
Maybe you can add tag and then close it where you want. Add the center tag at the column which you want to have centered text. Then, to not affect other rows give width to the column where you have given the center tag. THis will not affect anything else.
I am using the following plugin.
https://github.com/dabeng/OrgChart.
In some resolution, the vertical line is not fitting properly.
https://github.com/dabeng/OrgChart/issues/410
I have analysed the rendered html and tried with the same code.
I am getting the same issue for some resolutions.
Please see the following fiddler.
.downline{
height:30px;
width:2px;
background:red;
text-align:center;
background: red;
text-align: center;
background-color: rgba(217, 83, 79, 0.8);
margin: 0px auto;
height: 55px;
width: 2px;
float: none;
}
.leftLine{
border-right:1px solid green;
}
.rightLine{
border-left:1px solid green;
}
table{
margin:50px;
border-spacing: 0 !important;
border-collapse: separate !important;
}
.item{
padding:5px;
border:1px solid black;
}
<table>
<tr>
<td colspan="2">
<div class="downline">
</div>
</td>
</tr>
<tr>
<td class="leftLine">
</td>
<td class="rightLine">
</td>
</tr>
<tr>
<td colspan="2" >
<div class="item">
Test 123
</div>
</td>
</tr>
</table>
I tried to add a horizontal line inside a <td> tag to achieve :
but this is what I got :
Here is a jsfiddle: http://jsfiddle.net/6qybn8w8/
Please note that I want this <hr /> tag to appear in only few of the <td> and not all. Also, I cannot remove the padding for <td> as I need it to format content of other <td>s
You can do some thing like this.
table {
border: 3px solid #0D94D2;
}
table th,
td {
padding: 4px 10px 4px 5px;
font-size: 12px;
}
table th {
background-color: #0D94D2;
text-align: center;
padding: 0.25em 0.25em;
white-space: nowrap;
}
table td {
width: auto;
text-align: center;
border-bottom: 1px solid #B1DCEA;
white-space: nowrap;
}
hr {
position: relative;
color: #0000FF;
background-color: #0000FF;
height: 0.75em;
width: 118.9%;
left: -6.5%;
}
<body>
<table>
<th>
Data
</th>
<tr>
<td>
<hr />
<div>
Some Gibber Gabber
</div>
</td>
</tr>
</table>
</body>
One workaround for you to get the expected result without breaking your structure is by using positioning.
Well I've updated the fiddle so you can go through the changes, http://jsfiddle.net/6qybn8w8/2/
HTML:
<body>
<table>
<th>
Data
</th>
<tr>
<td>
<hr />
<div>
Some Gibber Gabber
</div>
</td>
</tr>
</table>
</body>
CSS
table{
border:3px solid #0D94D2;
}
table th,td{
padding: 4px 10px 4px 5px; font-size: 12px;
}
table th{
background-color:#0D94D2;text-align:center;padding:0.25em 0.25em;white-space:nowrap;
}
table td{
width:auto;text-align:center;border-bottom: 1px solid #B1DCEA;white-space:nowrap;position:relative;
}
table td div{
margin-top:10px;
}
hr{
color: #0000FF;
background-color: #0000FF;
height: 0.75em;
position:absolute;
width:100%;
top:-10px;
left:-1px;
}
Set the height of <hr> as 0 and add margin-top to 5px or whatever that you want.
table{
border:3px solid #0D94D2;
}
table th,td{
padding: 4px 10px 4px 5px; font-size: 12px;
}
table th{
background-color:#0D94D2;text-align:center;padding:0.25em 0.25em;white-space:nowrap;
}
table td{
width:auto;text-align:center;border-bottom: 1px solid #B1DCEA;white-space:nowrap;
}
hr{
height: 0em;
border-top: 5px solid green;
margin: 0;
width: 100%;
}
<body>
<table>
<th>
Data
</th>
<tr>
<td>
<hr />
<div>
Some Gibber Gabber
</div>
</td>
</tr>
</table>
</body>
Updated jsFiddle: http://jsfiddle.net/rdesai/6qybn8w8/5/
I would like to put CSS buttons into several tables. Ideally, each button should fill the corresponding table cell. This presents a problem because if I hard-code the button width in CSS, I would need a separate class for each table dimension.
Is there a way to have the buttons fit into the table cells?
HTML:
<center>
<table border="1" width="90%" class="buttons">
<tr>
<td width="25%">Link1 goes here</td>
<td width="25%">Link2<br>goes<br>here</td>
<td width="25%">Link3<br>goes<br>here</td>
<td width="25%">Link4<br>goes<br>here</td>
</tr>
</table>
<p>
<table border="1" width="90%" class="buttons">
<tr>
<td width="20%">Link1 goes here</td>
<td width="20%">Link2<br>goes<br>here</td>
<td width="20%">Link3<br>goes<br>here</td>
<td width="20%">Link4<br>goes<br>here</td>
<td width="20%">Link5<br>goes<br>here</td>
</table>
</center>
CSS:
.buttons
{
overflow:auto;
text-align: center;
font-size: 1.0em;
font-weight: bold;
line-height: 200%;
}
.buttons a
{
display: inline-block;
width: 18em;
height: 6em;
margin-bottom: 0.5em;
padding-top: .6em;
padding-bottom: .6em;
color: #fff;
background-color: #aaabbb;
border-radius: 5px;
border: solid #cccccc 1px;
box-shadow: 2px 2px 1px #888888;
clear:right;
float:right;
}
.buttons a:active
{
box-shadow: 1px 1px 0px #888888;
}
Play with the code:
http://codepen.io/anon/pen/bIEtC
You should try to set height and width 100%. Like this:
.buttons a
{
display: inline-block;
width: 100%; /* set to 100% */
height: 100%; /* set to 100% */
margin-bottom: 0.5em;
padding-top: .6em;
padding-bottom: .6em;
color: #fff;
background-color: #aaabbb;
border-radius: 5px;
border: solid #cccccc 1px;
box-shadow: 2px 2px 1px #888888;
clear:right;
float:right;
}
Try not to hard code CSS into the HTML... it leads to a mess of trouble!
Taking the inline styling out of the html seems to fix most problems. Then, just like #ArmanVirdi said, add the width and the height of the link to be 100%.
The <center> tags don't seem to be doing anything, so those are removed in the below HTML, as well as an unclosed <p> tag.
HTML
<table class="buttons width-25">
<tr>
<td>Link1 goes here
</td>
<td>Link2<br>goes<br>here
</td>
<td>Link3<br>goes<br>here
</td>
<td>Link4<br>goes<br>here
</td>
</tr>
</table>
<table class="buttons width-20">
<tr>
<td>Link1 goes here
</td>
<td>Link2<br>goes<br>here
</td>
<td>Link3<br>goes<br>here
</td>
<td>Link4<br>goes<br>here
</td>
<td>Link5<br>goes<br>here
</td>
</table>
CSS
table {
width: 100%;
}
.width-20 td {
width: 20%;
}
.width-25 td {
width: 25%;
}
.buttons {
text-align: center;
font-size: 1.0em;
font-weight: bold;
line-height: 200%;
}
.buttons a {
display: inline-block;
height: 100%;
width: 100%;
margin-bottom: 0.5em;
padding-top: .6em;
padding-bottom: .6em;
color: #fff;
background-color: #aaabbb;
border-radius: 5px;
border: solid #cccccc 1px;
box-shadow: 2px 2px 1px #888888;
}
.buttons a:active {
box-shadow: 1px 1px 0px #888888;
}
JSFiddle for reference
Add to .buttons:
width:0;
Resut:
I have an HTML5 table with 3 header columns. They colspan=2 each, for a total of 6 columns wide. Under each header are 2 body columns that correspond to that header. I've got individual columns aligned left, but now I want the entire body center aligned so it lines up with the headers. I've tried the margin: 0 auto trick making sure I had a width defined and it's just not working.
Here is what it looks like now:
Here is my HTML:
<div id="areas">
<table>
<thead>
<tr>
<td colspan="2">Delaware County</td>
<td colspan="2">Main Line</td>
<td colspan="2">Chester County</td>
</tr>
</thead>
<tbody>
<tr>
<td class="city">Broomall</td>
<td class="zip">19008</td>
<td class="city">Ardmore</td>
<td class="zip">19003</td>
<td class="city">Paoli</td>
<td class="zip">19301</td>
</tr>
<tr>
<td class="city">Chester</td>
<td class="zip">19013</td>
<td class="city">Bala Cynwyd</td>
<td class="zip">19004</td>
<td class="city">Avondale</td>
<td class="zip">19311</td>
</tr>
<tr>
<td class="city">Aston</td>
<td class="zip">19014</td>
<td class="city">Bryn Mawr</td>
<td class="zip">19010</td>
<td class="city">Berwyn</td>
<td class="zip">19312</td>
</tr>
</tbody>
</table>
</div>
And my CSS:
#areas {
position: relative;
margin: 30px auto 60px auto;
width: 950px;
padding: 20px;
background-color: #4B004B;
-webkit-box-shadow: 11px 11px 15px rgba(50, 50, 50, 0.85);
-moz-box-shadow: 11px 11px 15px rgba(50, 50, 50, 0.85);
box-shadow: 11px 11px 15px rgba(50, 50, 50, 0.85);
border: 3px outset gold;
}
#areas thead td {
font-family: 'electricalregular';
-webkit-text-stroke: 1px orange;
letter-spacing: 2px;
font-size: 10pt;
font-weight: 100;
text-align: center;
width: 316px;
color: gold;
padding: 0 0 15px 0;
}
#areas tbody {
width: 950px;
margin: 0 auto;
}
#areas tbody td {
font-family: 'CommunistSans';
color: gold;
font-weight: 100;
padding: 0 0 5px 0px;
width: 158px;
}
#areas .zip {
text-align: left;
}
#areas .city {
text-align: left;
}
you could try
#areas .zip, #areas .city { position: relative; left: 30px; }