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
John Levy
1,451 PointsCSS issues when adding the nav bar
I am trying to place the option tab with three options (beginner/advanced/bundle) which I have figured out how to do. I want the blue border around it but once I add the social icons and nav bar the blue border also goes around the nab bar tabs and social icons. What should I change in my code so the blue border is only around the three options? Right now I made it so it is for screens sizes 320px and under. This is the code for the 3 options( Beginner/advanced/bundle)- http://codepen.io/Johned22/pen/vKzAyd This is the code once I add it to the nav bar and social icons-
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo Menu - PSDGraphics.com</title>
<link rel="stylesheet" href="navbar.css">
<link rel="stylesheet" href="socialmedia.css">
<link rel="stylesheet" href="dropdown-menu.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<ul class="social-buttons" id="demo1">
<li>
<a href="#" class="brandico-twitter-bird"></a>
</li>
<li>
<a href="#" class="brandico-facebook"></a>
</li>
<li>
<a href="#" class="brandico-instagram"></a>
<li>
<a href="#" class="brandico-linkedin"></a>
</li>
</ul>
<div id='nav'>
<img src="logo3.jpg" id="logo"/>
<nav>
<ul class="nav">
<li><a href="#">HOME</a></li>
<li><a href="personaltraining.html">PERSONAL & ONLINE TRAINING</a></li>
<li><a href="indexdesktop.html">EBOOKS</a></li>
<li><a href="apps.html">APPS</a></li>
<li><a href="instagram.html">INSTAGRAM SHOUTOUTS</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
<ul>
<li><a href="#home">ADVANCED</a></li>
<li><a href="#news">BEGINNER</a></li>
<li><a href="#contact">BUNDLE</a></li>
</ul>
CSS
@media screen and (max-width: 320px) {
body {
margin:0;
padding: 0;
font-family: 'Roboto', serif;
}
#logo{
display: none;
}
.nav {
background-color: grey; /*turns nav bar white*/
color: white;
list-style: none; /*gets rid of bullet points*/
text-align: left;
padding: 0px -10px 0px -10px;
font-size: 0px;
width: 320px;
}
.nav > li { /*max-width: 320px*/
display:Inline-block;
padding: 5px 7px 5px 7px; /*nav bar text*/
}
.nav > li a {
text-decoration: none;
color: blue;
font-size: 13px;
padding: 0px -2px 0px -2px
}
.nav > li > a:hover {
color: black;*/
}
ul.social-buttons {
text-align: center;
margin: 5px 90px 5px 10px;
height: -200px;
}
ul.social-buttons li a {
width: 30px;
height: 30px;
display: block;
border-radius:20%;
text-decoration: none;
font-size: 20px;
line-height: 40px;
color: white;
}
@media only screen and (max-width: 320px) {
body {
background-color: white;
}
@media screen and (max-width: 320px) {
body {
margin:0;
padding: 0;
font-family: 'Roboto', serif;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: right;
/* border-right:solid 1px blue;/*add */
}
a:link, a:visited {
display: block;
width: 90px;
font-weight: regular;
color: #847bf7; /*text*/
background-color: white;
border: 1px solid #847bf7;
text-align: center;
padding: 4px;
text-decoration: none;
}
a:hover, a:active {
background-color: #847bf7;
}
ul.social-buttons li {
display: inline-block;
margin: 0 1px;
float: center;
border-top: -80px;
}
Mod note : Added markdown to display your code. See post comment :-)
5 Answers
Steven Parker
243,318 Points
Your border is currently applied to every a:link and a:visited.
If you added a class to the ul that surrounds the three "options", you could easily apply the border only to them.
For example, if you added the class like this: <ul class="options">, you could then target them for the border like this:
.options a:link, .options a:visited {
border: 1px solid #847bf7;
}
Then, just remove the border from the less specific rule.
Jonathan Grieve
Treehouse Moderator 91,254 PointsIt looks like you need to target specific links so you can select which elements have the blue border. Right now it's selecting all links in the document.
Try removing the border from your links and adding this rule which will select the 3 option tabs.
#home,
#news,
#contact {
border: 1px solid #847bf7;
}
John Levy
1,451 PointsI added this code to my HTML- <ul> <ul class="options"> <li><a href="#home">ADVANCED</a></li> <li><a href="#news">BEGINNER</a></li> <li><a href="#contact">BUNDLE</a></li> </ul>
I also added this code to my CSS .options a:link, .options a:visited { border: 1px solid #847bf7; }
It is still not working where am I going wrong? Thanks
Steven Parker
243,318 PointsDid you remove the other border setting (around line 80 or so)?
John Levy
1,451 PointsYes I removed them but still having issues. Using the code attached below which is the social icons and nav bar what would be the best way to have another bar with three options under neath spread across the entire page and all three options are separated with a border. If you could give me a example of how I could do this that would be great, thanks http://codepen.io/Johned22/pen/vKzAyd
Steven Parker
243,318 PointsI'm not sure which "three options" you mean. It appears that you removed the ones you were calling "options" before entirely.
John Levy
1,451 PointsThanks for your help. I figured it out eventually so its all good. Thanks again
Jonathan Grieve
Treehouse Moderator 91,254 PointsJonathan Grieve
Treehouse Moderator 91,254 PointsForum markdown is great for adding custom code to your posts. Check out the markdown cheatsheet below or this recent post to the community. :-) https://teamtreehouse.com/community/understanding-type-casting-in-java