Is there a way for targeting specific image within a group of images taken from another website?

Hi Everyone, i am working on the following assignment at code-pen:
First Link is the assignment before i apply my code:

second link is the same assignment after i implement some code:
https://codepen.io/santoza/pen/LXOZWR

as you will notice here the first image didn’t took the measurement that other two image did, i don’t know why? so i wonder if there is any way or trick that i can apply using CSS only without changing anything in html code?
Also feel free if you have any other advice for work i have done, am learning and really appreciate any advice/notice that can help me improving my skills.
Thank you for your help in advance

Yes you can change the dimensions of the image but there are a number of things to consider first.

Actually all three images are a different natural size and have different aspect ratios. You set their width to 30% but their height will be auto which will be dictated by the image’s own aspect ratio. Unless all your images are the same aspect ratio the auto height will be different for each.

You can’t set a specific height for each image either because that will stretch the image and distort it. You could use the object-fit:cover property on the image and that would allow you to give a fixed height to the image and it will not distort and all images will be exactly the same size. However as the width is fluid that would look odd for a responsive site as the height would remain static so you need a better method altogether.

Object-fit:cover works in latest browsers (not IE11) so you could do something like this.

Remove this rule completely:

.left img{
  width: 30%;
  padding: 10px;
  margin-top: 10%;
  margin-left: 15px;
  margin-right: 10px;
  
}

Then replace it with this structure:

.responsive-img img {
  width: 30%;
  height: auto;
  margin: 1em 1%;
}

@supports (object-fit: cover) {
  .responsive-img {
    display: inline-block;
    position: relative;
    width: 30%;
    margin: 1em 1%;
    padding-top: 25%;
  }

  .responsive-img img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}

Then add the responsive class to the anchor surrounding the image.

class=“responsive-img”

e.g.

<a class="responsive-img" href="https://commons.wikimedia.org/wiki/File%3AUltimate_Frisbee%2C_Jul_2009_-_17.jpg"><img src="https://upload.wikimedia.org/wikipedia/commons/5/5d/Ultimate_Frisbee%2C_Jul_2009_-_19.jpg" alt="Creative Common Ultimate Photo" title="By Ed Yourdon [CC BY-SA 2.0 (http://creativecommons.org/licenses/by-sa/2.0)], via Wikimedia Commons"/> </a>

Do that for all those 3 images and then they should display the same size in modern browsers. Of course there will be better methods of laying out those items depending on what you are intending to do with them.

I do have a number of (helpful) comments about the rest of your code (semantics and structure) but have to rush out for an hour or so so will comment when I return unless someone else jumps in with more advice.:slight_smile:

1 Like

A few more pointers.

You have a gap around the page from the default margin/padding on the body element so remove those.

html,body{margin:0;padding:0;}

I don’t see a meta viewport tag in place and without it you wont be able to properly add media queries for smaller devices (which now account for more views than desktops).

You have used the aside element but the aside content doesn’t seem to be tangential to the main content so it seems semantically incorrect to me. It probably should just be a section element. (No one really knows when to use aside or not so its actual worth is somewhat diluted).

Avoid using classes like left and right as they are presentational and looking at your page you have the aside called ‘left’ but it is not on the left! Use something more generic but descriptive of its use and not referring to where you think it might be placed. I would use a class of sidebar for a sidebar and that means I can place it left, right or middle without confusion.

Don’t change your navigation links to bold on hover as this is very disconcerting and bad for those that suffer from epilepsy as all the line jiggles about when you hover. You are probably better setting them all to bold and reducing the opacity on all but the current item. Then on hover you can set the opacity to 1. Also the gray colour you set as the hovered item is almost invisible and not a good choice for color contrast.

Avoid styling elements that may be used in multiple contexts directly.

e.g. you have styled nav and header globally but n a real site they may be used in multiple places and indeed in third party code that you may add later.

header {
  background-color: #0e6655;
}

Use a class instead tyo avoid conflicts and to make sure you only target the elements you meant to target.

.main-header {
  background-color: #0e6655;
}

<header class="main-header">

Don’t put space bewteen your classnames as older browsers will choke on it.

e.g. You have this:

<aside class = "left">

It should be:

<aside class="left">

Avoid descendant selectors where possible. They are ok in contained contexts but you have this rule.

header nav {
  float: right;
  margin-top: 10px;
}

Again that will target all header elements wherever they are and all navs within headers (which there are usually a few on a web page). If you used the .header-main class I mentioned above you could target just the nav in your header and not every other header that may appear on the page. For robustness I would advocate just adding a class to the nav instead and call it something like .main-nav{} Then you can lose the descendant selector and just use main-nav instead.

.main-nav {
  float: right;
  margin-top: 10px;
}

That is faster to parse and more robust to maintain. I’m not saying never use descendant selectors but just be aware of where things may go wrong later on.

Lastly beware of vertical margins using percentage because they refer to the width of the containing block and nothing to do with the height available. In most cases for vertical margins and padding you will use a fixed measurement (em,rem,px etc).

That’s enough pointers for now :slight_smile:

3 Likes

Thank you for your Amazing and clear way of explanation.
I am sorry because i forget to mention that i am not allowed to change HTML Code, i have to work only with CSS and create basic style, but this information you just gave it to me definitely i will use it at different file and practice on it.
Thank you again :blush:

You should have mentioned that at the start :slight_smile:

You can still use the code from my post#2 but you will need to target the anchor with .left a {} instead of .responsive-img {} and change the rest of the styles accordingly.

1 Like

Yes i did that, as i changed the color and instead of using display:inline-block, i chose block value to have the Horizontal shape for my images. Thank you a lot again .

The images will always be the same shape with the code I gave you. All you have done is make them 100% width of the viewport so now they are massive rather than the 3 across that I suggested. If that’s what you want then all well and good but it seems to me there would be no need to have added the extra code if they are full width as no one is going to be measuring the heights as they don’t align horizontally any more. :wink:

You must be careful with copying and pasting especially at beginner level. You copied my code and missed the last closing bracket which in effect means that any following code is now in a media query for object-fit when it shouldn’t be. Copying code correctly is a basic requirement so please take care as a missing comma or bracket could break the whole thing :slight_smile:

You need an extra bracket as shown here:

@supports (object-fit: cover) {
  .left img {
    display: inline-block;
    position: relative;
    width: 100%;
    margin: 1em 1%;
    padding-top: 20%;
  }
}

Also I’m still seeing your nav jiggle across when hovered. That is a major mistake that will annoy users. You should address that issue next.:slight_smile:

1 Like

would you clarify the last part please?
pardon me i just started CSS a week ago and some of your information is totally new to me

1 Like

No worries you are not doing anything that we all did when we started :slight_smile:

I was referring to the hover on the nav when you change the item to bold it increases the element’s size. This causes a reflow that causes all the other nav items to move and is rather disconcerting.

Try to avoid causing a reflow and use rules that have negative impact on surrounding content.

As this is a learning exercise see if you can come up with something better:)

I removed the text-transform tag as i reduced the padding values now it looks


The nav is still jiggling on hover and looks awful. I would suggest you change the nav code to something like this:

nav a {
  color: #ffffff;
  float: left;
  margin-right: 20px;
  font-size: 120%;
  padding: 0 10px 0 10px;
  /* display: inline; not needed as floats are block display*/
  opacity: 0.8; /* added*/
  font-weight: bold;/* added*/
}
header a:hover {
  /* color: #616A6B; not enough contrast*/
  /*font-weight:bold; no no no */
  opacity: 1;/* added*/
   text-shadow:0px 0px 1px rgba(255,255,255,0.8);/* added*/
}

I can’t re-iterate strongly enough that the nav moving when hovered is the biggest flaw you have so far so please correct it :slight_smile:

3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.