CSS Modification #wrapper

Apart from the modifications in the #header and #footer tags, I did modify the #wrapper and and a few details to the .body class. I don’t have more time at the moment to make all the changes I would like, but I will eventually implement them after the submission of this assignment. Most 2-column based themes I tried had a fixed width of 770 pixels, which on the one hand they fit most monitors with no need to scroll, but on the other hand doesn’t give enough space for the blogs. I changed the size of the #wrapper to 800 pixels. I continued my research on css properties in order to be able to make changes. The border-radius property was set to 12 pixels. After trying different values I kept the 20 pixels for every corner. I also had to change the browser-specific properties with the prefixes -moz-, -khtml- and -webkit-.

…according to wikpedia
-moz- is used by Firefox as their dedicated prefix. Firefox uses the Gecko layout engine to render webpages. Gecko is free and open sourse.

-khtml- is another layout engine developed by the KDE project. The khtml engine is used by the file manager/viewer, web browser Konqueror. KDE is an international free software community.

-webkit- is a forked version of the khtml layout engine used by Safari and Chrome among other browsers.

Obviously, after the research I understood why browsers display elements differently. Ever since I try to make my changes universal/compatible with most engines.
I also did a minor change on the #page at the padding property. The bottom value was not the same with top. I set the value to 20 pixels so there is the feeling that the wrapper is floating in the middle of the page.

Also worth mentioning is the changes in the links and fonts of the body. When you hover a link, instead of the classic underline you get a link in colour (#1c9bdc). I will work more on this as I don’t really want this throughout the body.

Concerning the fonts, I changed the order so Helvetica and the look-alike Arial are before Georgia.

I am all about perfection and aesthetics and I can tell that it slows me down. I decided that I will not make other CSS changes till I submit. The ones I have done so far are giving enough work to do in order to explain why.

Click here for the complete style.css file

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s