How can I position the arrow at the bottom of the container? I'm using Bootstrap-5 and just can't figure out all the position attributes for the life of it. It just sticks with the other text so far.
I have tried a variety of things, but some guidance how to go about this would be great.
Thanks for taking the time to help a beginner. :)
.hero {
position: relative;
overflow: hidden;
}
#media screen and (min-width: 992px) {
.hero {
height: 100vh;
}
.custom-video,
.news-detail-image {
object-fit: cover;
width: 100vw;
height: 100vh;
}
.sticky-wrapper {
position: relative;
bottom: 76px;
}
}
.heroText {
position: absolute;
z-index: 9;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 85%;
text-align: center;
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
z-index: -100;
}
.custom-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.0/font/bootstrap-icons.css">
<section class="hero" id="hero">
<div class="heroText container">
<h1 class=" text-white">TITLE OF MY PAGE</h1>
<h3 class="subtitle fancy hidden-phone text-white"><span>SUBTITLE</span></h3>
<i class="bi bi-arrow-down-short"></i>
</div>
<div class="videoWrapper">
<img src="https://i.picsum.photos/id/1/5616/3744.jpg?hmac=kKHwwU8s46oNettHKwJ24qOlIAsWN9d2TtsXDoCWWsQ" class="custom-video">
</div>
<div class="overlay"></div>
</section>
Here you go... I suggest you to wrap the arrow in a separate container.
The reason why your arrow couldn't be positioned at the bottom was that you should have set .heroText { height: 100%; ... }, but then your title and subtitle wouldn't be vertically centered.
See the snippet below.
.hero {
position: relative;
overflow: hidden;
}
#media screen and (min-width: 992px) {
.hero {
height: 100vh;
}
.custom-video,
.news-detail-image {
object-fit: cover;
width: 100vw;
height: 100vh;
}
.sticky-wrapper {
position: relative;
bottom: 76px;
}
}
.heroText {
position: absolute;
z-index: 9;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 85%;
text-align: center;
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
height: 0;
z-index: -100;
}
.custom-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#wrapper {
width: 100%;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css' integrity='sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU' crossorigin='anonymous'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.min.js' integrity='sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/' crossorigin='anonymous'></script>
</head>
<body>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.0/font/bootstrap-icons.css">
<section class="hero" id="hero">
<div class="heroText container">
<h1 class=" text-white">TITLE OF MY PAGE</h1>
<h3 class="subtitle fancy hidden-phone text-white"><span>SUBTITLE</span></h3>
</div>
<div class="videoWrapper">
<img src="https://i.picsum.photos/id/1/5616/3744.jpg?hmac=kKHwwU8s46oNettHKwJ24qOlIAsWN9d2TtsXDoCWWsQ" class="custom-video">
</div>
<div class="overlay"></div>
<div id="wrapper" class='d-flex justify-content-center'>
<i class="bi bi-arrow-down-short"></i>
</div>
</section>
</body>
</html>
I struggle to get my hover to connect with a GIF. Obviously, it does not show when I set display:none on the text, but I thought the #witch:hover ~ text{ display:block} really would work.
#animcontainer {
position: relative;
margin: auto;
overflow-y: hidden;
#witch {
position: absolute;
left: 2950px;
height: 150px;
bottom: 50px;
z-index: 2` #hello {
position: absolute;
display: none;
border: 25px;
padding: 1.5rem;
background-color: orange;
left: 3100px;
font-size: 20px;
border-radius: 20px;
text-align: center;
bottom: 200px;
left: 2900px;
z-index: 1;
}
#witch:target~#hello {
display: block;
}
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="animcontainer">
<div id="hello"> text</div>
<img id="potato" src="url">
</div>
</body>
</html>
I have a few images one on top of each other in a form of a "menu".
I would like that while I hover one of the images, it will show another image.
I also would like that while hovering each image, it will go up by 5px (currently it does not).
It must support Internet Explorer 7 or higher.
I hope what I have requested is possible and really appreciate any help you can provide.
My code so far:
.hw { font-size: 50px; padding: 50px; }
.first {
position: relative;
top: 0;
left: 0;
}
.second {
position: absolute;
right: 180px;
}
.third {
position: absolute;
right: 360px;
}
.logo {
position: relative;
bottom:60px;
left: 100px;
}
.first:hover, .second:hover, third:hover {
bottom: 5px;
}
.hidden {
display: none;
}
.logo:hover .hidden {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body dir="rtl">
<p class="hw">Hello World!</p>
<img class="hidden" src="http://i.imgur.com/MY5bRT1.jpg" style="position: relative; bottom: 80px; right: 500px;"/>
<div style="position: relative; left: 0; top: 0;">
<img class="first" src="http://i.imgur.com/cr2cqPA.png"/>
<img class="second" src="http://i.imgur.com/MY5bRT1.jpg"/>
<img class="third" src="http://i.imgur.com/cr2cqPA.png"/>
<img class="logo" src="http://i.imgur.com/MY5bRT1.jpg"/>
</div>
</body>
</html>
EDIT: solution:
.hw {
font-size: 50px;
padding: 50px;
}
.menu {
margin-right:300px;
}
.first {
position: relative;
top: 0;
}
.second {
position: absolute;
right: 180px;
}
.third {
position: absolute;
right: 360px;
}
.forth {
position: absolute;
right: 540px;
}
.logo {
position: relative;
bottom:60px;
left: 100px;
}
.first:hover, .second:hover, .third:hover, .forth:hover {
margin-top: 3px;
}
.img-con {
position: relative;
width: 300px;
padding-top: 50px;
z-index: 9998;
}
.img-con > img {
position: absolute;
top: 0;
left: 0;
}
.img-con > img.logo {
z-index: 1;
}
.img-con:hover > img.logo {
z-index: -1;
margin-top: 3px;
}
.img-con:hover > img.hidden {
top: -100px;
right: 500px;
}
<!DOCTYPE html>
<html>
<head>
<title>bla bla</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body dir="rtl"><div class="center">
<p class="hw">Hello World!</p>
<div class="menu" style="position: relative; left: 0; top: 0;">
<div class="img-con">
<img class="logo" src="http://i.imgur.com/cr2cqPA.png"/>
<img class="hidden" src="http://i.imgur.com/MY5bRT1.jpg"/>
</div>
<img class="first" src="http://i.imgur.com/cr2cqPA.png"/>
<img class="second" src="http://i.imgur.com/MY5bRT1.jpg"/>
<img class="third" src="http://i.imgur.com/cr2cqPA.png"/>
<img class="forth" src="http://i.imgur.com/MY5bRT1.jpg"/>
</div>
</div></body>
</html>
I found a solution for you. You need insert every two image to container and set him with Relative position. Your images sets by Absolute position and you can play with there z-index on :hover to get the resolute.
Here we go:
.img-con {
position: relative;
width: 400px;
margin: 20px;
}
.img-con > img {
position: absolute;
top: 0;
left: 0;
}
.img-con > img.first {
z-index: 1;
}
.img-con:hover > img.first {
z-index: -1;
}
.img-con:hover > img.second {
top: -5px;
left: 5px;
}
<div class="img-con">
<img class="first" src="http://i.imgur.com/cr2cqPA.png"/>
<img class="second" src="http://i.imgur.com/MY5bRT1.jpg"/>
</div>
This code runs as intended on Chrome:
Please hover over the blue ball for animation:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 100%;
height: 200px;
border: thin solid #6D6;
overflow: hidden;
}
h2 {
position: absolute;
border-radius: 100%;
background-color: blue;
height:100px;
width: 100px;
transition:all 1s ease-out;
margin: auto;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
h2:hover {
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<div class='container'>
<h2></h2>
</div>
</body>
</html>
But the ball in the middle expands to the bottom in Firefox, and I have to set top or bottom in order to bring it back to its correct position. Is there is anyway to make it stay in the middle without assigning top and bottom value just like in Chrome?
A nice trick to center block elements in the middle of a relative positioned container, is using top: 50% and transform: translateY(-50%).
It requires IE9+
.container {
position: relative;
width: 100%;
height: 200px;
border: thin solid #6D6;
overflow: hidden;
}
h2 {
position: relative;
border-radius: 100%;
background-color: blue;
height: 300px;
width: 200px;
margin: auto;
top: 50%;
transform: translateY(-50%);
}
<div class='container'>
<h2></h2>
</div>
JSFiddle demo: https://jsfiddle.net/oujab44t/1/
<head>
<style>
.container {
to;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class='container'>
<h2></h2>
</div>
</body>
</html>
I want to divide my page into four equal parts, each of same height and width (50-50%).
I don't want to use JavaScript. I want blocks (<div>s) to be resized automatically (and relatively) if the browser window is resized.
I have not worked with CSS for a long time. I've no idea how to handle this.
Demo at http://jsfiddle.net/CRSVU/
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
div {
width: 50%;
height: 50%;
float: left;
}
#div1 {
background: #DDD;
}
#div2 {
background: #AAA;
}
#div3 {
background: #777;
}
#div4 {
background: #444;
}
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
If you want to have control over where they are placed separate from source code order:
html, body { height: 100%; margin: 0; padding: 0 }
div { position: fixed; width: 50%; height: 50% }
#NW { top: 0; left: 0; background: orange }
#NE { top: 0; left: 50%; background: blue }
#SW { top: 50%; left: 0; background: green }
#SE { top: 50%; left: 50%; background: red }
<div id="NW"></div>
<div id="NE"></div>
<div id="SE"></div>
<div id="SW"></div>
JSFiddle demo
Note: if you want padding on your regions, you'll need to set the box-sizing to border-box:
div {
/* ... */
padding: 1em;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
…otherwise your "50%" width and height become "50% + 2em", which will lead to visual overlaps.
Some good answers here but just adding an approach that won't be affected by borders and padding:
html, body { width: 100%; height: 100%; padding: 0; margin: 0 }
div { position: absolute; padding: 1em; border: 1px solid #000 }
#nw { background: #f09; top: 0; left: 0; right: 50%; bottom: 50% }
#ne { background: #f90; top: 0; left: 50%; right: 0; bottom: 50% }
#sw { background: #009; top: 50%; left: 0; right: 50%; bottom: 0}
#se { background: #090; top: 50%; left: 50%; right: 0; bottom: 0}
<div id="nw">test</div>
<div id="ne">test</div>
<div id="sw">test</div>
<div id="se">test</div>
I did not want to add style to <body> tag and <html> tag.
.quodrant{
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
}
.qtop,
.qbottom{
width: 100%;
height: 50vh;
}
.quodrant1,
.quodrant2,
.quodrant3,
.quodrant4{
display: inline;
float: left;
width: 50%;
height: 100%;
}
.quodrant1{
top: 0;
left: 50vh;
background-color: red;
}
.quodrant2{
top: 0;
left: 0;
background-color: yellow;
}
.quodrant3{
top: 50vw;
left: 0;
background-color: blue;
}
.quodrant4{
top: 50vw;
left: 50vh;
background-color: green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link type="text/css" rel="stylesheet" href="main.css" />
</head>
<body>
<div class='quodrant'>
<div class='qtop'>
<div class='quodrant1'></div>
<div class='quodrant2'></div>
</div>
<div class='qbottom'>
<div class='quodrant3'></div>
<div class='quodrant4'></div>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Or making it looks nicer.
.quodrant{
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
}
.qtop,
.qbottom{
width: 96%;
height: 46vh;
}
.quodrant1,
.quodrant2,
.quodrant3,
.quodrant4{
display: inline;
float: left;
width: 46%;
height: 96%;
border-radius: 30px;
margin: 2%;
}
.quodrant1{
background-color: #948be5;
}
.quodrant2{
background-color: #22e235;
}
.quodrant3{
background-color: #086e75;
}
.quodrant4{
background-color: #7cf5f9;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link type="text/css" rel="stylesheet" href="main.css" />
</head>
<body>
<div class='quodrant'>
<div class='qtop'>
<div class='quodrant1'></div>
<div class='quodrant2'></div>
</div>
<div class='qbottom'>
<div class='quodrant3'></div>
<div class='quodrant4'></div>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Similar to other posts, but with an important distinction to make this work inside a div. The simpler answers aren't very copy-paste-able because they directly modify div or draw over the entire page.
The key here is that the containing div dividedbox has relative positioning, allowing it to sit nicely in your document with the other elements, while the quarters within have absolute positioning, giving you vertical/horizontal control inside the containing div.
As a bonus, text is responsively centered in the quarters.
HTML:
<head>
<meta charset="utf-8">
<title>Box model</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="title">Title Bar</h1>
<div id="dividedbox">
<div class="quarter" id="NW">
<p>NW</p>
</div>
<div class="quarter" id="NE">
<p>NE</p>
</div>
<div class="quarter" id="SE">
<p>SE</p>
</div>
<div class="quarter" id="SW">
<p>SW</p>
</div>
</div>
</body>
</html>
CSS:
html, body { height:95%;} /* Important to make sure your divs have room to grow in the document */
#title { background: lightgreen}
#dividedbox { position: relative; width:100%; height:95%} /* for div growth */
.quarter {position: absolute; width:50%; height:50%; /* gives quarters their size */
display: flex; justify-content: center; align-items: center;} /* centers text */
#NW { top:0; left:0; background:orange; }
#NE { top:0; left:50%; background:lightblue; }
#SW { top:50%; left:0; background:green; }
#SE { top:50%; left:50%; background:red; }
http://jsfiddle.net/og0j2d3v/
try this... obviously you need to set each div to 25%. You then will need to add your content as needed :) Hope that helps.
body {
margin: 0;
padding: 0;
height: 100%;
}
#top_div {
height: 25%;
width: 100%;
background-color: #009900;
margin: auto;
text-align: center;
}
#mid1_div {
height: 25%;
width: 100%;
background-color: #990000;
margin: auto;
text-align: center;
color: #FFFFFF;
}
#mid2_div {
height: 25%;
width: 100%;
background-color: #000000;
margin: auto;
text-align: center;
color: #FFFFFF;
}
#bottom_div {
height: 25%;
width: 100%;
background-color: #990000;
margin: auto;
text-align: center;
color: #FFFFFF;
}
<div id="top_div">Top- height is 25% of window height</div>
<div id="mid1_div">Middle 1 - height is 25% of window height</div>
<div id="mid2_div">Middle 2 - height is 25% of window height</div>
<div id="bottom_div">Bottom - height is 25% of window height</div>