I have two DIVs that are layered; one in front (z-index:1), and one in back (z-index:-1). I would like the DIV in front to have a 'background-color: transparent', and the DIV in back to have a 'background-color: grey'.
The problem is the transparent color just shows grey (which is expected I suppose), so both DIVs display as one color. Is there a way to have an inner DIV that has a transparent color, and then a larger DIV around it that has a different background color wherever there isn't overlap?
Maybe you want something like this:
body {
background:url(https://lorempixel.com/g/1000/800/) center/cover;
}
.container {
margin:50px;
padding:20px;
--c:linear-gradient(red,red);
background-image:var(--c),var(--c),var(--c),var(--c);
background-size:30px 100%,100% 30px;
background-position:left, top,right,bottom;
background-repeat:no-repeat;
position:relative;
color:#fff;
}
.overlay {
position:absolute;
content:"";
top:30px;
left:30px;
right:30px;
bottom:30px;
background:rgba(0,255,0,0.5);
}
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae mollis nisi. Mauris vestibulum ac lacus ac vulputate. Maecenas molestie ex dolor, et aliquet augue varius sit amet. Vivamus eleifend nisl nulla, a pellentesque ipsum pharetra eget. Curabitur tincidunt non nibh vitae convallis. Nunc magna
<div class="overlay"></div>
</div>
Related
I have this picture.
Is this possible in CSS?
Now I know you can use text-align: center and I could even make every line a span and incrementally increase the padding but is there a property I don't know about like centre from centre, or something similar?
This feels really obvious but I just can't think of a reasonable approach.
Update
The question was because in the picture the text tends to get shorter towards the bottom, much like the letter V, so t starts off wide and gets progressively narrower.
I had never seen a similar thing done so was very curious.
shape-outside can do it:
.wrapper {
display:flex; /* this is needed for the percentage height */
}
.box {
font-size: 25px;
text-align:justify;
}
.box > div,
.box::before{
height:150%; /* should be at least 100% but we consider bigger to avoid overflow */
width:100px; /* adjust this */
}
.box > div {
float:right;
shape-outside:linear-gradient(to bottom right,#0000 50%,#000 0);
}
.box::before {
content:"";
float:left;
shape-outside:linear-gradient(to bottom left,#0000 50%,#000 0);
}
/* the below is not need, it's only to illustrate the shape
uncomment it to see what is happening
.box > div {
background:linear-gradient(to bottom right,#0000 50%,red 0);
}
.box::before {
background:linear-gradient(to bottom left,#0000 50%,green 0);
}
*/
<div class="wrapper">
<div class="box">
<div></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pretium lacus ipsum, at placerat nunc sollicitudin scelerisque. Donec vulputate ex odio, et facilisis nisi tristique et. Maecenas tortor nisi, euismod et tellus sit amet, tincidunt congue
eros. Nam et viverra magna, id ultricies augue.
</div>
</div>
White-space: break-spaces.
With appropriate width you will get this:
#text {
font-family:sans-serif;
padding:10px;
text-align: center;
width: 600px;
white-space: break-spaces;
background-color:gray;
color: silver;
}
<div id="text">“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sodales ultrices nibh
at bibendum. Vivamus in volutpat diam. Vivamus ut mi non leo vehicula mattis.
Maecenas nec dolor id tellus consequat laoreet nec sit amet lacus.”
Jane from Cool Business Ltd</div>
Just apply text-align:center on the parent div.
Like this:
<div style='text-align:center'>
Your<br>
Multiline<br>
Text<br>
</div>
I have a div with a background image. Inside of that div is an absolutely positioned div with text in it. At widths>650, The text is a rectangle floating inside of the div. At widths<=650, the text is anchored to the bottom of the div with 100% width.
When this happens, it sits on top of the bottom of the background image. I would like the background image to get "pushed up" so that you can see the bottom of the background image. I could give a negative offset to the background position, but the height of the content is dynamic, because the text wraps to fit the width of the viewport, so I won't know the height, so specifying a specific offset/margin is not an option.
Is there any way to accomplish this in pure CSS with the design that I have? I would like to avoid javascript, and to avoid redesigning the layout of the HTML (e.g., using an <img> instead of a background-image).
Pictures describing the situation below, code below that:
What I have:
What I want:
#container{
background-image:url("http://i.imgur.com/u4xZlez.png");
background-size:100%;
height:400px;
display:block;
position:relative;
width:100%;
max-width:650px;
border:1px solid red;
background-repeat:no-repeat;
}
#content{
position:absolute;
top:10%;
display:block;
background-color:white;
width:60%;
margin-left:10%;
border:1px solid black;
}
#media(max-width:650px){
#content{
bottom:0px;
top:auto;
width:100%;
margin-left:0px;
}
}
<div id="container">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</p>
</div>
</div>
In the media query, change the container display to flex.
Use justify content to move content to the bottom.
Add a pseudo, using order to move it to the beginning, ahead of content.
Set the background image of container to this pseudo instead, and align it to bottom
#container{
background-image:url("http://i.imgur.com/u4xZlez.png");
background-size:100%;
height:400px;
display:block;
position:relative;
width:100%;
max-width:650px;
border:1px solid red;
background-repeat:no-repeat;
}
#content{
position:absolute;
top:10%;
display:block;
background-color:white;
width:60%;
margin-left:10%;
border:1px solid black;
}
#media(max-width: 650px) {
#container {
display: flex;
flex-direction: column;
justify-content: flex-end;
background-size: 0%;
}
#container::before {
content: "";
/* background-image: url("http://i.imgur.com/u4xZlez.png"); */
background-image: inherit;
background-size: 100%;
background-position: center bottom;
width: 100%;
flex-grow: 1;
order: 1;
}
#content {
position: static;
bottom: 10px;
top: auto;
width: 100%;
margin-left: 0px;
order: 2;
}
}
<div id="container">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</p>
</div>
</div>
#container {
background-image: url("http://i.imgur.com/u4xZlez.png");
background-size: 100%;
height: 400px;
display: block;
position: relative;
width: 100%;
max-width: 650px;
border: 1px solid red;
background-repeat: no-repeat;
}
#content {
position: absolute;
top: 10%;
display: block;
background-color: white;
width: 60%;
margin-left: 10%;
border: 1px solid black;
}
#media(max-width:650px) {
#container {
background-image: none;
height: auto;
}
#content {
position: relative;
width: 100%;
margin-left: 0px;
}
#content:before{
content: '';
display: block;
background-image: url("http://i.imgur.com/u4xZlez.png");
background-repeat: no-repeat;
background-size: 100%;
padding-bottom: 61.54%; /* 400/650 */
}
}
<div id="container">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</p>
</div>
</div>
#container{
background-image:url("http://i.imgur.com/u4xZlez.png");
background-size:100%;
background-position: 0 -110px;
height:400px;
display:block;
position:relative;
width:100%;
max-width:650px;
border:1px solid red;
background-repeat:no-repeat;
}
#content{
position:absolute;
top:10%;
display:block;
background-color:white;
width:60%;
margin-left:10%;
border:1px solid black;
}
#media(max-width:650px){
#content{
bottom:0px;
top:auto;
width:100%;
margin-left:0px;
}
}
<div id="container">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</p>
</div>
</div>
Try using the background-position CSS property, which accepts px as well as % measurements. You will need to put it in a media query so it only applies on screens > 650px but I will leave that for you to do.
Here it is...
But image is no longer background.
#container {
overflow:hidden; /* if desired */
height:400px;
display:block;
position:relative;
width:100%;
max-width:650px;
border:1px solid red;
}
#content {
position:absolute;
top:10%;
display:block;
background-color:white;
width:60%;
margin-left:10%;
border:1px solid black;
}
#media(max-width:650px){
#content {
bottom:0px;
top:auto;
width:100%;
margin-left:0px;
}
/* This... */
#content img {
width:100%;
position:absolute;
bottom:100%;
}
}
<div id="container">
<div id="content">
<img src="http://i.imgur.com/u4xZlez.png" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</p>
</div>
</div>
Some time ago, i was hired to create company website. With help of Zurb Foundation Framework, i created site with layout like this:
It's just a grid with several rows(for header, main area, and footer), each of which divided to two columns(4 for left side and 8 for right side).
Client loved this design, so it was deployed to production.
Several months later, client started to want something new in this site design. So he hired independent designer for consultation. Designer said that everything is good, but it's need some "simple feature" - background colors for some visual blocks. He photoshoped screenshot of site and send it to client.
With his edits, new site layout should look like this:
Is there any way to make blocks backgrounds be extended to outside of the grid, while maintaining grid itself in center of page? And if it's not possible, and only way is to add additional blocks for that 'extending backgrounds' - how to maintain their height and position in sync with main layout blocks?
Is there any way to get this with minimal number of edits, without rebuilding whole layout?
You can use background-size and position with gradient or image :
you can reverse gradient .... (example in codepen linked below playing with colors)
codepen to play with
main , header div, footer div{
width:800px;
margin:auto;
box-shadow: 0 0 5px;
}
* {
box-sizing:border-box;
}
section , header h1, footer nav{
width:600px;
float:right;
padding:1em;
}
footer h3 {
float:left;
width:200px;
}
footer {
text-align:center;
line-height:50px;
overflow:hidden;
}
li {
display:inline-block;
margin:0;
}
aside {
padding:1em;
overflow:hidden;
}
html {
background:linear-gradient(to left, gray 74.25%,black, white 74.5% ) center repeat-y ,linear-gradient(to left, gray 50%, white 50% ) gray repeat-y top right;
background-size: 800px 800px, 100% 100% ;
min-width:800px;/* mind this */
}
img {
margin:20px 50px;
}
header{
background:linear-gradient(to left, white 74.25%,black, gray 74.5% ) center repeat-y ,linear-gradient(to left, white 50%, gray 50% ) gray repeat-y top right;
background-size: 800px 800px, 100% 100% ;
min-width:800px;/* mind this */
}
footer {
background:linear-gradient(to left, white 74.25%,black, gray 74.5% ) center repeat-y ,linear-gradient(to left, turquoise 50%, tomato 50% ) gray repeat-y top right;
background-size: 800px 800px, 100% 100% ;
min-width:800px;/* mind this */
}
body {
margin:0;
display:flex;
min-height:100vh;
flex-direction:column;
}
main {
flex:1;
}
<header>
<div class="top">
<h1> play me in full page</h1>
<img src="http://lorempixel.com/100/100/"/>
</div>
</header>
<main>
<section><h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> 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. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, 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.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
</section>
<aside>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</aside>
</main>
<footer>
<div class="top">
<h3>footer title </h3>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Clients</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</footer>
I have been able to sucessfully wrap text in a div with an image to the left but I can't wrap the text in a div with the image floated to the right. I have tried floating p left. I have also tried making changing the display mode of the div with right floated image to inline and inline block. I also tried using text-align left.
Here is the code for the div were the text wraps ok.
#text_area_top
{
margin-top:5%; margin-left: 2%;
height: 150px; width:700px; position:relative;
font-family:Arial, Helvetica, sans-serif; font-size:18px;
}
Here is the code for the div where the text won't wrap.
#text_area_bottom
{
margin-top:5%; margin-left: 2%;
height: 150px; width:700px; position:relative;
font-family:Arial, Helvetica, sans-serif; font-size:18px;
background-color:#00FF00;
text-align:left;
}
#text_area_bottom img { float:right; }
Here is some extra code that would be important to know for solving this problem.
p { display:inline-block; position:absolute; margin:0px; }
If there is any more information you need me to include please let me know and I will post promptly.
Here is the html:
<div class="content">
<div id="text_area_top">
<img src="img.png" id="content_img" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ornare
urna et ligula lobortis sed aliquam eros eleifend. Aliquam gravida tellus mollis
massa rhoncus egestas.
Aliquam molestie arcu vitae est accumsan rutrum. Cras vitae tellus justo. Quisque pulvinar adipiscing dolor, non consectetur enim vehicula quis.Etiam tortor augue, interdum et congue a, imperdiet sed risus. Cras sagittis vestibulum</p>
</div>
<div id="text_area_bottom">
<img src="img.png" id="content_img2" />
<p>Scelerisque vitae, convallis non nibh. Maecenas euismod lacinia ipsum, non vulputate metus eleifend id. Quisque sagittis posuere massa, sed pretium odio dignissim eu. In sit amet est non lectus semper pellentesque vitae in tellus. Nullam facilisis auctor quam at pretium.
</p>
</div>
</div>
Try that it work on my side.
p { width:500px; display:inline-block; position:relative; margin:0px; }
just add a width for your p tag.
i have this layout and i have these two divs, maincontent and extracontent. there supposed to float beside eachother. but when i have more than one extracontent div it slides down the main content for some reason. can you help me fix it?
i have provided a js fiddle, http://jsfiddle.net/XzRun/
HTML
<div id="container">
<div id="content">
<div class="extracontent">
<h1>Other header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis nunc orci, dignissim sagittis urna.</p>
</div>
<div class="extracontent">
<h1>Other header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis nunc orci, dignissim sagittis urna.</p>
</div>
<div class="maincontent">
<h1>Some header text</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat aliquam justo, nec faucibus nulla porta eget. Fusce ipsum quam, interdum posuere aliquam non, laoreet sed leo. Maecenas luctus, tellus varius fermentum gravida, libero metus pharetra sem, ac scelerisque erat felis vestibulum diam. Donec vulputate eleifend interdum. Etiam ultrices, ante vitae luctus hendrerit, quam justo tempor tortor, pulvinar euismod quam ligula vel eros. Duis vel tellus mi, congue gravida purus. Nulla facilisi. Fusce ac magna arcu, sed vulputate justo. Quisque nec ante vitae lorem laoreet lobortis. Phasellus euismod urna sed turpis tincidunt vehicula. Aenean consequat rutrum sapien vel tincidunt. Mauris tincidunt pretium nisi nec ultricies. Aenean a sem nunc. Nunc luctus, metus in adipiscing hendrerit, lacus felis mollis dui, quis feugiat leo mi nec dolor.</p>
</div>
</div>
</div>
CSS
#container {
width:1000px;
margin:0 auto;
padding:20px 0;
text-align:left;
}
#content {
margin-left:10px;
float:left; /* lines up the left #content and the right #sidebar div's beside eachother */
width:810px;
}
.maincontent {
float:left;
margin:10px 10px 10px 0; /* double the right side because left has 0 */
padding:0 20px;
width:506px;
color:rgb(50,50,50);
background:rgb(255,255,255);
}
.extracontent {
clear:left;
float:left;
margin:10px 10px 10px 0; /* double the right side because left has 0 */
padding:0 20px;
width:200px;
height:200px;
color:rgb(50,50,50);
background:rgb(255,255,255);
}
The problem is that divs are always floated horizontally, not vertically. What you want to do here is to float the .extracontents vertically, while keeping the horizontal relationship. To do this, wrap all the .extracontent divs in a '.allextras` div, with the following css:
.allextras { clear: left; float: left; width: 220px; }
Or however you want it styled to get the margins the way you want.
Im not particularly sure of what you want to achieve.
If you want to have two extra content panels beside each other, your either going to have to widen or shrink extra and main content.
To do this i recommend that you use some JQuery to determine the amount of .extracontent and then change the width according to that.
The best way would be to put .extracontent inside a container with static width and then do something like:
divide extracontent.width by (extracontent in parent).count.
You could also stretch #content to have a min-width instead of fixing the width to be 1000
As defined in your CSS, your #content has width 810px, your .maincontent has width 506px and your .extracontent has width 200px. If you add an extra .extracontent, you will have total 906px. So it goes beyond 810px and slides down.
Your #content that surrounds the one #maincontent and two #extracontents has a smaller width then all of them. 506 + 200 + 200 + all of the margins > 810px. Give it some more room and your divs won't drop to other levels.