CSS Ideas

I know that Matt just gave some useful tips in his blog about screen resolutions. I thought that I would give you a couple that I used for our group project. The first issue that we had was trying to make rounded corners for our dive so the page didn't look so boxy. There are a number of ways that you can do this and we first started off by using 2 images that sat in the background.

The problem we had is that the images were bigger than we needed them to be and if we wanted to change the width of the div we had to change the picture. The solution to the problem was to create 4 tiny images of rounded corners and create a div for them. There are many websites that will generate the images for you such as RoundedCornr and Spiffy corners. I actually used RoundedCornr to generate pictures for me then used a simple code to create it. The code was almost the same for every image. It just depended on whether it was left or right.


The other problem that we were facing was the page showing up differently when viewing from different monitors. The way that I attempted to solve this problem was instead of just using the width element, I used a min-max property. I found the idea while searching on the internet from the website CSS Tricks. The idea is that your page "shrinks to 780px to accommodates users with 800×600 resolution, with no horizontal scroll and grows to 1260px to accommodates users with 1280×768 resolution and everything in between". The CSS is actually very simple too. The code just requires two lines in your CSS:


Of course I have not been able to try if this works out because right now I only have my laptop working. I will not know until class if this solves the problem.