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 trialPhil White
Courses Plus Student 9,519 Pointsimg 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?
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> © 2014 Phil White</p></span>
</footer>
</body>
</html>
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
14,586 PointsThe 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
Courses Plus Student 9,519 PointsYeah sorry i'm a complete amateur at this. thank you for your help! Appreciated!
Keith Kelly
21,326 PointsDon't be sorry. That is what Treehouse is all about. Learning and getting the answers you need. Keep up the good work!
Keith Kelly
21,326 PointsKeith Kelly
21,326 PointsCan you post your html and css code?