bgpattern, illustratewoman class images should be hidden outside the div but the image is visible outside the card div also. For me, the images only should be displayed inside the div but not outside. Box class image should display on the inner and outer side of the div.
CSS even though I tried overflow: hidden for card class but it hides all the images going outside but for me, box image should not be hidden I tried to add for bgpatternimg, illustratewoman it doesn't work.
card {
position: absolute;
background-color: white;
height: 70vh;
width: 130vh;
border-radius: 3%;
position: relative;
margin: auto;
top: 15vh;
}
.bgpatternimg {
overflow: hidden;
position: absolute;
left: -70vh;
top: -30vh;
width: 120vh;
}
.illustratewoman {
overflow: hidden;
position: absolute;
bottom: 10vh;
left: -10vh;
width: 60vh;
height: 50vh;
}
.boximg {
position: absolute;
width: 22vh;
bottom: 4vh;
left: vh;
overflow: visible;
}
<div class="card">
<div class="left">
<div class="bgpattern">
<img class="bgpatternimg" src="images/bg-pattern-desktop.svg" alt="bgpattern">
</div>
<div class="illustratewoman">
<img class="illuswoman" src="images/illustration-woman-online-desktop.svg" alt="illustratewoman">
</div>
<div class="box">
<img class="boximg" src="images/illustration-box-desktop.svg" alt="">
</div>
</div>
you're positioning absolute which means it'll make the position relative to the nearest static/relative positioned parent or grandparent. you're better off using another strategy without absolute positioning, then make your widths and heights 100%
change style file
hello you should change the style to this code
.card{
position:absolute;
background-color: white;
height:70vh;
width:130vh;
border-radius: 3%;
position:relative;
margin:auto;
top:15vh;
}
.bgpattern {
overflow: hidden;
position: absolute;
left: -70vh;
top: -30vh;
width: 120vh;
}
.illustratewoman {
width: 60vh;
position: absolute;
bottom: 10vh;
left: -10vh;
overflow: hidden;
}
.box {
position: absolute;
width: 22vh;
bottom: 4vh;
left: 28vh;
}
Related
I am attempting to use the overflow: visible; property in order to show a child element passing the parent element. My attempt is failing and the child element (the image) is getting cut off at the top of the parent element.
Does anyone see what I am doing wrong?
#blue {
height: 150px;
width: 100%;
background: blue;
}
#redBanner {
width: 100%;
height: 150px;
background: #b22525;
position: relative;
overflow: visible;
}
#redBannerImg {
position: absolute;
bottom: 0;
right: 10%;
width: 40%;
height: auto;
}
<section id="blue">
</section>
<section id="redBanner">
<img src="https://png.pngtree.com/element_origin_min_pic/16/07/22/2057921811589a1.jpg" alt="" id="redBannerImg">
</section>
If you use top: 0;instead of bottom: 0; it works, but not sure if that brokes your design.
#redBanner {
width: 100%;
height: 150px;
background: #b22525;
position: relative;
overflow: visible;
}
#redBannerImg {
position: absolute;
top: 0;
right: 10%;
width: 40%;
height: auto;
}
<section id="redBanner">
<img src="https://png.pngtree.com/element_origin_min_pic/16/07/22/2057921811589a1.jpg" alt="" id="redBannerImg">
</section>
My layout consists of 3 DIVs
The first DIVis a wrapper.
The second DIV is centered and uses max-width:980px; Otherwise it defaults to 100% width.
The third DIV is 200px wide and uses absolute position. right:-200pxand top:0px position it next to the first DIV
This layout works perfect but only because the last DIVhas a width of 200px. If that DIV had a variable width I couldn't use right:-200px and it wouldn't place correctly.
So my question is what would I do if the DIV with absolute position had a variable width? How would I place it next to the main DIV?
Here is my code.
<div class="outer_container">
<div class="internal_alignment">
<div class="main_container"></div>
<div class="column_outside"></div>
</div>
</div>
CSS
.outer_container {
overflow: hidden;
position: relative;
}
.internal_alignment {
position: relative;
max-width: 980px;
margin: 0px auto;
}
.main_container {
height: 500px;
background-color: bisque;
}
.column_outside {
position: absolute;
top: 0px;
right: -200px;
height: 500px;
width: 200px;
background-color: black;
}
FYI: the outer_container DIV allows column_outside to sit outside the screen if the browser is smaller than 980px wide.
Make it a child of the main and give it left: 100%;
.outer_container {
overflow: hidden;
position: relative;
}
.internal_alignment {
position: relative;
max-width: 980px;
margin: 0px auto;
}
.main_container {
height: 500px;
background-color: bisque;
}
.column_outside {
position: absolute;
top: 0px;
left: 100%;
height: 500px;
width: 200px;
background-color: black;
}
<div class="outer_container">
<div class="internal_alignment">
<div class="main_container">
<div class="column_outside"></div>
</div>
</div>
</div>
After a second thought, simply use left: 100% instead of right: -200px;
.outer_container {
overflow: hidden;
position: relative;
}
.internal_alignment {
position: relative;
max-width: 980px;
margin: 0px auto;
}
.main_container {
height: 500px;
background-color: bisque;
}
.column_outside {
position: absolute;
top: 0px;
left: 100%;
height: 500px;
width: 200px;
background-color: black;
}
<div class="outer_container">
<div class="internal_alignment">
<div class="main_container"></div>
<div class="column_outside"></div>
</div>
</div>
Very simple:
.column_outside {
right: 0px;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
transform: translateX(100%);
}
Demo https://jsfiddle.net/n4nq6Lxt/
No need to change your HTML structure.
You can use transform: translateX(100%); what it does is to move the element to the right of the amount of the width of the element itself.
right: 0;
transform: translateX(100%);
I'm creating a quiz editor.
User should be able to put check box on image
I have a div who represent a zone
inside, there is an image
on the image there are check box.
image may have any size, i don't know the size of image
check box should be positioned relative to the image
image should be center on the zone
I need something dynamic, screen should be resizable
i have the following code:
HTML
<div class="boundary" >
<div class="mycomponent">
<div class ="container">
<img style="display: block; max-height: 100%; max-width: 100%; margin-left: auto; margin-right: auto;" src="image.jpg" >
<img style="left: 20.3501%; top: 44.448%; display: block; position: absolute;" id="imgi0" src="uncheck.png">
<img style="left: 52.7185%; top: 35.7171%; position: absolute;" id="imgi1" src="uncheck.png">
<img style="left: 82.0456%; top: 31.3517%; position: absolute;" id="imgi2" src="uncheck.png">
</div>
</div>
</div>
CSS
.boundary
{
left: 0px;
display: block;
position: absolute;
right: 0px;
bottom: 50px;
top: 75px;
background-color: aquamarine;
}
.mycomponent
{
height: 43%;
width: 89.29%;
top: 26.78%;
left: 5.496%;
overflow-y: hidden;
overflow-x: hidden;
position: absolute;
padding: 0px;
text-align: center;
border-color:#000000;
border-style: solid;
background-color: beige;
}
.container
{
display: inline-block;
position: relative;
overflow: hidden;
}
jsfiddle : http://jsfiddle.net/jlogan/91p06yjm/
This code works fine on chrome and safari but failed in firefox and ie9+
any clue ?
Thansk a lot
I updated and cleared your fiddle to make it clearer. You can give your class "mycomponent" max-height instead of height.
.container{
max-height: 43%; // You had "height:43%";
width: 89.29%;
top: 26.78%;
left: 5.496%;
overflow-y: hidden;
overflow-x: hidden;
position: absolute;
padding: 0px;
text-align: center;
border-color:#000000;
border-style: solid;
background-color: beige;
}
Working fiddle
It's working for me in every browser, even if you resize the window.
I need an image to be resized to fit in inside a div. This div must, necessarely, no matter what, be an position: absolute; div. Apart from the image have 100% from its greatest dimension, it should be centered in the other way.
I could resize to fit it, but can't center. I tried to make it inline and use vertical-align, but it didn't work.
Since code worth more than words, check my fiddle example.
This is the code from the jsfiddle:
CSS:
.relative {
width: 400px;
height: 400px;
position: relative;
<!-- Next is not important, only to display better -->
display: block;
background-color: green;
border: 3px solid yellow;
margin-bottom: 10px;
}
.absolute {
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
background-color: red;
}
img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
HTML:
<div class="relative">
<div class="absolute">
<img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg"/>
</div>
</div>
<div class="relative">
<div class="absolute">
<img src="http://us.123rf.com/400wm/400/400/pashok/pashok1101/pashok110100126/8578310-vertical-shot-of-cute-red-cat.jpg"/>
</div>
</div>
you may put the image to background instead of an img tag.
<div class="absolute">
<img src="//upload.wikimedia.org/wikipedia/commons/5/52/Spacer.gif">
</div>
.absolute {
background-image: url(http://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
however, if you can set a fixed height for the div, you can use this:
.absolute { line-height:360px; }
.absolute img { vertical-align:middle; }
Only for semi-new browsers:
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Absolutely position all the things!
transform still needs browser prefixes I hear. -webkit- works for me.
http://jsfiddle.net/rudiedirkx/G9Z7U/1/
Maybe I did not understand the question…
.absolute {
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
background-color: red;
line-height:350px; //new
}
img {
position:relative;
display:inline-block; // new
vertical-align:middle; // new
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
I am a CSS beginner.
I want a half transparent centered div with the main content. Below it should be a fixed div containing the table of contents.
Below is my attempt on this. This works with a certain browser size. But when the size of the browser window changes, the table of content moves.
I want the table of contents to stay at a fixed distance to the main div.
jsFiddle link
With this window size everything looks ok:
Decreasing the window size moves toc under content div:
html
<html>
<head>
<title>Testpage</title>
<link rel='stylesheet' href='css/testpage.css'>
</head>
<body>
<div id="contenttable">
<h1>Contents</h1>
Content 01<br>
</div>
<div id="content">
some text
</div>
</body>
</html>
css:
#content{
height: 1000px;
width: 320px;
position: relative;
top: 50px;
left: 50%;
margin-left: -160px;
background-color: cyan;
}
#contenttable{
padding: 12px;
width:100%;
height:200px;
position: fixed;
background-color: yellow;
top: 125px;
left: 6%;
}
#contenttable a{
position: relative;
top: 0px;
left: 66%;
}
#contenttable h1{
position: relative;
top: 0px;
left: 66%;
}
You can use an inner div absolutely positioned inside the fixed TOC, and set its position.
Use CSS3 Calc to elaborate the right position for your main content.
Use opacity for transparency, and avoid setting the height of the main content div for automatic overflow handing.
Demo: http://jsfiddle.net/vMAQz/1/
CSS
#contenttable {
padding: 12px;
width:100%;
height:200px;
position: fixed;
background-color: yellow;
top: 125px;
}
#innerContent {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 100px;
padding: 30px;
}
#content {
padding: 10px;
opacity: 0.8;
width: 320px;
position: relative;
top: 50px;
left: calc(100% - 480px);
background-color: cyan;
}
HTML
<div id="contenttable">
<div id="innerContent">
<h1>Contents</h1>
Content 01
<br/>
</div>
</div>
<div id="content">
some text
</div>
all you need to do is change the width of the content div
#content{
height: 1000px;
width: 30%;
position: relative;
top: 50px;
left: 50%;
margin-left: -160px;
background-color: cyan;
}