on my last post i had the following unresolved problem;
- making on hover change images in css took a little bit of figuring out but in the end i have chosen to go with a method that hides the top image to reveal the hidden on on hover. this gives the required look but currently its quite difficult to use the buttons so i will need to find out why and if there is a way i can fix this.
- making the hover buttons each a separate div knocked them out of line so i had to line them up.
- my site looks bad bad bad on firefox or ie so i need to do something about that!
in order to stop this problem i have used sprites, basically one large image which moves position depending on variables set in the css. so far there are 2 sprites in use on my website these are on my top navigation and left and right navigation buttons. having it in these locations allows me to add details to my website that help give it a polished feel examples of this are; having the pages you are not currently on greyed out and not displaying the right and left arrow if there is not a previous or next page.
here are some of the problems i have had since then and my solutions.
- i wanted to have my current page number display as a blue. to achive this i took the code from my sprites where it shows the current state
#body_principles li#nav_principles a
the key part of this code i took was the body id. using the body id and giving each of my page links an id i was able to create the code to display the connected page number with the number page that is being displayed. however this has given me a large amount of code and was quite time consuming but now that it is done i can just copy and paste it where needed. the large number of pages present in my site also meant that i had to have several css styles doing the same thing but for different body id's so that it would not clash with my other sprites which use body id's. the code i ended up with looks like this#body_2 subpagenav #two { font-family: Verdana; font-size: 12; font-weight: bold; color: #0099cc;}
with the body id and link id changing where needed. - I wanted to add a scroll bar to my box but when i used overflow: scroll; it gave me a scroll bad on the bottom of the box which would be greyed out because it would not be in use. to solve this i used overflow-x and -y which meant i could turn off the bottom bar. this dose mean that i will probably need to change this for IE6 as its a css3 code.
- my glossary sits outside of the wrap which gave me lots of problems when trying to line it up, this was because i had the wrap center the page with auto margins. the effect of this was that when viewed of different resolutions (thanks duel monitor for letting me spot this). to solve this problem i had to change the way i centred my page. i came across this method by accident while looking for how to place things out side the wrap.
http://bluerobot.com/web/css/center2.html
from experimenting with the code before searching trying to fix it i identified that it was the auto margin that was the problem so when saw this centring method i realised i could use it to give my glossary precise positions regardless of resolution. i did this by applying the method to my wrap, then i applied the same to the glossary div and instead of using a negative margin to center it i used a positive one slightly over 1/2 the width of my wrap so that it would sit just to the right of it. one problem i have found with this is that when you use the scaling functions they main box and glossary text box are put out of line because they both positioned relatively i will try giving them fixed positioning to solve this but it is not a major issue. - an easy problem to solve but one that wasted lots of time was when i backed up my style sheet with a save as then didn't revert to the original after which meant any changes i made had no effect. to stop this happening again i always make sure that i am working on the right document.
