Nic727

Nevermind, I found the problem. Just have to add another div between my container and background.

Hi, I currently have that: Here is my code for the images part: <!-- ALBUMS LIST --> <div class="page-container"> <div class="album-container"> <div class="album-background" style="background-image:url(images/image1.jpg)"> <div class="album-name"> <h2>Photographie</h2> <a href="albums.html" class="btn btn-light">Voir l'album</a> </div> </div> </div> <div class="album-container"> <div class="album-background" style="background-image:url(images/image2.jpg)"> <div class="album-name"> <h2>Photographie</h2> <a href="albums.html" class="btn btn-light">Voir l'album</a> </div> </div> </div> <div class="album-container"> <div class="album-background" style="background-image:url(images/image3.jpg)"> <div class="album-name"> <h2>Photographie</h2> <a href="albums.html" class="btn btn-light">Voir l'album</a> </div> </div> </div> <div class="album-container"> <div class="album-background" style="background-image:url(images/image4.jpg)"> <div class="album-name"> <h2>Photographie</h2> <a href="albums.html" class="btn btn-light">Voir l'album</a> </div> </div> </div> </div> .page-container{ width:90%; margin:20px auto; overflow:auto; } .album-container{ width:50%; float:left; position:relative; display:block; } .album-background{ background-size:cover; background-position:center; padding:20%; display:flex; align-items: center; justify-content: center; text-align:center; color:white; } For my image, I use background-image with padding, because height doesn't work with my floating element. If you have a solution to make this work, I would like to hear it! Well, my current problem is not here. I tried to add a padding to my album-container to have white border around the images (like padding:13px), but for some reasons, it's acting a bit like a margin by pushing all my elements. After I tried to adjust album-container width to center my images… I found 48.1% to be good, but seems like it just works for my current screen size. Do you have a solution to add space between my albums images? Would like to be able to do that for different size. Thank you

I know. I already have media query to show the hamburger menu and have a jQuery making the menu popping up. The problem was when resizing the window when the menu is open or close. It make the normal menu look weird. I know what you mean, I could have use only media query for the menu opacity, but since my menu is the same as the normal menu, but with a different styling, it's not that easy. I also have an animation to show the menu and that's why I use JQuery to add a class/style.

Ok I have the answer: if($(".mobile-menu").click(function(){ $(".right-menu").addClass("Collapse"); $(".fas.fa-times").addClass("Collapse-x"); })); if($(".close-mobile-menu").click(function(){ $(".right-menu").removeClass("Collapse"); $(".fas.fa-times").removeClass("Collapse-x"); })); if ($(window).on('resize', function () { // console.log($(this).width()) if($(window).width() > 840){ $(".right-menu").removeClass("Collapse"); $(".fas.fa-times").removeClass("Collapse-x"); } })); 1. I changed to class for now, but maybe I will change back to inline-style since I didn't have a lot... 2. I guess I can remove all the "if" statement right? A bit useless...

Hi, I'm making a mobile menu on my website and I have a problem. When making my browser window reaching 840px and smaller, the hamburger icon is showing. I click on it and my menu is appearing, but if I keep the menu open and go back to a window bigger than 840px I have two bugs: 1. If I close the mobile menu, it make items opacity 0. So when returning to normal menu, items are still transparent. 2. If I keep mobile menu open and go back to normal menu, menu is showing… Ok, but when returning back to smaller screen, mobile menu is still here. I tried something like that, but it doesn't work. if ($(window).width() <= 840) { $(".mobile-menu").click(function(){ $(".right-menu").height('100%').css({ opacity: 1 }); $(".fas.fa-times").css({ top:'50px' }); }); $(".close-mobile-menu").click(function(){ $(".right-menu").height('0%').css({ opacity: 0 }); $(".fas.fa-times").css({ top:'-50px' }); });}else{ $("right-menu" && ".fas.fa-times").removeAttr('style'); } The last part of the code is supposed to make inline-style disappear, but it doesn't because it doesn't activate the function when resizing, but only when it's loading at a higher screen width. Is there a way to make this work when resizing to window width higher than 840? Thank you

Hi, I'm trying to make word change each X amount of seconds and I have the code right (I think), but for some reasons it's not working correctly. I'm basing my code on this guy website http://thierry-bonnaudet.com/ Here is what I did : https://codepen.io/anon/pen/NMegzo Don't understand what's wrong and how to correct it. Maybe you know a better code to do that? Thank you in advance for your help. ---- PS: I'm also trying to find a way to don't use position absolute, to correctly align my text, but without that, all other texts are following each other. Do you know if I can animate a display block to none? Like after the animation, it go to display none and when launching the other animation, it go to display block? EDIT: I fixed the animation bug with .In{ animation:slideLeft 2s; opacity:1!important; <-------- } .Out{ animation: slideRight 2s; opacity:0!important; <-------- }

ok lol. I tried to use OwlCarousel which looked very easy to use since they say to only add owl-carousel class to your div (or ul) and it will make a rotation of you div inside (or li), but for me it wasn't working I don't know why. My HTML was: <div class="hero-slider"> <ul class="slider-image owl-carousel"> <li style="background-image: url(images/background1.jpg)"></li> <li style="background-image: url(images/background2.jpg)"></li> </ul> </div> And JS from owl-carousel: $(document).ready(function(){ $(".owl-carousel").owlCarousel({ number:1, loop:true, mouseDrag:false, touchDrag:false, pullDrag:false, freeDrag:false, dots:false, autoplay:true, autoplaySpeed:5000, autoplayTimeout:5000, slideTransition: 'ease-in-out', animateOut: 'fadeOut', animateIn: 'fadeIn' }); }); For unknown reason it was just spawning lot of divs and was breaking my code: _____ So while waiting for an answer how to fixe that from GitHub, I found this Very easy and it works like a charm. <div class="hero-slider"> <ul class="slider-image"> <li class="hero-image active" style="background-image: url(images/background1.jpg)"></li> <li class="hero-image" style="background-image: url(images/background2.jpg)"></li> </ul> </div> $(document).ready(function(){ function play() { setInterval(function(){ var next = $(".slider-image .active").removeClass("active").next(".hero-image"); if (!next.length) { next = $(".slider-image .hero-image:first"); } next.addClass("active"); }, 8000); } play(); }); Here is my CSS. .hero-slider { width: 100%; height: 100%;; margin: 0; padding: 0; position: relative; z-index: 1; display: block; overflow:hidden; background-color:black; } .slider-image{ list-style: none; width: 100%; height:100%; padding:0; margin:0; } .slider-image li{ position:absolute; background-position:center center; background-size:cover; width: 100%; height:100%; opacity:0; transition:opacity 3s ease-in-out; } .slider-image li.active{ opacity:1; animation: fadeIn 3s; } I added a fadeIn animation (with animate.css) to have a fadeIn when page load instead of a popping image. Not sure it makes the animation each time the active class appear (change item). What do you think? I tried to add it to my ul (slider-image), but doesn't work here and in hero-slider it works 50% and make the image pop very fast at the end. The only problem is the active class that I have to add manually. Do you know a way to add the active class when the page load? I tried by removing it, but it wait 8s (8000) before first image appearing. Would be easier when converting to Wordpress to have the class added automatically to the first item in the list.

No just a slider with images with fade-in/out effect for my homepage. I know that people can just go into the code to find my images. What I mean is that it is awkward to see a "save image" when it changing every 5 seconds. I found this great pure css slideshow http://urbaninfluence.com/2015/05/make-a-background-image-slider-with-css-keyframes/ It does look good enough, but not sure about the use of keyframe, because it will be complicated to automate that if I add/remove an image in my future WordPress website. Plugins are just adding too much code and I want a clean and fast website. I just hate to see divs inside divs inside divs when you can only get one div doing everything. I was trying to find a single small code that will just do what I want to do... change <li> each 5 seconds with a fade effect and make a loop. I found this https://owlcarousel2.github.io/OwlCarousel2/ It looks good, but it came with so many things that I will not really use that I don't know if I should download that. Here is my code for now: <div class="hero-slider"> <ul class="slider-image"> <li style="background-image: url(images/background1.jpg)"></li> <li style="background-image: url(images/background2.jpg)"></li> </ul> </div> I know that with some help when I will convert into WordPress it will be easy to just add a <li> with background-image. Should I take Owlcarousel? Do you know something else? Should I do my custom code with your help? Thank you

Hi, I would like to create a slider on my homepage and I was reading about how to make one via Google, but there is so many different way that I'm a bit lost. I found pure CSS way to do a slideshow, but I'm not sure it's legit for modern standard. Do you know a Javascript or JQuery way to do a slider? I just want a minimalist code that work and not a code taking 50 lines. Is it better to use background-image for the slider or img inside a list? I could use background-image to prevent people from saving my slider image, but I would need multiple class like .img1, .img2 , etc. Since I'm currently coding my website by hand and will use pinegrow in the future to convert into a WordPress theme, what would be better? Using an existing plugin (that I will need to fixe myself with my own css rules later) or creating my own slider with minimal code? I'm looking a way to be able to easily remove/add new image to the slider, so is it possible to automatically add a class and a background-image or it's better to automatically add/remove an img? I know that Revolution Slider use background-image inline styles, so maybe another way? Thank you

Hi, when clicking on an image in my gallery, I would like to have something like that: 1. White or black background 2. Big image (fullscreen or not, depend of height) 3. Left and right button to navigate between images. I know a lightbox can make that very easy, but I’m not really sure it’s possible to add a custom information overlay like I want. I know some lightbox can show information under the image, but my idea was to have a camera icon and when you click on it more informations are appearing. In my mockup it’s wrong since the icon and info should be in the middle to avoid getting out of image if portrait or landscape. I thought about a carousel... do you think it can do that? The only problem is that I can’t have a gallery + carousel since if you click on an image, it will not directly go to that image in the carousel page (which have to load images again). How can I achieve that? I currently use Wordpress, so I’m not sure how to do that in both coding or via plugin. thank you

I was using Notepad++ when I started, but since the design is a bit dated, I changed to Visual Studio Code which is very good at debugging and working with.

Thank you it works! I'm surprised that in 2018 we still don't have gradient support for border colors... I hope it will come.

Hi, I would like my active menu item bottom border to have a gradient color, but I can't find how. Currently I'm good with a border-color and 2px border, but I tried with border-image and linear gradient, but it's not working. Do you have any idea about putting a gradient color for a bottom border? thx

Hi, I have a problem with my website on safari. Here is what my website should look like. In MS Edge: here is what Ihave in Safari: How can I show my footer and getting a true VH in Safari? thx

I made some ajustements to my design. So here is my very final home page design. I will keep this one, just not sure if I add a Works section. I know I will add photography to my website, but I don't really have a lot of works to show. Most videos (if I do some) will be in my blog or inside albums. Here are two ideas for the albums page. First idea was to make an almost full width album with parallax scrolling, but I think it will just be a bit annoying since my idea was to have a hover effect to show name of the album above a blurry pic. So I think it wasn't great, but what do you think? Should I just keep the hover effect always ON (with or without blur effect)? The other idea is to make two columns with albums, but wasn't sure if I was keeping a parallax effect or not.

Hi, I would like to have a photography section on my website showing my photos in a justified grid, but how can I do that? I was thinking using masonry at first, but I changed my mind for a justified grid option instead. I'm not sure if it's possible with CSS only or Javascript? I found this example; https://the7.io/main/gallery/albums-justified-grid/5-albums-justified-grid/ Just not sure how to achieve that. If possible, would like images to be in order from left to right and sometimes, one taking full width and after 2 or 3 columns... A bit like that https://www.narikki.com/mountains-of-new-zealand Thank you

Here is another homepage. Waiting for your feedback before starting the real thing! Personally, I really love the template this guy used thierry-bonnaudet.com/ but I want to create my own thing. Just need to figure the lightbox I would like to have... If you know a plugin or how to do that, I would appreciate that. My idea is to click on an image, it show in fullscreen into a lightbox, but you can click on a small camera icon to show a bubble with informations (Or blur the image and show informations over it).

Hi, I will start my website from scratch using webflow really soon, but for now I'm just making the overall design in Affinity Designer (illustrator alternative). I was thinking about getting a WordPress template first, but WordPress is not that good when you want something specific and codes can be a mess when you change a lot of things. That's why I think webflow is a good idea (but unfortunately, I will have to host somewhere else than my current website ). I'm creating a website about some design/web work, but also some of my best photography. Well, here I start and I would like your feedback about if it can be a good user experience and what could be improved. HOME Option 1 Option 2 The first option is much more about the overall look of the website (you will see images bellow), but I thought it could be nice to have a good landing page with a fullscreen image instead. What do you think? PORTFOLIO Here is a page of my works/albums. After that here is what an album page will look like. Just no sure if I keep square image, masonry style (like mockup) or masonry with spacing. What do you think? I also thought it was a great idea to add a little description on top about where it was shot and when. Also, when you click on an image, not sure if I use a normal lightbox or something else. Don't know if Webflow allow custom lightbox. Was thinking about a full white background with a camera icon that show you some infos about the camera and location. Do you think it's possible? Not sure how different page for each image could work since it have to load them every single time... BLOG For the Blog part, I found a nice template with this kind of style and I thought it was looking very great. So I decided to inspire my design from that. I think it's easy to understand that most recent is on top. I'm thinking about making my own pages for blog or redirecting to a subdomain using Exposure.co which is good at making clean and minimalist blog pages. Maybe I will make images a bit bigger and every informations on the bottom-left side? Or keep it like that, but remove the green color and keep white? ABOUT Was thinking about using a colored button matching the logo and the current page indicator, but should I just make a black and white button? CONTACT Same thing about the button. Not sure...

Hi, I would like to know if I can blur an element that could affect an element bellow it. For example, I would like my navigation bar to be white with opacity of 0.3-0.5 and blur it to make the element bellow be blurry. I tried very fast to do that, but only thing happening when adding filter blur to my navigation bar is that the text (menu) and nav bar are blurry, but not what's bellow (text, images, etc.). I was trying to make something like the Fluent Design like Microsoft. Thank you

Nevermind, I just found out that I just needed to change the order of my else if and now it works. I changed in this order : if (g6 < 50) { g7 = 0; g8 = 0; } else if (g1 < 1){ g7 = 0; } else if (g1 >= 0){ g8 = 0; } else if (g7 > 0) { g8 = 0; } else if (g8 > 0) { g7 = 0; }

Hi, I'm making a weather app in Android studio using Java and XML for my school, and we need to use random number. The thing is that it doesn't work as expected. For example, I have some values here : g1 = r.nextInt((1 + 10) + 1) - 10; //Actual temperature g2 = r.nextInt((-10 + 15) + 1) - 15; //minimum g3 = r.nextInt((5 - 2) + 1) + 2; //maximum g4 = r.nextInt(40) + 1; //wind g5 = r.nextInt((11 - 3) + 1) + 3; //sun g6 = r.nextInt(100); //Precipitation g7 = r.nextInt((30 - 1) + 1) + 1; //rain g8 = r.nextInt((10 - 1) + 1) + 1; //snow //Here everything is good. But the problem is bellow. /***** RAIN / SNOW *****/ if (g6 < 50) { //if precipitation is less than 50%, make rain and snow at 0 g7 = 0; g8 = 0; } else if (g7 > 0) { //if it rain, make snow at 0 g8 = 0; } else if (g8 > 0) { //if it snow, make rain at 0 g7 = 0; } else if (g1 < 0){ //if temperature bellow 0 °C, make rain at 0 g7=0; } else if (g1 >= 0){ //if temperature above 0, make snow at 0 g8=0; } The thing is that I can have a 90% chance of rain, but it will be at 0... Or I can have -5 °C, but it will rain instead of snow. Any idea?

ok, but my label is for a button... When I click I have something like that : Better with image. It's happening after I click on the button.

sorry I explained badly. I was talking about when you click and not when you over the label. When I click on the button or label, the vertical bar is appearing on the label text. But I think I can't get rid of that with custom button... It's not doing this with default button (without label).

Thank you. I also changed .radio_label::before for .radio_label span:before ​Now the only problem is that when I click on the button, the vertical bar (for writing) is appearing on the label text... Can I get rid of that or have to live with it? Thank you

Hi, I'm trying to make a custom radio button, but it's not working. It's like 80% completed, but just need to make the change when the input radio is checked. HTML : <label class="radio_label"><input type="radio" name="q1a" value="oui">Oui</label> <label class="radio_label"><input type="radio" name="q1a" value="non">Non</label> CSS : input[type="radio"]{ display:none; } .radio_label{ display: inline-block; cursor: pointer; position: relative; padding-left: 25px; margin-right: 15px; } .radio_label::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 10px; position: absolute; left: 0; bottom: 4px; border:1px solid red; /*background-color: #aaa; box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);*/ border-radius:100%; } input[type="radio"]:checked +.radio_label::before { content: ""; background-color: red; } So when clicked I want to change the button to red, but it's not working. Any ideas? Also, how to make the checked circle smaller than the full width of the label (like a normal button)?