I have an image animating from right to left... The image is 6000px wide to give a longer duration to the animation. I put the image (clouds-layer-2.png) in a div (layer-2-container) and used the following CSS hoping that the image wouldn't spill over the div creating a horizontal scroll. But unfortunately it's not working and I have 6000px worth of horizontal scroll.
.layer-2-container {
width: auto;
overflow-y: scroll;
overflow-x: hidden;
z-index: 2;
}
This can be viewed at http://www.mike-griffin.com/testing. If you use CMD/CTRL+A to select all you'll be able to see the clouds better, if that helps.
I'll also paste all the code below.
-HTML-
<section class="home-section">
<div class="navigation">
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
</div><!--navigation-->
<div class="creative-designer">
<h2>| Heading one |</h2>
</div>
<div class="home-section-layers">
<img class="layer-1" src="img/white-M-layer-3.jpg" width="" height="">
<div class="layer-2-container">
<img class="layer-2" src="img/clouds-layer-2.png" width="" height="">
</div><!--layer-2-container-->
</div><!--home-section-layers-->
</section><!--home-section-->
</div><!--container-->
-CSS-
.container {
width: 100%;
height: auto;
max-width: 100%;
}
.home-section {
width: 100%;
height: auto;
position: absolute;
}
.layer-1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
/*margin-top: -10%;*/
z-index: 1;
}
.layer-2-container {
width: auto;
overflow-y: scroll;
overflow-x: hidden;
z-index: 2;
}
.layer-2 {
position: absolute;
z-index: 2;
width: auto;
height: auto;
top: 0;
}
.creative-designer {
text-align: center;
position: relative;
z-index: 5;
color: #666;
margin-top: 40%;
}
.navigation {
color: #0C98D6;
position: relative;
z-index: 10;
top: 0px;
}
.navigation ul {
list-style: none;
width: 100%;
padding-right: 5%;
float: right;
}
.navigation ul li {
float: right;
padding: 10px;
}
Thank you for any help at all.
In the spirit of Stack Overflow, I'm answering your question exactly.
.home-section {
overflow-x: hidden;
}
I want to stress, though, that this site is really heavy, and you should code it such that there aren't going to be load issues on mobile. You can split the clouds in half, and/or use an SVG (the M should also be SVG). Additionally, your clouds are going to be overlapping content should you decide to add stuff on the sides, so you might want to set a border-radius to make the circle crop out the clouds.
Just suggestions, but hope they help!
Related
Only solution I found was to put a position: fixed on element I want to fully see. Any other options? (I dont want to 'cool-image' fixed). Help or hint would be awesome. Also, if anyone can explain solution - that would be even better
Fiddle: JSFiddle
HTML
<div class="img-cont">
<div id="slider">
<ul>
<li class="slide">
<img src="http://www.sportspearl.com/wp-content/uploads/2017/05/football-150x150.png" >
<div class="cool-image"></div>
</li>
</ul>
</div>
</div>
CSS
.img-cont{
height: 270px;
position: relative;
}
#slider {
position: relative;
background: green;
overflow: hidden;
width: 440px;
height: 200px;
}
#slider ul{
position: relative;
margin: 0;
padding: 0;
}
#slider ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 440px;
height: 270px;
text-align: center;
line-height: 300px;
}
div.cool-image{
background-color: white;
position: absolute;
border: 5px solid #EEEEEE;
width: 650px;
height: 350px;
z-index: 1;
display: inline-block;
background-repeat: no-repeat;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Basketball.png/170px-Basketball.png);
margin-left: -40px; /* Just to product situation */
display: inline-block;
}
Unfortunately, you can't. The child element is only capable of changing within the parents region when the position is not set to fixed or absolute.
If you don't want to make the child fixed, you could try position:absolute; and set the parent to position: relative;
Like this...
.slide img {
position: absolute;
z-index: 2;
}
.slide {
position: relative;
}
Or you could try to only hide the overflow on 1 direction. Like overflow-y:hidden; Or overflow-x: hidden;
I will explain my problem.
For school I have to make a website, but it is not working how it should be.
I have a border made of divs around the screen, and the page in the middle. When I first open the page, everything is in place, but when I click on one of the nav items (#link) the page suddenly loses its margin top and left. So it goes outside of the borders. I pasted all the code in the snippet, as I believe it will be too much for a post.
To see the full page and problem, please copy the code in a file to open it in the browser itself. I used vw and vh because it want it to be the same on different screens. I will do the inside elements mostly with percentages
So my questions:
How do I prevent this from happening, and an example?
Is there a way to set #Home as the usual landing space? without adding #Home in the link (and without changing its position)?
And my last question regarding CSS animation, how do I add a transition so it looks like the page is scrolling to the #div.
body{
top: 0;
margin: 0;
padding: 0;
left: 0;
}
.wrapper{
width: 100vw;
height: 100vh;
overflow: hidden;
}
.container{
width: 300vw;
height: 200vh;
background-image: url("../img/background.png");
background-size: cover;
}
/* simple nav*/
ul{
display: inline;
z-index: 99;
position: fixed;
}
ul li{
list-style-type: none;
display: inline;
}
ul li a{
text-decoration: none;
}
/*pages*/
.page{
margin: 10vh 10vw;
width: 80vw;
height: 80vh;
transition: 2s;
}
#Interactive{
background: blue;
float: left;
}
#Graphical{
float: left;
}
#Company{
float: left;
}
#Conclusion{
float: left;
}
#Home{
float: left;
}
/*header borders*/
.borders{
position: fixed;
z-index: 30;
}
.border-top{
height: 10vh;
width: 100vw;
top:0;
background: #007CFF;
}
.border-left{
height: 100vh;
width: 10vw;
top: 0;
background: #007CFF;
position: absolute;
}
.border-right{
height: 100vh;
width: 10vw;
top: 0;
background: #007CFF;
float: right;
margin-top: -10vh;
}
.border-bottom{
height: 10vh;
width: 100vw;
bottom: 0;
background: #007CFF;
position: absolute;
}
<div class="header">
<ul>
<li>Home</li>
<li>Interactive</li>
<li>Graphical</li>
<li>Company</li>
<li>Conclusion</li>
</ul>
</div>
<div class="borders">
<div class="border-top">
</div>
<div class="border-left">
</div>
<div class="border-right">
</div>
<div class="border-bottom">
</div>
</div>
<div class="wrapper">
<div class="container">
<div id="Interactive" class="page">
</div>
<div id="Graphical"class="page">
</div>
<div id="Company"class="page">
</div>
<div id="conclusion"class="page">
</div>
<div id="home"class="page">
</div>
</div>
</div>
Thanks for thinking with me, any help is appreciated.
I didn't really know how to call this post, so the search for it was difficult.
Please remove this div
#Interactive{
background: blue;
float: left;}
I think this only you are expecting.
I have made changes to your HTML code and CSS code on the basis of what i thought you wanted to achieve. Below is the code.
* {
padding: 0;
margin: 0;
}
body{
display: flex;
flex-direction: column;
}
.header {
padding: 10px 50px;
}
ul li{
list-style-type: none;
display: inline-block;
padding: 10px;
}
.wrapper {
flex-grow: 1;
padding: 50px 150px;
}
.page{
transition: 2s;
width: 100%;
height: 100%;
}
#Home{
background-color: pink;
}
#Interactive{
background: blue;
}
#Graphical{
background-color: green;
}
#Company{
background-color: yellow;
}
#Conclusion{
background-color: orange;
}
<div class="header">
<ul>
<li>Home</li>
<li>Interactive</li>
<li>Graphical</li>
<li>Company</li>
<li>Conclusion</li>
</ul>
</div>
<div class="wrapper">
<div id="Home" class="page">
</div>
<div id="Interactive" class="page">
</div>
<div id="Graphical" class="page">
</div>
<div id="Company" class="page">
</div>
<div id="Conclusion" class="page">
</div>
</div>
If you want to use transition for smooth scrolling. Refer to
this
article, you will have to use jQuery.
Also do not use fixed width or height until necessarily required.
Use document.getElementById('Home').focus() in document.ready() of js to bydefault show the Home Page.
Always focus on making responsive solutions with relative content rather than absolute content.
Let me know if you need more help :)
In my website i am using 12 image with scroll
My problem is when I try to scroll from the top it dosen't work. When pointer reach at specific height scroll starts
When i tried to decrease size of the browser it worked fine
Check my markup and css
Markup
<div class="ebroc">
<ul class="images">
<li><img/></li>
<li><img/></li>
<li><img/></li>
...
</ul>
</div>
CSS
ul.images {
margin: 0;
padding: 0;
width: 100%;
height: 40vw;
overflow-y: auto;
background-color: #ddd;
}
ul.images li {
display: block;
width: 100%;
height: 40vw;
margin-bottom: 10px;
}
ul.images li img {
height: 40vw;
width: 100%;
}
.ebroc {
margin-bottom: 20px;
width: 70vw;
}
I do have looked for this answer without success. I found some ways that you can do this but those looked really weird. (Like margin: -9999px;) So what I'm trying to do is center this image in my container. The overflow and width/heigh properties work as they should, but you're supposed to see the center of the image instead.
Thanks in advance!
The Html:
<section class="photo-grid-static">
<div class="photo-grid-container"><img src="Images and videos/odesza1.jpg"/></div>
<div class="photo-grid-container"></div>
<div class="photo-grid-container"></div>
</section>
The Css:
.photo-grid-static {
height: 300px;
width: 100%;
display: block;
position: relative;
background: black;
padding: none;
}
.photo-grid-container {
float: left;
width: calc(100% / 3);
height: 100%;
line-height: 100%;
margin: 0;
margin-right: 0;
padding: 0;
display: inline-block;
position: relative;
left: 0;
right: 0;
background: red;
}
.photo-grid-container img {
height: 100%;
overflow: hidden;
position: relative;
}
<section class="photo-grid-static">
<div class="photo-grid-container" style="background-image: url('videos/odesza1.jpg')"></div>
<div class="photo-grid-container"></div>
<div class="photo-grid-container"></div>
</section>
.photo-grid-container {
/* other styles */
background-position: center center;
background-size: cover;
}
If thats what you mean?
Ill do a mock up in a second.
https://jsfiddle.net/7zw0ej89/
I want to add an icon over the image. I am trying following, but it doesn't seem to work:
HTML:
<ul>
<li>
<div class="icon">
<img src="image.jpg" />
</div>
</li>
</ul>
CSS:
ul{
margin: 0;
list-style: none;
position: relative;
}
.icon{
background : url("icon_quick.gif") no-repeat;
border: 1px solid red;
z-index: 2;
overflow: hidden;
}
Demo:
http://jsfiddle.net/tqw4V/
No markup modifications necessary. Your content image (painting) stays in the markup, and the decorative image (smiley) stays part of the CSS.
http://jsfiddle.net/tqw4V/6/
ul{
margin: 0;
list-style: none;
/*position: relative; */
}
.icon{
/*z-index: 2;
overflow: hidden;*/
position: relative;
}
.icon:before {
background: url("http://www.joors.com/se_images/icon_quick.gif") no-repeat;
height: 100px;
width: 100px;
content: '';
position: absolute;
}
You can better change your HTML, since you're adding an inner child on top of the background, which pushes it away.
HTML
<ul>
<li>
<div class="icon"></div>
<img src="http://farm9.staticflickr.com/8382/8521029804_2c86ab5a18_m.jpg" />
</li>
</ul>
CSS
ul{
margin: 0;
list-style: none;
position: relative;
}
.icon{
width:100px; height:100px;
background : url("http://www.joors.com/se_images/icon_quick.gif") no-repeat;
z-index: 2;
overflow: hidden;
position:absolute;
}
JSFiddle.
Here is one way to do it: http://jsfiddle.net/tqw4V/1/
Unfortunately, it requires modifying your markup, but it works. The idea is to have the overlay image be a separate element that you position absolutely over your main element. This works a lot better if the main element is not, itself, absolutely positioned.
HTML:
<ul>
<li>
<div class="icon">
<img src="http://farm9.staticflickr.com/8382/8521029804_2c86ab5a18_m.jpg" />
<div class="overlay"></div>
</div>
</li>
</ul>
CSS:
ul{
margin: 0;
list-style: none;
position: relative;
}
.icon{
border: 1px solid red;
z-index: 2;
overflow: hidden;
}
.overlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
background: url("http://www.joors.com/se_images/icon_quick.gif") no-repeat;
z-index: 4;
}
}
Just replace the images. Replace their positions. The smiley face should go to the html, and the other to the css. Then by height and width you can set the size of the container. Hope I've helped.