So I have two <div> next to each other and I want to make it so when you have little space (Phone for example) it puts the second <div> under the first one with some space. When you're on a 16:9 ratio computer it has them next to each other.
body {
background: #FFFFFF;
}
.box {
float: left;
margin: 10px;
padding: 25px;
max-width: 300px;
height: 300px;
border: 1px solid black;
}
div {
max-width: 2480px;
z-index: 2;
left: 0;
position: absolute;
width: 100%;
height: 50px;
top: 0px;
color: #2D2E32;
background: #2D2E32;
}
/*Box1*/
div2 {
position: absolute;
color: #2D2E32;
background: #2D2E32;
width: 700px;
height: 950px;
top: 700;
left: 200;
}
div3
/*Box2*/
{
position: absolute;
color: #2D2E32;
background: #2D2E32;
width: 700px;
height: 950px;
top: 700;
right: 10%;
}
img {
max-height: 800;
max-width: 2480;
z-index: 1;
width: 100%;
height: 63%;
left: 10%;
}
div4 {
max-height: 59%;
z-index: -1;
position: absolute;
width: 100%;
height: 59%;
top: 5%;
color: #17181A;
background: #17181A;
left: 0;
}
div5 {
max-width: 2480;
max-height: 25;
z-index: 2;
left: 0;
position: absolute;
width: 100%;
height: 25px;
color: #2D2E32;
background: #2D2E32;
}
<body>
<div id="page1">
<!--Task-->
<a id="Task" class="smooth"></a>
</div>
<div2 id="page2">
<!--Box1-->
<a id="Info1" class="smooth" class="box"></a>
</div2>
<div3>
<!--Box2-->
<a id="Info1" class="smooth" class="box"></a>
</div3>
</body>
CSS Media Queries will solve this problem by allowing you to create styles that will be conditionally applied based on a query that you specify. Here's an example:
/* Develop "mobile-first, meaning that your normal styles should reflect how you want
the content to look on a mobile device
div elements will normally appear on their own line, but let's add a little space between
the lines
*/
div { margin:1em; }
/* When the viewport is not bigger than 760px and it is rotated to be wide
put divs next to each other and only move them down when the full width
of the viewport is used up */
#media screen and (max-width:760px) and (orientation:landscape) {
div {
float:left;
margin:auto; /* reset margins back to normal */
}
}
<div>Some div content</div>
<div>Some div content</div>
Related
I am trying to create a relatively simple classroom-like site with overlaying images. Basically, there are a bunch of pictures you can interact with that will take you to different websites with different resources. I am struggling immensely with getting the sizing and proportions of all the images correct. I want there to be a background image that stretches to span the entire page and then carefully placed images/text over the background image/other images. As you can tell, when resizing the JSFiddle, everything gets disproportionate.
A more concrete example of what I'm trying to do: You can see the text over the "chalkboard" image. I want it to appear as if the text is writing on the chalkboard so it shouldn't be moving off the blackboard when resizing the window or looking at it through different aspect ratios. I'm trying to do this with lots and lots of images so a thorough explanation would be most helpful.
JSFiddle
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: rgb(71, 71, 71);
color: white;
text-align: center;
opacity: 0.75;
}
a {
color: lightgray;
}
p {
font-family: 'Schoolbell', arial, serif;
color: white;
}
.container {
position: fixed;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
background-image: url("https://images.unsplash.com/photo-1630699376059-b781970715b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80");
background-repeat: no-repeat;
background-size: 100%;
}
#whiteboard img {
width: 40%;
position: absolute;
top: 20%;
left: 35%;
}
#chalkboard img {
width: 20%;
height: 40%;
position: absolute;
top: 2%;
left: 78%;
}
#chalkboard p {
position: absolute;
top: 10%;
left: 80%;
color: white;
font-size: 140%;
text-align: center;
}
<body>
<div class="container">
<div id="whiteboard"><img src="https://images.unsplash.com/photo-1497409988347-cbfaac2f0b12?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" /></div>
<div id="chalkboard">
<img src="https://images.unsplash.com/photo-1614292253351-4deb4913c142?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" />
<p>
Hi all!
</p>
</div>
</div>
<div class="footer">
<p>Footer Stuff</p>
</div>
</body>
// Side Note: These aren't the images I'm trying to use, just stock photo examples.
Thank you!
As you already have the positioning done in terms of % of the actual picture I think all you basically need to do is make sure that that picture's container maintains the same aspect ratio whatever the viewport aspect ratio is.
I did a rough look at your webp image and converted it to a png and took the dimensions - you will probably want to refine that to be more accurate.
Here is the snippet:
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: rgb(71, 71, 71);
color: white;
text-align: center;
opacity: 0.75;
}
a {
color: lightgray;
}
p {
font-family: 'Schoolbell', arial, serif;
color: white;
}
.container {
position: fixed;
top: 0%;
left: 0%;
/*height: 100%;*/
width: 100%;
aspect-ratio: 873 / 579;
background-image: url("https://i.stack.imgur.com/FJHjE.png");
background-repeat: no-repeat;
background-size: 100% auto;
}
#whiteboard img {
width: 40%;
position: absolute;
top: 20%;
left: 35%;
}
#chalkboard img {
width: 20%;
height: 40%;
position: absolute;
top: 2%;
left: 78%;
}
#chalkboard p {
position: absolute;
top: 10%;
left: 80%;
color: white;
font-size: 140%;
text-align: center;
}
</style>
<html>
<body>
<div class="container">
<div id="whiteboard"><img src="https://images.unsplash.com/photo-1497409988347-cbfaac2f0b12?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" /></div>
<div id="chalkboard">
<img src="https://images.unsplash.com/photo-1614292253351-4deb4913c142?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" />
<p>
Hi all!
</p>
</div>
</div>
<div class="footer">
<p>Footer Stuff</p>
</div>
</body>
</html>
Note: you will need to decide what to do about the writing - the font-size also needs to be defined in relative terms so it shrinks appropriately.
ADDITION: It's been pointed out that keeping the width always at 100vw causes cropping of the image.
Here is a snippet which 'decides' whether to make the width or the height of the classroom as much as it can be (100vw or 100vh) and adjusts the other dimension so the aspect ratio is always maintained.
<!doctype html>
<html>
<head>
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: rgb(71, 71, 71);
color: white;
text-align: center;
opacity: 0.75;
}
a {
color: lightgray;
}
p {
font-family: 'Schoolbell', arial, serif;
color: white;
}
.container {
position: fixed;
top: 0%;
left: 0%;
aspect-ratio: 873 / 579;
background-image: url("https://i.stack.imgur.com/FJHjE.png");
background-repeat: no-repeat;
background-size: 100% auto;
}
#media (min-aspect-ratio: 873/579) {
.container {
height: 100vh;
}
}
#media (max-aspect-ratio: 873/579) {
.container {
width: 100vw;
}
}
#whiteboard img {
width: 40%;
position: absolute;
top: 20%;
left: 35%;
}
#chalkboard img {
width: 20%;
height: 40%;
position: absolute;
top: 2%;
left: 78%;
}
#chalkboard p {
position: absolute;
top: 10%;
left: 80%;
color: white;
font-size: 140%;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div id="whiteboard"><img src="https://images.unsplash.com/photo-1497409988347-cbfaac2f0b12?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" /></div>
<div id="chalkboard">
<img src="https://images.unsplash.com/photo-1614292253351-4deb4913c142?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" />
<p>
Hi all!
</p>
</div>
</div>
<div class="footer">
<p>Footer Stuff</p>
</div>
</body>
</html>
I'm designing my CSS layout, but can't get the div to stretch to 100% of the height of the parent.
I have a menu bar that takes up the top 13.714vh of the screen. Then I have a main div that I want to take up the remainder of the screen height which I did with height: 100%. bottom-container takes up the bottom 38.2% of the vertical space available in main, and I want speech-bubble to take up the remaining 61.8% of the vertical space in main.
For some reason though, there's a huge white container in the middle of the screen, and speech-bubble isn't taking up the remaining space because of it. Can anyone help me figure out what's going on?
Is there a problem with my HTML or did I make an error in the CSS?
Here's the code pen:
https://codepen.io/TheNomadicAspie/pen/NWjKwxE
body {
margin: 0;
}
.menu-bar {
height: 13.714vh;
width: 100vw;
background: darkblue;
top: 0%;
}
.main {
background: black;
grid-template-rows: 61.8% 100%;
height: 100%;
width: 100%;
padding-left: 1.5%;
padding-right: 1.5%;
padding-top: 1.5%;
padding-right: 1.5%;
}
.speech-bubble {
grid-row: 1;
position: relative;
background: orange;
height: 97%;
width: 97%;
border-radius: 4em;
}
.speech-bubble:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
border: 4em solid transparent;
border-top-color: white;
border-bottom: 0;
margin-left: -4em;
margin-bottom: -4em;
}
.email-container {
visibility: hidden;
}
.question-text {
visibility: hidden;
}
.bottom-container {
grid-row: 2;
position: fixed;
background: green;
height: 38.2%;
width: 100vw;
bottom: 0%;
left: 0%;
}
<div id="menu_bar" , class="menu-bar"></div>
<div id="main" , class="main">
<div id="speech_bubble" , class="speech-bubble">
<div id="email_container" class="email-container">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
<button id="submit_email_btn" class="btn">Submit</button>
</div>
<div id="question_text" class="question-text">Question</div>
</div>
</div>
<div id="bottom_container" , class="bottom-container">
</div>
</div>
</div>
Do you want anything like this? screenshot.
If so, making your .menu-bar as position: relative and modifying your .main class styles as follows will work:
.main {
position: absolute;
background: black;
left: 0;
right: 0;
height: 50%;
}
Also, you may add margin: auto in your speech-bubble class to align it to center.
Your main tag is not taking full height as your html and body tags are not taking the full height.
Always remember that block elements can stretch maximum to their's parent's height, hence you need to give html and body tag height of 100%.
I have added the additional css below.
html, body { height: 100%;}
I think you want thing like this
* {
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
}
.menu-bar {
height: 13.714vh;
background-color: tomato;
color: #fff
}
.main {
background: black;
padding: 1.5%;
flex: 1
}
.speech-bubble {
background-color: orange;
border-radius: 4em;
height: 95%;
position: relative;
display: flex;
flex-direction: column;
}
.speech-bubble:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
border: 4em solid transparent;
border-top-color: white;
border-bottom: 0;
margin-left: -4em;
margin-bottom: -4em;
}
.email-container {
align-items: center;
justify-content: center;
flex: 1;
display: flex;
}
.question-text {
height: 50px;
position: relative;
text-align: center
}
.bottom-container {
height: 70px;
background-color: lightseagreen;
}
I'm trying to make a slider. My divs are #foo, #bar and #text.
#foo is the container div
#bar is a colored div inside #foo. It fills it with variable percentage width.
#text is a transparent div inside #foo (except for the text). It should be above #bar.
Something like this (image)
How can I achieve this with CSS? My code currently looks something like this:
#foo {
background: red;
width: 100px;
height: 20px;
z-index: 1;
}
#bar {
background: green;
width: 50px;
float: left;
height: 20px;
z-index: 2;
}
#text {
z-index: 3;
}
<div id="foo">
<div id="bar"></div>
<div id="text">
Some text.
</div>
</div>
Something like this?
#slider {
width: 200px;
height: 30px;
background-color: black;
position: relative;
}
#percentage {
color: white;
line-height: 30px;
margin-left: 10px;
position: absolute;
}
#bar {
width: 75%;
height: 30px;
background-color: red;
position: absolute;
}
<div id="slider">
<div id="bar">
</div>
<div id="percentage">75%</div>
</div>
Simple make the outer box positioned relative so child elements are relative to the outer box, then position both those elements absolute inside their parent. Give the two inner boxes a position of top left. Now your z-index will work, check out this modified snippet:
#foo {
background: red;
width: 100px;
height: 20px;
z-index: 1;
position: relative;
}
/* Combined these since they share a lot in common */
#bar, #text {
/* Made width and height 100% as they are relative to the parent size now */
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 0;
}
#bar {
background: green;
width: 50px;
}
#text {
z-index: 1;
}
<div id="foo">
<div id="bar"></div>
<div id="text">
Some text.
</div>
</div>
The below will fill the loading bar on hover - you may wish to use jQuery for a wider range of event handlers:
<div id="foo">
<div id="bar"></div>
<div id="text">
Some text.
</div>
</div>
#foo {
background: green;
width: 100px;
height: 20px;
z-index: 1;
position: relative;
overflow: hidden;
}
#bar {
background: red;
width: 100%;
position: absolute;
left: 0;
height: 100%;
z-index: 2;
transition: left 0.5s ease-in-out;
}
#text {
z-index: 3;
position: absolute;
height: 100%;
width: 100%;
}
/* REMOVE BELOW AND EDIT #bar LEFT: VALUE FOR STATIC LOADING BAR */
#foo:hover #bar{
left: 100%;
}
I want to make two divs overlap each other using css. I used the following code but when some text or content is added to the blue box it overflows the gray box while I want to keep it inside the the gray box and stretch it as the inner content is stretched.
.gray {
position: relative;
background-color: #818181;
}
.white {
background-color: #fff;
}
.blue {
position: absolute;
background-color: #0090ff;
top: 0;
right: 10px;
left: 100px;
}
<div class="gray">
<div class="white">
left text
</div>
<div class="blue">
<p>some text goes here</p>
<p>some text goes here</p>
<p>some text goes here</p>
</div>
</div>
here is my satisfactory result:
How can I correct the css to get the above result?
Change your CSS to this.
The gray will autosize in height when you add more content to the blue div.You may need to change some with and margin values to get the layout you want, but the mechanism is there.
.gray {
background-color: #818181;
z-index: -1;
height: auto;
width: 300px;
position: absolute;
overflow: hidden;
}
.white {
background-color: #fff;
z-index: 0;
height: 150px;
width: 280px;
position: absolute;
margin-left: 10px;
margin-top: 10px;
}
.blue {
background-color: #0090ff;
top: 0;
height: auto;
width: 180px;
z-index: 1;
position: relative;
float:left;
margin-left: 60px;
margin-top: 10px;
}
See it work: http://jsfiddle.net/djwave28/dj9wo8ak/4/
So you need to define blue box as position relative the overflow will be stopped and and when you add some content to blue div it will not overflow.
If you want to get white div under a blue div you need to set it to position:absolute and set it z-indx lesser than blue div has
try this
.gray {
position: relative;
background-color: #818181;
height: 200px;
width: 100%;
}
.white {
background-color: #fff;
float: left;
width: 97%;
position: relative;
z-index: 2;
height: 50%;
left: 1%
}
.blue {
position: relative;
background-color: #0090ff;
z-index:3;
width:40%;
height:100%;
top: -9%;
left: 8%;
}
Play with the height and width sizes to reach your desired dimensions.
Do the same with the position values to place the divs the way you want
see this fiddle http://jsfiddle.net/u50jj2e1/1/
.gray {
background-color: #818181;
z-index: -1;
height: 300px;
width: 300px;
position: absolute;
overflow: hidden;
/* Instead of hidden it could be "overflow: auto;"*/
}
.white {
background-color: #fff;
z-index: 0;
height: 150px;
width: 280px;
position: absolute;
margin-left: 10px;
margin-top: 10px;
}
.blue {
background-color: #0090ff;
top: 0;
height: 290px;
width: 180px;
z-index: 1;
position: absolute;
margin-left: 20px;
margin-top: 10px;
}
<div class="gray">
<div class="white">
</div>
<div class="blue">
</div>
</div>
I create exact shape for you: http://jsfiddle.net/dj9wo8ak/1/
As you can see from the screenshots I have an <audio> element which remains at the top of the page on scroll. But I'd like the element to be visable before scrolling begins too.
I can't get this working without messy javascript removing the element and appending it as a child on scroll, any ideas?
http://jsfiddle.net/bobbyrne01/772yerga/1/
html ..
<div class="header">
<audio controls>
Your browser does not support the audio element.
</audio>
</div>
<div class="outer">
<span class="banner">LOGO</span>
<div class="header">Header</div>
</div>
<div class="content">Content</div>
css ..
.header {
background-color: #ccc;
width: 100%;
position: fixed;
top: 0;
bottom: auto;
}
.outer {
background-color: #fff;
position: relative;
height: 100px;
}
.outer .banner {
font-size: 46px;
}
.outer .header {
position: absolute;
bottom: 0;
z-index: 2;
top: auto;
}
.content {
height: 1500px;
color: blue;
background-color: #fff;
margin-top: 100px;
}
Before scroll ..
After scroll ..
I changed z-index of the header to 99 to stay on top - the content scrolls underneath. And added top: 50px; to outer - to start a bit lower
Demo: http://jsfiddle.net/v2oyjpkg/
.header {
background-color: #ccc;
width: 100%;
position: fixed;
z-index: 99;
}
.outer {
background-color: #fff;
position: relative;
height: 100px;
top: 50px;
}
.outer .banner {
font-size: 46px;
}
.outer .header {
position: absolute;
bottom: 0;
z-index: 2;
top: auto;
}
.content {
height: 1500px;
color: blue;
background-color: #fff;
margin-top: 100px;
}