I'm trying to create a hover effect on a rather complex layout. The hover effect works, but upon hover the background (or overlay) extends beyond the image (I would like it to be just as big as the image).
Does anyone know why that is and how to fix it?
HTML
<article>
<div class="img-crop">
<h2>Title</h2>
<img src="http://bit.ly/gUKbAE" />
</div>
</article>
CSS
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
article {
overflow: hidden;
}
.title-anchor {
display: inline-block;
position: absolute;
overflow: hidden;
z-index: 1;
width: 100%;
height: 100%;
}
.img-crop:hover .title-anchor {
background: rgba(0,0,0,0.5);
}
.img-crop {
display: inline-block;
position: relative;
overflow: hidden;
max-width: 100%;
margin: 0;
padding: 0;
}
h2 {
color: rgba(0,0,0,0);
margin: 0;
padding: 0;
z-index: 2;
line-height: 0;
position: absolute;
top: 50%;
left: 0;
width: 100%;
text-align: center;
}
.img-crop:hover h2 {
color: black;
}
It's here too: http://jsfiddle.net/kmjRu/39/
Just add
img {
display: block;
}
http://jsfiddle.net/kmjRu/41/
Images are replaced inline elements by default
You need to add this on the universal css:
img { border: 0; vertical-align: top;}
...
http://jsfiddle.net/Riskbreaker/kmjRu/43/
define the height of .img-crop:hover the same as .img-crop img. E.g.
.img-crop:hover {
background: rgba(0,0,0,0.5);
height: 100px;
}
.img-crop img{height: 100px;}
Related
I am trying to understand the position in html and css by playing around with an example I have made up. In this example what I have created 3 divs which show color blocks. I am trying to make the first 2 blocks span the width of the screen and the third do just sit as it is on screen. I am trying to have all 3 blocks just stacked on top of each other.
in my html i have created 3 classes:
<div class="color-stripred">
</div>
<div class="color-stripblue">
</div>
<div class="color-stripgreen">
</div>
In my css i have defined the colors, shapes and positions of these blocks:
.color-stripred {
display: block;
height: 20px;
width: 100%;
background-color: red;
position: static;
top: 0;
left: 0;
}
.color-stripblue {
display: block;
height: 20px;
width: 100%;
background-color: blue;
left: 0;
}
.color-stripgreen {
display: block;
height: 20px;
width: 100%;
background-color: green;
left: 0;
}
The red block is on top followed by blue then green. It looks like the following picture:
The problem comes when I try and change the positioning in order to make red and box span the width of the screen. i change the red box css as follows:
.color-stripred {
display: block;
height: 20px;
width: 100%;
background-color: red;
position: fixed;
top: 0;
left: 0;
}
what happens is the redbox spans the width of the screen but the other two boxes shift upwards. how can i stop the blue box and the green box from shifting upwards?
The problem is caused by position: fixed; which you don't even need.
I think what you actually want is to set body { margin: 0; }.
According to W3Schools:
Most browsers will display the <body> element with the following
default values:
body {
display: block;
margin: 8px;
}
body:focus {
outline: none;
}
You can see in the snippet below, that if you add this to your CSS (i.e., remove the margin from the body), all three boxes become full viewport width (even though the width is set to 100%!).
See the snippet below.
body {
margin: 0;
}
.color-stripred {
display: block;
height: 20px;
width: 100%;
background-color: red;
top: 0;
left: 0;
}
.color-stripblue {
display: block;
height: 20px;
width: 100%;
background-color: blue;
left: 0;
}
.color-stripgreen {
display: block;
height: 20px;
width: 100%;
background-color: green;
left: 0;
}
<div class="color-stripred"></div>
<div class="color-stripblue"></div>
<div class="color-stripgreen"></div>
you could add margin-top:20px; to .color-stripblue
.color-stripred {
display: block;
height: 20px;
width: 100%;
background-color: red;
position: fixed;
top: 0;
left: 0;
}
.color-stripblue {
margin-top:20px;
display: block;
height: 20px;
width: 100%;
background-color: blue;
left: 0;
}
.color-stripgreen {
display: block;
height: 20px;
width: 100%;
background-color: green;
left: 0;
}
<div class="color-stripred">
</div>
<div class="color-stripblue">
</div>
<div class="color-stripgreen">
</div>
I am trying to figure out how to get rid of extra height in my inner <div> which contain <img> tags. I have tried a css reset but it isn't doing a full reset as far as I can tell.
In the HTML and CSS below, I have 3 <img> tags stacked vertically, each 32px. I want there to be no room between them and the <div> which contains them, I expect to have a height of 96px. You can see in the js fiddle, that there is space between the <img> tags and the inner div has a height > 100px.
UPDATE The possible duplicate post linked to explains well what is happening:
By default, an image is rendered inline, like a letter. It sits on the
same line that a, b, c and d sit on. There is space below that line
for the descenders you find on letters like f, j, p and q. You can
adjust the vertical-align of the image to position it elsewhere.
However, adjusting the vertical-align: top did not completely solve the problem since there was still extra height. In my case, it was necessary to set line-height:0 to completely remove all extra height.
The HTML:
<div class="ss-buttons">
<div class="outer">
<div class="inner">
<a><img src="http://www.static.mseifert.com/img-common/blank.gif" class="ss-zoom sprite-32"></a>
<a><img src="http://www.static.mseifert.com/img-common/blank.gif" class="ss-zoom sprite-32"></a>
<a><img src="http://www.static.mseifert.com/img-common/blank.gif" class="ss-zoom sprite-32"></a>
</div>
</div>
</div>
The CSS
html,
body {
min-width: 100%;
height: initial;
}
body {
line-height: 1;
}
html,
body,
div,
span,
a,
img,
p,
pre {
border: 0;
padding: 0;
margin: 0;
}
img.sprite-32 {
display: inline-block;
width: 44px;
height: 32px;
z-index: 0;
}
.outer {
width: 44px;
display: inline-block;
position: relative;
height: 96px;
}
.inner {
width: 44px;
position: absolute;
display: inline-block;
left: 0px;
z-index: 2000;
top: 0px;
}
a {
display: inline-block;
height: 32px;
}
img.ss-zoom {
background: url(http://www.static.mseifert.com/img-common/slideshow-zoom-sprite.png) no-repeat 0px 0px scroll;
}
div.ss-buttons img {
border: none;
background-color: green;
}
Add line-height:0; to .inner
html,
body {
min-width: 100%;
height: initial;
}
body {
line-height: 1;
}
html,
body,
div,
span,
a,
img,
p,
pre {
border: 0;
padding: 0;
margin: 0;
}
img.sprite-32 {
display: inline-block;
width: 44px;
height: 32px;
z-index: 0;
}
.outer {
width: 44px;
display: inline-block;
position: relative;
height: 96px;
}
.inner {
width: 44px;
position: absolute;
display: inline-block;
left: 0px;
z-index: 2000;
top: 0px;
line-height: 0;
}
a {
display: inline-block;
height: 32px;
}
img.ss-zoom {
background: url(http://www.static.mseifert.com/img-common/slideshow-zoom-sprite.png) no-repeat 0px 0px scroll;
}
div.ss-buttons img {
border: none;
background-color: green;
}
<div class="ss-buttons">
<div class="outer">
<div class="inner">
<a><img src="http://www.static.mseifert.com/img-common/blank.gif" class="ss-zoom sprite-32"></a>
<a><img src="http://www.static.mseifert.com/img-common/blank.gif" class="ss-zoom sprite-32"></a>
<a><img src="http://www.static.mseifert.com/img-common/blank.gif" class="ss-zoom sprite-32"></a>
</div>
</div>
</div>
Add vertical-align: top; to your a element CSS styling (<a>). That will line them all up with no spacing. When you use inline-block, for some reason CSS3 defaults the default vertical-align property to baseline thus the spacing. If you change vertical-align to top it'll remove your spacing issue.
Here's the updated CSS snippet for <a> element styling:
/* ...rest of your CSS */
a {
display: inline-block;
height: 32px;
vertical-align: top;
}
/* rest of your CSS... */
Just add float:left to a tag in css
a{
float:left;
}
Your CSS will be
html,
body {
min-width: 100%;
height: initial;
}
body {
line-height: 1;
}
html,
body,
div,
span,
a,
img,
p,
pre {
border: 0;
padding: 0;
margin: 0;
}
img.sprite-32 {
display: inline-block;
width: 44px;
height: 32px;
z-index: 0;
}
.outer {
width: 44px;
display: inline-block;
position: relative;
height: 96px;
}
.inner {
width: 44px;
position: absolute;
display: inline-block;
left: 0px;
z-index: 2000;
top: 0px;
}
a {
display: inline-block;
height: 32px;
}
img.ss-zoom {
background: url(http://www.static.mseifert.com/img-common/slideshow-zoom-sprite.png) no-repeat 0px 0px scroll;
}
div.ss-buttons img {
border: none;
background-color: green;
}
a{
float:left;
}
I'm really having a hard time researching for an answer. I tried to make my div: absolute but it will ruin the whole fluid grid. All I want is to put the div over the background div. Thanks in advance!
CSS
#mannequin {
box-sizing: border-box;
position: absolute;
width: 60%;
padding: 0 12px;
margin: 0;
float: left;
overflow: hidden;
}
#products {
clear: both;
position: absolute;
margin-left: 0;
width: 100%;
display: block;
z-index: 10;
}
HTML
<div id="mannequin"><img src="http://tinypic.com/r/29596hh/9">
<div id="products"><img src="http://tinypic.com/r/2qw09lc/9">
</div>
</div>
please make one Div position: relative; and other div make position: absolute;
Define height:100% to #products and top left to 0.
#mannequin {
box-sizing: border-box;
position: absolute;
width: 60%;
padding: 0 12px;
margin: 0;
float: left;
overflow: hidden;
}
#products {
clear: both;
position: absolute;
margin-left: 0;
width: 100%;
height: 100%;
display: block;
z-index: 10;
left:0;
top:0;
}
I am building a 3 columns layout website. The header will fixed on the top and nav will fixed on the left. Then the wrapper will contain main and aside. What I want is main and aside can fill the wrapper's height.
And here is my css. You can also see my jsFiddle http://jsfiddle.net/scarletsky/h8r2z/3/
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
.header {
width: 100%;
height: 100px;
position: fixed;
top: 0;
z-index: 9;
background: red;
}
.nav {
width: 20%;
height: 100%;
position: fixed;
top: 100px;
left: 0;
background: green;
}
.wrapper {
width: 80%;
min-height: 100%;
margin-top: 100px;
margin-left: 20%;
position: relative;
}
.main {
width: 70%;
min-height: 100%;
position: absolute;
left: 0;
background: black;
}
.aside {
width: 30%;
min-height: 100%;
position: absolute;
right: 0;
background: blue;
}
.u-color-white {
color: white;
}
It seems that they can work well. But when the content's height in main or aside more than their own height, it will not work. I don't know how to fix it.
Can anyone help me?
Thx!
You have a very strict layout. everything is fixed..
what if you need to change the header from 100px height to 120? you'll have to change it accordingly in a lot of different places.
This is a pure CSS solution for your layout, without fixing any height or width. (you can fix the height or width if you want to)
This layout is totally responsive, and cross browser.
if you don't fix the height/width of the elements, they will span exactly what they need.
Here's a Working Fiddle
HTML:
<header class="Header"></header>
<div class="HeightTaker">
<div class="Wrapper">
<nav class="Nav"></nav>
<div class="ContentArea">
<div class="Table">
<div class="Main"></div>
<div class="Aside"></div>
</div>
</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
body:before {
content:'';
height: 100%;
float: left;
}
.Header {
height: 100px;
/*No need to fix it*/
background-color: red;
}
.HeightTaker {
position: relative;
}
.HeightTaker:after {
content:'';
display: block;
clear: both;
}
.Wrapper {
position: absolute;
width: 100%;
height:100%;
}
.Nav {
height: 100%;
float: left;
background-color: green;
}
.ContentArea {
overflow: auto;
height: 100%;
}
.Table {
display: table;
width: 100%;
height: 100%;
}
.Main {
width: 70%;
/*No need to fix it*/
background-color: black;
display: table-cell;
}
.Aside {
width: 30%;
/*No need to fix it*/
background-color: black;
display: table-cell;
background-color: blue;
}
.u-color-white {
color: white;
}
This is a pretty common problem. I'd recommend either having a background image for wrapper that makes it appear like aside has a min-height of 100% or using the method on this site:
http://css-tricks.com/fluid-width-equal-height-columns/
just see this fiddle.... hope this is what you want...
.aside {
width: 30%;
min-height: 100%;
position:fixed;
right: 0;
background: blue;
}
http://jsfiddle.net/h8r2z/6/
I have to centralize an image in both axis and then add a linkable area to that image's top left area. This works great for webkit and ff but ie fails. My html code is this:
<body>
<div class="content">
<img src="images/main_image.jpg" />
Logo
</div>
</body>
and my css code this:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
}
div.content {
position: relative;
width: 1001px;
height: 626px;
top: 50%;
margin: 0 auto;
padding: 0;
}
div.content img {
margin: 0;
padding: 0;
display: block;
position: relative;
top: -50%;
}
div.content a {
width: 14%;
height: 9%;
display: inline-block;
position: absolute;
top: -42%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
text-indent: -9999px;
}
this doesn't work for ie because i use an a tag displayed as inline-block positioned accordingly. Our friend ie doesn't show the linkable part in the screen at all because the text-indent. Can someone help a little bit? Thanks. This demo shall help you more i think.
Take a look at this demo (or results only here)
HTML is not changed. I assume that image has the same height/width as content div
CSS:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
}
div.content {
position: relative;
padding: 0;
border:solid 1px blue;
width: 1001px;
height: 626px;
/*below will center div on screen */
top: 50%;
margin: -313px auto 0;
}
div.content img {
margin: 0;
padding: 0;
display: block;
border:solid 1px white;
/*top:-50% removed. Assuming that image has the same height/width as content div*/
}
div.content a {
width: 14%;
height: 9%;
position: absolute;
/* top: -something changed. Remember that absolutely positioned div is always positioned from closest parent relative div*/
top: 10%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
text-indent: -9999px;
border:solid 1px green;
}
It looks a like you're creating a container, moving it to the bottom of the screen and then moving the image outside of it to the top-left corner of the screen. This last step is exactly what will fail in many cases. Child-elements usually will be hidden or cutted away when leaving their parent container. IE is more restrictive but correct in this case.
You can achieve your goal easier when you'll place the image outside the container. Keep in mind that body is a container by itself that is allways 100% wide and high (and cannot be changed to be 50% or whatsoever).
Here's the result on js-fiddle
The Html:
<body>
this is the body
<img class="my_image" src="images/main_image.jpg" />
<div class="content">
This is the container
<a href="#" >Logo</a>
</div>
</body>
CSS:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
color:silver;
}
div.content {
color:black;
background-color: silver;
position: relative;
width: 1001px;
height: 626px;
top: 50%;
margin: 0 auto;
padding: 0;
}
.my_image {
width:160px;
height:60px;
border:1px solid red;
margin: 0;
padding: 0;
display: block;
position: absolute;
top: 0;
left:0;
}
div.content a {
color:red;
font-size:14px;
display: inline-block;
position: absolute;
top: 20%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
}
In general it's the best to avoid negative values. They're misinterpreted in many browsers and produce problems.