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
Isaiah Thornton
913 PointsHello, I have a problem getting my list items to 1. Remove the bullet points and 2. Move over to the left.
Here is my main.css file
/***************************** GENERAL ******************************/
body { font-family: 'Open Sans', sans-sarif; }
wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration: none;
}
img { max-width: 100%; }
h3 {
margin: 0 0 1em 0;
}
/***************************** HEADING ******************************/
header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }
logo {
text-align: center;
margin: 0;
}
h1 { font-family: 'Changa One', sans-sarif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }
h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }
/***************************** NAVIGATION ******************************/
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 ******************************/
footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }
.social-icon { width: 20px; height: 20px; margin: 0 5px; }
/***************************** PAGE PORTFOLIO ******************************/
gallery {
margin: 0;
padding: 0;
list-style: none;
}
gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
gallery li a p {
margin: 0;
padding: 5%;
font-size: 0.75em;
color: #00ff00;
}
/***************************** PAGE:ABOUT ******************************/
.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 20%; }
/***************************** PAGE: CONTACT ******************************/
.contact-info { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }
.contact-info a { display: block; min-height: 20px; 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.png'); }
.contact-info li.mail a { background-image: url('../img/mail.png'); }
.contact-info li.twitter a { background-image: url('../img/twitter.png'); }
/***************************** COLORS ******************************/
/* sitebody */ body { background-color: #fff; color: #999; }
/* green header */
header {
background: #0066cc;
border-color: #00ccff;
}
/* nav background on mobile */
nav {
background: #00ccff;
}
/* logo text */
h1, h2 {
color: #fff;
}
/* links */
a {
color: #6ab47b
}
/* nav links */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #32673f;
}
and here is my Contact.html file
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Isaiah Thornton | Expert Developer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One:400,400italic|Open+Sans:400italic,700italic,800italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html 3" id="logo"> <h1>Isaiah Thornton</h1> <h2>Developer</h2> </a> <nav> <ul> <li><a href="index.html 3" >Portfolio</a></li> <li><a href="About.html 3" >About</a></li> <li><a href="Contact.html 3" class="selected">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <h3>General Information</h3> <p>I am currently looking for new design work can always be contacted at my email address Zeek2292@gmail.com</p> <p>Please only use phone for serious inquiries. In all other cases Twitter, Facebook and Email are all excellent ways to contact me.</p> </section> <section> <h3>Contact details</h3> <ul class="Contact-Info"> <li class="Phone"><a href="Tel:267-251-8400">267-251-8400</a></li> <li class="Mail"><a href="Mailto:Zeek2292@gmail.com">Zeek2292@gmail.com</a></li> <li class="Twitter"><a href="http//Twitter.com/intent/tweet?screen_name=Zeekthefirst">@Zeekthefirst</a></li> </ul> </section> <footer> <a href="http://Twitter.com/Zeekthefirst"><img src="img/twitter-wrap.png" alt="Twitter Logo"class="social-icon"></a> <a href="http://Facebook.com/Isaiah Thornton"><img src="img/facebook-wrap.png" alt="facebook Logo"class="social-icon"></a> <a href="http://zeeksdosanddonts.wordpress.com"><img src="img/Wordpress Logo.png" alt="Wordpress Logo"class="social-icon"></a> <p>© 2015 Isaiah Thornton.</p> </footer> </div> </body> </html>
I thank anyone that can help me.
1 Answer
Luciano Bruzzoni
15,518 PointsHey! you can accomplish this by removing the padding and margin from the ul (this will push the list items to the left) and by setting the list-style to none (this will remove the bullet points). so it should be something like this:
ul{
list-style: none;
padding: 0;
margin: 0;
}
hope that helped!
Luciano Bruzzoni
15,518 PointsLuciano Bruzzoni
15,518 PointsJust to add, ul's like many other properties have padding and margin that come predetermined, that's why the margin and padding need to be set to 0 to accomplish that.
Isaiah Thornton
913 PointsIsaiah Thornton
913 PointsAm I adding this to my css file?
Isaiah Thornton
913 PointsIsaiah Thornton
913 Pointsnvm thanks I already added it.
Luciano Bruzzoni
15,518 PointsLuciano Bruzzoni
15,518 PointsOh yes, forgot to mention that ooops and anytime :)