I know that this is SIMILAR to a few questions already out there, but it's different in that it's not my main body background that's causing the problem, and so I'm lost.
The website is at http://www.thesweet-spot.com/test77
The problem is that when you shrink your viewport to be smaller than the content and then scroll down, the wavy line on the left stops at where the bottom of your viewport originally was. The tricky part is that I want the wavy line on the left to scroll WITH the content when the content is too long.
The relevant CSS looks like this:
body {
background: url('images/background.jpg');
margin: 0;
padding: 0;
min-width: 1000px;
}
#container {
width: 100%;
position: absolute;
top: 105px;
bottom: 0;
margin: 0;
padding: 0;
}
#sidebarbg {
background: url('images/chocolate.jpg');
width: 300px;
height: 100%;
position: fixed;
left: 0;
z-index: 11;
background-attachment:fixed;
}
#sidebar {
background: url('images/sidebar.png');
width: 300px;
height: 100%;
position: absolute;
left: 0;
z-index: 12;
}
#contentnest {
position: absolute;
top: 50px;
left: 365px;
right: 0;
z-index: 14;
}
#content {
background: url('images/contentbg.png');
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
-khtml-border-radius: 30px;
padding: 20px;
border: #f062a4 3px solid;
width: 80%;
min-width: 350px;
margin-left: auto;
margin-right: auto;
font-size: 22px;
line-height: 150%;
font-family: QuicksandBook, Tahoma, Arial, sans-serif;
color: #905131;
}
and the HTML looks like this:
<body>
<div id="sidebarbg"></div>
<div id="sidebar"></div>
<div id="container">
<div id="contentnest">
<div id="content">
<! -- content goes here -->
</div>
</div>
</div>
</body>
What am I missing?
in #sidebar try removing height:100% and add bottom:-99999em
the other way is to make the sidebar position:fixed.
I was able to get the BG of my absolute container to extend beyond the viewport by adding this to my div style that has the BG.
min-height: 100%;
height: 100%;
overflow-y: scroll;
This will cause a double scroll bar so add this to your body style
overflow-y: hidden;
Related
This question already has an answer here:
Why position:sticky is not working when the element is wrapped inside another one?
(1 answer)
Closed 1 year ago.
I want to make the image caption stick to the top of the viewport once a user scrolls the page, but it's not working. I would greatly appreciate the help, here is my HTML and CSS code:
<div id="img-div">
<img src="https://static.stacker.com/s3fs-public/styles/sar_screen_maximum_large/s3/Audrey%20Lead.png" id="image">
<p id="img-caption"><strong>For beautiful eyes, look for the good in others; for beautiful lips, speak only words of kindness; and for poise, walk with the knowledge that you are never alone.<br><br>-Audrey Hepburn</strong></p>
</div>
html{
width: 100vw;
}
body{
width: 100%;
margin: auto;
}
h1{
position: absolute;
z-index: 5;
}
#img-div{
position: relative;
height: 778px;
width: 100%;
}
#image{
background-repeat: no-repeat;
height: 774px;
width: 100%;
object-fit: cover;
}
#img-caption{
position: sticky;
font-size: 19px;
height: 9.5em;
width: 21em;
padding: 23px 13px 20px 23px;
margin: 0;
background-color: white;
opacity: 70%;
top: 0px;
z-index: 5;
}
The problem is that the stickiness position occurs in the given code in relation to the containing element, not in relation to the viewport.
This snippet takes the caption out of that element and then it sticks to the top of the viewport. (Note, to make things scrollable body has been given height 500vh for this demo).
html {
width: 100vw;
}
body {
width: 100%;
margin: auto;
height: 500vh;
}
h1 {
position: absolute;
z-index: 5;
}
#img-div {
position: relative;
height: 778px;
width: 100%;
}
#image {
background-repeat: no-repeat;
height: 774px;
width: 100%;
object-fit: cover;
}
#img-caption {
position: sticky;
font-size: 19px;
height: 9.5em;
width: 21em;
padding: 23px 13px 20px 23px;
margin: 0;
background-color: white;
opacity: 70%;
top: 0px;
z-index: 5;
}
<div id="img-div">
<img src="https://static.stacker.com/s3fs-public/styles/sar_screen_maximum_large/s3/Audrey%20Lead.png" id="image">
</div>
<p id="img-caption"><strong>For beautiful eyes, look for the good in others; for beautiful lips, speak only words of kindness; and for poise, walk with the knowledge that you are never alone.<br><br>-Audrey Hepburn</strong></p>
I have an image that I've put into a div class "outer" that's cropped to a specific size.
I've overlaid text in another div class "mythumbnail" using the styles shown.
I'm stumped as to why I can't get the div "mythumbnail" to sit adjacent to the bottom of the picture in div "outer". I'd be grateful for assistance. Also, I want div "mythumbnail" to expand or contract depending on how much title and text there are regardless of "outer" dimensions, but always collapsing the height of div "mythumbnail" to the bottom of div "outer".
#import url('https://fonts.googleapis.com/css2?family=Changa+One:ital#0;1&family=Open+Sans:ital,wght#0,400;0,700;1,400;1,700&display=swap');
h1,h2,h3{
font-family: 'Changa One',Verdana, Geneva, sans-serif;
font-weight: normal;
}
p {
padding: 0;
margin: 0;
}
body {
font-family:'Open Sans',Verdana, Geneva, sans-serif;
font-size: 1rem;
margin: 0;
padding: 1rem;
background-color: #cfbaff;
}
.outer {
height: 250px;
width: 250px;
background-color: #6561B8;
background-size: cover;
position: relative;
text-align: center;
color: white;
padding: 0;
margin: 0;
}
.outer img {
height: 250px;
width: 250px;
object-fit: cover;
}
.mythumbnail h2,
.mythumbnail p {
padding: 0 .5rem 0;
margin: 0;
}
.mythumbnail {
margin: 0;
padding: 0.3rem 0;
position: absolute;
width: 100%;
bottom: 0;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgb(0,0,0,0.4);
}
<html>
<body>
<div><h1>Image example</h1></div>
<div class="outer"><img src="https://wpgeek.low.li/wp-content/uploads/2021/03/june-2020-purple-cone-flowers-b.jpg" />
<div class="mythumbnail">
<h2>Title</h2>
<p>My fairly simple description that takes one or two lines...</p>
</div>
</div>
<div><p>It should look something like this:</p>
<img src="https://wpgeek.low.li/wp-content/uploads/2021/03/june-2020-purple-cone-flowers-thumb.jpg" />
</div>
</body>
Change your thumbnail css to this:
.mythumbnail {
margin: 0;
padding: 0.3rem 0;
position: absolute;
bottom: 0;
right:0;
left: 0;
background-color: rgb(0,0,0,0.4);
}
Note that right:0; and left:0; make div behave same like left:0; and width:100%;. It's up to you how you write it.
I have a circular div that represents white circle and the logo. It seems like I wanted it to be.
<div class="whiteCircle">
<div class="image" style="background-image: url('https://www.postnl.nl/Images/marker-groen-PostNL_tcm10-72617.png?version=1');"></div>
</div>
.whiteCircle {
width: 65px;
height: 65px;
background-color: white;
border-radius: 50px;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
Then, I created another rectangle div as a sibling to whiteBox, for the other contents.
<div class="box">
<div class="text">
<h2>Heading</h2>
</div>
</div>
The positioning of both parents looks alright however I couldn't figure out a way to move the Heading above the whiteBox. I played with the combinations of z-index but I read it's not possible to adjust children's z-index and parent at the same time.
What am I doing wrong? What is the proper way of achieving it?
https://codepen.io/anon/pen/mwKrdG
1- Remove the z-index from your parent div.
2- Add z-index to your white-box div, i choose the value 20.
3- Absolute positioning your .text class and make sure the z-index of it is bigger than 20;
The css
body {
background-color: lightblue;
}
.whiteBox {
width: 65px;
height: 65px;
background-color: white;
border-radius: 50px;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
z-index:20;
}
.image {
text-align: center;
height: 100%;
background: no-repeat center center;
}
.container {
width: 275px;
height: 350px;
background-color: white;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: 38px
}
.text {
text-align: center;
z-index: 25;
position: absolute;
left: 35%;
}
https://codepen.io/anon/pen/OgEROK
My problem is that I wanted to have split page by two divs side by side (50% width). Inside of them I wanted to place another divs and make them aligned vertically and horizontally at the same time.
I think that it is possible to make it without JS, but I'm not able to do that.
Can anybody make my two circles placed in the center (V,H) of their parent DIV, which are 50% of width and 100% of height so that when I will resize my window the circles will always be in center (and side by side as is now)?
Here is my code:
<div id="container">
<div class="left">
<div class="kolo1">
sometext1
</div>
</div>
<div class="right">
<div class="kolo2">
sometext 2
</div>
</div>
</div>
And a JSFiddle for that: http://jsfiddle.net/m5LCx/
Thanks in advance in solving my quest :)
It's actually quite simple, all you need to do is to simulate a table-like behaviour:
HTML markup:
<div id="container">
<div>
<div class="half left">
<div class="circle">hello</div>
</div>
<div class="half right">
<div class="circle">world</div>
</div>
</div>
</div>
CSS styles:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#container {
display: table;
width: 100%;
height: 100%;
}
#container > div {
display: table-row;
}
.half {
display: table-cell;
width: 50%;
text-align: center;
vertical-align: middle;
}
.half.left {
background: red;
}
.half.right {
background: blue;
}
.circle {
display: inline-block;
padding: 50px;
border-radius: 50%;
}
.half.left .circle {
background: blue;
}
.half.right .circle {
background: red;
}
Final result http://jsfiddle.net/m5LCx/11/:
Working here http://jsfiddle.net/3KmbV/
add position: relative in .left and .right class and than add margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; in .kolo1 and .kolo2 class. and remove top position from .left class
try it
body {
background-color: #006666;
margin: 0 auto;
height: 100%;
width: 100%;
font-size: 62.5%;
}
#container {
width: 100%;
min-height: 100%;
height: 100%;
position: absolute;
}
.left {
width: 50%;
min-height: 100%;
float: left;
top: 0;
background-color: #660066;
position: relative;
}
.right {
width: 50%;
min-height: 100%;
float: right;
min-height: 100%;
background-color: #003366;
position: relative;
}
.kolo1 {
background-color: #0f0;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.kolo2 {
background-color: #00f;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
you can give postion: relative to .left and .right.
and give below CSS for to .kolo1 and .kolo2
margin: -5em 0 0 -5em;
position: absolute;
left: 50%;
top: 50%;
Updated demo
Another fiddle. This one uses absolute positioning with negative margins to ensure the circles are always in the centre. CSS looks like this
.kolo1 {
position: absolute;
top: 50%;
left: 50%;
margin-left: -5em; /* this must be half of the width */
margin-top: -5em; /* this must be half of the height */
}
As #Tushar points out, you need to set the position of the parent element to relative also.
Working Fiddle
.kolo1 {
background-color: #0f0;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: 50% auto 0 auto;
}
.kolo2 {
background-color: #00f;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: 50% auto 0 auto;
}
Try adding padding-top:50% for parent divs (having class left and right)
I'm using Bootstrap 3 to create the layout, I'm not sure if that's relevant. The html/body element is set with height: 100%, I even put min-height: 100% on the body, and the body is set to position relative.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
min-height: 100%;
font-size: 16px;
background-color: rgb(232, 232, 232);
font-family: Calibri;
position: relative;
}
Inside the body, on the level under it, is my footer, positioned absolutely with bottom: 0. However, it won't go to the bottom of the page, no matter how bad I want it to.
.footer {
color: white;
background: url(Images/images/footer_bg.gif) repeat-x;
padding-top: 10px;
padding-bottom: 9px;
padding-left: 30%;
}
.footerContainer {
width: 100%;
margin: 0;
padding: 0;
margin-top: 60px;
position: absolute;
right: 0;
left: 0;
}
The footer is a direct child of the body, that is, it's not hiding inside anything else at all. Here's the markup for the footer:
<div class="container footerContainer">
<div class="row footer">
<div class="col-md-12"><p>Content</p></div>
</div>
As I said previously, this isn't inside any other divs, just the body. What could the problem be here?
There is no bottom:0; in your sample. Which seems to be the issue.
.footerContainer {
width: 100%;
margin: 0;
padding: 0;
margin-top: 60px;
position: absolute;
border:1px solid;
bottom:0;
}
Here is a Demo with your code: (using bootstrap 3)
http://jsfiddle.net/n6ypb/3/