Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Omar Bahaa
PLUS
Omar Bahaa
Courses Plus Student 1,801 Points
Posted by Omar Bahaa
Omar Bahaa
Courses Plus Student 1,801 Points

Resizing Image using CSS

I am practicing what I've learned so far with treehouse, i wanted to add an image and change it's border-radius to have a round image but the picture does not change even by changing width and height, i think it's something to do with descendant selectors. <!--HTML --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Omar's resume</title>

<link rel="stylesheet" href="CSS/Style.css">

</head> <body> <!-- Header start--> <header id="top"> <h1>Omar's Resume</h1> <img class="own"src="Images/29366420_10156299623364343_8928068639840534528_n.jpg" alt="Omar picture"> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Articles</a></li> <li><a href="#">Contact</a></li> 

  </ul>

</nav>

</header>

/* CSS*/

*{ box-sizing: border-box; }

body{ margin: 0; padding: 0;

}

header{ text-align: center; background:

    linear-gradient( #2c3e50, transparent 80%),
    url(../images/freelance-coder-847x361.png)

    ;
background-size: cover;
height: 900px;

}

.own{ border: 4px solid green; border-radius: 30px;

}

ul{display: inline-block;

}

ul li{

list-style: none;
float: left;
padding: 10px 22px;
border-left: 1px solid #3b6c94;
font-size: 22px;
color: lightslategrey;

}

ul li:first-child { border: none; }

2 Answers

Jacob Jackson
seal-mask
.a{fill-rule:evenodd;}techdegree
Jacob Jackson
UX Design Techdegree Student 7,833 Points
Jacob Jackson
.a{fill-rule:evenodd;}techdegree
Jacob Jackson
UX Design Techdegree Student 7,833 Points

Hey Omar!

I just wanted to check a few things with you to make sure it's not just the forum that's changed the formatting of your code. Sometimes bad formatting alone is enough to mess the browser up in reading it properly. I also noticed your post seems to be missing the closing </body> and </html> tags.

I copied what you've put here and used the same directory paths as you have and simply subbed in a different picture and with a few tweaks, got it to look like you've described.

A few things to point out in relation to your issue:

  • I might suggest using 50% for your perfectly rounded edges instead of a fixed pixel value. This way, if you're in a situation where your image is resizing, you don't have to worry about the edges not being rounded enough.
  • Also, is you want a perfect circle, remember to assign equal width and height values (in my example below, I added 200px X 200px)
  • Use a friendlier naming convention that's more descriptive to what the photo is instead of its default name. I noticed the one you were using looks like it was either just downloaded or just came off a camera with a very long, number-based name with several underscores (it would blow your mind what will screw up a browser's ability to read).

Below is what I used to get your desired result. There were just a couple small changes:

HTML:

<!--HTML --> <!DOCTYPE html> 

<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Omar's resume</title>
  <link rel="stylesheet" href="CSS/Style.css">
</head> 

<body> <!-- Header start-->
  <header id="top">
    <h1>Omar's Resume</h1>
    <img class="own"src="Images/flyingBear.gif" alt="Omarpicture"> 
    <nav> 
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Articles</a></li>
        <li><a href="#">Contact</a></li>
      </ul> 
    </nav>
  </header>
</body>
</html>

CSS:

*{
  box-sizing: border-box;
}

body{
  margin: 0;
  padding: 0;
}

header{
  text-align: center; background:linear-gradient( #2c3e50, transparent 80%),url(../images/freelance-coder-847x361.png);
  background-size: cover;
  height: 900px;
}

.own{
  border: 4px solid green;
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

ul{
  display: inline-block;
}

ul li{
  list-style: none;
  float: left;
  padding: 10px 22px;
  border-left: 1px solid #3b6c94;
  font-size: 22px;
  color: lightslategrey;
}

ul li:first-child {
  border: none;
}

Let me know if you have any questions or if this doesn't work. Please provide a screenshot if it's still not workin.

You're really close though! All of your logic makes perfect sense. At this stage, it's almost ALWAYS something really really tiny.

Good luck!

-Jake

Omar Bahaa
PLUS
Omar Bahaa
Courses Plus Student 1,801 Points
Omar Bahaa
Omar Bahaa
Courses Plus Student 1,801 Points

Dear Jake,

Thank you so much for taking the time to look at my code, the closing tags for both the body and the html was at the bottom of my code, however i followed your instructions and surprisingly, it's working perfectly right now after i changed the name of my picture to something more personalized. I can't thank you enough, you are a lifesaver.

Best regards,

Omar