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

HTML How to Make a Website Adding Pages to a Website Add and Style Icons

Posted by Amanda Baldwin
Amanda Baldwin
2,983 Points

Selecting the anchor and the making it a block element

Ive tried to figure out how to do this, but honestly, i dont know how. I have to select the anchor element in the contact info, and then change it to the block element. Please help.

css/main.css 
a {
  text-decoration: none;

}

a.contact-info:block;



#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

#logo {
  text-align: center;
  margin: 0;
}

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

h1 {
  font-family: ‘Changa One’, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

img {
  max-width: 100%;
}

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

ul.contact-info {
  font-size: 0.9em;
  padding: 0;
  margin: 0; /* Here */
  list-style-type: none;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}

.profile-photo {
  display: block;
  margin: 0 auto 30px;
      max-width: 150px;
  border-radius: 100%;
}

3 Answers

Mike Constantino
Mike Constantino
12,034 Points
Mike Constantino
Mike Constantino
12,034 Points

To select general elements nested in another, you put it in the format of 'parent element' 'child element' - separated by a space. Take a look at the code below :)

a {
  text-decoration: none;

}

.contact-info a {
   display: block;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

#logo {
  text-align: center;
  margin: 0;
}

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

h1 {
  font-family: ‘Changa One’, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

img {
  max-width: 100%;
}

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

ul.contact-info {
  font-size: 0.9em;
  padding: 0;
  margin: 0; /* Here */
  list-style-type: none;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}

.profile-photo {
  display: block;
  margin: 0 auto 30px;
      max-width: 150px;
  border-radius: 100%;
}
Martin Aleman
Martin Aleman
4,612 Points
Martin Aleman
Martin Aleman
4,612 Points

try this .contact-info a{ display: block; }

Ashlee Brown
Ashlee Brown
8,045 Points
Ashlee Brown
Ashlee Brown
8,045 Points

I second what Mike Constantino said, and add that making an element a block element is the same as saying that you want to display the element in block format, or vertical so that all of the selected elements are in one line down the page.