whooooooop 
Works great! A big thank you @cpradio
1 Like
I apologize for my slowness. It simply took me longer than expected.
A couple of caveats:
(1) I usually try to avoid changing anyone’s code any more than necessary. I made several exceptions with your code. I have an aversion to the promiscuous use of IDs where classes would be very adequate. There are several good reasons to minimize the use of IDs, most of which have to do with issues of specificity. I changed many of your IDs to classes and made up some new ones.
(2) For the above reason and others, please do not attempt to substitute (copy and paste) any of this HTML or CSS into your code. It will break your code.
What did I try to demonstrate?
(1) ALL uses of positioning for page layout have been deleted. There remains one use of position:absolute in the menu which you properly applied.
(2) There are NO inappropriate appearances of <br> tags for spacers. The permitted use is in the quotation on the home page. I did leave a couple of empty <p> tag pairs by assuming that they are placeholders, not spacers.
(3) If a user has JavaScript disabled, the entire page will load and be visible. The nav buttons, which are still coded with JS, will not function. I ran out of time needed to provide non-JS fallback.
(4) The image on the first page was off-center to the right. I made the first page wider than the others (960px vs 600px) so the content now looks centered. I know that you did not need any responsiveness, but I added a teaser. The quotation will wrap and the image will shrink-to-fit until they reach a total width of 600px.
Other FYI:
(1) The page sections are CSS tables only because it was the easiest way to make the first page work as desired and there was nothing gained or lost by changing them to blocks, so they remained tables.
(2) The NAV menu has also been given a max-width of 960px. If you really want the nav menu to align to the left edge of a 1920+px window, delete or comment out the max-width assigned to the nav ul.
(3) The first page has been assigned a vertical scrollbar. This is to prevent the menu from “jumping” a little to the left when any of the other longer pages are selected.
Anna18-site-review.zip (413.7 KB)
3 Likes
Impressive work @ronpat!
If I may add my
For non javascript users, the menu links could also target the page’s ID names.
Like:
<nav> <!-- Navigation Inhalt definieren -->
<ul>
<li><a href="#homeA" onclick="homeA.style.display='table' ; boxSchopi.style.display='none' ; boxBuch.style.display='none' ; boxK1.style.display='none' ; boxK2.style.display='none' ; boxK3.style.display='none' ; boxLinks.style.display='none' ; window.scrollTo(0,0) ;">Home</a></li>
<li><a href="#boxSchopi" onclick="homeA.style.display='none' ; boxSchopi.style.display='table' ; boxBuch.style.display='none' ; boxK1.style.display='none' ; boxK2.style.display='none' ; boxK3.style.display='none' ; boxLinks.style.display='none' ; window.scrollTo(0,0) ;">Schopenhauer</a></li>
<li><a href="#boxBuch" onclick="homeA.style.display='none' ; boxSchopi.style.display='none' ; boxBuch.style.display='table' ; boxK1.style.display='none' ; boxK2.style.display='none' ; boxK3.style.display='none' ; boxLinks.style.display='none' ; window.scrollTo(0,0) ;">Das Buch</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Kunstgriffe</a>
<div class="dropdown-content">
<a href="#boxK1" onclick="homeA.style.display='none' ; boxSchopi.style.display='none' ; boxBuch.style.display='none' ; boxK1.style.display='table' ; boxK2.style.display='none' ; boxK3.style.display='none' ; boxLinks.style.display='none' ; window.scrollTo(0,0) ;">Kunstgriffe 1-12</a>
<a href="#boxK2" onclick="homeA.style.display='none' ; boxSchopi.style.display='none' ; boxBuch.style.display='none' ; boxK1.style.display='none' ; boxK2.style.display='table' ; boxK3.style.display='none' ; boxLinks.style.display='none' ; window.scrollTo(0,0) ;">Kunstgriffe 13-24</a>
<a href="#boxK3" onclick="homeA.style.display='none' ; boxSchopi.style.display='none' ; boxBuch.style.display='none' ; boxK1.style.display='none' ; boxK2.style.display='none' ; boxK3.style.display='table' ; boxLinks.style.display='none' ; window.scrollTo(0,0) ;">Kunstgriffe 25-38</a>
</div>
</li>
<li><a href="#boxLinks" onclick="homeA.style.display='none' ; boxSchopi.style.display='none' ; boxBuch.style.display='none' ; boxK1.style.display='none' ; boxK2.style.display='none' ; boxK3.style.display='none' ; boxLinks.style.display='table' ; window.scrollTo(0,0) ;">Links</a></li>
</ul>
</nav>
Nice that the menu follows the content and is not all left in a wider window.
2 Likes
Thanks, Erik_J. 
I thought that would work, but it doesn’t, or didn’t for me. The header portion (below the menu) is scrolled above the top of the viewport. I think it’s because the target is in a section even farther down and is sent to the top of the viewport by the anchor. I was not able to test another way of handling the menu successfully. I’m reasonably sure there is a “satisfactory workaround” - not perfect - but satisfactory.
2 Likes
Hi @Anna18,
The deadline is close. I think you should try the approach @ronpat gave in post #22.
If I took the role of a picky examiner of your original site, I might have these points:
Overall very high rating.
++ innovative page method
++ well composed site and page layout
++ well displayed content
++ well themed colors
++ helpful html comments
Design remarks:
-
- inconsistent menu position (the head and rest of page in center)
-
- use of
<br>tags instead of css margins (h3 top and page bottoms)
- use of
- use of target=“_blank” without notion
- dropdown items in div instead of list
- presentational
<b>and<i>and<br> - javascript dependent content display
- javascript dependent navigation
Code remarks:
- html page sections order unsorted (home page could be the first etc)
- poor html indentation
- css ruleblock order (commented chapters or follow the html)
- inconsistent css indentation and rule block first line
- inconsistent rule block declaration order
- float an AP in the same rule block
(I think all above is fixed in the code @ronpat uploaded.)
Good luck!
2 Likes
Yes, I noticed that it didn’t work with the #boxBuch link, but all other menu links worked. Despite the affected scroll position I think it’s a good thing to have the menu somewhat working without javascript.
I too am sure there is a “satisfactory workaround”. Pity the deadline is so close.
1 Like
First of all, today was first day in school after holidays, and i had the chance to look at some of the websites my classmates did - so i am now pretty sure my website is already pretty good - my friends now think i am a webdesign expert 
Now to the great work ronpat did…wow, thank you… i am speechless I compared the new code to my code the last 2 hours, and i can say i really learned a lot - it is basically like looking at the solution of a crossword puzzle.
Now i am not sure what to do, because there is an elephant in the room - it is the question “did you really do this by yourself?” Right now i can honestly say i did, the code is the result of countless hours of try and error. Now your code, ronpat, even to me screams something like “i have years of experience and know exactly what i am doing”. This could backfire, and i have to think about it how to handle this.
Now from the visual perspective, i realized that you (erik+ronpat) both prefer that the menu is more centered. The decision to position it on the left was not random, i looked at popular websites (youtube etc.) and noticed that lots of them start upper left with the menu, and on mobile in responsive design it is also this symbol in the upper left corner. But if i leave these things aside, i totally agree that the menu for this site looks better if it is centered.
What i actually did not like is that the links in the menu are underlined, i think it is obvious that these are links, so i fixed this by changing line 81 in the css (text-decoration:none).
I actually have a another question, will make a video, next post.
3 Likes
I am just curious about this tiny optical thing, because i worked on it 2 weeks ago and couldn´t do it: in my version of the menu there is no “active” tab - so that the user sees on what part of the page he is at the moment. Now i tried to do this by combining this code from w3school into my menu:
But i gave up because i only could do this in a way that the “normal” tabs changed the color, but not the tab that holds the dropdown menu. So i removed it.
Now your code @ronpat behaves exactly like this. So i am just wondering, is this the correct way to do it, and my expectation that the dropdown tab (“kunstgriffe”) should change color if clicked on one of the submenu items is not the right design decision?
And then there is a minor thing: that the home-link should be active from the first time i load the page (right now it changes to active only after clicking on it).
Oh only moderaters can upload a video - ok got it. i think it is not that important, i just wanted to try out nimbus - works great. And also free hosting up to 100mb, here is a link:
No, that is not expected when you arrive to a site’s landing page, it would be useful if you land on a sub page, but – the subpages can’t be bookmarked – your link fragments always land on the default page. (I.e. in your original site.)
That’s ok, the subpages all have a title in top that clearly indicates what tab you have clicked.
If you have time to correct the misuse of “<br> <br> <br>” instead of css top/bottom margins (or bottom padding) I think you are even better off.
If you click anywhere else on the current page again, does the menu button remain highlighted?
Then why not center it?
EDIT)
Or follow @ronpat, or give it some percentage left margin to separate from the left edge.
No, if i click on an external link, the menu button looses the highlight.
This was a good hint, because i now figured out how you did this, because you did it differently than what i saw in the w3school example. The highlighting will be triggered by line 79 in css:
nav li a:hoover, nav li a:focus (change background-color)
So if the element looses focus, the highlight disappears. I just removed it, and the effect disappears. I think thats better, because now it is consistent for the user. And this was an eye candy thing anyway.
2 Likes
@Erik_J
Haha, just rub it in Right now i don´t know how the positioning of the menu is done, i am aware that it is a little bit centered but not perfectly centered. I am still in school, i have to look at it this evening.
And yes, Erik_J, to get rid of all the <br> in my code instead of using ronpats version is an option. But it is actually hard to get away from the perfect code And i am still amazed that there is not one <br> in the whole html, and still all spacings are exactly as i wanted them. css is amazing
Please read the message #22 again. It explains how the left alignment of the menu is set and how to change it. I set the width of the menu bar to 960px (the same as the first page) and centered it. The list items are still floated to the left…
It really isn’t eye candy. It’s user feedback. Someone who is keyboard focused instead of a mouser relies on the :focus indication to be aware of the button to which he has tabbed.
Had you chosen to write a more common 7 page site instead of a single page site, the menu functions would have been peaches and cream easy and no JS would have been required. This site is a challenge for me because I am JS illiterate. It’s a good learning experience
Ok i take a deep look at #22 this evening.
Had you chosen to write a more common 7 page site instead of a single page site, the menu functions would have been peaches and cream easy and no JS would have been required. This site is a challenge for me because I am JS illiterate.
Haha, i had to look up the word “illiterate”, and i think you are fishing for compliments here And what you say is actually consistent with what my friend told me, who does web design as a hobby: He had no idea how to fix this, because he told me that nobody would do a site like this in real life with divs. So the task description was probably meant for a simpler site, and i am probably already overshooting the expectations from the teacher.
We will see how this will work out in the end for the grade, i will keep you updated
3 Likes
You could try this to replace all the <br> <br> <br>: (Don’t type in my comments )
#box3, #boxSchopi, #boxLinks, #boxBsp, #boxK1, #boxK2, #boxK3 {
top: 220px;
left: 0px;
right: 0px;
padding: 40px 0; /* shorthand for top&bottom and right&left = 40px 0 40px 0 (was padding-top:40px) */
position: absolute;
display: none;
scroll-behavior: none;
max-width: 600px;
margin: auto;
}
h3 {
font-family: "Prociono", sans-serif;
font-size: 17pt;
color: #1e0700;
line-height: 200%;
margin-top:40px; /* similar to the three <br> = break - new line - new line = 2em = 2x17pt ~ 40px */
}
And a shorthand for all those IDs would be a class.
.box {
top: 220px;
left: 0px;
right: 0px;
padding: 40px 0; /* shorthand for top&bottom and right&left = 40px 0 40px 0 (was padding-top:40px) */
position: absolute;
display: none;
scroll-behavior: none;
max-width: 600px;
margin: auto;
}
3 Likes
You mean add that class to those divs.
But that, in this particular case, would make more code in the html instead.