How I can add empty space at the left side of the text?
https://jsfiddle.net/ydL4emkd/
.camera_caption {
display: inline-block;
position: relative;
width: 717px;
padding: 10px 20% 10px 10px;
color: white;
text-decoration: none;
overflow: hidden;
}
.camera_caption:before,
.camera_caption:after {
position: absolute;
content: '';
height: 50%;
width: 100%;
left: -15%;
z-index: -1;
background: red;
}
.camera_caption:before {
top: 0px;
transform: skew(45deg);
}
.camera_caption:after {
bottom: 0px;
transform: skew(-45deg);
}
I need to get this visual result:
Add more padding to the left
.camera_caption {
....
padding-left: 100px;
}
Add padding-left
.camera_caption {
display: inline-block;
position: relative;
width: 717px;
padding: 10px 20% 10px 70px;
color: white;
text-decoration: none;
overflow: hidden;
}
.camera_caption:before,
.camera_caption:after {
position: absolute;
content: '';
height: 50%;
width: 100%;
left: -15%;
z-index: -1;
background: red;
}
.camera_caption:before {
top: 0px;
transform: skew(45deg);
}
.camera_caption:after {
bottom: 0px;
transform: skew(-45deg);
}
<div class="camera_caption">Some text</div>
<div class="camera_caption">Some text
<br>spanning across
<br>multiple line</div>
<div class="camera_caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius eros id consequat tempor. Nunc non libero nisi. Curabitur ultricies, magna eget hendrerit viverra, nibh leo faucibus est, eget efficitur mauris purus ut libero. Ut in arcu in leo
ornare tristique. Quisque rutrum lectus a lorem sollicitudin porta. Etiam placerat felis metus, non luctus felis placerat et. Nam lacinia libero enim, ut placerat mi accumsan eget. Ut viverra ipsum sit amet leo gravida, ac consequat ligula consequat.
Etiam consequat ex a augue rutrum, sed convallis est volutpat. Aliquam erat volutpat. Morbi pretium sem nec ipsum sollicitudin facilisis. Maecenas accumsan eleifend neque sit amet ornare. Curabitur condimentum arcu at tellus ullamcorper pretium. Mauris
lorem nisl, pulvinar eu lectus tincidunt, luctus fringilla diam.</div>
Related
I have an animation that is triggered by hovering on a sibling element (an image that renders above the animated element with the z-index property), and wish to get it paused once it's finished, since when the mouse leaves said sibling element, the animation reverts to its origin state. However I can't figure out how to do that.
Here's a snippet:
#keyframes boot {
0% {
background-color: black;
color: black;
}
100% {
background-color: #001900;
color: white;
}
}
div.tablet {
background-color: #666;
border-radius: 10px;
padding: 15px;
position: relative;
}
div.tablet img {
position: absolute;
z-index: 1;
top: 15px;
left: 0;
height: 100%;
}
div.tablet br {
display: none;
}
div.screen {
background-color: black;
color: black;
border-radius: 10px;
padding: 10px;
font-family: Monospace;
font-size: 12px;
z-index: 0;
}
div.screen br {
display: inline;
}
img:hover + div.screen {
animation: boot 7s;
background-color: #001900;
color: white;
}
<div class="tablet">
<img src="http://insurrection-du-chaos-sandbox.wdfiles.com/local--files/s-ou-o/broken.png" />
<div class="screen">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec feugiat fringilla dolor, vel rutrum arcu porttitor in. Suspendisse et ornare orci. Duis dictum lacinia condimentum. Cras sed mattis justo, eu convallis elit. Sed efficitur lectus vitae nisi blandit scelerisque. Nulla efficitur condimentum quam. Ut et faucibus metus. Quisque ornare tempor sapien, ac venenatis urna. Donec eget suscipit turpis. Nulla venenatis ultricies purus, et facilisis felis sollicitudin et. In aliquet auctor aliquet. Donec sit amet diam iaculis, ultricies nisi eget, eleifend nulla.
</div>
</div>
The better solution will be to use transition and transition-delay.
.tablet {
background-color: #666;
border-radius: 10px;
padding: 15px;
position: relative;
}
.tablet img {
position: absolute;
z-index: 1;
top: 15px;
left: 0;
height: 100%;
}
.tablet br {
display: none;
}
.screen {
background-color: black;
color: black;
border-radius: 10px;
padding: 10px;
font-family: Monospace;
font-size: 12px;
z-index: 0;
transition: .4s ease-out;
transition-delay: 2s;
/* or only transition: .4s ease-out 2s;*/
}
.screen br {
display: inline;
}
img:hover+.screen {
transition: .4s ease-out;
background-color: #001900;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="tablet">
<img src="http://insurrection-du-chaos-sandbox.wdfiles.com/local--files/s-ou-o/broken.png" />
<div class="screen">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec feugiat fringilla dolor, vel rutrum arcu porttitor
in. Suspendisse et ornare orci. Duis dictum lacinia condimentum. Cras sed mattis justo, eu convallis elit. Sed
efficitur lectus vitae nisi blandit scelerisque. Nulla efficitur condimentum quam. Ut et faucibus metus. Quisque
ornare tempor sapien, ac venenatis urna. Donec eget suscipit turpis. Nulla venenatis ultricies purus, et facilisis
felis sollicitudin et. In aliquet auctor aliquet. Donec sit amet diam iaculis, ultricies nisi eget, eleifend
nulla.
</div>
</div>
</body>
</html>
I have checked these two posts: Adjacent divs with angled borders? [duplicate] and Shape with a slanted side (responsive) but those solutions posted do not adjust to 100% height of the container and I need this. I cannot find a solution to fit my scenario.
I'm trying to replicate this behaviour the difference is the text inside this container can be of any height so I need the angle and container to adapt to fit any height (not a fixed height container):
Here's the code I'm using with a jSFiddle: https://jsfiddle.net/qzma0r6k/1/
CSS
section {
position: relative;
color: #fff;
}
.diagonal:before {
position: absolute;
content:'';
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
top: 0;
right:0;
height:100%;
z-index: 0;
width: 50%;
background:pink;
}
HTML
<section class="c-1">
<div class="c-2 diagonal">
<h1>Work with us</h1>
<p>Scelerisque et parturient dis a erat cubilia congue sociosqu vel porta sem posuere a malesuada suspendisse id commodo. Dui consequat consectetur luctus odio nibh a vel sapien hendrerit ad a consectetur cursus a nisl posuere.</p>
</div>
<div class="bg-image"></div>
</section>
Something like this?
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.c-1 {
background: #333;
overflow: hidden;
position: relative;
}
.c-2 {
float: left;
width: 50%;
position: relative;
color: #fff;
padding: 50px;
}
.bg-image {
position: absolute;
width: 50%;
top: 0;
right: 0;
bottom: 0;
padding: 0;
background-image: url(http://placehold.it/350x150);
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index: 0;
}
section {
position: relative;
color: #fff;
}
.diagonal {
position: relative;
z-index:1;
}
.diagonal:after {
right: 0;
left: 100px;
position: absolute;
-webkit-transform: skewX(-15deg) rotate(180deg);
-ms-transform: skewX(-15deg) rotate(180deg);
transform: skewX(-15deg) rotate(180deg);
content: "";
top: 0;
width: 100%;
height: 100%;
background: #333;
z-index:-1;
}
<section class="c-1">
<div class="c-2 diagonal">
<h1>
Work with us
</h1>
<p>
Scelerisque et parturient dis a erat cubilia congue sociosqu vel porta sem posuere a malesuada suspendisse id commodo. Dui consequat consectetur luctus odio nibh a vel sapien hendrerit ad a consectetur cursus a nisl posuere. A cubilia varius dapibus non
scelerisque aliquam imperdiet nec montes suspendisse orci potenti dignissim vestibulum venenatis sociosqu ullamcorper vestibulum scelerisque magna sem ultricies convallis cras. Ante sed elit tristique interdum hendrerit nascetur a cras suspendisse
mi fermentum vestibulum auctor a taciti euismod ac non adipiscing a. Maecenas parturient a dui sodales vestibulum nisl nisi consequat cum lacus lobortis senectus metus at adipiscing cursus parturient a.
</p>
</div>
<div class="bg-image"></div>
</section>
I centered a div vertically with CSS and it works great. But I have a background and when I resize browser the text go out the background.
.wrapper{
height: 100%;
width: 100%;
background: rgba(51,51,51,.5);
}
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: 50%;
}
jsfiddle
.wrapper is div, so it already has width: 100% (because div has display: block, and we know that all blocks are full width elements). .wrapper { height: 100%; } means that it will inherit the full height of its parent (in this case it is body, body inherit height of its parent - html - so you get the viewport height); So we can remove all .wrapper styles. And simply add background: rgba(51,51,51,.5); to .outer
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.wrapper {
}
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
background: rgba(51,51,51,.5);
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin: 0 auto;
width: 50%;
}
<div class="wrapper">
<div class="outer">
<div class="middle">
<div class="inner">
<h1>The Content</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
</div>
</div>
Jsfiddle Here
No need to use position:absolute in .outer and specifying height in .wrapper.
.wrapper{
/* height:100%; remove this-**/
width: 100%;
background: rgba(51,51,51,.5);
}
.outer {
display: table;
/* position: absolute; remove this-**/
min-height: 100%;
width: 100%;
}
try this https://jsfiddle.net/serGlazkov/5t9asdc1/3/
you should use min-height and delete here position: absolute;
.outer {
display: table;
/*position: absolute;*/
height: 100%;
width: 100%;
}
I've been reading the other posts from people having the same issue as I am but none of those solutions seem to be helping me. So, here's another post about my .news-post div height not adjusting to fit content inside of it. Here is the code:
HTML:
<div id="wrapper">
<div class="news-post">
<div class="news-post-header">
<h3>Fake News: blah blah blah.</h3><h3 style="float: right">July 26, 2013</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tempor diam. Vivamus eget neque ultrices, accumsan risus et, laoreet dui. Curabitur eu ligula fermentum, molestie orci sit amet, molestie ante. Morbi id massa laoreet, pellentesque magna nec, ultrices dui. Nulla tempus est massa, in euismod velit congue eu. Curabitur ac congue dui. Curabitur id risus tempor, mattis odio vel, faucibus nisi. Nullam pretium, dolor id auctor hendrerit, metus lacus volutpat orci, sed dapibus lorem lacus non felis. Aliquam felis lorem, posuere nec fringilla eu, aliquam in ligula. Duis ultrices, ante in vestibulum sollicitudin, lectus mi tristique tellus, in volutpat est lorem nec mi.</p>
</div>
</div>
</div>
And the CSS:
#wrapper {
margin: auto auto;
width: 1024px;
}
.news-post {
background: #fff url('images/skydive.png') no-repeat;
margin: 30px 30px 0 0;
height: auto;
min-height: 100% !important;
width: 642px;
display: block;
position: absolute;
overflow: visible;
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 3px 0 #ccc;
-webkit-box-shadow: 0 1px 3px 0 #ccc;
box-shadow: 0 1px 3px 0 #ccc;
}
.news-post-header {
background: url('images/content-header-bg.png');
background-repeat: repeat-x;
margin: 0;
height: 47px;
line-height: 40px;
width: 642px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.news-post-header h3 {
margin: 0 15px;
font-family: 'droid_sansbold';
font-size: 14px;
text-shadow: 0 1px 0 #626262;
color: #fff;
float: left;
}
.news-post-header p {
padding: 445px 15px 0 15px;
text-align: justify;
}
Help would be greatly appreciated!
I think it is because you set a height parameter to your .news-post-header.
If you remove that it will work fine.
I've made a fiddle of your code here. have a look and let me know if this is what you're looking for.
link: http://jsfiddle.net/daltonpereira/2ZXx9/
below is what i've changed. basically removed the height:47px from news-post-header class
.news-post-header {
background: url('images/content-header-bg.png');
background-repeat: repeat-x;
margin: 0;
line-height: 40px;
width: 642px;
-moz-border-radius: 4px;
border-radius: 4px;
}
Synopsis
I have a wrapper, width 980px with padding 10x. The content inside is 960px (border-box). I have one element, inline-block, width 760px, margin-right 20px, and another inline-block at 180px. These should match perfectly. But only subtracting two px from one of the elements will make them fit within the parent.
I am aware of the white-space problem with inline-blocks and always use that fix. Even so, I still tested two blocks with float and still the same problem.
CSS
* { padding: 0; margin: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; }
.wrapper { width: 980px; margin: 0 auto 20px; padding: 10px; border: 1px solid #fff; box-shadow: 0 0 20px rgba(0,0,0,0.1); }
.featured_blog { width: 760px; height: 240px; padding: 10px; margin: 0 20px 20px 0; border: 1px solid #000; /*display: inline-block; *display: inline; zoom: 1;*/ display: block; float: left; vertical-align: top; overflow: hidden; text-overflow: ellipsis; }
.featured_author { width: 180px; height: 240px; border: 1px solid #000; /*display: inline-block; *display: inline; zoom: 1;*/ display: block; float: left; vertical-align: top; }
HTML
<section class="wrapper">
<div class="featured_blog">
<h2><span>Some Kind of Blog Title</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo orci, dictum id venenatis at, mattis nec enim. Maecenas vel molestie dolor. Maecenas mauris massa, congue at rhoncus et, dapibus sit amet eros. Nunc ipsum felis, eleifend in laoreet sit amet, tincidunt feugiat velit. Cras eu felis tortor, sed accumsan nisl. Ut volutpat viverra justo, quis consectetur felis tempor a. Etiam magna eros, euismod vel viverra in, facilisis sed libero. Vivamus in neque quis turpis adipiscing scelerisque dapibus at diam. Sed magna magna, ultrices quis posuere vel, pulvinar sodales dolor. Proin sapien sapien, adipiscing quis ultrices eget, cursus vitae enim. Maecenas ornare, erat non porta porta, sem felis condimentum erat, a lacinia nunc nisl a est.</p>
</div><div class="featured_author"></div>
</section>
Where are these two px coming from???!!!!!
The 2px comes from the border: 1px solid #000;. Border on the either side causes this issue. Reduce 2px from the width.
Without Border, it works fine
http://jsfiddle.net/RRvMU/
With Border, and a few width adjustments http://jsfiddle.net/RRvMU/1/