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 trialGasser Elshafei
489 Pointshow can i space word apart from another
if i want to change the space betwwen home and contacts at the top of my website what do i do???
Gasser Elshafei
489 Pointsand yes can you help me please i am new so i am confused
Lucas DeVinney
1,489 PointsYes, would you like to talk through comments here or somewhere else?
Gasser Elshafei
489 Pointsoh do you have zoom sir
Lucas DeVinney
1,489 Pointsyes i do. I can call on wednesday in the afternoon est
1 Answer
Lucas DeVinney
1,489 PointsIf you are trying to change the layout of your header, this should be done using css. Here is an example of a navigation bar in the header of the website:
<nav class="navigation">
<ul>
<li><a href="#"><strong>Home</strong></a></li>
<li><a href="#"><strong>Music</strong></a></li>
<li><a href="#"><strong>About</strong></a></li>
<li><a href="#"><strong>Contact</strong></a></li>
</ul>
</nav>
.navigation {
text-align: right;
padding-bottom: 0px;
padding-top: 0px;
font-size: 120%;
margin-right: 1.5%;
}
.navigation ul li {
border-radius: 10px;
display: inline-block;
background-color: 556673;
padding: 5px 10px;
margin: 2px;
}
.navigation ul li a {
text-decoration: none;
color: white;
}
.navigation ul li a:hover {
text-decoration: none;
color: 2D373E;
}
The style that targets the navigation class aligns the text to the right and changes the font size and positioning in the header. The navigation style that affects the unordered list (.navigation ul li) is changing how each link looks. The border-radius is causing each link to have a background with rounded corners. The display attribute is changing how the list is organized (in this case from left to right instead of top to bottom). The padding and margin values is what changes the space between the links and their borders, and the gaps between each link respectively.
If you would like to test the source code of this header and test out values, let me know.
Gasser Elshafei
489 PointsGasser Elshafei
489 Pointsthanks for your advice sir