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

Posted by damian celentano
damian celentano
3,822 Points

My pictures do not float properly, what is wrong in this code?

Trying to get them to float on 3 rows horizontally.

Html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset:"utf-8">
    <title>damiano ^ webdesigner</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Old+Standard+TT:400,400italic|Crimson+Text:400,700italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <body>
    <header>
      <a href="index.html" id="logo">
       <h1>damiano</h1>
      <h2>webdesigner</h2>
        </a>

      <nav>
        <ul>
          <li><a href="index.html" class="selected" >Portfolio</a></li>
        <li><a href="about.html">about</a></li>
        <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
      </header>
      <div id="wrapper">
          <section>
            <ul id="galerie">
           <li>
                 <a href="img/220.jpg">
                 <img src="img/220.jpg" alt "">
                   <p>Deep winter</p>
               </a>
              </li>
             <li>
                 <a href="img/11.jpg">
                 <img src="img/11.jpg" alt "">
                   <p>autumn</p>
               </a>
              </li>
              <li>
                 <a href="img/12.jpg">
                 <img src="img/12.jpg" alt "">
                   <p>Endless spring</p>
               </a>
              </li>
              <li>
                 <a href="img/14.jpg">
                 <img src="img/14.jpg" alt "">
                   <p>Summer bringing the light</p>
               </a>
              </li>
              <li>
                 <a href="img/16.jpg">
                 <img src="img/16.jpg" alt "">
                   <p>Welcome to the jungle</p>
               </a>
              </li>
            </ul>
          </section>
          <footer>
          <p>&copy; 2015 steve fox</p>
          </footer>
            </div>
    </body>
 </head>
</html>

Here is the CSS file:

body {
  font-family: 'Lobster Two', cursive;
}
a {
  text-decoration: none
}
img {
  100%;
}
#wrapper {
max-width: 960px;
  margin: 0 auto;
  padding: 0 5%;

}
#logo {
  text-align: center;
  margin: 0;
}
h1 {
 font-family: 'Old Standard TT' , serif;
  margin 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.7em;
}
h2 {
  font-size: 0.5em;
    margin: -5px 0 0;
    font-weight: normal;
}
a {
  color: #3d8e9a
}
header {
  background: black;
  border-color: yellow;
}
h1 , h2 {
  color: #fff;
}
nav {
  background: purple;
}
nav a, nav a:visited { color:
  blue;
}
nav a.selected, a:hover {
  color:pink
}
body {
  background-color: #4C2E3D;
  color: #CCCCCC;
}
nav {
  text-align: center;
  padding: 10px 0;
  margin: 20 px 0 0;
}
footer {
  text-align: center;
  font-size: 0.9em;
  padding-top: 50px;
  color: #00001F;
}
/*page portfolio*/
#galerie {
  margin: 0;
  padding 0;
  list-style: none;
}
#galerie li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #008F00;
color: #f5f5f5;

}
#galerie li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.8em;
  color: #C0F2C0;
}

Sorry for the long post.

Rich Bagley
Rich Bagley
25,869 Points

Just formatted your code in the post so it's a little easier to read for those answering :)

-Rich

7 Answers

Ron Horn
Ron Horn
7,591 Points
Ron Horn
Ron Horn
7,591 Points

You can say that the picture is 100% but you have to declare ( size: 100%) and then max-width and or height to be responsive.

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

Your img 100% is wrong. What do you want 100%?

damian celentano
damian celentano
3,822 Points
damian celentano
damian celentano
3,822 Points

@ Ted Summer, can you explain in detail please, i am not sure what you mean and to what 100% you are referring to. Regards

damian celentano
damian celentano
3,822 Points

By the way, the pictures overlap, the right column side covers half the left column size.

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

i just saw another issue: Your nav padding has a space between 20 and px. There should be no space.

With respect to the overlap, I am going to have to play with it a little to see what I can figure out.

damian celentano
damian celentano
3,822 Points
damian celentano
damian celentano
3,822 Points

Ted, thank you, i have already had it figured out, it was simply the pictures being too large, i resized them and it looks good now, expect the last pic looks out of place in the Portfolio page. http://port-80-bal9ylup2i.treehouse-app.com/index.html

i am not sure if you can see the page there, i have new issue on the contact page, i want the pics to be to the left of the links, i am not sure why they are in the background instead, the code is the same the tutor has used. Maybe i have to resize the pics as well?

thank you very mch, much appreciated.

http://port-80-bal9ylup2i.treehouse-app.com/contact.html

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

Will you please post your current css. Make sure you folow the Markdown Cheatsheet instructions below to format the code.

damian celentano
damian celentano
3,822 Points
damian celentano
damian celentano
3,822 Points

html:

<!DOCTYPE html> <html> <head> <meta charset:"utf-8"> <title>damiano ^ webdesigner</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Old+Standard+TT:400,400italic|Crimson+Text:400,700italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <body> <header> <a href="index.html" id="logo"> <h1>damiano</h1> <h2>webdesigner</h2> </a>

  <nav>
    <ul>
      <li><a href="index.html">Portfolio</a></li>
    <li><a href="about.html" >about</a></li>
    <li><a href="contact.html" class="selected">Contact</a></li>
    </ul>
  </nav>
  </header>
  <div id="wrapper">
      <section>
        <img src="img/10.jpg" alt="photograf made by michaelangelo" class="profile-photo">


      </section>
    <section>
      <h3>general information</h3>
      <p>hello how is tricks</p>
      <p>feel free to contact me without hesitation</p>
    </section>
    <section>
      <h3>contact details</h3>
      <ul class="contact-info">
      <li class="phone"><a href="tel:555-5555" >555-5555</a></li>
      <li class="mail"> <a href="mailto:hot@hot.com" >hot@hot</a></li>
      <li class="rauchzeichen"> <a href="img/10.jpg" >lovely eh</a></li>
      </ul>
    </section>
      <footer>
      <p>&copy; 2015 steve fox</p>
      </footer>
        </div>
</body>

</head> </html>

CSS: body { font-family: 'Lobster Two', cursive; } a { text-decoration: none } img { 100%; } h3 { margin: 0 0 1em 0; }

wrapper {

max-width: 960px; margin: 0 auto; padding: 0 5%; width: 100%; } header {

margin: 0 0 30px 0; padding: 5px 0 0 0; }

logo {

text-align: center; margin: 0; } h1 { font-family: 'Old Standard TT' , serif; margin 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.7em; } h2 { font-size: 0.5em; margin: -5px 0 0; font-weight: normal; } a { color: #3d8e9a } header {

background: black; border-color: yellow;

} h1 , h2 { color: #fff; } nav { background: purple; } nav a, nav a:visited { color: blue; } nav a.selected, a:hover { color:pink } body { background-color: #4C2E3D; color: #CCCCCC; } nav { text-align: center; padding: 10px 0; margin: 20px 0 0; } nav ul { list-style:none; margin: 0 10px; padding: 0; } nav li { display: inline-block; } nav a { font-weight: 800; padding: 15px 10px; } footer { text-align: center; clear: both; font-size: 0.9em; padding-top: 50px; color: #00001F; } /page portfolio/

galerie {

margin: 0; padding 0; list-style: none; }

galerie li {

float: left; width: 45%; margin: 2.5%; background-color: #008F00; color: #f5f5f5;

}

galerie li a p {

margin: 0; padding: 5%; font-size: 0.8em; color: #C0F2C0; } /* page about*/ .profile-photo { display: block; max-width: 250px; margin: 0 auto 30px; border-radius: 100%; } /* page contact*/ .contact-info { list-style: none; padding: 0 ; margin: 0 font-size 4em; } .contact-info { display: block; min-height: 30px; background-repeat: no repeat; background-size: 20px 20px; padding: 0 0 0 30px; margin: 0 0 10px ; } .contact-info li.phone a { background-image: url('/../img/phone.jpg');

} .contact-info li.mail a { background-image: url('/../img/pilot.jpg'); } .contact-info li.rauchzeichen a { background-image: url('/../img/space.jpg'); }

sorry ted, i dont know how to apply the markdown, a headsup on that matter for future reference would be appreciated, thank you

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

Close to the Markdown. Use three ` followed by the language with no spaces. The ` marks need to be double spaced below the text. Then close with three more `. Double space and open a new section for a different type of code with the same procedure.

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

Right below the add block is a sentence that include a bold Markdown Cheatsheet. That bold is a link to teach you how to do it right.

damian celentano
damian celentano
3,822 Points
damian celentano
damian celentano
3,822 Points

thank you, i got it right for the css, the html did not work, but it looks easily readable now.

damian celentano
damian celentano
3,822 Points

hey ted, i have figured it out, but i do not understand why it did not work before.

if i apply the css to the parent class "contact-info", it does not apply the css on its children. if i apply the css to the li and a within contact-info, then it all works. however, the tutor in the video made it work by adding the css to the .contact-info.

oh well thank you, i have learned the markdown after all :-)

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

Did you change any css from the beginning? If so, I don't see it here. If not, there are a number of errors pointed out above.