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

Phil White
PLUS
Phil White
Courses Plus Student 9,519 Points
Posted by Phil White
Phil White
Courses Plus Student 9,519 Points

img clashing with the anchor to the side of it

Hi im making a nav bar and trying to put a image next to each anchor for example a phone .png next to the contact anchor but the anchor is overlapping the image. How do i fix?

Keith Kelly
Keith Kelly
21,326 Points
Keith Kelly
Keith Kelly
21,326 Points

Can you post your html and css code?

Phil White
Phil White
Courses Plus Student 9,519 Points
Phil White
Phil White
Courses Plus Student 9,519 Points 
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
        <header>
            <a href="index.html" id="logo">
            <div id="main-nav"> 
            <h1>Visba One</h1>
            </a>
            <nav> 
                <ul>
                    <li><a href="index.html">Portfolio</a></li>
                    <li class="about"><a href="#">About</a></li>
                    <li class="contact"><a href="#">Contact</a></li>
                </ul>
            </nav>
            </div>
                </header>
                <div id="main-header" class="main-header">
                    <h1>This is the main header<h1>
                </div>
                <div class="container">
                <div id="column-1" class="even-height">
                <h2>Column One</h2>
                    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu enim dapibus, convallis nisi a, auctor risus. Integer interdum dolor id magna luctus, a euismod odio commodo. Aenean at lacus vitae lorem pulvinar porttitor eget eget tellus. Vestibulum nibh erat, ullamcorper sed mauris in, hendrerit egestas mi. Sed hendrerit sagittis ipsum. Sed et mauris et enim vehicula luctus sed ut lacus. Fusce eu faucibus nunc, vel gravida nunc. Ut ornare mattis nibh non imperdiet. Fusce in vulputate nunc. </p>
                 <a href="img/eifel-tower.jpg">
                    <img src="img/eifel-tower.jpg" class="eifel"> 
                </a>  
                </div>

                <div id="column-2" class="even-height">
                    <h2>Column Two</h2>
                        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu enim dapibus, convallis nisi a, auctor risus. Integer interdum dolor id magna luctus, a euismod odio commodo. Aenean at lacus vitae lorem pulvinar porttitor eget eget tellus. Vestibulum nibh erat, ullamcorper sed mauris in, hendrerit egestas mi. Sed hendrerit sagittis ipsum. Sed et mauris et enim vehicula luctus sed ut lacus. Fusce eu faucibus nunc, vel gravida nunc. Ut ornare mattis nibh non imperdiet. Fusce in vulputate nunc. </p>
                    <a href="img/maldives.jpg">
                        <img src="img/maldives.jpg" class="maldives">
                    </a> 
                </div>

                </div>
        <footer>
            <span><p> &copy; 2014 Phil White</p></span>
        </footer>
</body>     
</html>
Phil White
Phil White
Courses Plus Student 9,519 Points
Phil White
Phil White
Courses Plus Student 9,519 Points 
#main-header h1 {
    clear: both;
    margin-left: 400px;
    padding-top: 75px;
}


h1 {
    margin-bottom: 0;
    margin-left: 10px;
    float: left;
}

h1 {
    background-color: white;
    color: #fc9503; 
}

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
  float: right;
}

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

nav li {
  display: inline-block; 
}

nav a {
  font-weight: 16px;
  padding: 15px 10px;
  text-align: center;
  color: #fc9503;
  text-decoration: none;
  transition-property: color;
  transition-duration: 2s;
  padding-left: 20px;
  padding-right: 20px;
}

nav a:hover {
    color: #7b7a79;
}


.about {
    background-image: url('../img/about.png');
    background-repeat: no-repeat;
}

h2 {
    clear: both;
}

p {
    clear: both;
}

/** Columns **/

.container {
    clear: both;
    -webkit-column-count: 2;
    -webkit-column-gap: 75px;
}
.container .even-height {
   float: left;

}

#column-1{
    margin-left: 75px;
}

#column-2{
    margin-right: 75px;
}

#column-1 p {
    color: #fc9503;
}

#column-2 p {
    color: #fc9503;
}

#column-1 h2 {
    color: #fc9503;
}

#column-2 h2 {
    color: #fc9503;
}

.eifel {
    margin-left: 50px;
    width: 400px;
    height: 400px;
}

.maldives {
    margin-left: 50px;
    width: 400px;
    height: 400px;
}

footer {
    height: 100px;
    text-align: center;
    background-color: #fc9503;
    color: white;
}

span p {
    font-size: 20px;
    padding-top: 40px;
    padding-bottom: 40px;
}

2 Answers

Christian Frick
Christian Frick
14,586 Points
Christian Frick
Christian Frick
14,586 Points

The answer is pretty simple

li.about{padding-left:10px;}

I personally prefer to set the class to the Link and not to the li Object

Phil White
PLUS
Phil White
Courses Plus Student 9,519 Points
Phil White
Phil White
Courses Plus Student 9,519 Points

Yeah sorry i'm a complete amateur at this. thank you for your help! Appreciated!

Keith Kelly
Keith Kelly
21,326 Points
Keith Kelly
Keith Kelly
21,326 Points

Don't be sorry. That is what Treehouse is all about. Learning and getting the answers you need. Keep up the good work!