html
html
Align div to the bottom of the page in 3 steps
Aligning an element at the bottom of the page is a very common issue in web development and css. You will find the best practices for aligning the div at the bottom of the page. Step 1 : Setting the parent position to relative. If you want to align a div at the bottom of a parent div, the parent should have a position : relative. <style> .parent { position: relative; /* Set parent position to relative */ } </style> <div class="parent"> <div class="bottom"></div> </div> Step 2 : Setting the div position to absolute.
Srcset Tutorial : Responsive Image HTML
Responsive images are images that adapt to the width of screen to fit it perfectly and to improve the performance of the site. If you like this post feel free to share it with your colleagues. Why reponsive images? I’m pretty sure that, until now, all the images you have inserted in your websites looks like this: <img src="imageURL" width="360px" height="auto" max-width="100vw" /> Let’s say the image has 1024px width : 768px height.
How to create a sliding menu bar
In this tutorial, I will show you how to create a sliding left panel easily using css and javascript only. <div class="container"> <div class="slider open">Left Panel</div> <button class="toggle-button" onclick="toggleSlider()">< Close</button> </div> <script> function toggleSlider () { var slider = document.querySelector('.slider') var buttonSlider = document.querySelector('.toggle-button') if (!slider.classList.contains('open')){ slider.classList.add('open') buttonSlider.innerHTML = '< Close' } else { slider.classList.remove('open') buttonSlider.innerHTML = '> Open' } } </script> <style> .container{ position: relative; width: 400px; height: 400px; background: #145677; } .
How to center a element inside div with css
Centering elements inside div is a common problem in web development. In this post I will explain a very easy solution for this that works always. Before centering Let’s say we have those 2 containers. <div class="container"> <div class="center-element"></div> </div> <style> .container { width: 300px; height: 300px; background: red; } .center-element { width: 200px; height: 200px; background: yellow; } </style> Centering the element The easiest way is to use the flex display that handles the centering in very good way.