So my nav works great in Chrome and Firefox but Internet Explorer is squishing it when you size down in the desktop layout. Here's the HTML:
<nav>
<ul>
<li>
<img class="scale-with-grid arrow" src="assets/images/ColorArrowLogo.svg" alt="Home button">
</li>
<li>
<img class="scale-with-grid UX" src="assets/images/UX.svg" alt="User experience">
</li>
<li>
<img class="scale-with-grid UI" src="assets/images/UI.svg" alt="User interface">
</li>
<li>
<img class="scale-with-grid front-end" src="assets/images/FE.svg" alt="Front end development">
</li>
</ul>
</nav>
...and the CSS:
img.scale-with-grid {
max-width: 100%;
height: auto;
}
#media only screen and (min-width: 701px) {
nav {
position: fixed;
top: 0px;
width: 7%;
max-width: 81px;
margin: 1.7% 1.7%;
}
nav ul li {
margin: 0 0 15% 0;
width: 50%;
height: 50%;
}
}
If you need the rest of the site's code let me know, I just put up what appeared to be relevant.
<nav> tag is not supported in ie 8.0 or older
http://www.w3schools.com/tags/tag_nav.asp
Related
I'm really stuck with responsive images short story I'm trying to make a simple grid like this
https://avenue-demo.squarespace.com
in this avenue website all the images have the same height and width when you resize the browser the images are resizing fine now here is my code
<ul class="grid">
<li>
<a href="">
<img src="https://images.unsplash.com/photo-1546725923-697533ae284d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="">
</a>
</li>
<li>
<a href="">
<img src="https://images.unsplash.com/photo-1546934164-73ef3631f62d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=933&q=80" alt="">
</a>
</li>
<li>
<a href="">
<img src="https://images.unsplash.com/photo-1547014751-2b43a527b6fa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1100&q=80" alt="">
</a>
</li>
</ul>
css :
.grid {
display: flex;
max-width: 1100px;
justify-content: space-between;
margin: 0 auto;
list-style: none;
}
.grid li {
width: 30%;
}
img {
max-width: 100%;
}
the problem is the images are not the same height when I set the height of the img to height 100% yes the images do have the same height but on resize they are shrinking not resizing like this website I posted, how can I fix it ?
As per my understanding you need to have square images to get the shown responsiveness, even though i have made some css changes to your code, to look like the images from website (which is not suggested always)
here is the code pen link
https://codepen.io/avreddy/pen/vvabbP
.grid {
display: flex;
max-width: 1100px;
justify-content: space-between;
margin: 0 auto;
list-style: none;
}
.grid li {
width: 30%;
}
.grid li a{
position: relative;
width: 100%;
padding: 50% 0;
display : block;
}
.grid li a img{
position: absolute;
width : 100%;
top: 0;
left: 0;
height: 100%;
object-fit : cover;
}
img {
max-width: 100%;
}
<ul class="grid">
<li>
<a href="">
<img src="https://images.unsplash.com/photo-1546725923-697533ae284d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="">
</a>
</li>
<li>
<a href="">
<img src="https://images.unsplash.com/photo-1546934164-73ef3631f62d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=933&q=80" alt="">
</a>
</li>
<li>
<a href="">
<img src="https://images.unsplash.com/photo-1547014751-2b43a527b6fa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1100&q=80" alt="">
</a>
</li>
</ul>
I just started working on html and css and need to understand how I can fix the below issue:
I have the following section in my html body
.section-meals {
padding: 0;
background-color: #f4f4f4;
}
.meals-showcase {
list-style: none;
width: 100%;
}
.meals-showcase li {
display: block;
float: left;
width: 25%;
}
.meal-photo {
width: 100%;
margin: 0;
overflow: hidden;
background-color: #000;
}
.meal-photo img {
/*
Width 100% + height auto set to show up the entire image in a bounded area.
This is similar to wrap content height and width in android and iOS.
*/
width: 100%;
height: 100%;
/*
Made everything bigger, but now the images are bigger than the container themselves.
So we have to hide the overflow in the container with the property hidden.
*/
transform: scale(1.30);
transition: transform 0.5s, opacity 0.5s;
opacity: 0.6;
}
.meal-photo img:hover {
opacity: 1;
transform: scale(1.03);
}
<section class="section-meals">
<ul class="meals-showcase clearfix">
<li>
<figure class='meal-photo'>
<img src="resources/img/1.jpg" alt='passport photo'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="resources/img/2.jpg" alt='world map'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="resources/img/3.jpg" alt='globe in hand'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="resources/img/4.jpg" alt='taj mahal'>
</figure>
</li>
</ul>
<ul class="meals-showcase clearfix">
<li>
<figure class='meal-photo'>
<img src="resources/img/5.jpg" alt='cliff with beautiful houses'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="resources/img/6.jpg" alt='eiffel tower'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="resources/img/7.jpg" alt='Maya bay'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="resources/img/8.jpg" alt='beach'>
</figure>
</li>
</ul>
</section>
Now when this is rendered on the webpage. I see white spaces. because my images are all of different resolution. How can I ensure that all elements in the li stick to each other with image filling the box so that it looks alright. The above works fine if all images are of the same resolution.
Code reference is from a udemy course I have picked up. but I am trying my own scenarios.
How this appears:
When all images are same resolution, this appears like, but I want a similar effect:
You can use the padding top trick to give your li an aspect ratio, then use object fit to make your image fit perfectly (you will also need an ie polyfill for object fit):
body {
margin:0;
}
.meals-showcase {
/* reset list styles and use flex to line up in a row */
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
.meals-showcase>li {
/* make li 25% width */
max-width: 25%;
width: 25%;
margin: 0;
padding: 0;
}
.meals-showcase figure {
/* make figure into block and relative position, give this the aspect ratio - here I use 75% padding top */
display: block;
width: 100%;
position: relative;
margin: 0;
padding: 75% 0 0 0;
}
.meals-showcase img {
object-fit: cover; /* add this */
display: block;
position: absolute; /* this is so it fills the figure */
width:100%;
height:100%;
top: 0;
left: 0;
transition: transform 0.5s;
}
.meal-photo img:hover {
transform: scale(1.05);
}
.meals-showcase figure:hover {
z-index:1; /* bring hover figure to front */
}
<section class="section-meals">
<ul class="meals-showcase clearfix">
<li>
<figure class='meal-photo'>
<img src="https://www.fillmurray.com/400/300" alt='passport photo'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="https://www.fillmurray.com/200/350" alt='world map'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="https://www.fillmurray.com/250/300" alt='globe in hand'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="https://www.fillmurray.com/300/300" alt='taj mahal'>
</figure>
</li>
</ul>
<ul class="meals-showcase clearfix">
<li>
<figure class='meal-photo'>
<img src="https://www.fillmurray.com/300/400" alt='cliff with beautiful houses'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="https://www.fillmurray.com/200/300" alt='eiffel tower'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="https://www.fillmurray.com/200/400" alt='Maya bay'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="https://www.fillmurray.com/200/500" alt='beach'>
</figure>
</li>
</ul>
</section>
This happens because indeed, the images are of different sizes. In many modern websites images are processed (thumbnailed) to be an exact size, this should avoid these issues in the first place. However, having a fail save CSS technique is a good idea.
Start off with determining the required size/aspect ratio of the images and set it in your stylesheet. This wil distort certain images that get "stretched" this effect can be cancelled by using object-fit: cover which will make sure the images covers the entire box (even if certain parts will be lost at the edges).
Actually to make object-fit work properly, the image container must have dimensions. In the following snippet, uncommenting /*height: 320px;*/ is enough to make it work. Of course, this dimension is static and must be the one of the smallest picture in a row.
If you want a full dynamic trick that adapts itself to the smallest picture for each row instead of specifying a given height or ratio, you can still use javascript. I made here a quick example that dynamically gets the smallest height and applies it to the elements (in jQuery).
function resizeMealPhotos(){
$('.meals-showcase').each(function(){
var h = Infinity;
$(this).find('.meal-photo').each(function(){
$(this).css('height', 'auto');
});
$(this).find('.meal-photo').each(function(){
var h2;
if( (h2 = $(this).height()) < h){
h = h2;
}
});
$(this).find('.meal-photo').each(function(){
$(this).css('height', h + 'px');
});
});
}
$(document).ready(function(){
resizeMealPhotos();
});
$(window).on('resize', resizeMealPhotos);
.section-meals {
padding: 0;
background-color: #f4f4f4;
}
.meals-showcase {
list-style: none;
width: 100%;
}
.meals-showcase li {
display: block;
float: left;
width: 25%;
}
.meal-photo {
width: 100%;
/*height: 320px;*/
margin: 0;
overflow: hidden;
background-color: #000;
}
.meal-photo img {
/*
Width 100% + height auto set to show up the entire image in a bounded area.
This is similar to wrap content height and width in android and iOS.
*/
width: 100%;
height: 100%;
object-fit: cover;
/*
Made everything bigger, but now the images are bigger than the container themselves.
So we have to hide the overflow in the container with the property hidden.
*/
transform: scale(1.30);
transition: transform 0.5s, opacity 0.5s;
opacity: 0.6;
}
.meal-photo img:hover {
opacity: 1;
transform: scale(1.03);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="section-meals">
<ul class="meals-showcase clearfix">
<li>
<figure class='meal-photo'>
<img src="https://placeimg.com/640/480/any" alt='passport photo'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="https://placeimg.com/640/400/any" alt='world map'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="https://placeimg.com/640/420/any" alt='globe in hand'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="https://placeimg.com/480/480/any" alt='taj mahal'>
</figure>
</li>
</ul>
<ul class="meals-showcase clearfix">
<li>
<figure class='meal-photo'>
<img src="https://placeimg.com/480/480/any" alt='cliff with beautiful houses'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="https://placeimg.com/640/480/any" alt='eiffel tower'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="https://placeimg.com/640/320/any" alt='Maya bay'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="https://placeimg.com/640/400/any" alt='beach'>
</figure>
</li>
</ul>
</section>
try below code snippet.
can try different size in https://picsum.photos/120/300/?random
.section-meals {
padding: 0;
background-color: #f4f4f4;
margin: 0;
}
.meals-showcase {
list-style: none;
width: 100%;
}
.meals-showcase li {
display: inline-block;
float: left;
width: 25%;
}
.meal-photo {
width: 100%;
height: 100px;
position: relative;
overflow: hidden;
margin: 0;
}
.meal-photo img {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1.12);
transition: transform 0.35s;
}
.meal-photo img:hover {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
<section class="section-meals">
<ul class="meals-showcase clearfix">
<li>
<figure class='meal-photo'>
<img src="https://picsum.photos/80/100/?random
" alt='passport photo'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="https://picsum.photos/106/130/?random
" alt='world map'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="https://picsum.photos/114/90/?random
" alt='passport photo'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="https://picsum.photos/90/100/?random
" alt='taj mahal'>
</figure>
</li>
</ul>
<ul class="meals-showcase clearfix">
<li>
<figure class='meal-photo'>
<img src="https://picsum.photos/144/360/?random
" alt='passport photo'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="https://picsum.photos/130/300/?random
" alt='eiffel tower'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="https://picsum.photos/140/300/?random
" alt='Maya bay'>
</figure>
</li>
<li>
<figure class='meal-photo'>
<img src="https://picsum.photos/120/300/?random
" alt='beach'>
</figure>
</li>
</ul>
</section>
I have a little problem. I created one simple web page and tested with Firefox - everything was fine. Then I realised I should test it with other browsers too and when I opened it in Chrome, every picture was in original size. When I try to modify with CSS ( height, width ) it won't react.
HTML:
<div class="picture">
<div id="first">
<ul class="gallery">
<li>
<a href="images/morning.png">
<img src="images/morning.png" alt="">
<p>Early morning in China</p>
</a>
</li>
<li>
<a href="images/night.png">
<img src="images/night.png" alt="">
<p>Night sky in Singapore</p>
</a>
</li>
<li>
<a href="images/nature.png">
<img src="images/nature.png" alt="">
<p>Nature road</p>
</a>
</li>
</ul>
</div>
<div id="second">
<ul class="gallery">
<li>
<a href="images/app.png">
<img src="images/app.png" alt="">
<p>Weather app for iOS</p>
</a>
</li>
<li>
<a href="images/cold.png">
<img src="images/cold.png" alt="">
<p>Cold winter evening</p>
</a>
</li>
<li>
<a href="images/bugs.png">
<img src="images/bugs.png" alt="">
<p>Little bugs on the field</p>
</a>
</li>
</ul>
</div>
</div>
CSS:
/********* WORKS **********/
.gallery {
list-style: none;
margin-right: 35;
margin-top: 30;
}
.gallery img {
width: 250;
height: 250;
}
#media screen and (min-width: 720px) {
.flex {
display: -ms-flexbox; /* TWEENER - IE 10 */
display: flex;
max-width: 1200px;
-ms-flex-pack: distribute;
justify-content: space-around;
margin: 0 auto;
}
.gallery {
margin-top: 40;
margin-bottom: 50;
}
#first {
width: 50%;
float: left;
}
#second {
width: 50%;
float: right;
}
.gallery img {
width: 320;
height: 320;
}
}
I know my indentation is shit at the moment, so, sorry.
chrome will work with unit like px or % try with px.
I am trying to make a photogallery, the idea is that you have a horizontal(!) slider with all the images (and later on in the script you can click on them, but that is not important). The problem is that all the images do not fit in the layout, so that is why i need some kind of scroll mechanism. This is my HTML:
<section>
<div id="thumbnails">
<div>
<ul>
<li><img></li>
<li><img></li>
.............
<li><img></li>
<li><img></li>
</ul>
</div>
</div>
</section>
And this is my CSS:
div#thumbnails { margin: 0; padding: 0; overflow: auto; }
div#thumbnails * { margin: 0; padding: 0; }
div#thumbnails div { width: 20000px; }
div#thumbnails ul { list-style: none; }
div#thumbnails ul li { display: inline-block; }
section { width: 960px; }
This more or less works like a breeze, except for the fact that the slider is filled with whitespace (obviously due to the width of 20000px;). However, that width of 20000px is nessecary, else the wrapper div wil take the same width as div#thumbnails, and that width is of course 960px (due to the section-tag). The result of that is that the list will get extra rows, and i obvously want only 1 row. So ideally, the wrapper div should get the exact same width as the dynamic list, but i am stuck here. Somebody has an idea how to fix this (preferably without jQuery/JS, it's not very difficult to solve it with javascript)?
Is this what you're looking for?
div#thumbnails {
margin: 0;
padding: 0;
overflow: auto;
}
div#thumbnails * {
margin: 0;
padding: 0;
}
div#thumbnails div {
white-space: nowrap;
}
div#thumbnails ul {
list-style: none;
}
div#thumbnails ul li {
display: inline-block;
}
section {
width: 960px;
}
<section>
<div id="thumbnails">
<div>
<ul>
<li>
<img src="http://placehold.it/150x150">
</li>
<li>
<img src="http://placehold.it/150x150">
</li>
<li>
<img src="http://placehold.it/150x150">
</li>
<li>
<img src="http://placehold.it/150x150">
</li>
<li>
<img src="http://placehold.it/150x150">
</li>
<li>
<img src="http://placehold.it/150x150">
</li>
<li>
<img src="http://placehold.it/150x150">
</li>
<li>
<img src="http://placehold.it/150x150">
</li>
<li>
<img src="http://placehold.it/150x150">
</li>
<li>
<img src="http://placehold.it/150x150">
</li>
<li>
<img src="http://placehold.it/150x150">
</li>
<li>
<img src="http://placehold.it/150x150">
</li>
</ul>
</div>
</div>
</section>
I would like to cover the image on of my page the full width of the screen. (so not the whole screen but only the width) and if possible I would also like if the image shrinks if the screen gets smaller. I never did this before so i don't really know how I can make this? Can anybody help me?
this is how my page currently looks like
#charset "UTF-8";
body {
background-color: #ADF1F5;
}
html, body{
margin: 0;
padding: 0;
}
#Anouk {
text-align: center;
margin: 0 auto;
padding: 0;
}
#Anouk img{
display: block;
}
#header {
height: 80px;
background: #000000;
}
li {
display: block;
float: left;
}
li a {
color: #FFFFFF;
height: 80px;
}
#contact {
float: right;
}
<div id="Anouk">
<img src="logo/Hout.png" width="1000px" alt="Logo" />
</div>
<div id="header">
<div id="menu">
<!--Home-->
<li id="home">
<a href="index.html">
<img src="Iconen/Home.png" height="80px" alt="home" onmouseover="this.src='Iconen/Home2.png'" onmouseout="this.src='Iconen/Home.png'" />
</a>
</li>
<!--Over Mij-->
<li id="over">
<a href="over.html">
<img src="Iconen/Over.png" height="80px" alt="home" onmouseover="this.src='Iconen/Over2.png'" onmouseout="this.src='Iconen/Over.png'" />
</a>
</li>
<!--Portfolio-->
<li id="portfolio">
<a href="portfolio.html">
<img src="Iconen/Portfolio.png" height="80px" alt="home" onmouseover="this.src='Iconen/Portfolio2.png'" onmouseout="this.src='Iconen/Portfolio.png'" />
</a>
</li>
<!--Contact-->
<li id="contact">
<a href="contact.html">
<img src="Iconen/Contact.png" height="80px" alt="home" onmouseover="this.src='Iconen/Contact2.png'" onmouseout="this.src='Iconen/Contact.png'" />
</a>
</li>
</div>
</div>
You need to set your img to width="100%" or set a css class on the image for whatever %.
And you need to add:
margin: 0px;
padding: 0px;
To The body because some Browsers (like chrome) are having a standard margin and padding.
PS: I wanted to comment but I cant because my Reputation is to low :(