My paper-input is extending outside of the parent div, and I don't know why. I've tried setting the bottom margin but it does nothing. Here's what I have, the borders are for testing and will be removed later.
#main {
width: 100%;
height: 100%;
border: 2px solid transparent;
}
.sliderContainer {
width: 100%;
height: 60px;
border: 2px solid transparent;
}
.label {
width: 100%;
margin-left: 6px;
}
.labelValue {
margin-left: 10px;
color: #A6A6A6;
}
.sliderDiv {
width: 100%;
height: 40px;
display: inline-block;
border: 2px solid transparent;
}
.button {
width: 1px;
height: 30px;
float: left;
display: inline-block;
border: 2px solid transparent;
}
.slider {
width: 50%;
height: 30px;
margin-top: 3px;
margin-right: 34px;
display: inline-block;
border: 2px solid transparent;
}
.syncOffset { /* This is the issue. */
width: 16%;
height: 40px;
display: inline-block;
border: 2px solid transparent;
}
.syncOffsetDiv {
width: 5%;
display: inline-block;
}
example
Figured it out, it was the label that was causing an issue. I added no-label-float to remove the floating label and vertical-align: top to the class and that made it work.
Related
any idea how to do something like this?
i know they're just boxes with modifications to css but Im new to css so any kind of help would be useful. thank you
im doing this by doing the following below. But there is a space in between the boxes. I wanted to achieve the arrow covering the space between each box
.box {
display: block;
width: 100%;
margin: 0 auto;
padding: 50px 20px;
text-align: center;
overflow: hidden;
}
.box-item {
display: block;
position: relative;
float: left;
width: calc(100% / 3 - 7px);
height: 40px;
line-height: 40px;
margin-right: 10px;
padding: 0 10px;
background-color: #3a7cca;
border-radius: 4px;
color: #ffffff;
}
.box-item:before {
content: "";
position: absolute;
right: -9px;
height: 0;
width: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 10px solid #3a7cca;
border-radius: 4px;
}
.box-item:after {
content: "";
position: absolute;
left: -1px;
height: 0;
width: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 10px solid #fff;
border-radius: 4px;
}
.box-item:first-child:after {
display: none;
}
.box-item:last-child {
margin-right: 0;
}
.box-item:last-child:before {
display: none;
}
Try to use display: flex and flex-direction: row-reverse for the parent block. So each next .box-item will be placed "under" the previous, and you will be able to adjust space between items by changing margin-right.
.box {
display: flex;
flex-direction: row-reverse;
padding: 50px 20px;
}
.box-item {
align-items: center;
background: #3a7cca;
border-radius: 4px;
color: white;
display: flex;
flex-grow: 1;
height: 40px;
justify-content: center;
margin-right: 2px;
position: relative;
}
.box-item:before,
.box-item:after {
border-color: transparent;
border-style: solid;
border-width: 20px 0 20px 10px;
border-radius: 4px;
content: "";
height: 0;
position: absolute;
top: 0;
width: 0;
}
.box-item:before {
left: -1px;
border-left-color: white;
}
.box-item:after {
right: -9px;
border-left-color: #3a7cca;
}
.box-item:first-child {
margin-right: 0;
}
.box-item:last-child:before,
.box-item:first-child:after {
display: none;
}
<div class="box">
<div class="box-item">3</div>
<div class="box-item">2</div>
<div class="box-item">1</div>
</div>
I need to have all my IDs not move when zooming in and out of the page without using the relative, absolute, or fixed positioning. I got the outer, letters and numbers box to stay when I zoom in and out but not the IDs
.outer {
margin: auto;
border: 20px outset orange;
width: 80%;
overflow: auto;
}
.letters {
border: 10px solid red;
float: left;
width: 50%;
box-sizing: border-box;
}
.numbers {
border: 10px solid blue;
float: right;
width: 50%;
box-sizing: border-box;
clear: auto
}
#one {
width: 100px;
height: 100px;
border: 10px dashed aqua;
background-color: palegoldenrod;
text-align: center;
}
#two {
width: 100px;
height: 100px;
border: 10px dashed aqua;
background-color: salmon;
text-align: center;
margin-left: 120px;
}
#three {
width: 100px;
height: 100px;
border: 10px dashed aqua;
background-color: greenyellow;
text-align: center;
margin-left: 240px;
}
#four {
width: 100px;
height: 100px;
border: 10px dashed aqua;
background-color: plum;
text-align: center;
margin-left: 120px;
}
#five {
width: 100px;
height: 100px;
border: 10px dashed aqua;
background-color: thistle;
text-align: center;
}
#oneA {
width: 100px;
height: 100px;
border: 10px dashed aqua;
background-color: palegoldenrod;
text-align: center;
float: right;
}
#twoA {
width: 100px;
height: 100px;
border: 10px dashed aqua;
background-color: salmon;
text-align: center;
float: right;
margin-top: 120px;
}
#threeA {
width: 100px;
height: 100px;
border: 10px dashed aqua;
background-color: greenyellow;
text-align: center;
float: right;
margin-top: 240px;
}
#fourA {
width: 100px;
height: 100px;
border: 10px dashed aqua;
background-color: plum;
text-align: center;
margin-left: 502px;
margin-right: 120px;
float: right;
}
#fiveA {
width: 100px;
height: 100px;
border: 10px dashed aqua;
background-color: thistle;
text-align: center;
margin-left: 622px;
float: right;
}
Are there any elements that should move? If not i would recommend disabling zoom:
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
How to set fit-content for width in right side. I used fit-content value for width and every things Okay in left side, but in right side content put in center of page. I use this CSS for make dynamic width by content:
.chat li.right .chat-body {
margin-right: 60px;
border: 1px solid $c-grey;
padding: 10px;
background-color: whitesmoke;
border-color: #e3e3e3;
/*box-shadow: 0 1px 0 #cfcfcf;*/
border-radius: 2px;
margin-left: 20%;
max-width: 80%;
width: fit-content;
}
It's my chat example:
CodePen Example
Replace with my give code.
.chat li.left .chat-body {
margin-left: 10px;
border: 1px solid #DDDDDD;
padding: 10px;
background-color: whitesmoke;
border-color: #e3e3e3;
/*box-shadow: 0 1px 0 #cfcfcf;*/
border-radius: 2px;
/* margin-right: 20%; */
max-width: 80%;
width: fit-content;
float: left;
}
.chat li.right .chat-body {
margin-right: 10px;
border: 1px solid #DDDDDD;
padding: 10px;
background-color: whitesmoke;
border-color: #e3e3e3;
/*box-shadow: 0 1px 0 #cfcfcf;*/
border-radius: 2px;
/* margin-left: 20%; */
max-width: 80%;
width: fit-content;
float: right;
}
and:
.chat li small.pull-left {
padding-left: 60px;
padding-top: 5px;
clear:both;
}
.chat li small.pull-right {
padding-right: 60px;
padding-top: 5px;
clear:both;
}
Working Demo
Look at this picture of it...
http://www.flickr.com/photos/91733140#N06/8329388242/in/photostream
How can i make this div go to the left and not the right?
it keeps messing up and i really need it to be fixed any ideas how i can make it work?
<style type="text/css">
#body {
height: 100%;
margin: 0;
padding: 0;
}
#html, body {
height: 100%;
margin: 0;
padding: 0;
background: #E0E0E0;
}
#header {
background: #FFFFFF;
height: 33px;
width: 100%;
padding: 5px 30px 5px 30px;
font-family: arial;
font-size: 30px;
border-bottom: 1px #737373 solid;
position: fixed;
top: 0;
}
#container {
width: 1205px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}
#box {
width: 228px;
height: auto;
background: #FFFFFF;
border: 1px #5E5E5E solid;
margin: 5px;
float: left;
font-family: arial;
}
#box_title {
width: 218px;
height: auto;
padding: 5px;
background: #5E5E5E;
color: white;
border-bottom: 1px #FFFFFF solid;
float: left;
font-family: arial;
}
#box_img {
width: 210px;
height: auto;
float: left;
margin-left: auto;
margin-right: auto;
}
#box_options {
width: 228px;
height: 40px;
background: #FFFFFF;
color: #000000;
border-top: 1px #5E5E5E solid;
float: left;
font-family: arial;
Not to judge you by your open tabs but you seem to want a "Pinterestish" wall. This is not easy via vanilla css, may I suggest looking into jquery masonry?
http://masonry.desandro.com/
It does all the heavy lifting for you
I am trying to make an arrow overlap onto the div below it (the way the gray arrow overlaps onto the red on http://tinyletter.com).
Here is the code I am currently using:
#box_1 {
height: 550px;
width: 100%;
font-size: 4.5em;
font-weight: 600;
float: center;
text-align: center;
background-color: #ededed;
padding: 55px 0 0 0;
}
.arrow-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid #ededed;
margin-left:auto;
margin-right:auto;
}
#box_2 {
height: 600px;
width: 100%;
font-size: 7em;
float: center;
text-align: center;
background-color: #ed2227;
}
If you're able to rely upon use of the ::after (or ::before) pseudo-elements, then this is relatively easy simply using borders:
#top {
position: relative;
background-color: #ccc;
}
#top::after {
position: absolute;
content: '';
top: 100%;
left: 50%;
margin: 0 0 0 -1em;
border: 1em solid transparent;
border-top: 1em solid #ccc;
}
JS Fiddle demo.