What I am specifically looking to do, is have the blue block and red block scale with the webpage, but also remain in place without shifting up and down like they are now.
Here is a gif demonstrating that it does what I want somewhat when scaling diagonally, but scaling either vertically or horizontally results in off positioning.
Imgur link to demo gif
Here is the HTML
<div class="blockDisplay">
<center><img src="greenBlock.png" class="greenBlock">
<img src="redBlock.png" class="redBlock">
<img src="blueBlock.png" class="blueBlock"></center>
</div>
Here is the CSS
.blockDisplay {
background-color: #444;
overflow: hidden;
}
.greenBlock {
position: relative;
width: 58%;
z-index: 2;
}
.redBlock {
position: absolute;
top: 6%;
left: 66%;
width: 8vw;
z-index: 4;
}
.blueBlock {
position: absolute;
top: 40vh;
left: 77%;
width: 23vw;
}
Try this hope it's helpful for you.
CSS
.blockDisplay {
background-color: #444;
overflow: hidden;
}
.greenBlock {
position: relative;
width: 58%;
z-index: 2;
}
.redBlock {
position: absolute;
top: 6%;
left: 66%;
width: 8vw;
z-index: 4;
}
.blueBlock {
position: absolute;
top: 39vh;
left: 76%;
width: 40vw;
height: 10vw;
}
#divOnTop { z-index: 1000;
<div class="blockDisplay">
<center><img src="greenBlock.png" class="greenBlock">
<img src="redBlock.png" class="redBlock">
<img id="divOnTop" src="blueBlock.png" class="blueBlock"></center>
</div>
Then here it as as an answer
.blockDisplay {
background-color: #444;
overflow: hidden;
position: relative;
}
.greenBlock {
width: 58%;
z-index: 2;
}
.redBlock {
position: absolute;
top: 6%;
left: 66%;
width: 8vw;
z-index: 4;
}
.blueBlock {
position: absolute;
top: 40vh;
left: 77%;
width: 23vw;
}
<div class="blockDisplay">
<center>
<img src="greenBlock.png" class="greenBlock">
<img src="redBlock.png" class="redBlock">
<img src="blueBlock.png" class="blueBlock">
</center>
</div>
Related
I am trying to design a footer for my website like this:
but I've got this result, causing a horizontal scroll (red background is for better showing the problem)
.footer-container {
background-color: white;
width: 100%;
position: relative;
}
.rotate-container {
position: relative;
width: 100%;
}
.rotate-white {
position: absolute;
left: 100px;
top: -40px;
width: calc(100%);
height: 200px;
transform: rotate(-4deg);
background-color: red;
z-index: -1;
}
.rotate-grey {
top: -40px;
right: 100px;
position: absolute;
width: calc(100%);
height: 200px;
transform: rotate(5deg);
background-color: #e5e5e5;
z-index: -2;
}
.footer-top-img {
width: 290px;
position: absolute;
left: 20%;
right: auto;
top: -140px;
z-index: 1;
}
<footer style="margin-top: 150px;">
<div class="footer-container px-xl-5 w-100">
<div class="rotate-container">
<div class="rotate-white"></div>
<div class="rotate-grey"></div>
</div>
<img class="footer-top-img d-xl-block d-none" src="../global/imgs/footer/footertop.png" />
<div class="container-fluid footer-content px-xl-5">
. . .
</div>
</div>
<footer/>
How can I remove the overflow of the red div to prevent the page from scrolling?
Therefor, you need to hide the oferflow of the body itself with
body {
overflow-y: hidden;
}
I'm creating layered images right now but i need to somehow get text over each layered image. Every time I try adding it, it keeps just sitting next to the image itself. I can't get the positioning down.
#container {
position: relative;
width: 65%;
top: 0;
left: 0;
}
.imageOne {
position: relative;
z-index: 10;
top: 0;
left: 0;
}
.imageTwo {
position: absolute;
top: 66px;
left: 35%;
z-index: 20;
}
.imageThree {
position: absolute;
top: 190px;
left: 10%;
z-index: 30;
}
<div id="container">
<div>
<img class="imageOne" src="https://www.fillmurray.com/380/150/">
</div>
<div>
<img class="imageTwo" src="https://www.fillmurray.com/260/155/">
</div>
<div>
<img class="imageThree" src="https://www.fillmurray.com/270/100/">
</div>
</div>
I created a jsfiddle to see what it looks like with the images layered here:
https://jsfiddle.net/k1rpycq2/
I would use pseudo-selector to display text over the images, but the div element that contains the image must be of the same width as the image.
Do note that I had to switch the class attribute to the parent div element.
[edit] I don't like writing text in CSS so I used a data-attribute instead on the pseudo-element.
content: attr(data-caption);
#container {
position: relative;
/*width: 65%;*/
top: 0;
left: 0;
}
.imageOne {
display: inline-block;
position: relative;
z-index: 10;
top: 0;
left: 0;
}
.imageTwo {
position: absolute;
top: 66px;
left: 35%;
z-index: 20;
}
.imageThree {
position: absolute;
top: 190px;
left: 10%;
z-index: 30;
}
.imageOne::before,
.imageTwo::before,
.imageThree::before {
content: attr(data-caption);
position: absolute;
top: 50%;
left: 0px;
right: 0px;
display: block;
transform: translateY(-50%);
padding: 0.5rem;
background-color: rgba(255,255,255,0.7);
font-family: Verdana;
text-transform: uppercase;
letter-spacing: 9px;
text-align: center;
}
<div id="container">
<div class="imageOne" data-caption="These">
<img src="https://picsum.photos/200/200">
</div>
<div class="imageTwo" data-caption="Beautiful">
<img src="https://picsum.photos/200/80">
</div>
<div class="imageThree" data-caption="Images">
<img src="https://picsum.photos/200/100">
</div>
</div>
What you can do, is to put the images as background in the targeted div elements using background-image and then positon your text in the div:
HTML
<div id="container">
<div>
text # 1
</div>
<div>
text # 2
</div>
<div>
text # 3
</div>
</div>
CSS
#container {
position: relative;
width: 65%;
top: 0;
left: 0;
}
.imageOne {
position: relative;
z-index: 10;
top: 0;
left: 0;
background-image:url(/image1-380x150.jpg);
background-size:contain;
}
.imageTwo {
position: absolute;
top: 66px;
left: 35%;
z-index: 20;
background-image:url(/image2-260x155.jpg);
background-size:contain;
}
.imageThree {
position: absolute;
top: 190px;
left: 10%;
z-index: 30;
background-image:url(/image3-270x100.jpg);
background-size:contain;
}
What we need to do here is work with how position:relative and position:absolute interact. Anything which is absolute is positioned absolutely in relation to the nearest ancestor with postition:relative
Using this, create a bounding div to layer your figures. Then use the figure tag with position:absolute positioning the figcaption within that using position:absolute.
#container {
position: relative;
width: 65%;
top: 0;
left: 0;
}
.imageOne {
position: relative;
z-index: 10;
top: 0;
left: 0;
}
.imageTwo {
position: absolute;
top: 66px;
left: 35%;
z-index: 20;
}
.imageThree {
position: absolute;
top: 190px;
left: 10%;
z-index: 30;
}
[class^="image"] figure {
position: relative;
}
[class^="image"] figure>figcaption {
position: absolute;
top: 0;
background-color: rgba(255, 255, 255, 0.8)
}
<div id="container">
<div class="imageOne">
<figure>
<img src="https://www.fillmurray.com/g/380/150/">
<figcaption>Bill One</figcaption>
</figure>
</div>
<div class="imageTwo">
<figure>
<img src="https://www.fillmurray.com/260/155/">
<figcaption>Bill Two</figcaption>
</figure>
</div>
<div class="imageThree">
<figure>
<img src="https://www.fillmurray.com/270/100/">
<figcaption>Bill Three</figcaption>
</figure>
</div>
</div>
How can I insert an element between and its child and its grandson?
I have a markup like this:
<div id="main">
<div id="img-container">
<img id="img">
</div>
</div>
And the styles are:
#main {
margin-top: 300px;
position: relative;
z-index: 1;
}
#img-container {
margin-top: -150px;
position: relative;
z-index: 0;
}
#img {
display: block;
position: relative;
z-index: 2;
}
Now the order must be
img-container
main
img
How it works now:
How it is expected to work:
(Thanks to #ralph.m for images)
You can really just get that visual effect without having to reorder layers etc. You can reverse the styles on those elements to get that appearance. Or you could do something even simpler like this:
#main {
position: relative;
background: #e7e7e7;
width: 600px;
padding: 0 50px;
margin: 50px;
}
#main::after {
content: '';
width: 500px;
height: 200px;
position: absolute;
z-index: -1;
left:50%;
margin-left: -250px;
top: -50px;
background: #30353b;
}
#img-container {
position: relative;
width: 400px;
top: -20px;
margin: 0 auto;
}
<div id="main">
<div id="img-container">
<img src="https://unsplash.it/400/200">
</div>
</div>
Question isn't clear, but are you just looking for something like this? (It basically involves replacing margin-top with top on the img-container.)
#main {
margin-top: 100px;
position: relative;
z-index: 1;
background: #e7e7e7;
width: 500px;
padding: 0 40px;
}
#img-container {
top: -50px;
position: relative;
z-index: 0;
background: #30373b;
width: 400px;
padding: 40px;
}
#img {
display: block;
position: relative;
z-index: 2;
}
<div id="main">
<div id="img-container">
<img id="img" src="https://unsplash.it/400/200">
</div>
</div>
I need to layer multiple divobjects.
To look like this
Whenever I load the markup as an HTML file in the browser the top: feature isn't responding. Then, if I open firebug to check the CSS, it shows that the value is there. If I modify the value of top: then and only then do the elements with top applied to them snap to the value in the CSS file.
I am aware that an alternative is to use a negative margin-top combined with padding set in fixed units, but as margin-top is relative to the child and not the parent that isn't consistent under all circumstances. I'd rather use position:absolute inside of a position:relative container.
Here's a fiddle, for some reason the it isn't congruent with what I see on my html file. Nonetheless, it may be of some help visualizing things.
<!--here's the container-->
<div id="fale_container">
<!--here's the container for the top-layer-->
<div id="fale_textbox_0">
<div class="highlight0a" id="Fale"><h1 class="fale_heading" id="faleh1">Fale</h1></div>
<div class="highlight0a" id="que"><h1 class="fale_heading">que</h1></div>
<div class="highlight0a" id="nem"><h1 class="fale_heading">nem</h1></div>
<div class="highlight0a" id="um"><h1 class="fale_heading">um</h1></div>
</div>
<!--here's the markup in question, this needs to go behind the container cited above. this is where the problematic styles are located-->
<div id=fale_textbox_container>
<div id="fale_textbox_2">
<h1 id="fale_heading_2">Rápido</h1>
</div>
<div id="fale_textbox_3">
<h2 id="fale_subheading_2">Sem Sotaque</h2>
</div>
<div id="fale_textbox_1">
<h2 id="fale_subheading_1">GRINGO</h2>
</div>
CSS
.highlight0a{
position: relative;
height: 55.7px;
width: 100%;
margin-bottom:1%;
}
.fale_heading {
position: relative;
display: block;
width: 13.32756%;
float: left;
margin-right: 0.00666%;
margin-left: 13.33422%;
color: black;
font-size: 3em;
clear: right;
z-index: 10; }
#fale_container {
position: relative;
height: auto;
width: 100%; }
#fale, #que, #nem, #um {
z-index: 9; }
#fale:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
width: 9%;
height: 100%;
left: 13.334%;
min-width: 4em; }
#que:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
height: 100%;
width: 9.1%;
left: 13.334%;
min-width: 6em; }
#nem:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
height: 100%;
width: 10.5%;
left: 13.334%;
min-width: 4em; }
#um:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
height: 100%;
width: 7.3%;
left: 13.334%;
min-width: 2em; }
#fale_textbox_container, #fale_textbox_1, #fale_textbox_2, #fale_textbox_3 {
display: block;
position: relative;
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
height: auto; }
#fale_textbox_container {
background-color: black;
z-index: 0; }
#fale_textbox_1, #fale_textbox_2, #fale_textbox_3 {
padding: 2%;
top: -42%;
z-index: 2; }
#fale_textbox_1 {
height: 100px;
background-color: white; }
#fale_textbox_2 {
height: 60px;
background-color: #7C1A1A; }
#fale_textbox_3 {
height: 80px;
background-color: #3F3C3C; }
#fale_heading_2, #fale_subheading_1, #fale_subheading_2 {
position: absolute;
z-index: 4;
width: 13.32756%;
float: left;
margin-right: 0.00666%;
margin-left: 28.66858%;
color: black; }
#fale_heading_2 {
top: 10; }
#fale_subheading_1 {
font-size: 4em;
top: 10; }
#fale_subheading_2 {
top: 10; }
I'm not completely sure what you are trying to accomplish.
Maybe you mean the following:
#fale_textbox_container {
background-color: black;
z-index: 0;
position: absolute; // Added this one
}
.highlight0a {
position: relative;
height: 55.7px;
margin-bottom:1%;
display: inline; // And this one
}
http://jsfiddle.net/xqd3x91q/3/
And next time, please please outline the code a little bit better, hard to read. And sometime in English would give most users more feeling of what you are trying to do. For me it looks like it is some sort of book cover.
I have created this website. And now, I would like to center text on those two images in header. Relevent code is here
<div class="header">
<img src="css/title578145459.png" class="headerImage left"/>
<img src="css/title756941752.png" class="headerImage right"/>
<span class="headerText">Ubytovna Stavařov Přerov</span>
</div>
and CSS
.headerImage {
width: 50%;
height: 100%;
}
.header {
position: relative;
height: 190px;
text-align: center;
padding-top: 5px;
opacity: 0.8;
}
.headerText {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
color: yellow;
font: normal 3em sling;
font-style: oblique;
}
I tried to set different values to top and bottom attributes, also I've tried to set padding and margin but neither of these have worked. Thanks for any tips.
Your z-index on .headerText should be positive. Using Chrome dev tools I was able to see the text using this:
.headerText {
position: absolute;
top: 120px;
left: 0px;
right: 0;
z-index: 1;
}
Try this
.headerText {
position: absolute;
top: 50%;
left: 25%;
right: 25%;
z-index: 1;
}