You really don't need the group picture on EVERY page...just the front one (home).
Because it takes up so much space, all of your menu links lead to anchor tags xxx#bottom at the bottom of each page. This is very distracting. Users (IMO) want to go to the top of a page and scroll down.
If you remove that image from your other pages, you will have more room to play with on every page and you won't need to link to the bottom of each page.
A minor point, your menu links all have a 1px right border #ccc. I would look into finding the selector (it exists but I don't want to spoil it for you) to remove that border from the right-most one on each menu / sub-menu. It's a little more visually appealing.
Othewrise, keep it up, you're much further along than I was at that age...of course, when I was that age...there was no internet.
The reason I was leaving the image on each page was for consistency(?). I thought that it was unappealing to have the menu bar link to the top of the page because when users were navigating in certain browsers they couldn't tell if the content changed.
Do You think it will look okay without the image? I was also worried that it would look bland. I am planning to make that a slideshow on the first page as well.
This website is actually for a competition and I'm looking for ways to try to make it more interactive/visually appealing, and useful. I placed first at the Regional Competition and last year I received fifth at states, but that was with a different website (tsa.windberschools.org).
If you want users to know the page has changed then you could put a different image on each page. The only reason you're having this problem is that it IS the same image.
Alternatively, perhaps look into making the image a slide show. It's a little bit harder but a great learning experience.
I am going to try to make that a slideshow. And I think I am going to try to take the picture off the rest of the pages. And then I will remove the #bottom element.
@WindberTSA, I agree with @Paulie_D, it's a clean design, but I'd ditch the anchors to the bottom of the pages on the links..I'd also ditch the underline on the links, and change the header tags to a different color, they're too similar to link colors and confusing on which is supposed to be a link and which is supposed to be a header
@Paulie_D, I will try to remove those 'p' tags and I think the footer will look nicer if i is smaller as well. That's a good idea.
@Chris, do you mean that I should change the places where I have quotes and things in blue text to a different color? And if I remove the underline, how will people know that they are links?
What I meant was that you should only remove the border from the LAST list item in any particular menu...not all of them...but what you have still works.
@WindberTSA, yes, I'd change the blue text for the headers to a different shade, since they're the same as links, it's hard to distinguish.
Removing the underline is a personal choice, my personal opinion would be to remove it and add the underline only on hover, but that's me..if you feel people won't know they're links without the underline, then leave them, it's fine either way.
@Paulie_D, I removed the border from 'nav li a' and it removed it from all of them.. I'm not sure how to accomplish what you meant by removing it from the last item..
On another note. To be honest, any time I have added a submenu I kept adjusting the menu bar to the left a few pixels to even it back out :x. I am not sure how I could incorporate a vertical menu bar into this current layout. I could have time to do it.
@chrisP, I get what you are saying. I think I can edit that in just CSS and it should be an easy adjustment. :) I will do that soon.
OH! and I tried to remove the 'p' elements on the footer. It turns out I must have them there to make the menu horizontal? when i tried to remove them it made the menu go vertical.. which is not good. So I do not know how to remove them wiihouut having a good format..
In the beginning when I was working on the menu I wanted to get rid of that last border but I didn't know how. I got that fixed successfully!
It seems like a really good idea to create a vertical menu bar, do you think it would matter if that menu covered up the image on the home page? I need to learn some better web development practices.. I always question my changes.
Vertical menu - from the example I gave the submenu will only be visible when required and users won't worry about it overlaying the image...in fact they will expect it.
As for this:
the footer is now going vertically
I'm not sure what that means but the code I gave should not affect it.
Footer-I think you were right, It must have been a float problem. I have it fixed now!
And that makes sense with the vertical menu, I am going to work on making one for across the pages.
I think I just have one more thing..
Sub-pages on the site that did not have much information, like http://windbertsa.com/tsa-history.html seem very boring.. and will be even more so once I remove that image at the top of the page..
Is that a common problem when working on websites?
Is there a way I should organize the content differently?
Or, maybe, should I just add more information consistently across pages?
Sub-pages on the site that did not have much information, like http://windbertsa.com/tsa-history.html seem very boring.. and will be even more so once I remove that image at the top of the page..
Just substitute in some other images....if you have them.
Currently, I am adding a google custom search to the site. I can't figure out where I should put it on the page. I would like to put it in the header where the menu is. I tried to put it above the menu, it seems slightly awkward though.
I also tried to position and size it using a div tag that had a set height/width and a float to the right, but it is still appearing to fill the whole header..
Hi everybody!
I am very new to this and I am looking to get feedback on the website I built for a club at my school.
The address is http://windbertsa.com
I would love to have all of your input as to how I can make the website better!
Thanks!
I think it's pretty good for a school project.
If I may, just a couple of things.
You really don't need the group picture on EVERY page...just the front one (home).
Because it takes up so much space, all of your menu links lead to anchor tags xxx#bottom at the bottom of each page. This is very distracting. Users (IMO) want to go to the top of a page and scroll down.
If you remove that image from your other pages, you will have more room to play with on every page and you won't need to link to the bottom of each page.
A minor point, your menu links all have a 1px right border #ccc. I would look into finding the selector (it exists but I don't want to spoil it for you) to remove that border from the right-most one on each menu / sub-menu. It's a little more visually appealing.
Othewrise, keep it up, you're much further along than I was at that age...of course, when I was that age...there was no internet.
First of all, Thanks for your advice!
The reason I was leaving the image on each page was for consistency(?). I thought that it was unappealing to have the menu bar link to the top of the page because when users were navigating in certain browsers they couldn't tell if the content changed.
Do You think it will look okay without the image? I was also worried that it would look bland. I am planning to make that a slideshow on the first page as well.
This website is actually for a competition and I'm looking for ways to try to make it more interactive/visually appealing, and useful. I placed first at the Regional Competition and last year I received fifth at states, but that was with a different website (tsa.windberschools.org).
Let me know if you have any other advice! :)
If you want users to know the page has changed then you could put a different image on each page. The only reason you're having this problem is that it IS the same image.
Alternatively, perhaps look into making the image a slide show. It's a little bit harder but a great learning experience.
I am going to try to make that a slideshow. And I think I am going to try to take the picture off the rest of the pages. And then I will remove the #bottom element.
What are you're thoughts on the footer?
Is the site easy to navigate?
I think the footer is fine although I might not wrap the links in a 'p' tag as it's adding a lot of bottom margin and so the footer is quiet large.
Navigation is fine other then the comments I've already made.
Hey, CCS-Tricks community...am I being too harsh...let's hear from you.!
@WindberTSA, I agree with @Paulie_D, it's a clean design, but I'd ditch the anchors to the bottom of the pages on the links..I'd also ditch the underline on the links, and change the header tags to a different color, they're too similar to link colors and confusing on which is supposed to be a link and which is supposed to be a header
@Paulie_D, I will try to remove those 'p' tags and I think the footer will look nicer if i is smaller as well. That's a good idea.
@Chris, do you mean that I should change the places where I have quotes and things in blue text to a different color? And if I remove the underline, how will people know that they are links?
@Paulie_D, I did already change the nav bar to reflect not having that 1px border. Do you approve now? :)
What I meant was that you should only remove the border from the LAST list item in any particular menu...not all of them...but what you have still works.
@WindberTSA, yes, I'd change the blue text for the headers to a different shade, since they're the same as links, it's hard to distinguish.
Removing the underline is a personal choice, my personal opinion would be to remove it and add the underline only on hover, but that's me..if you feel people won't know they're links without the underline, then leave them, it's fine either way.
If you have time, I would think about making your submenu a vertical menu rather than horizontal.
For instance, what would happen if you had to add another item to your WindorTSA submenu?
@Paulie_D, I removed the border from 'nav li a' and it removed it from all of them.. I'm not sure how to accomplish what you meant by removing it from the last item..
On another note. To be honest, any time I have added a submenu I kept adjusting the menu bar to the left a few pixels to even it back out :x. I am not sure how I could incorporate a vertical menu bar into this current layout. I could have time to do it.
@chrisP, I get what you are saying. I think I can edit that in just CSS and it should be an easy adjustment. :) I will do that soon.
OH! and I tried to remove the 'p' elements on the footer. It turns out I must have them there to make the menu horizontal? when i tried to remove them it made the menu go vertical.. which is not good. So I do not know how to remove them wiihouut having a good format..
Borders ---- try this:
If you are interested in a vertical submenu you could take a look at this crude example.
http://codepen.io/Paulie-D/pen/f0aad08b416a5a7e87914567a07770f9
For the p elements in the footer try {
You are awesome! ..lol.
In the beginning when I was working on the menu I wanted to get rid of that last border but I didn't know how. I got that fixed successfully!
It seems like a really good idea to create a vertical menu bar, do you think it would matter if that menu covered up the image on the home page? I need to learn some better web development practices.. I always question my changes.
And I am not sure what I did wrong, but the footer is now going vertically.. which is bad..
Link border - Glad I could help.
Vertical menu - from the example I gave the submenu will only be visible when required and users won't worry about it overlaying the image...in fact they will expect it.
As for this:
I'm not sure what that means but the code I gave should not affect it.
Have you removed a float property?
Footer-I think you were right, It must have been a float problem. I have it fixed now!
And that makes sense with the vertical menu, I am going to work on making one for across the pages.
I think I just have one more thing..
Sub-pages on the site that did not have much information, like http://windbertsa.com/tsa-history.html seem very boring.. and will be even more so once I remove that image at the top of the page..
Is that a common problem when working on websites?
Is there a way I should organize the content differently?
Or, maybe, should I just add more information consistently across pages?
Just substitute in some other images....if you have them.
I will look for pictures next. thanks!
Currently, I am adding a google custom search to the site. I can't figure out where I should put it on the page. I would like to put it in the header where the menu is. I tried to put it above the menu, it seems slightly awkward though.
I also tried to position and size it using a div tag that had a set height/width and a float to the right, but it is still appearing to fill the whole header..
http://windbertsa.com
If anyone else has any input for the site, I would love to hear it!