HTML:
<!-- start setup section -->
<div class='photo-setup'>
<div class='setup-head'>
<div class='photo-name'>Photo Name : <input type='text' placeholder='Photo Name' name='photo-name' title='Photo Name'></div>
<div class='photo-date'>Photo Date : <?php echo date('F j, o', time()) ?></div>
</div>
<div class='photo-section'>
<img src='' width='600' height='600' alt='photo'>
</div>
<div class='tag-section'>
Tags : <input type='text' placeholder='Tags e.g. (#beach #park #dog)'>
</div>
<div class='commit-section'>
<a class='save' href='#'>Save</a><a class='cancel' href='#'>Cancel</a>
</div>
</div>
<!-- end setup section-->
CSS:
img { border: none; }
.photo-setup {
width: 600px;
height: auto;
margin: 0 auto;
}
.setup-head {
border-left: 1px solid #cacece;
border-right: 1px solid #cacece;
border-top: 1px solid #cacece;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
padding: 1em;
}
.photo-name { float: left; }
.photo-date { float: right; }
.photo-section {
border-left: 1px solid #cacece;
border-right: 1px solid #cacece;
}
Result: https://jsfiddle.net/rw5beqtk/
Question 1: Why is the top and bottom padding in setup-head not the same?
Question 2: Why is the border of photo-section not the same as setup-head?
Question 1: Why is the top and bottom padding in setup-head not the
same?
Because your child element is floated and as such taken out of the normal flow. Setting overflow:hidden on setup-head will fix that.
.setup-head {
border-left: 1px solid #cacece;
border-right: 1px solid #cacece;
border-top: 1px solid #cacece;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
padding: 1em;
overflow: hidden;
}
Question 2: Why is the border of photo-section not the same as
setup-head?
It is the photo-section's img child's border, so you get double. When an img element doesn't have a valid src, it gets a border representing the image size, which won't go away with border: none.
Sample snippet with an image and overflow: hidden
img {
border: none;
vertical-align: top;
}
.photo-setup {
width: 600px;
height: auto;
margin: 0 auto;
}
.setup-head {
border-left: 1px solid #cacece;
border-right: 1px solid #cacece;
border-top: 1px solid #cacece;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
padding: 1em;
overflow: hidden;
}
.photo-name { float: left; }
.photo-date { float: right; }
.photo-section {
border: 1px solid #cacece;
overflow: hidden;
}
<div class='photo-setup'>
<div class='setup-head'>
<div class='photo-name'>Photo Name : <input type='text' placeholder='Photo Name' name='photo-name' title='Photo Name'></div>
<div class='photo-date'>Photo Date : <?php echo date('F j, o', time()) ?></div>
</div>
<div class='photo-section'>
<img src='http://placehold.it/600/eee' width='600' height='600' alt='photo'>
</div>
<div class='tag-section'>
Tags : <input type='text' placeholder='Tags e.g. (#beach #park #dog)'>
</div>
<div class='commit-section'>
<a class='save' href='#'>Save</a><a class='cancel' href='#'>Cancel</a>
</div>
</div>
Questions 1:
You have a float left and float right on photo-name and photo-date as such taken out of the normal flow, you have to add overflow:auto to the parent class so it does not lose its padding state.
img { border: none; }
.photo-setup {
width: 600px;
height: auto;
margin: 0 auto;
}
.setup-head {
border-left: 1px solid #cacece;
border-right: 1px solid #cacece;
border-top: 1px solid #cacece;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
padding: 1em;
overflow: auto;
}
.photo-name { float: left; }
.photo-date { float: right; }
.photo-section {
border-left: 1px solid #cacece;
border-right: 1px solid #cacece;
}
<!-- start setup section -->
<div class='photo-setup'>
<div class='setup-head'>
<div class='photo-name'>Photo Name : <input type='text' placeholder='Photo Name' name='photo-name' title='Photo Name'></div>
<div class='photo-date'>Photo Date : <?php echo date('F j, o', time()) ?></div>
</div>
<div class='photo-section'>
<img src='' width='600' height='600' alt='photo'>
</div>
<div class='tag-section'>
Tags : <input type='text' placeholder='Tags e.g. (#beach #park #dog)'>
</div>
<div class='commit-section'>
<a class='save' href='#'>Save</a><a class='cancel' href='#'>Cancel</a>
</div>
</div>
<!-- end setup section-->
Question 2: It is the img childs border which the browser adds to it if there is not a src for it and can not be overridden. Easy fix for you though is to remove (as you already have a border round the image)
.photo-section {
border-left: 1px solid #cacece;
border-right: 1px solid #cacece;
}
from your code
img { border: none; }
.photo-setup {
width: 600px;
height: auto;
margin: 0 auto;
}
.setup-head {
border-left: 1px solid #cacece;
border-right: 1px solid #cacece;
border-top: 1px solid #cacece;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
padding: 1em;
overflow: auto;
}
.photo-name { float: left; }
.photo-date { float: right; }
<!-- start setup section -->
<div class='photo-setup'>
<div class='setup-head'>
<div class='photo-name'>Photo Name : <input type='text' placeholder='Photo Name' name='photo-name' title='Photo Name'></div>
<div class='photo-date'>Photo Date : <?php echo date('F j, o', time()) ?></div>
</div>
<div class='photo-section'>
<img src='' width='600' height='600' alt='photo'>
</div>
<div class='tag-section'>
Tags : <input type='text' placeholder='Tags e.g. (#beach #park #dog)'>
</div>
<div class='commit-section'>
<a class='save' href='#'>Save</a><a class='cancel' href='#'>Cancel</a>
</div>
</div>
<!-- end setup section-->
Add overflow: hidden; to .setup-head or clear your floats.
They are the same. You see a 2px border because the image is missing.
Related
How do I align these two both at the top of the div or just get rid of the space at the bottom of the canvas?
<style>
html, body, div, canvas {
margin: 0;
padding: 0;
}
</style>
<div style="border: solid 1px Grey;">
<a style="border: solid 1px Grey">Test</a>
<canvas style="border: solid 1px Grey;width:30px;height: 30px"></canvas>
</div>
<html>
<head>
<title>Test</title>
<style>
.Left {
float: left;
border: 1px solid red;
width: 30px;
}
.Right {
float: left;
border: 1px solid green;
width: 35px;
}
.Outer {
border: solid 1px Grey;
height: 50px;
width: 100%;
}
</style>
</head>
<body>
<div class="Outer">
<div class="Left"><a style="border: solid 1px Grey">Test</a></div>
<div class="Right">
<canvas style="border: solid 1px Grey;width:30px;height:30px">
<!--Your Canvas-->
</canvas>
</div>
</div>
</body>
</html>
I'm having some issues with lining up similarly sized divs inside a td Chrome inspector confirms pixel size is the same. Trying to do a scheduler demo. Any ideas how to fix the alignment issue would be great! thanks!
I'll admit the small picture doesn't look like much, but it's there and over the length of 24 hours, it's certainly looks off.
I've played with inspector for the last hour, but just can't find it!
My Html code snippet...
<table>
<tbody>
<tr>
<td class="text-right ">
<div class="time_label">6am</div>
<div class="time_label">7am</div>
<div class="time_label">8am</div>
<div class="time_label">9am</div>
<div class="time_label">10am</div>
<div class="time_label">11am</div>
<div class="time_label">12pm</div>
<div class="time_label">1pm</div>
<div class="time_label">2pm</div>
<div class="time_label">3pm</div>
<div class="time_label">4pm</div>
<div class="time_label">5pm</div>
<div class="time_label">6pm</div>
<div class="time_label">7pm</div>
<div class="time_label">8pm</div>
<div class="time_label">9pm</div>
</td>
<td class="area area1">
<div class="block block1"></div>
<div class="block block2"></div>
My Sass snippet, this is inside of a bootstrap row/col-md-12...
$booker-container-height: 618px;
$booker-table-margin: 10px;
$booker-height: $booker-container-height - $booker-table-margin;
.booker_wrapper {
box-shadow: 0 0 12px #888;
}
.booker {
table {
margin: $booker-table-margin;
height: $booker-height;
table-layout: fixed;
width: 100%;
background-color: #fff;
border-bottom: 1px solid #ddd;
}
.time_label {
height: $booker-height/16;
border-top: 1px solid #DDD;
border-left: 1px solid #DDD;
}
.block {
height: $booker-height/32;
border-left: 1px solid #DDD;
}
.area:last-child{
border-right: 1px solid #DDD;
}
.area>.block:first-child
{
border-top: 1px solid #DDD;
}
.area>.block:nth-child(even)
{
border-bottom: 1px solid #DDD;
}
.area>.block:nth-child(odd)
{
border-bottom: 1px solid #DDD;
}
}
You should used the amazing css property box-sizing: border-box; supporting by IE8 to! Then set the height's items of left column at the double of the right and an border-bottom for each, like:
html:
<table>
<tr>
<th>
<div>Hello</div>
<div>Heros</div>
</th>
<td>
<div>World</div>
<div>Toto</div>
<div>Batman</div>
<div>Superman</div>
</td>
</tr>
</table>
scss:
* {
#include box-sizing(border-box);
}
$dark: #202020;
table {
border: 1px solid $dark;
border-bottom: 0;
}
th {
div {
height: 60px;
border-bottom: 1px solid $dark;
border-right: 1px solid $dark;
}
}
td {
div {
height: 30px;
border-bottom: 1px solid $dark;
}
}
I made a codepen here: http://codepen.io/pik_at/pen/qEKKBy
I am tying to place two divs inside a column. However, when I add margins or float property it doesn't help.
<div class="col-xs-1">
<div class="main-checkbox">
<input type="checkbox" /></div>
<div class="arrow-down"></div>
</div>
.arrow-down {
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid black;
float: right;
margin-top:5px;}
.main-checkbox {
width:13px;
margin-left:10px;}
I need to get a checkbox and a little triangle next to it.
Let's see if it's work. Just add pull-left which is already existed in bootstrap css. It acts like float:left. So you don't need to write any stylesheet anymore.
<div class="col-xs-1">
<div class="main-checkbox pull-left">
<input type="checkbox" /></div>
<div class="arrow-down pull-left"></div>
</div>
Add display:inline-block; to it like:
.arrow-down {
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid black;
margin-top:5px;
display: inline-block;
}
.main-checkbox {
width:13px;
margin-left:10px;
display: inline-block;
}
SEE FIDDLE
I am creating a table madde with several divs, and I am having an extra space between the first row (styled as head) and the rest of them, only the fist two columns (divs). Here you can see very clear:
There is no style atribute causing this space, at least I am not able to find the reason of it.
I have reproduced it on jsfiddle and you can see that it also sets the extra space: DEMO
Here I bring HTML & Syle related code:
HTML:
<div class="tableWrap">
<div class="tableHeader">
<div class="contentColumn60">
<span class="tableHeaderText">Turno</span>
</div>
<div class="contentColumn20">
<span class="tableHeaderText">Tipo</span>
</div>
<div class="contentColumn10">
<span class="tableHeaderText">Editar</span>
</div>
<div class="contentColumn10">
<span class="tableHeaderText">Reactivar</span>
</div>
</div>
<div class="tableContent">
<div class="contentColumn60">
<span class="tableContentText">Mañana(17:00 - 21:00)</span>
</div>
<div class="contentColumn20">
<span class="tableContentText">Mañanas</span>
</div>
<div class="contentColumn10">
<div class="editIcon"></div>
</div>
<div class="contentColumn10">
<div class="discontinueIcon"></div>
</div>
</div>
<div class="tableContent">
<div class="contentColumn60">
<span class="tableContentText">Mañana(17:00 - 21:00)</span>
</div>
<div class="contentColumn20">
<span class="tableContentText">Mañanas</span>
</div>
<div class="contentColumn10">
<div class="editIcon"></div>
</div>
<div class="contentColumn10">
<div class="discontinueIcon"></div>
</div>
</div>
<div class="tableContent">
<div class="contentColumn60">
<span class="tableContentText">Mañana(17:00 - 21:00)</span>
</div>
<div class="contentColumn20">
<span class="tableContentText">Mañanas</span>
</div>
<div class="contentColumn10">
<div class="editIcon"></div>
</div>
<div class="contentColumn10">
<div class="discontinueIcon"></div>
</div>
</div>
STYLE:
.tableWrap{
width: 100%;
height:380px;
border:#ccc 1px solid;
border-radius:3px;
box-shadow: 0 1px 2px #d1d1d1;
margin: 10px;
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
font-size:12px;
color:#666;}
.tableHeader{
height: 40px;
width: 100%;
background: -moz-linear-gradient(center top , #EDEDED, #EBEBEB) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-bottom: 1px solid #E0E0E0;
border-left: 1px solid #E0E0E0;
border-top: 1px solid #FAFAFA;
display: inline-block;
font-weight: 600;
}
.tableHeaderText{
line-height: 40px;
padding: 0 10px;
}
.tableContent{
height: 40px;
width: 100%;
}
.tableContentText{
line-height: 40px;
padding: 0 0 0 20px;
}
.contentColumn60{
height: 40px;
width: 58%;
border-top:1px solid #fafafa;
border-bottom:1px solid #e0e0e0;
border-left:1px solid #e0e0e0;
display: inline-block;
}
.contentColumn20{
height: 40px;
width: 20%;
border-top:1px solid #fafafa;
border-bottom:1px solid #e0e0e0;
border-left:1px solid #e0e0e0;
display: inline-block;
}
.contentColumn10{
height: 40px;
width: 10%;
border-top:1px solid #fafafa;
border-bottom:1px solid #e0e0e0;
border-left:1px solid #e0e0e0;
display: inline-block;
}
.discontinueIcon{
width: 23px;
height: 23px;
background-size: 98%;
background-image: url(images/error.png);
background-repeat:no-repeat;
margin: 0 auto;
}
.editIcon{
width: 23px;
height: 23px;
background-size: 98%;
background-image: url(images/edit.png);
background-repeat:no-repeat;
margin: 0 auto;
}
Since the elements are inline-block, you could use vertical-align:top to align them as desired. It's worth noting that the default property value is baseline; this explains why they were behaving as they were. UPDATED EXAMPLE HERE
.contentColumn60 {
height: 40px;
width: 58%;
border-top: 1px solid #fafafa;
border-bottom: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
display: inline-block;
vertical-align: top;
}
.contentColumn20 {
height: 40px;
width: 20%;
border-top: 1px solid #fafafa;
border-bottom: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
display: inline-block;
vertical-align: top;
}
use overflow:hidden; for content column60,20,10 it works perfect
add a clearfix or use vertical-align:top and overflow:hidden
.contentColumn60:after {
content: "";
display: table;
clear: both;
}
I want to create a table grid using DIV (HTML & CSS only). I almost got into and still got some issues. I attached the sample image. I want the grid should be the same like this sample image. I attached the fiddle of what I created so far. Could you help somebody that what am doing and how can I improve to finish the table as same as the image?
HTML:
<div class="containerDiv">
<div class="rowDivHeader">
<div class="cellDivHeader">Recommendation</div>
<div class="cellDivHeader">Typical savings</div>
<div class="cellDivHeader">Improved SAP</div>
<div class="cellDivHeader">Improved EI</div>
<div class="cellDivHeader">Indicative cost</div>
<div class="cellDivHeader">Include</div>
<div class="cellDivHeader lastCell">Removal Reason</div>
</div>
<div class="rowDiv">
<div class="cellDiv">Room-in-roof-insulation</div>
<div class="cellDiv">93.0</div>
<div class="cellDiv">F : 29</div>
<div class="cellDiv">B : 89</div>
<div class="cellDiv">£1,500 - £2,700</div>
<div class="cellDiv">Checkbox</div>
<div class="cellDiv lastCell">Textbox</div>
</div>
</div>
CSS:
.containerDiv {
border: 1px solid #3697f6;
width: 100%;
}
.rowDivHeader {
border: 1px solid #668db6;
background-color: #336799;
color: white;
font-weight: bold;
}
.rowDiv {
border: 1px solid #668db6;
background-color: #cee6fe;
}
.cellDivHeader {
border-right: 1px solid white;
display: table-cell;
width:12%;
padding: 1px;
text-align: center;
}
.cellDiv {
border-right: 2px solid white;
display: table-cell;
width:10%;
padding-right: 4px;
text-align: center;
border-bottom: none;
}
.lastCell {
border-right: none;
}
sample image
Add display:table-row to the row div i.e .rowDivHeader & .rowDiv
& display:table to the main div .containerDiv
.containerDiv {
border: 1px solid #3697f6;
width: 100%; display:table
}
.rowDivHeader {
border: 1px solid #668db6;
background-color: #336799;
color: white;
font-weight: bold; display:table-row
}
.rowDiv {
border: 1px solid #668db6;
background-color: #cee6fe;
display:table-row
}
DEMO