I have a page that looks like this:
box-shadow http://www.morninj.com/images/box-shadow-screenshot.png
The middle div (with "Quotation." as its contents) has a box-shadow property applied. For some reason, the shadow won't appear below the second div if the third div is present. Does anybody know why?
HTML:
<div id="header">
<h1>Title</h1>
</div><!--/#header-->
<div id="subheader">
<h2>"Quotation."</h2>
</div><!--/#subheader-->
<div id="blurb">
<div id="blurb-container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!--/#blurb-container-->
</div><!--/#blurb-->
CSS:
div#header {
background-color: #444;
padding: 20px 0;
}
div#header h1 {
color: #fff;
font-family: 'Arvo', sans-serif;
font-size: 50px;
font-weight: bold;
text-align: center;
text-shadow: 1px 1px 1px #000;
}
div#subheader {
background-color: #777;
box-shadow: 0 0 3px 2px #333;
padding: 10px;
}
div#subheader h2 {
color: #efefef;
font-family: 'Merriweather', serif;
font-size: 14px;
font-style: italic;
line-height: 24px;
text-align: center;
}
div#blurb {
background-color: #efefef;
padding: 20px;
}
div#blurb div#blurb-container {
margin: 0 auto;
width: 800px;
}
Your 'blurb' is covering it up. Edit the div#blurb css rule to the following to move it behind the shadowed div:
div#blurb {
background-color: #efefef;
padding: 20px;
position:relative;
z-index:-1;
}
Set the position of both elements to relative and the z-index of the first one to 1 and the lower one to 0.
Edit: yes, negative values are allowed :). But they don't work in firefox 2.
Related
I want to show a number of text blocks, at first just showing the title and a few lines, and after clicking a 'more' tag show it all, or hide it again.
I used the CSS trick of hidden checkbox and label, and it looked almost correct.
label {
width: 50%;
border-radius: 5px;
background: linear-gradient(to bottom, rgba(255,255,255,0.0) 0%, rgba(0,0,128,0.7) 100%);
cursor: pointer;
}
label:after {
content: "see more...";
margin-left: 1%;
font-style: italic;
font-weight: bold;
font-size: smaller;
}
.lbl1 {
// display:inline-block;
padding-top: 40px;
color: white;
font-style: italic;
}
input[id^="more"] {
display: none;
}
input[id^="more"]:checked ~ .lbl1:after {
content: "show less";
}
input[id^="more"]:checked ~ .arttxt1{
height: 100%;
}
.arttxt1{
margin-left:1%;
width: 50%;
margin-bottom:2px;
line-height: 2.5ex;
height: 8.4ex; /* 2.5ex for each visible line */
overflow: hidden;
}
<article>
<h1>De regels</h1>
<input id='more20' type='checkbox'/>
<div class='arttxt1'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<label for='more20' class='lbl1'> </label>
</article>
The label to click on only had the width of the text, whereas I wanted it streteched over the full width.
Searching suggested adding 'display: inline-block' which I did. It indeed stretched the label over the full width, but I also lost the transparency: it sort of lies in front of the text.
I tried and I searched but could not find a proper solution. Hope someone can help me.
Is this the effect you want?
using negative margin to move div up
label {
width: 50%;
border-radius: 5px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.0) 0%, rgba(0, 0, 128, 0.7) 100%);
cursor: pointer;
}
label:after {
content: "see more...";
margin-left: 1%;
font-style: italic;
font-weight: bold;
font-size: smaller;
}
.lbl1 {
display: inline-block;
padding-top: 40px;
color: white;
font-style: italic;
margin-top: -40px;
padding-left: 1%;
}
input[id^="more"] {
display: none;
}
input[id^="more"]:checked~.lbl1:after {
content: "show less";
}
input[id^="more"]:checked~.arttxt1 {
height: 100%;
}
.arttxt1 {
margin-left: 1%;
width: 50%;
margin-bottom: 2px;
line-height: 2.5ex;
height: 8.4ex;
/* 2.5ex for each visible line */
overflow: hidden;
}
<article>
<h1>De regels</h1>
<input id='more20' type='checkbox' />
<div class='arttxt1'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<label for='more20' class='lbl1'> </label>
</article>
To clarify, it doesn't lose the transparency - what is actually happening is that because your <div class="arttxt1"> is a block element, the label is being pushed down to below the text.
As such, you can either use margin-top as per Chris Li's answer, or position:relative and top to push the label up over the top of your text.
label {
width: 50%;
border-radius: 5px;
background: linear-gradient(to bottom, rgba(255,255,255,0.0) 0%, rgba(0,0,128,0.7) 100%);
cursor: pointer;
}
label:after {
content: "see more...";
margin-left: 1%;
font-style: italic;
font-weight: bold;
font-size: smaller;
}
.lbl1 {
display:inline-block;
padding-top: 40px;
color: white;
font-style: italic;
position:relative;
top: -40px;
}
input[id^="more"] {
display: none;
}
input[id^="more"]:checked ~ .lbl1:after {
content: "show less";
}
input[id^="more"]:checked ~ .arttxt1{
height: 100%;
}
.arttxt1{
margin-left:1%;
width: 50%;
margin-bottom:2px;
line-height: 2.5ex;
height: 8.4ex; /* 2.5ex for each visible line */
overflow: hidden;
}
<article>
<h1>De regels</h1>
<input id='more20' type='checkbox'/>
<div class='arttxt1'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<label for='more20' class='lbl1'> </label>
</article>
When I hover on my button my H2 and paragraph wiggle. How can I prevent it? As you can see I would like to add more border during hovering. Is it a cause this situation?
.about-me-wrapper {
background-color: #fff;
width: 50%;
margin: 10em auto;
height: 50%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.about-me-wrapper p {
width: 70%;
line-height: 1.75;
}
.about-me-wrapper a {
background: transparent;
border: 2px solid #000;
padding: 10px 20px;
margin: 20px 0;
font-weight: 700;
text-transform: uppercase;
transition: all .4s;
display: inline-block;
}
.about-me-wrapper a:hover {
cursor: pointer;
border: 3px solid #4EADFF;
color: #4EADFF;
transform: scale(1.1);
}
<section class="about-me">
<div class="about-me-wrapper">
<h2>Aarhus Lejerboliger</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
View project
</div>
</section>
So I want to achieve this using css and html
So I wrote this code that sets the width of each box to 33.33%
/* Base style */
h1 {
text-align: center;
}
.row {
width: 100%;
height: auto;
padding: 10px;
}
* {
box-sizing: border-box;
font-family: sans-serif;
margin: 0px;
}
div > div {
background-color: gray;
border: 1px solid;
float: left;
}
.dummy_text {
clear: right;
padding: 10px;
}
/* Top right paragraphs*/
#chiken {
float: right;
background-color: pink;
border: 2px solid;
width: 150px;
text-align: center;
font-weight: bold;
position: relative;
left: 1px;
padding: 5px;
}
#beef {
float: right;
background-color: indianred;
color: white;
border: 2px solid black;
width: 150px;
text-align: center;
font-weight: bold;
left: 1px;
padding: 5px;
}
#sushi {
float: right;
background-color: lightgoldenrodyellow;
border: 2px solid;
width: 150px;
text-align: center;
font-weight: bold;
left: 1px;
padding: 5px;
}
/* Desktop */
#media (min-width: 992px) {
.col-dsk-3 {
float: left;
width: 33.33%;
}
}
<h1>Our menu</h1>
<div class="row">
<div class="col-dsk-3 col-tbl-2 col-mbl-1">
<p id="chiken">Chicken
<p>
<p class="dummy_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-dsk-3 col-tbl-2 col-mbl-1">
<p id="beef">Beef
<p>
<p class="dummy_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-dsk-3 col-tbl-1 col-mbl-1">
<p id="sushi">Sushi
<p>
<p class="dummy_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
And the result is this:
The thing is that I need spacing between paragraphs, so what I though was to add some margin-left to the boxes, the thing is that when I add 10px, the result is that one of the three boxes goes to a new line, but I need the three in the same line.
This is what I did to add the margin, I modify the div > div part like this:
div > div {
background-color: gray;
border: 1px solid;
float: left;
margin-left: 10px;
}
And then result:
Use % values for all your layout widths.
Use :last-child to set the margin of the right div to zero.
div > div {
background-color: gray;
border: 1px solid;
float: left;
margin-right: 2%
}
div > div:last-child {
margin-right: 0;
}
/* Desktop */
#media (min-width: 992px) {
.col-dsk-3 {
float: left;
width: 32%;
}
}
Here's a codepen:http://codepen.io/prime8/pen/LRympm
Use calc for with
.col-dsk-3 {
float: left;
width: calc(33.33% - 20px);
margin-right: 10px;
}
.col-dsk-3:last-child {
margin-right: 0px;
}
But I suggest you use flexbox instead
When adding the margin-left: 10px to each paragraph you are making their widths larger than 33.33% which results in being greater than 100% pushing the last paragraph down.
Like all things in CSS, there is a couple of different ways you can solve this, but the easiest and most direct answer to your question is using the calc CSS function. The calc function calculates a numerical value in CSS using basic math operations.
Using the calc function you can then set the width of each paragraph to be:
width: calc(33.33% - 10px);
Which will result in a 100% fit.
There are a number of things you can do about this.
1 - Use calc to reduce the width of elements currently set to 33.33% by 10px, and use 10px margin:
.col-dsk-3 {
float: left;
width: calc(33.33% - 10px);
margin-right: 10px;
}
2 - Wrap the content of your columns in another element, and apply a padding to your columns:
<div class="col-dsk-3 col-tbl-2 col-mbl-1">
<div class="column-content">
<p id="chiken">Chicken<p>
<p class="dummy_text">Lorem ipsum dolor sit....</p>
</div>
</div>
.column-content {
background-color: gray;
}
.col-dsk-3 {
float: left;
width: 33.33%;
padding: 10px;
background: none;
}
3 - use flexbox instead of floats for your columns. Remove the floats and the width: 33.33%, and add:
.row {
display: flex;
flex-direction: row;
}
.col-dsk-3 {
margin: 10px;
}
You use percentages to define the width, but add absolute values to the margins. Your widths add up to (almost) 100%, yet you add more margins, resulting in more than 100%, therefore to a value that is bigger than the space that is available.
Adjust your margins to use percentages as well and make sure you end up with 100% or less.
Try this. To use additional div wrapper in HTML.
This way has a good compatibility.
/* Base style */
h1 {
text-align: center;
}
.row {
width: 100%;
height: auto;
padding: 10px;
}
* {
box-sizing: border-box;
font-family: sans-serif;
margin: 0px;
}
/* NOTE: `.row > div > div` is better than `div > div > div` */
div > div > div { /* changed */
background-color: gray;
border: 1px solid;
float: left;
}
.row > div > div { /* changed */
margin: 0 10px;
}
.dummy_text {
clear:right;
padding: 10px;
}
/* Top right paragraphs*/
#chiken {
float: right;
background-color: pink;
border: 2px solid;
width: 150px;
text-align: center;
font-weight: bold;
position: relative;
left: 1px;
padding: 5px;
}
#beef {
float: right;
background-color: indianred;
color: white;
border: 2px solid black;
width: 150px;
text-align: center;
font-weight: bold;
left: 1px;
padding: 5px;
}
#sushi {
float: right;
background-color: lightgoldenrodyellow;
border: 2px solid;
width: 150px;
text-align: center;
font-weight: bold;
left: 1px;
padding: 5px;
}
/* Desktop */
#media (min-width: 992px) {
.col-dsk-3 {
float: left;
width: 33.33%;
}
}
<h1>Our menu</h1>
<div class="row">
<div class="col-dsk-3 col-tbl-2 col-mbl-1">
<div>
<p id="chiken">Chicken<p>
<p class="dummy_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="col-dsk-3 col-tbl-2 col-mbl-1">
<div>
<p id="beef">Beef<p>
<p class="dummy_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="col-dsk-3 col-tbl-1 col-mbl-1">
<div>
<p id="sushi">Sushi<p>
<p class="dummy_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
When I add .article img { float:right; } the image goes out of the div article and i am not getting the desired result I want. I want to align the image within grey box and to the right.
Here it is what I achieve.
What I am getting is the image is aligned outside the main container.
{
margin: 0;
padding: 0;
}
body{
width: 960px;
margin: 0 auto;
}
html {
background: url(bgimage.jpg) no-repeat center center fixed;
-webkit-background-size:cover;
background-size: cover;
}
.content-container{
background: rgba(255,255,255,.48);
margin-top: 50px;
border: 2px #e5e5e5 solid;
border-radius: 7px ;
box-shadow: 2px 2px 6px black;
}
.main-container{
margin: 10px;
padding: 5px;
}
.articles{
background: rgba(182,182,168,0.7);
border: 2px solid black;
border-radius: 5px;
}
.articles h3{
padding-left: 15px;
padding-top: 1px;
margin-bottom: 2px;
}
.articles p{
margin-top: 1px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
width: 920px;
}
.articles img{
float: right;
}
<div class="content-container">
<div class="main-container">
<div class="articles">
<h3>Heading of the article</h3>
<br/>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<img src="http://placekitten.com/g/300/300"></img>
</div>
</div>
</div>
This can be easily solved by adding a clear element at the end:
<div class="clear"></div>
the css:
.clear {
clear: both;
}
example:
.clear {
clear: both;
}
body{
width: 960px;
margin: 0 auto;
}
html {
background: url(bgimage.jpg) no-repeat center center fixed;
-webkit-background-size:cover;
background-size: cover;
}
.content-container{
background: rgba(255,255,255,.48);
margin-top: 50px;
border: 2px #e5e5e5 solid;
border-radius: 7px ;
box-shadow: 2px 2px 6px black;
}
.main-container{
margin: 10px;
padding: 5px;
}
.articles{
background: rgba(182,182,168,0.7);
border: 2px solid black;
border-radius: 5px;
}
.articles h3{
padding-left: 15px;
padding-top: 1px;
margin-bottom: 2px;
}
.articles p{
margin-top: 1px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
width: 920px;
}
.articles img{
float: right;
}
<div class="content-container">
<div class="main-container">
<div class="articles">
<h3>Heading of the article</h3>
<br/>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<img src="http://placekitten.com/g/300/300">
<div class="clear"></div>
</div>
</div>
</div>
So here is what i was trying to do
i wanted to have a div with z-index -1 somewhere between 2 other divs to test the parallax effect on it i put everything on the center with margin : 0 auto . but when i changed the parallax div position to absolute, it moved to the left side of the page . next i tried moving it back to center with left :50% it didn't work so what i changed it to left :12.5% and it worked !
But here is my question : could i do it in any other way ?! and is what i did now right or is it gonna cause some problems in the future ?!
here are the codes :
Html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Meaningless Pap</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="content1">
<h1>Welcome! </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="breaker" data-0="background-position:0px 0px;" data-700="background-position:0px -300px;">
<h2> this is a text </h2>
</div>
<div class="content2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<script type="text/javascript" src="skrollr.min.js"></script>
<script type="text/javascript">
skrollr.init();
</script>
</body>
</html>
Css :
body {
font-family: 'lato';
background: url("http://habrastorage.org/files/90a/010/3e8/90a0103e8ec749c4843ffdd8697b10e2.jpg") #000;
background-size: cover;
background-position: center;
background-attachment: fixed;
font-size: 100%;
line-height: 1.7;
color: #000;
}
.container {
width: 100%;
margin: 0 auto;
}
.content1 {
position: relative;
background: #fff;
width: 75%;
margin: 0 auto;
border-radius: 5px;
border: 1px solid #000;
box-shadow: 0px 7px 15px #333;
padding: 10px;
z-index: 1;
}
.content2 {
position: relative;
background: #fff;
width: 75%;
margin: 0 auto;
border-radius: 5px;
border: 1px solid #000;
box-shadow: 0px -7px 15px #333;
padding: 10px;
z-index: 1;
margin-top: 200px;
}
.breaker {
position: absolute;
left: 12.5%;
width: 75%;
height: 250px;
background: url('bg.jpg');
z-index: -1;
}
.breaker h2 {
padding-top: 50px;
text-align: center;
color: #fff;
}
There is nothing wrong with your approach. The width percentage and the left percentage are calculated in the same way when absolutely positioned - relative to the first parent element that has a position other than static.
An alternative method for an absolutely positioned element would be to specify both left and right positions. This has the advantage of being unaffected by any borders or padding.
.breaker {
position: absolute;
left: 12.5%;
right: 12.5%;
height: 250px;
background: url('bg.jpg');
z-index: -1;
}