I am new to learning HTML/CSS, and I have come across a bug in my code.
As you can see in the image below, the shoe in the header is overlapping into the "Featured Products" container. I've tried using z-index, but I'm not 100% how they work and they dont seem to be working for me.
screenshot
Any ideas as to why this is happening?
Thank you in advance,
Code:
https://hastebin.com/akelazivap.xml
set the first div's z-index to -1 and the second div's opacity to less than 1
(If you don't know what opacity is here is a link "https://www.w3schools.com/css/css_image_transparency.asp")
.first{
background: red;
height: 150px;
position: absolute;
z-index: -1;
top: 0;
}
.second{
margin-top: 150px;
background-color: green;
z-index: 2;
opacity: 0.8;
height: 200px;
}
<body>
<section class="first">
<h1>HI</h1>
<img src="https://pngimg.com/uploads/dog/dog_PNG50348.png" width="200">
</section>
<section class="second">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non sodales elit. Vivamus sodales, velit nec accumsan pellentesque, odio lorem blandit felis, eget facilisis quam lectus aliquet nulla. Pellentesque id fermentum lorem. Produi.</section>
</body>
The easiest way to fix this is to use clip: rect. You can also change transparent collor to not transparent or set max height for shoe div.
This is because of the padding: 7rem 0; you applied to section.featured in CSS. It's better to apply height for your section.featured or define a new section called section.inner-featured in section.featured and put everything in it and then apply padding-y to the inner section.
you have an alpha channel on the background color. If you set it to 1 , then it will hide the shoe.
i.e. .featured { background: rgba(255, 210, 150, 0.92);} change it to .featured {background: rgba(255, 210, 150, 1);}
Related
I have a div wrapper which contains an iframe, and inside the iframe I have a two divs, one needs to be a fixed header and the other one should be a scrollable content. But the problem is that the whole iframe is scrollable also with the header div which should be fixed. I already tried setting the #header div to position: fixed or absolute but that is not good solution because it shows the scrollbar even on the header div. Can I have scrollbar only for the #content div?
Here is my code
file1 html:
<div id="iframeWrapper">
<iframe src="http://jsbin.com/lixegeriru" scrollable="no"></iframe>
</div>
file1 css:
#iframeWrapper {
width: 250px;
max-height: 500px;
}
iframe {
overflow: hidden;
border: 2px solid black;
width: 100%;
}
file2 html:
<div>
<div id="header">
this is a fixed header
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis aliquet felis non tempor. Nam sit amet ultrices lectus. Suspendisse nibh justo, hendrerit in pulvinar ac, interdum ac orci. Quisque mollis augue nec posuere ullamcorper. Phasellus accumsan semper urna, non posuere ligula consectetur vel.
</div>
</div>
file2 css:
#header {
width: 100%;
height: 42px;
background-color: #ff4045;
color: white;
padding: 5px;
}
#content {
height: 2000px;
overflow: auto;
}
live demo here http://output.jsbin.com/wepoxetovi
EDIT: this question was marked as duplicate of HTML iframe - disable scroll
I disagree, my problem is not to hide the scrollbar, but use it only on the #content div, therefore the answer on the other questions are not related nor solving my problem.
EDIT 2: this question was again marked as a duplicate of Making a div vertically scrollable using CSS
Again, I disagree on this, because the provided answer does not solve my problem for this case.
Thanks to #CBroe I could solve this issue.
My iframe needed height to be defined.
iframe {
overflow: hidden;
border: 2px solid black;
width: 100%;
height: 500px;
}
Here is a working example
http://jsbin.com/roluvayoke/1
For the sake of brevity, please consult this depiction of my template (your web browser might give you a false positive about that website), that fiddle made with a chunk of my code and a sample of my H.T.M.L. file.
<html>
<!--[…]-->
<body>
<!--[…]-->
<article>
<div class="latest_article_preview">
<img class="latest_article_thumbnail" src="16x9_ratioed_picture.jpg" width="222" height="124"></img>
<div class="latest_article_headline">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="latest_article_lede">
Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehi
</div>
<div class="read_more">
Read more…
</div>
</div>
</article>
<!--[…]-->
</body>
</html>
Each latest_article_preview visually has three sub-divisions : latest_article_thumbnail, latest_article_headline and latest_article_lede. Technically, there is a fourth one (for now called "read_more") that shall visually replace latest_article_lede.
Wherever latest_article_preview gets hovered by the cursor, latest_article_lede shall be replaced by read_more.
Still, read_more is not a link to the article page as the entire latest_article_preview box is clickable (even before the to-be-animated transitions are over).
This has to be written in vanilla C.S.S., for I know two ways to do such an interaction :
The z-index transformation trick.
The content replacement.
I first tried the content replacement. As it terribly failed when I came to combine it with animations, I went to try the z-index transformation trick.
The reason I first avoided that trick is that I find it dirty. I still chose it anyhow. But I am bugging on something : how can I make the read_more flexible box take the exact same space as the latest_article_lede one ? I tried the C.S.S.'s Position property but the results were unsatisfying either (also, I remember absolute positioning being incompatible with animations).
I searched Google to know if I could base its size, positioning and alignment parameters on latest_article_lede's without finding any satisfying answer at all (despite being sure that the Flex property could help).
… After what I plan to add animations (mostly if not only fading effects), already having those. Animations that, as said earlier do not really go with the Content property.
Any samaritan to save me on this ? Help will be much appreciated.
A simple solution would be a combination of pointer-events and opacity:
section {
width: 200px;
border: 1px solid black;
}
section div {
min-height: 200px;
padding: 20px;
position: relative;
perspective: 1000px;
}
section div:after {
content: 'Read more...';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(255, 255, 255, 0.8);
line-height: 200px;
text-align: center;
opacity: 0;
pointer-events: none;
transition: all .2s;
transform: translateZ(200px);
}
section div:hover:after {
opacity: 1;
transform: translateZ(0);
pointer-events: auto;
}
<section>
<h1>Headline</h1>
<div class="content">Lorem Ipsum Dolor sit Amet!</div>
</section>
I added a ribbon effect to my h3 that looks like it's wrapped around my div. I just added a little triangle on the side and ordered it to be below the div and h3. I set the width of my h3 to 270px and the ribbon looks great is my h3 is a one-liner, but when the words occupy 2 or 3 lines, the h3 expands in height and blocks the triangle.
Is there a way to make the triangle move along with the height of the h3?
Fiddle: enter link description here
<div class="gray-bg">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
<div class="triangle-l"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet velit euismod, imperdiet purus a, semper eros. Aliquam lacinia tellus nec justo condimentum euismod non et dolor. Ut sit amet eleifend turpis. Pellentesque in adipiscing risus. Vivamus non accumsan nisl. Nulla accumsan velit ipsum, at aliquam arcu consectetur in. Integer vestibulum nunc a odio accumsan vehicula. Nunc at metus ullamcorper justo bibendum hendrerit. Aenean sit amet porttitor urna. Sed bibendum velit sed est eleifend, non cursus arcu hendrerit.
</p>
</div>
Also my z-index is acting weird. The triangle has a z-index of 1, the div has 50, and the h3 has 100... but the triangle is still on top of the div when it should be on the bottom.
*Not sure what the best approach is - CSS or jquery - so I'm tagging both.
I think I'd take a different approach, and create a pseudo element of the <h3> to create the triangle. Also, you can make a triangle the exact shape you want, meaning there's no need for z-index to hide the top half, and you can position it top: 100% meaning it's always correct irrespective of the content within the <h3>.
HTML:
<div class="gray-bg">
<h3>Lorem ipsum</h3>
<p>...<p>
</div>
CSS:
.gray-bg h3:after {
content:'';
display: block;
border-color: transparent #4678A1 transparent transparent;
border-style:solid;
border-width: 0 15px 15px 0;
height:0;
width:0;
position: absolute;
top: 100%;
left: 0;
}
Demo
Make position relative and adjust top and left
Fiddle : http://jsfiddle.net/feZbL/
.gray-bg .triangle-l{
border-color: transparent #4678A1 transparent transparent;
border-style:solid;
border-width:15px;
height:0;
width:0;
position: relative;
top: -48px;
left: -49px;
z-index: 1;
}
Move the triangle into the h3, and position it relative to the bottom rather than the top.
http://jsfiddle.net/4pnXp/
Note that this requires you to change the z-index of the triangle to -1 to position it behind the h3.
For bonus points, you can also do away with the .triangle-l element altogether, and use :after pseudo element to make the triagle!
http://jsfiddle.net/kE27U/
My solution was to wrap h3 and the triangle in a div then position it relative
http://jsfiddle.net/MKMs6/8/
<div class="wrap">
<h3>Lorem ipsum</h3>
<div class="triangle-l"></div>
</div>
check your solution Demo jsFiddle
Update .gray-bg .triangle-l class
.gray-bg .triangle-l{
border-color: transparent #4678A1 transparent transparent;
border-style:solid;
border-width:15px;
height:0;
width:0;
position: absolute;
bottom: -15px;
left: -15px;
z-index: -1;
}
I'm trying to align a <div> with a <h2> inside it at the bottom of a parent div. The best way to show you is through code so here's the JSFiddle example: http://jsfiddle.net/3GGa7/
As you can see, the project-title div (and the <h2> inside it) is aligned to the top of the project-header div. I would like it to sink to the bottom of that div, to look like this:
However if I apply a margin-top to project-title it pushes everything down rather than just that div, and if I apply a padding the black background will cover the image.
What's the most elegant way to accomplish this?
Since the .project-title must be contained within the .project-header, give the .project-header a position:relative; and the .project-title a position:absolute;
.project-header {
height: 100px;
position:relative;;
}
.project-title {
background: black;
opacity: 0.75;
position:absolute;
bottom:0px;
left:0px;
right:0px;
}
Check it out http://jsfiddle.net/gXyEU/
This way, whether you use a bigger image, or change its position or margin, you'll never have to worry about the title, it will always be positioned where it should be.
If your picture size is steady. You can try the css below:
.project {
width: 335px;
float: left;
border: 1px solid #ccc;
border-radius: 6px;
}
.project-header {
height: 100px;
}
.project-title {
background: black;
opacity: 0.75;
float:left;
width:100%;
margin-top:25%;
}
.project-title h2 {
color: #fff;
margin-bottom:0px;
float:left;
}
just close your project-header div before start of project-title div like as
<div class="project">
<div class="project-header" style="background-image:url('http://placekitten.com/200/300');" ></div>
<div class="project-title">
<h2>Project title</h2>
</div>
<div class="project-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare felis id enim dignissim dapibus. Maecenas dui mi, ullamcorper eget semper non, varius quis orci. Suspendisse lobortis nibh sed nisi luctus dictum. Sed vel arcu eros. Etiam id varius neque. Cras ac sapien in est fringilla tempor vitae et est.</p>
</div>
</div>
FIDDLE is here
If you don't mind setting the width of .project-header
.project-header {
width: 335px;
height: 100px;
display: table-cell;
vertical-align: bottom;
}
Modified JSFiddle
Given this simple structure:
<div id="parent">
<div id="child">Lorem ipsum</div>
</div>
with this CSS:
#parent {
width: 200px;
height: 200px;
padding: 20px;
overflow-x: scroll;
}
#child {
width: 500px;
}
Live demo: http://jsfiddle.net/523me/5/
Notice that the parent has a 20px padding and that the child overflows horizontally (because it is wider). If you scroll the parent all the way to the right, you'll see that the child touches the right edge of the parent.
So, the parent should have a right padding, but it is ignored. It seems that when the child has a fixed width, the right padding of the parent does not apply. (Is this specified by a standard? I would love to know. Please let me know if you find anything!)
Is there a way to force the right padding to be applied in this scenario without having to remove any of the elements from the flow (by floating or positioning)?
Screenshot 1 - The right padding is ignored. This is how all current browsers behave.
Screenshot 2 - The right padding applies. This is what I'm trying to accomplish. (Btw, the screenshot is from IE7, which is the only browser which does not ignore the right padding.)
You're suffering from this problem.
I would solve it by giving a margin to the child (and not a padding to the parent):
body {
padding: 2em;
}
#parent {
width: 200px;
height: 200px;
overflow-x: scroll;
background: gray;
}
#child {
width: 500px;
background: yellow;
margin: 20px;
display: inline-block;
}
<div id="parent">
<div id="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et turpis eu lorem consectetur blandit sed vel ligula. In lorem ligula, lacinia sed aliquet sed, congue quis tortor. In sed magna eros, eget blandit arcu. Nulla sit amet volutpat ipsum. Duis
quis nisl massa. Sed ipsum magna, tempus non malesuada in, gravida et sapien. Fusce a odio nulla, quis ultrices mauris. Maecenas in tellus id massa fringilla molestie.</div>
</div>
Dunno but adding:
#child{
display: inline-block;
}
Seems to fix it: http://jsfiddle.net/523me/6/
I've only tested in latest Chrome, may not be cross-browser
You might change the padding to a border.
padding: 20px;
to
border: 20px solid gray;
No, the padding is not ignored, but it's still inside the parent.
See updated jsFiddle, where you can see that the padding hasn't moved from its original position.
Edit: Hm, there are some anomalies. If you give the inner div a right margin, that gets ignored too. Hm. Upvoting your question.
Apply padding-right to overflowing element itself, and move background to its direct child element.
<div id="parent">
<div id="child"><div>Lorem ipsum...</div></div>
</div>
<style>
#parent {padding-right: 0; }
#child {padding-right: 20px; }
#child > DIV {background: yellow; }
</style>
http://jsfiddle.net/523me/9/