Here is a codesandbox of what I have: https://codesandbox.io/s/still-surf-5vyy2
The pink square is stickied the way I want to but now I need to add a container so that the content doesnt stretch through the whole page.
THis is what the html looks like now:
<body>
<div style="height:200vh;background-color:blue">
<div style="width:50%;height:100vh;float:left;background-color:red"></div>
<div style="width:50%;height:50vh;float:right;background-color:pink;position:sticky;top:0">
<h1>I'm Sticky!</h1>
</div>
<div style="width:100%;height:100vh;float:left;background-color:green">
<div class="container">
<h2>I'm full width</h2>
</div>
</div>
</div>
<div style="width:100vw;height:75vh;background-color:white">
<h2>No sticky here</h2>
</div>
</body>
If I were to add:
<body>
<div style="height:200vh;background-color:blue">
<div class='container'> <--------------------------THIS
<div style="width:50%;height:100vh;float:left;background-color:red"></div>
<div style="width:50%;height:50vh;float:right;background-color:pink;position:sticky;top:0">
<h1>I'm Sticky!</h1>
</div>
</div>
</div>
<div style="width:100%;height:100vh;float:left;background-color:green">
<div class="container">
<h2>I'm full width</h2>
</div>
</div>
</div>
<div style="width:100vw;height:75vh;background-color:white">
<h2>No sticky here</h2>
</div>
</body>
It breaks the sticky. Does anyone have a better solution for this?
Really appreciate the help.
Your container div has no height. please add that rule to 100% in your css:
.container {
width: 90%;
max-width: 900px;
margin: 0 auto;
height: 100%;
}
Related
So bit of background on my issue. I'm using an external carousel and I am trying to modify each image section to include text. There seems to be an overflow:hidden on the sp-carousel-frame class that is making it not visible but without this the unselected images on either side go full size.
I basically need the item-text class to be displayed.
I really hope I explained this ok.
I'm going include an image that shows the issue below.
HTML
<script src="https://wordpress-84115-1849710.cloudwaysapps.com/wp-content/themes/inspiration-marketing-theme/assets/js/carousel.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container collaboration-header">
<div class="row">
<div class="col-md-12">
<h1>Collaboration and Teamwork</h1>
</div>
</div>
</div>
<div class="container main-carousel">
<div class="row">
<div class="col-md-12">
<div class="sp-carousel-frame sp-carousel-frame-pos">
<div class="sp-carousel-inner">
<div class="sp-carousel-item" style="overflow: visible !important;">
<img src="https://gdxdesigns.com/wp-content/uploads/2021/04/Main-Slider-Image.jpg"/>
<div class="item-text">
Hello World
</div>
</div>
<div class="sp-carousel-item"><img src="https://gdxdesigns.com/wp-content/uploads/2021/04/Left-Slider-Image.jpg"/>
</div>
<div class="sp-carousel-item"><img src="https://gdxdesigns.com/wp-content/uploads/2021/04/Right-Slider-Image.jpg"/>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.collaboration-header h1{
text-align: center;
padding: 1.5em 0;
}
.main-carousel {
margin-bottom: 20% !important;
}
The JSFiddle Below:
Here is my JSFiddle
Add Class this carousel-caption on item-text
<div class="item-text carousel-caption">
Hello World
</div>
https://jsfiddle.net/lalji1051/3hyb82fg/1/
OK I got it solved basically although I probably need to tweak it a bit to get it perfect what I did was disable the overflow:hidden on the sp-carousel-frame and change it to visible. Then on the parent div col-md-12 I attached another class called overflow:
HTML
<div class="col-md-12 overflow">
<div class="sp-carousel-frame sp-carousel-frame-pos">
<div class="sp-carousel-inner">
<div class="sp-carousel-item" style="overflow: visible !important;">
<img src="/wp-content/uploads/2021/04/Main-Slider-Image.jpg"/>
<div class="item-text">
Hello Hows it going like
</div>
</div>
<div class="sp-carousel-item"><img src="/wp-content/uploads/2021/04/Left-Slider-Image.jpg"/>
</div>
<div class="sp-carousel-item"><img src="/wp-content/uploads/2021/04/Right-Slider-Image.jpg"/>
</div>
</div>
</div><!-- End sp-carousel-frame -->
<hr />
</div><!-- Close Col-md-12 -->
CSS:
.sp-carousel-frame {
overflow: visible !important;
}
.overflow {
overflow: hidden !important;
padding: 0 !important;
}
Updated JSFiddle
I wrote a website as shown here.
Code is:
<div id="mainDiv" class="container">
<div id="header">
<div class="plc">
<h1></h1>
<nav>
<div id="navPos">
<div style="position: relative;right: 113px;">Register</div>
<div style="position: absolute;right: 255px;top: 37px;">Login</div>
<div style="position: absolute;top: 38px;right: 123px;">Market</div>
</div>
</nav>
</div>
</div>
<div id="body" class="container-fluid">
<div id="container">
<div id="overlay"></div>
<div id="menu"></div>
<div id="formPos"></div>
<div id="or">OR</div>
<div id="fbReg">
<img src="images/fbOne.png" id="fbIcon">
<div id="fbPos">Register with Facebook</div>
</div>
<div id="gReg">
<img src="images/gPlus.jpg" id="gIcon">
<div id="gPos">Register with Google</div>
</div>
<div id="cliPos">
<img src="images/Bistip-in-media.png" id="imgCli">
</div>
</div>
</div>
<div id="footer">
hello
</div>
</div>
CSS can be found in that jsfiddle. The problem is: Only body is scrollable, but header and footer aren't scrollable. As a result, I can't see the footer. How can I fix it?
For best results, expand the output window of jsfiddle
Anytime you find no scroll, is because there is overflow:hidden; property, which should be removed or changed to 'auto'
In your Case:
1) Remove overflow:hidden; or overflow:auto;
2) If you do not want scroll in your content(i.e. portion excluding header & footer)
DEMO
CSS
html,body
{
overflow:auto; /* Or just REMOVE overflow*/
}
#body
{
overflow:auto; /* Or just REMOVE overflow*/]
}
I have a page that essentially behaving as I want it, except that I would like to place an image every so often along a horizontal scroll track. This JS Fiddle shows the code: http://jsfiddle.net/bretwhiteley/39cLc0vm/
So what I am trying to do is add an image that is the height of the "Scrolling" DIV 1000px from the left. I tried to use the following code, with no luck:
<div class="Timeline_Break" style="margin-left:1000px;">
<div style="margin-left:1000px"><img src="http://s.w-x.co/TWC_logo_100x100.gif" style="width:20px;height:130px"></div>
</div>
The Styling is:
.Timeline_Break {
position: fixed;
z-index: 99;
}
test this code
jsfiddle
<div id="Header">
Google Chart ...
</div>
<div id="Map">Map</div>
<div id="Footer">
<div id="FooterLeft">
<div class="Timeline_Title">Industry</div>
<div class="Timeline_Title">Infrastructure</div>
<div class="Timeline_Title">Individuals</div>
</div>
<div id="FooterRight">
<div id="Scrolling">
<div class="Timeline_Banner">
<div style="margin-left:400px;"><img src="http://upload.wikimedia.org/wikipedia/commons/d/d2/Bundesarchiv_Bild_183-J07989,_Berlin,_Sportpalast,_Waffen-SS-Angeh%C3%B6rige.jpg" style="width:20px;height:20px">
</div>
</div>
<div class="Timeline_Banner">
<div style="margin-left:700px"><img src="http://upload.wikimedia.org/wikipedia/commons/d/d2/Bundesarchiv_Bild_183-J07989,_Berlin,_Sportpalast,_Waffen-SS-Angeh%C3%B6rige.jpg" style="width:20px;height:20px">
</div>
</div>
<div class="Timeline_Banner">
<div style="margin-left:200px"><img src="http://upload.wikimedia.org/wikipedia/commons/d/d2/Bundesarchiv_Bild_183-J07989,_Berlin,_Sportpalast,_Waffen-SS-Angeh%C3%B6rige.jpg" style="width:20px;height:20px">
</div>
</div>
<div style="color:red;position:relative">
<div style="color:blue;position:absolute;top:0px;left:500px"><img src="http://upload.wikimedia.org/wikipedia/commons/d/d2/Bundesarchiv_Bild_183-J07989,_Berlin,_Sportpalast,_Waffen-SS-Angeh%C3%B6rige.jpg" style="width:20px;height:130px">
</div>
</div>
</div>
</div>
</div>
I have one wrapper which is fixed width for all of my pages, but what if i have a page with a content that needs to have a full width like for example slideshow.
HTML
<div id="wrapper">
//fixed width contents
</div>
CSS
#wrapper{
width: 960px;
margin: 0 auto;
}
I don't want to create another wrapper with full width like:
CSS
#wrapper-full-width{
width: 100%
}
HTML
<div id='wrapper-full-width'>
// some contents with full width like slideshow
</div>
So i only need one wrapper which i can use for all my pages.
HOMEPAGE
<div id="wrapper">
<div id="header"></div>
<div id="slideshow> // fixed width=960px</div>
<div id="footer"></div>
</div>
PRODUCT PAGE
<div id="wrapper">
<div id="header"></div>
<div id="slideshow"> // full width=100% </div>
<div id="footer"></div>
</div>
How can i use same wrapper for pages with contents that need to have a full width?
Well, there's two option: either add a class of fullwidth to the wrapper itself or to the <body> tag on that specific page:
<div id="wrapper" class="fullwidth">
<div id="header"></div>
<div id="slideshow"></div>
<div id="footer"></div>
</div>
#wrapper.fullwidth { width: 100%; }
Or:
<body class="fullwidth">
<div id="wrapper">
<div id="header"></div>
<div id="slideshow"></div>
<div id="footer"></div>
</div>
</body>
.fullwidth #wrapper { width: 100%; }
I'm having a problem with layout structure.
Here is a mockup: http://i.imgur.com/JbboQ.jpg
And code:
<ul id="nav">
<li></li>
</ul>
<div id="home">
<div class="slider">
<div class="heading"></div>
<div class="slidebox"></div>
</div>
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
</div>
I guess the easiest way would be to just add width style to each div but than I wouldn't be able to nest styles which is not an option.
Right now #home div has 980px width which is perfectly fine but the problem is that slider has 100% background and the parent div has 980px. Maybe it's too late but I just can't find proper and semantic solution for this.
I would be really glad if someone could help me out here,
Thanks.
There are a couple of things you can try:
Separate out your slider div so you can get 100% of your page width.
<div id="home">
...
</div>
<div class="slider">
<div class="heading"></div>
<div class="slidebox"></div>
</div>
<div id="columns">
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
</div>
.slider { width: 100% }
Or you can set the z-index property of the slider div to a number higher than the index of the home so it renders on top.
<div id="home">
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
</div>
<div class="slider">
<div class="heading"></div>
<div class="slidebox"></div>
</div>
.home { width: 980px; z-index: 1 }
.slider { width: 100%; position: relative; top:-50; z-index: 2 }
Note: You will have to adjust the positioning of the slider div.