Can you please take a look at JSfiddle and let me know how I can position the div with .caption at the bottom of the div with class .wrapper.
I already tried to add position:absolute; bottom:5px; rules to .caption but it positioned the caption div out of the .wrapper !
<div class="wrapper">
<div class="caption">Test</div>
<div class="main"></div>
</div>
here is the css rules
.wrapper{
height:300px;
width:300px;
background-color:yellow;
}
.main{
height:100%;
width:100%;
}
.caption{
height:10%;
width:100%;
background: rgb(0, 0, 0) ; opacity: 0.7;>
margin-bottom:5px;
color:white;
}
The position: absolute should work but you'll need to set .wrapper as:
.wrapper {
position: relative;
}
Demo here: http://jsfiddle.net/sBxP2/4/
try this
http://jsfiddle.net/shall1987/MwJsG/
CSS
.wrapper{
height:300px;
width:300px;
background-color:yellow;
position: relative;
}
.main{
height:100%;
width:100%;
}
.caption{
height:10%;
width:100%;
background: rgb(0, 0, 0) ; opacity: 0.7;>
margin-bottom:5px;
color:white;
position: absolute;
bottom: 0;
}
you can update your css like this
http://jsfiddle.net/shall1987/MwJsG/
.wrapper{
height:300px;
width:300px;
background-color:yellow;
position:relative;
}
.main{
height:100%;
width:100%;
}
.caption{
height:10%;
width:100%;
background: rgb(0, 0, 0) ; opacity: 0.7;
margin-bottom:5px;
color:white;
position:absolute;
bottom:0;
}
Related
For the life of me, I cannot figure out why this code can't work. I am trying to set up a personal website and before I put my content in place, I want to have all of the areas setup and have it be responsive. I want a 3x3 grid of boxes where I can display my work (div id = container), but every time I introduce the ninth div block specifically (p9), the arrangement breaks for seemingly no reason. Here's the code for the desktop layout:
body{
background-color:#FFB51E;
width:100%;
height:1000px;
position:absolute;
}
/* unvisited link */
a:link {
text-decoration:none;
background-color: #2A56C4;
color:#fff;
padding:15px;
border-radius:26px;
}
/* visited link */
a:visited {
color: fff;
}
/* mouse over link */
a:hover {
background-color:#FF581E;
}
/* selected link */
a:active {
color:#FF581E;
background-color:fff;
}
#header{
width:80%;
height:160px;
margin: 0 auto;
position:relative;
display:block;
}
.left{
color:#fff;
text-align: left;
margin-top:25px;
margin-bottom:15px;
font-size:36px;
position:relative;
float:left;
width:310px;
display:block;
}
.right{
text-align:right;
width:300px;
float:right;
padding-top:5px;
margin-bottom:15px;
font-size:24px;
position:relative;
float:right;
z-index:2;
}
.works{
text-align:center;
position:relative;
float:left;
left:30%;
font-size:25px;
width:100px;
display:inline-block;
}
.about{
text-align:center;
position:relative;
float:right;
right:30%;
font-size:25px;
width:100px;
display:inline-block;
}
.border{
background-color:none;
width:100%;
height:85px;
margin:0 auto;
border:none;
border-bottom: 6px solid #000;
float:none;
position:relative;
}
/*body stuff*/
#container{
position:static;
display:block;
margin:0 auto;
font-size:0px;
margin-top: -10px;
width:80%;
height:550px;
}
.p1{
background-color: aliceblue;
color:000;
font-size:12px;
width:230px;
z-index: 1;
float:left;
margin: 0px;
padding:0px;
}
.p2{
background-color: red;
width:230px;
z-index: 1;
float:left;
padding:0px;
}
.p3{
background-color: blue;
width:230px;
z-index: 1;
float:left;
padding:0px;
margin:0px;
}
.p4{
background-color: purple;
width:230px;
z-index: 1;
float:left;
margin-top: 20px;
padding:0px;
}
.p5{
background-color: green;
width:230px;
z-index: 1;
float:left;
margin-top: 20px;
padding:0px;
}
.p6{
background-color: brown;
width:230px;
z-index: 1;
float:left;
padding:0px;
margin-top: 20px;
}
.p7{
background-color: purple;
width:230px;
z-index: 1;
float:left;
margin-top: 20px;
padding:0px;
}
.p8{
background-color: green;
width:230px;
z-index: 1;
float:left;
margin-top: 20px;
padding:0px;
}
.p9{
background-color: green;
width:230px;
z-index: 1;
float:left;
margin-top: 20px;
padding:0px;
}
I'm about five minutes from drop kicking my laptop out the window, so any kind of help would be greatly appreciated! Let me know if you need code for the html as well.
Something to get you started. I don't have the HTML you use so I focused on the container.
I defined it as a flexbox which makes it responsive. Each item has a width of 33% and a height of 30px (for demo purpose).
/*body stuff*/
#container {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
margin-top: -10px;
width: 80%;
}
[class^="p"] {
width: 33%;
height: 30px;
}
.p1 {
background-color: aliceblue;
}
.p2 {
background-color: red;
}
.p3 {
background-color: blue;
}
.p4 {
background-color: purple;
}
.p5 {
background-color: green;
}
.p6 {
background-color: brown;
}
.p7 {
background-color: yellow;
}
.p8 {
background-color: red;
}
.p9 {
background-color: green;
}
<div id="container">
<div class="p1"></div>
<div class="p2"></div>
<div class="p3"></div>
<div class="p4"></div>
<div class="p5"></div>
<div class="p6"></div>
<div class="p7"></div>
<div class="p8"></div>
<div class="p9"></div>
</div>
First: I just added this CSS rule at the bottom (to overwrite the other rules) and now it works as desired:
#container > div {
width: 230px;
margin-top: 20px;
}
https://jsfiddle.net/bhzw7o60/1/
Second: For elements that have common parameters (like your floated elements which all have the same width, size and margin-top) you should use a * common* class for all of them and additional seperate classes for the individual elements which only contain the differing properties. My above rule does this for width and margin-top. You could also add the height to it, and only define the background-color in the individual classes. BTW: z-index does nothing in this case, you can delete that from all the rules.
I try to do something but it's not working at all.
That looks pretty simple, i desire to add a :before to an element with a background, but each time i do that, the ::before goes in front of the container.
.container{
position:relative;
z-index:1;
background:blue;
border:1 px solid white;
}
.container::before{
position:absolute;
content:"";
z-index:-1;
top:-10px;
left:-10px;
width:calc(100% + 20px);
height:calc(100% + 20px);
background:red;
}
Simply remove the z-index:1 property from the .container
body {
background-color: #eee;
}
.container{
position:relative;
background:blue;
border:1 px solid white;
width: 200px;
height: 200px;
}
.container::before{
position:absolute;
content:"";
z-index:-1;
top:-10px;
left:-10px;
width:calc(100% + 20px);
height:calc(100% + 20px);
background:red;
}
<body>
<div class="container"></div>
</body>
Good evening,
I am trying to make image hover overlay with text, but displayed text is always on the top of the image. I would like to display it in the middle of it.
I've tried padding etc, but it moved the overlay as well, that it covered also the free space below the image. Could you please help me, how to margin only text from top? Thank you!
EDIT: Or the best solution would be, if I could include another div with text only. Because I need to include text with html tags and it's not possible this way, via "content:"
http://jsfiddle.net/sL6bjebx/
Here is CSS code:
.image {
position:relative;
margin: 0 auto;
}
.image img {
width:100%;
vertical-align:;
}
.image:after {
content:'Here is some text..';
color:#fff;
position:absolute;
width:100%; height: 100%; max-height:100%;
top:0; left:0;
background:rgba(0,0,0,0.75);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image:hover:after {
opacity:1;
}
If your overlay text is going to be a one liner then you can use line-height css property to make it vertically center aligned
.image:after {
content:'Here is some text..';
color:#fff;
position:absolute;
width:100%; height: 100%; max-height:100%;
top:0; left:0;
background:rgba(0,0,0,0.75);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
line-height:300px;
}
and if not, then I will suggest to use another way to display the content.
such as :before just like this fiddle, Or you can use a <p> tag as well instead of the :before tag check this fiddle.
.image:after {
content:'';
color:#fff;
position:absolute;
width:100%; height: 100%; max-height:100%;
top:0; left:0;
background:rgba(0,0,0,0.75);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
z-index:1
}
.image:before {
content:'Here is some text..';
color:#fff;
position:absolute;
width:100%; height: 20px;
top:0; left:0; right:0;
bottom:0;
opacity:0;
margin:auto;
z-index:2
}
.image:hover:after {
opacity:1;
}
.image:hover:before {
opacity:1;
}
Here is the solution with another div or something, where would be possible to insert text with HTML tags:
.image {
position:relative;
margin: 0 auto;
width: 317px;
height: 317px;
text-align: center;
}
.image img {
width:100%;
vertical-align:;
}
.image .overlayText {
color:#fff;
position:absolute;
width:100%; height: 100%; max-height:100%;
line-height:317px;
top:0; left:0;
background:rgba(0,0,0,0.75);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
margin:0;
}
.image:hover > .overlayText {
opacity:1;
}
<div class="image">
<img src="http://media.tumblr.com/tumblr_m6v66lJ5K61r0taux.jpg">
<p class="overlayText"><b>Here</b> is some text</p>
</div>
You should simply add line-height
.image {
position:relative;
margin: 0 auto;
}
.image img {
width:100%;
vertical-align:;
}
.image:after {
content:'Here is some text..';
color:#fff;
position:absolute;
width:100%; height: 100%; max-height:100%;
line-height:317px;
top:0; left:0;
background:rgba(0,0,0,0.75);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image:hover:after {
opacity:1;
}
<div class="image" style="width: 317px; height: 317px; text-align: center;">
<img src="http://media.tumblr.com/tumblr_m6v66lJ5K61r0taux.jpg">
</div>
I'm trying to make my footer stick to the bottom of the page but somehow it just can't do. I've looked in the internet for answers with no luck, so I decided to give it a shot in here.
http://jsfiddle.net/f54eq3w8/
html:
<div id="container">test</div>
<footer></footer>
css:
html{
height:100%;
position:relative;
min-height:100%;
}
body{
height:100%;
padding:0;
display:inline-block;
width:100%;
min-height:100%;
}
footer{
position:relative;
background-color:#003300;
color:red;
width:100%;
height:100px;
border-top:4px solid #B8B8B8;
}
#container{
width:1024px;
margin:auto;
margin-top:60px;
min-height:100%;
}
JSFiddle - DEMO
Use an extra div inside container to push the footer with the same height as footer's height and apply bottom margin the negative value of the footer's height to container.
HTML:
<div id="container">
<div class="footer-push">
</div>
</div>
<footer></footer>
CSS:
html, body {
background-color: #00FF00;
height: 100%;
margin: 0px;
}
#container {
z-index: 999;
background-color: #00FF00;
position: relative;
width: 1024px;
margin: 0 auto;
min-height: 100%;
margin: 0px auto -104px auto;
}
.footer-push {
position: relative;
height: 104px;
}
footer {
z-index: 99999;
position: relative;
height: 100px;
background-color: #003300;
width: 100%;
border-top:4px solid #B8B8B8;
}
change your CSS like this. Please note that besides the footer, I got rid of the html styling, which is the culprit of your issues
body{
height:100%;
padding:0;
display:inline-block;
width:100%;
min-height:100%;
}
footer{
position:absolute;
bottom:0;
background-color:#003300;
color:red;
width:100%;
height:100px;
border-top:4px solid #B8B8B8;
}
#container{
width:1024px;
margin:auto;
margin-top:60px;
min-height:100%;
}
See your updated fiddle
I don't know if it is tricky.
Here is a jsFiddle simple <div>hello</div>:
Is there any easy way to color the top left pixel of that div in red?
Thank you.
You can do this :
div:before{
position: absolute;
width:1px;height:1px;
background:red;
content:'';
}
div {
position: relative;
border:1px solid green;
height:200px;
background-color:yellow;
}
Demonstration (with a bigger red dot, so that it's obvious)
For browser compatibility you could add a span inside your div:
<div><span></span>hello</div>
Then add styling:
div {
border:1px solid green;
height:200px;
background-color:yellow;
position:relative;
}
div span {
position:absolute;
height:1px;
width:1px;
background:red;
top:0;
left:0;
}
By this way :
div {
position: relative;
border:1px solid green;
height:200px;
background-color:yellow;
}
div span {
position: absolute;
top: 0;
left: 0;
height: 1px;
width: 1px;
background: red;
}
http://jsfiddle.net/m3GMc/1/
Or via an image.
You should be able to use:
first-pixel-color-top-left-color: #f00;