Perfecting navigation links

HTML & CSS
1

Original Code:
made by @PaulOB #182

Perfecting this code: Last iteration.

1st Question

What 's the purpose of adding this rule-set?:

.title {
  display: none;
}

https://jsfiddle.net/vqtxmoqt/131/

Removed from the code:
https://jsfiddle.net/vqtxmoqt/132/

.title {
  display: none
}
2

I think that display none hides the content of the <h1 element but still displays default width and height parameters or whatever values have been set.

Further down the css script : first and :last are used which override display:none.

Adding colours to the css statements may help in showing what is happening.

3

Can you show me a fiddle of what you mean by adding colors?

4

Whoops, I meant adding background-color: red, blue, green, etc to the h1 title elementsl

5

What’s the difference?

 background: red;

.title {
  display: none;
}

background: red;

Removed:

.title {
  display: none;
}
6

Looks to me as though the title class is taking up the entire contents of the parent class.

Leave the red class title background and apply different background colors to title: before and title after

7

huh, what do you mean?

8

What’s the difference?

 background: red;

 background: green;
}

.title::after {
  left: 177px;
  background: orange;
}

.title {
  display: none;
}

Removed:


.title {
  display: none;
}
9

I just did that, and I don’t see any difference.

#8

10

I now know what the class title :before and :after display two vertical lines with the respective colours.

I am most surprised the class title display:none is not hiding the red background color. Perhaps it is do do with Javascript.

I find it is remarkably difficult to debug script using JsFiddle.

As mentioned a long time ago it is far easier to display a fully working page and there are numerous free web hosting sites that allows your own complete web page to be displayed. Industry standard web page tools can then be applied to ensure the HTML and CSS validation are correct. JavaScript has similar free tools.

Also it is possible to use the browser debug tools which allow toggling css elements on or off.

Another nice feature is HTML, css and JavaScript can be edited immediately rendering changes to the web page.

When trying to use the tools with JsFiddle there is a lot of superfluous script which complicates debugging.

Is there any particular reason a free website provider is not being used?

1 Like
11

What 's the purpose of adding this rule-set?:

You need to go back through your 10000 posts and probably back to the start where it was mentioned that you should first have a working version before adding Js.

I’m guessing that if js is disabled the page would be unusable without the display none applied.

You can’t keep pulling code apart that was tried and tested without going through the whole testiing process again.

2 Likes
12

Please see these:

In them I disable the javascript first,
As you have just said to do,
Then I adjusted the code so it works without the javascript.

#304

#305

#306

13

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