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
Edward Bryan Kene Morales
7,374 PointsBest Practice in Lining up<nav> links
Hi Guys,
So I am totally new in HTML and CSS and recently stumbled upon something that really intrigued me. So I found that are two ways to line up nav links:
Give the <li> inside the nav ul a "display:inline" property.
Give them a "float:left" property.
It seems that they produce same results (flushing the links to either left or right) but I don't know if there's a rule in using them to line up nav links.
Another thing is giving the <a> tag a width and height. I understand that they are inline elements and cannot accept a width and height except for:
- Giving them a "display:block" property or 2: Giving its parent, say an <li>, a "position: relative" and the <a> inside it a "position: absolute" property.
I am really curious about these things and hope someone will shed a light on these matter. I will really appreciate any insights regarding these matters.
Hope to hear back from you. Cheers!
5 Answers
Wayne Priestley
19,579 PointsHi Edward,
You will see many examples of how to style navigation all depending on how the designer wants the page to look, so there isn't really a right or wrong, or a standard way of Doing it.
There are advantages to doing things a certain way depending on your experience I suppose. For example I wouldn't recommend using relative or absolute positioning when you start out as this can cause difficulties when positioning other items on a page later in your code.
Using display inline-block and float left or right are good ways to start, especially when you're designing your first few sites. Once your skill level increases and your layouts get more complicated, then using different methods to style your layouts will be options.
There are methods that make styling easier as you progress, such as using what are essentially pre made css styles such as Bootstrap or Foundation, which you'll learn about as your Treehouse lessons progress, or using a ready made Grid or coding your own Grid layout.
Hope this helps.
Erik McClintock
45,783 PointsEdward,
The answer to this is one that may be unsatisfying, or it may be entirely elating: there isn't really a "proper" way to go about achieving the desired outcome here! That's one of the beautiful things about programming and web development: there are a myriad of ways to reach the same goal, and each one is (usually) just as sound as the last. It really just comes down to your preference.
If you find a way that works easiest or best for you, you go with that method. That's about it :)
Erik
Wayne Priestley
19,579 PointsHi Edward,
The good thing is that you don't have to settle on one thing or another, even as a beginner.
You'll be amazed at how much you learn when you're trying to fix something that your experimenting with.
By all means follow along with the lessons, but experiment with other things along the way too, you can always ask for help on the forum.
There are no stupid questions here, just remember if it's a problem with a code challenge or you're having trouble with some code you wrote, the first thing people will ask for is that you post your code so we can help.
;Here is a link to explain how to use Markdown to post your code How to post code
If you look at the bottom of the box when your typing a reply you will see Markdown Cheatsheet that will also explain how to post your code
Edward Bryan Kene Morales
7,374 PointsThanks for the tip Wayne. I will surely keep that in mind!
Edward Bryan Kene Morales
7,374 PointsThanks Erik. I really thought that it would affect the code somehow if one method is used rather than another.
I am starting to get the hang of web programming and I'm sure I will stumble upon many instances like this in the future. Thanks again!
Edward Bryan Kene Morales
7,374 PointsThanks Wayne! I guess I will have to settle with using the inline-block method for now. Yeah, I am still starting out and actually just started with the web design path. Maybe If I reach the CSS Layout Fundamentals part, then I will get better with choosing which method works for styling/moving things on the page.