Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Phil White
PLUS
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

Can you post your html and css code?

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
#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,585 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

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

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!