Jump to content

Overlay size doesn't match hight parent div


Peter64

Recommended Posts

I am trying to create my first website and there is one problem that I can't get fixed. I have 3 images placed in line and the idea is that by hovering over the images there sould appear a colored layer. So far so good, but the problem is that by hovering over the image the width of the layer is okay but it is to high. It seems that the bottom of the layer is following the class="cd-container". I have tried to change magin, padding, display etc, without succes. (I have add 2 printscreens)

 

Could any one tell me what I am doing wrong.

 

The html:

<div class="cd-container">	<div class="container-work">		<div class="title-page-work">			<p class="title-work">Een gedeelte van ons werk.</p>		</div>		<div class="text-page-work">			<p class="description-work">Hover over de foto’s voor meer informatie over de site, wanneer de foto wordt aangeklikt wordt men doorgestuurd naar de betreffende website.</p>		</div>		<div class="container-work-items">			<div id="work-1">				<div id="work-img-1"><img src="work/thumbs/work1.jpg" alt="Muzieklessen-Berkelland">					<div class="layer-work-1">						<div id="logo-1"><a href="https://muzieklessen-berkelland.nl/" target='_blank'><img src="work/thumbs/Logo_Ton_Rita_lijn_transparant.png" alt="Muzieklessen-Berkelland"></a></div>				        </div>				</div>			</div>				<div id="work-2">				<div id="work-img-2"><img src="work/thumbs/work2.jpg" alt="Dutchview.us">					<div class="layer-work-2">						<div id="logo-2"><a href="http://dutchview.us/" target='_blank'><img src="work/thumbs/Dutch_view_transparant.png" alt="Dutchview.us"></a></div>					</div>				</div>			</div>				<div id="work-3">				<div id="work-img-3"><img src="work/thumbs/work3.jpg" alt="Loonbedrijf te Riet Haaksbergen">					<div class="layer-work-3">						<div id="logo-3"><a href="http://loonbedrijfteriet.nl/" target='_blank'><img src="work/thumbs/te_riet.png" alt="Loonbedrijf te Riet Haaksbergen"></a></div>					</div>				</div>			</div>		</div>	</div></div>

and the css looks like:

.cd-container {  width: 100%;  max-width: 100%;  margin: 0 auto;}.cd-container::after {  /* clearfix */  content: '';  display: table;  clear: both;}.container-work {  width: 100%;  position: relative;  float: right;}.description{  width: 100%;  height: 30px;  margin-left: auto;  margin-right: auto;  position: relative;  margin-top: 90px;}.description-work {  text-align: center;  margin-left: auto;  margin-right: auto;}.title-page-work {    width: 100%;    max-width: 1170px;    height: 40px;    margin-top: -2%;    margin-left: auto;    margin-right: auto;    position: relative;    text-align: center;}.title-page-work p{  font-size: 40px;  font-weight: 200;  color: #000000;}.text-page-work {    width: 100%;    max-width: 1170px;    height: 20px;    margin-top: 2.5%;    margin-left: auto;    margin-right: auto;    position: relative;}.text-page-work p{  font-size: 20px;  font-weight: 200;  color: #000000;}.container-work-items {    width: 100%;    padding-top: 7%;  }#work-1 {  width: 33.333%;  position:relative;    height: 100%;  display: inline-block;  float: left;}#work-img-1 {  width: 100%;  position:relative;    height: 100%;  text-align: center;}.layer-work-1 {  height: 100%;  width: 100%;  top: 0;  right: 0;  bottom: 0;  left: 0;  position: absolute;  background: rgba(22, 254, 22, 0.9);  opacity: 0;  -webkit-transition: all 0.5s ease;  -moz-transition: all 0.5s ease;  -ms-transition: all 0.5s ease;  -o-transition: all 0.5s ease;  transition: all 0.5s ease;}.layer-work-1:hover {  opacity: 1;  -webkit-transition: all 0.5s ease;  -moz-transition: all 0.5s ease;  -ms-transition: all 0.5s ease;  -o-transition: all 0.5s ease;  transition: all 0.5s ease;}#logo-1 {   position: relative;   z-index: 2;   top: 50%;   -webkit-transform: translateY(-50%);   -moz-transform: translateY(-50%);   -ms-transform: translateY(-50%);   -o-transform: translateY(-50%);   transform: translateY(-50%);}#work-2 {  width: 33.333%;  position:relative;    height: 45vh;  display: inline-block;  float: left;}#work-img-2 {  width: 100%;  position:relative;    height: 100%;  text-align: center;}.layer-work-2 {  height: 100%;  width: 100%;  top: 0;  right: 0;  bottom: 0;  left: 0;  position: absolute;  background: rgba(149, 247, 247, 0.9);  opacity: 0;  -webkit-transition: all 0.5s ease;  -moz-transition: all 0.5s ease;  -ms-transition: all 0.5s ease;  -o-transition: all 0.5s ease;  transition: all 0.5s ease;}.layer-work-2:hover {  opacity: 1;  -webkit-transition: all 0.5s ease;  -moz-transition: all 0.5s ease;  -ms-transition: all 0.5s ease;  -o-transition: all 0.5s ease;  transition: all 0.5s ease;}#logo-2 {   position: relative;   z-index: 2;   top: 50%;   -webkit-transform: translateY(-50%);   -moz-transform: translateY(-50%);   -ms-transform: translateY(-50%);   -o-transform: translateY(-50%);   transform: translateY(-50%);}#work-3 {  width: 33.333%;  position:relative;    height: 45vh;  display: inline-block;  float: left;}#work-img-3 {  width: 100%;  position:relative;    height: 100%;  text-align: center;}.layer-work-3 {  height: 100%;  width: 100%;  top: 0;  right: 0;  bottom: 0;  left: 0;  position: absolute;  background: rgba(224, 221, 221, 0.9);  opacity: 0;  -webkit-transition: all 0.5s ease;  -moz-transition: all 0.5s ease;  -ms-transition: all 0.5s ease;  -o-transition: all 0.5s ease;  transition: all 0.5s ease;}.layer-work-3:hover {  opacity: 1;  -webkit-transition: all 0.5s ease;  -moz-transition: all 0.5s ease;  -ms-transition: all 0.5s ease;  -o-transition: all 0.5s ease;  transition: all 0.5s ease;}#logo-3 {   position: relative;   z-index: 2;   top: 50%;   -webkit-transform: translateY(-50%);   -moz-transform: translateY(-50%);   -ms-transform: translateY(-50%);   -o-transform: translateY(-50%);   transform: translateY(-50%);}

Maybe is someone willing to look what I have done wrong and how I can fix this.

 

Thanks

post-182117-0-62256200-1432551642_thumb.jpg

post-182117-0-02129300-1432551652_thumb.jpg

Link to comment
Share on other sites

A link to the site would help. I can't tell what is being cascaded looking at an image, and incomplete markup is not much help considering how the inconsistent CSS. How is it you think margin:auto can be applied to an element that has a width of 100% or how you float something that is 100% width?

Link to comment
Share on other sites

Thanks or your reply. About the margin and float you are right. It is the first time I try to build a website for the first time and sometimes I try and try to solve things by adding all kind of changes, hoping that these changes will work out. But untill now they havend. Here is the link: http://main-site.nl/.

Edited by Peter64
Link to comment
Share on other sites

It's because you have inline img tag followed by a div block element, any line break or spacing results in a space the size of current font used for parent/s elements, because img 100% width, this space is forced below it, resulting the extra height you are experiencing.

 

try

div[id^="work-"] > div {    font-size: 0;}

This should target all first descendant div child elements whose parent id reference starts with 'work-' and set font size to zero resulting in no spacing.

Link to comment
Share on other sites

Thanks this worked out just fine, could you tell me: is ther an easier way to create this and so to avoid this problem. ( Other words what way would be better to create an overlay over an image with out having this problem? Needless to say that this is alle new for me.

 

Thanks again, I owe you a beer

Link to comment
Share on other sites

You seem to gone a bit overkill on div container elements, you could reduce to image followed by anchor link with child span then child img. the anchor link would be the element that changes opacity to show highlight background-color.

 

The image can be floated, this will remove space problem, but you will have to use overflow: hidden; on parent container, as child floated elements area is not detectable so the height becomes 0, but overflow: hidden fixes this.

Link to comment
Share on other sites

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />        <title>http://w3schools.invisionzone.com/index.php?showtopic=53325#entry293634</title>        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>        <script type="text/javascript">        </script>        <style type="text/css">            .cd-container {                width: 100%;                max-width: 100%;                margin: 0 auto;            }            .cd-container::after {                /* clearfix */                content: '';                display: table;                clear: both;            }            .container-work {                width: 100%;                position: relative;                float: right;            }            .description{                width: 100%;                height: 30px;                margin-left: auto;                margin-right: auto;                position: relative;                margin-top: 90px;            }            .description-work {                text-align: center;                margin-left: auto;                margin-right: auto;            }            .title-page-work {                width: 100%;                max-width: 1170px;                height: 40px;                margin-top: -2%;                margin-left: auto;                margin-right: auto;                position: relative;                text-align: center;            }            .title-page-work p{                font-size: 40px;                font-weight: 200;                color: #000000;            }            .text-page-work {                width: 100%;                max-width: 1170px;                height: 20px;                margin-top: 2.5%;                margin-left: auto;                margin-right: auto;                position: relative;            }            .text-page-work p{                font-size: 20px;                font-weight: 200;                color: #000000;            }            .container-work-items {                width: 100%;                padding-top: 7%;            }            .work-1 {                width: 33.333%;                position:relative;                height: auto;                display: inline-block;                float: left;            }            .work-1 > img {float: left;}            .work-1 a {                /* height: 100%;                 width: 100%;*/                top: 0;                right: 0;                bottom: 0;                left: 0;                position: absolute;                background: rgba(22, 254, 22, 0.9);                opacity: 0;                -webkit-transition: all 0.5s ease;                -moz-transition: all 0.5s ease;                -ms-transition: all 0.5s ease;                -o-transition: all 0.5s ease;                transition: all 0.5s ease;                text-align: center;            }            .work-1.layer-col2 a {background: rgba(149, 247, 247, 0.9);}            .work-1.layer-col3 a {background: rgba(224, 221, 221, 0.9);}            .work-1 a:hover {                opacity: 1;                -webkit-transition: all 0.5s ease;                -moz-transition: all 0.5s ease;                -ms-transition: all 0.5s ease;                -o-transition: all 0.5s ease;                transition: all 0.5s ease;            }            .work-1 a img {                position: relative;                z-index: 2;                top: 50%;                -webkit-transform: translateY(-50%);                -moz-transform: translateY(-50%);                -ms-transform: translateY(-50%);                -o-transform: translateY(-50%);                transform: translateY(-50%);            }            img {                height: auto;                max-width: 100%;            }        </style>    </head>    <body>        <div class="cd-container">            <div class="container-work">                <div class="title-page-work">                    <p class="title-work">Een gedeelte van ons werk.</p>                </div>                <div class="text-page-work">                    <p class="description-work">Hover over de foto’s voor meer informatie over de site, wanneer de foto wordt aangeklikt wordt men doorgestuurd naar de betreffende website.</p>                </div>                <div class="container-work-items">                    <div class="work-1">                        <img src="http://main-site.nl/work/thumbs/work1.jpg" alt="Muzieklessen-Berkelland">                        <a href="https://muzieklessen-berkelland.nl/" target='_blank'><img src="http://main-site.nl/work/thumbs/Logo_Ton_Rita_lijn_transparant.png" alt="Muzieklessen-Berkelland"></a>                    </div>                    <div class="work-1 layer-col2">                        <img src="http://main-site.nl/work/thumbs/work2.jpg" alt="Dutchview.us">                        <a href="http://dutchview.us/" target='_blank'><img src="http://main-site.nl/work/thumbs/Dutch_view_transparant.png" alt="Dutchview.us"></a>                    </div>                    <div class="work-1 layer-col3">                        <img src="http://main-site.nl/work/thumbs/work3.jpg" alt="Loonbedrijf te Riet Haaksbergen">                        <a href="http://main-site.nl/" target='_blank'><img src="http://main-site.nl/work/thumbs/te_riet.png" alt="Loonbedrijf te Riet Haaksbergen"></a>                    </div>                </div>            </div>        </div>    </body></html>

NOTE: fixed height is really not a good idea, especially for responsive design, the text will overflow outside these fixed height containers and will go under images on smaller devices instead of pushing images down as screen get smaller.

Edited by dsonesuk
Link to comment
Share on other sites

You are going to have a lot of problems trying to main tain that pages because of all the errors in the markup:

http://validator.w3.org/check?uri=http%3A%2F%2Fmain-site.nl%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

 

The code is not anywhere near well written enough to considered stable and it will break easily. A lot of the errors are actually syntax and some look like sloppy typing. You will need to be much more precise if you want to do advanced effects without stability issues.

Link to comment
Share on other sites

LOOK UP and Newbie first of all thanks for the reply. Look up thanks for the explanation and the complete rewritten script I will try to replace this for the old script. Newbie you are completly right I know that, the most errors are in the "gallery" section. But this is my first website (I realy didn't have a clue about html, css etc., now I know just a little bit more) and I am struggling for 3 months to get things working. One by one I try to solve the problems, to be honest when I try to solve them all at ones I go crazy. I try to catch up by reading books and the internet but there are not all the solutions that I need and I am 50 years old, so I don't know if school will be the right place for me. I tried to find paid help who could help me out by explaining what I am doing wrong but that isn't as easy as I thought. So when there is a solution that you know of which could help me out with learning and correcting my script please inform me.

 

Again many thanks to the both of you for your time

Link to comment
Share on other sites

You will learn more from mistakes then from the things that go smoothly. Just use the validator to find the errors and search and forums like this when you don't understand something. The learning curve for frontend Web development is not real steep, and it gets easier as you go along.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...