Never understood Borders?

I apologies for the broad problem. I just couldn’t figure out a good way to format or title this problem.

I have a basic navigation bar:


I used a border on every single element tag. So i currently have a page with a plethora of color borders. Now i realize that i can use specific css attributes to different element tags. What i’m trying to say is: I could use the same attribute on two separate tags and provide the same result. So the real question is, how do i know which one i should use to get the best efficiency.

If there is still confusion in the question, please let me know and i will try to rephrase it better.

IMHO the best would be to undo whatever you did to have that be.

If it was for development (try outline) it might be better to save a renamed copy of it and after you have fixed up the production copy, use that.

Else I guess you could add something like

selector-1, selector-2, selector-3 [. selector-n, ...] {
  border: none; 

after everything else.

Probably the “easiest” but it doesn’t feel right to me for unknown reasons… I think I would write a “dev.css” that over-rid some of the “site.css” ond simply not add it to the live page.

What is the page supposed to look like and how is it supposed to behave?

Which is more important, the look and function of the page (user experience) or choosing code because one method is “more efficient” than another and thereby determining the look and feel of the page?

Sorry, I may be misunderstanding this issue entirely, but it sounds like your priorities are out of order.

Create a practical design. The best code to fill that order will follow.

As @ronpat says, we need a more specific idea of the effect you want to achieve. But short of that, it’s most likely that you’d want to place the borders on the <a> elements, if you are wanting borders around each menu item.

Yes, there is. Which elements do you want to have borders?

The image above shows i believe 5 navigation buttons. Well when i use a Border CSS, i can place a border on every element in my HTML. How do i know which one i should use? Should i make the inside of the “li a” as the default box or should i use the “li” as the main box. Also for example, the CSS property of “text-decoration:none;”, i realized i can place that same line into other places like the “nav” element tag or the “ul” element tag and both provide the same effect! How do i know which one should it be placed in?

Also since were here and i’m in no means a professional at this, what are some tips and comments you guys can give me to find adequate ways of programming/designing ?

Since <a> is element that will actually response to user click, it makes sense to use “li a”. That will allow you to see “active area” of each menu item.

The rule is simple - place it as deep, as possible. In your example there is no elements other than <a> that can be affected with that style. So use ul li a selector.

That solves it for me ! i just needed to know the most adequate placement for stuff like that. I appreciate the assistance and i’ll let you guys know how it goes!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.