Webdesign, chapter six: CSS media query

I think I have a new pet peeve. There are way too many designers who put specific dimensions on their websites/blogs/etc. Even the default blogger theme has a set width in pixels. Most designs on the CSS Zen Garden have a width in pixels. Now obviously they want their stuff to look good, and I have to respect that. However, I don’t really think it looks good when viewed on a monitor that isn’t the specific single one that they used to make the design. You can’t even make your design for the “most popular” monitor in use today since there are so many different sizes and even aspect ratios that it just doesn’t make sense. Yet still, A LOT, of websites use dimensions in pixels rather than percentages.

Now that I’m done with my rant…. We can’t really just make our content width and sidebar width use percentages instead of pixels and be happy with it. In the best case we will have a few users that will see a scrollbar on the navigation while not having very much room to see the content, in the worst case our site isn’t usable at all for some people. Also when someone wants to print out our page because of the excellent content we have, they’re probably not interested in seeing what links you have on the left there.

With that I give you CSS media types (not usable in Internet Explorer until version 9 comes out).

You can define CSS media types in 3 different ways (seems like anything in CSS has 3 different ways of doing it):
When loading a separate CSS file as we have been doing it:
<link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen”>,
The @media rule:
@media screen { p {color: blue;}}
The @import rule:
@import url(“style.css”) screen;

Now obviously we’re making a new style sheet for the print media type with dark text on white background, in case we’re not already having that as our standard style sheet.
But, and even more importantly, now we can use CSS 3 media queries to see how wide the user’s screen is, and, if necessary, put the navigation below the content:
In our print style sheet we change the three lines below:
div.sidebar-left {display: none;}
body {color: #000; background-color: #fff; font-size: 100%}
h1 {text-align: center; margin: 0;}

we also took out the div.main code since we only have the 2 columns and if we don’t give it any style information it will just inherit the styles from the body which is what we want right now. (note I actually changed the sidebar class to sidebar-left !)

Now we just have to change the style sheet for the screen a bit by putting in a few media queries:
For now I just appended the following to my style sheet:
@media screen and (max-width: 600px) {
div.main {position: fixed; top: 0%; left: 0%; width: 100%; height: auto;}
div.sidebar-left {position: static; width: 100%;}
}

The whole thing is visible here. It’s quite interesting to see what happens when you resize the window (changing width to less than 600 pixels).

Now as i said before, the Internet Explorer can not handle media queries and neither can older browsers. The first part of that last sentence is important, older browsers are obviously less and less of a problem as we go forward, all of the talk about having your browser up to date so you don’t get hacked and the media attention it has received lately has obviously helped that situation along a bit. Either way for now we have a style sheet that includes the styles that we want and we just hope that everyone using a browser that can’t handle media queries has at least 601 pixel wide monitors.

Webdesign, chapter five: PHP part one: replacing navigation frames

This post will just very briefly go over a few very basic functions of PHP, mainly just those we need to have a navigation “frame” on the left without having to put it into every single website we write.

PHP originally stood for Personal Home Page (tools) and is a scripting language (programming language) that i have not seen used anywhere but on websites. It is possible to use PHP on the command line but there are languages better suited for pretty much anything you do that is not web related.

To use PHP you need to have a web server (or web hosting) that can interpret php into html. Luckily nearly all of the web hosters today do that, and you can configure the usual web servers to work with php as well (I’m assuming that there are web servers that can’t do php, but I don’t think they would be very easy to find).

We only really need one line of php to put the navigation into our website, and thus one added line of php into all of our websites to put a navigation into all of them this way.
To add php to your website you need give your file the extension php instead of html and then you have to put your php code into tags like this: <?php <insert random php code here ?>.
The code we need to add to our website is include “<filename>”;.

We’re just going to throw the <?php include “navigation.html”; ?> into the left sidebar of our website and we already have a navigation frame …. given that we actually have a file called navigation.html in the same directory as our website.

The navigation file we’re including looks something like this:

<div class=”sidebar-right”>
<h1>Navigation</h1>
<ul>
<li><a href=”http://xyious.blogspot.com”>Blog home</a></li>
<li><a href=”http://xyious.blogspot.com/2010/08/webdesign-intro.html”>Webdesign Post 1</a></li>
<li><a href=”http://xyious.blogspot.com/2010/08/webdesign-chapter-two-css.html”>Webdesign Post 2</a></li>
<li><a href=”http://xyious.blogspot.com/2010/08/webdesign-chapter-three-css-syntax.html”>Webdesign Post 3</a></li>
<li><a href=”http://xyious.blogspot.com/2010/08/webdesign-chapter-four-css-part-three.html”>Webdesign Post 4</a></li>
<li><a href=”http://xyious.com”>My Website</a></li>
</ul>
</div>

I have changed the CSS a tiny bit to make the colors a bit more friendly and reduce the gap between navigation and content to .5%.

The html code (between the body tags) looks like this (viewable here):
<?php
include “navigation.html”;
?>
<div class=”main”>
<h1>Hi There !</h1>
<p>some text</p>
</div>

And now you know one way of putting the navigation bar into all of your websites…. There are easier and harder ways to do it, some of which i might actually show you.

Webdesign, chapter four: CSS part three: replacing navigation frames

Everyone wants a navigation frame on the left, but everyone knows that frames have been outlawed…. or frowned upon anyway. Now you could use inline frames, which have not been obsoleted yet, but i think for the navigation of a website CSS (and a bit of php) works better.

Replacing the frames is pretty simple, but it would require us to put the navigation into every single page of the website…. and i will show you how ! I will later show you how to make it so you have a separate file for your navigation, just like you would when using frames.
For now, we just use a bit of CSS to make things appear where we want it to, which is navigation on the left and the main content on the right.

CSS has a few different ways of defining position: absolute, fixed, relative, static, and inherit. Inherit just inherits the position from the parent element. Static would place the element where the browser would ordinarily put it, in the flow of the website. Relative specifies where the element would be relative to the parent (you can move it to the left, right, up, down, relative to the parent element). Fixed positioned elements will stay where you put them, even if the website gets scrolled, even if an element would be covered by scrolling, the fixed element will stay right where you want it to be. Absolute position would put an element at a defined position relative to the first element that has a position other than static, if there aren’t any, the html tag is the one that will be picked.

So with that we’re obviously going to separate our website into 2 different areas with fixed positioning. The left one will be 15% wide and the main one will be 84% wide, with 1% left as a separator.

We’re going to use an external style sheet for that which will look like this (for now (saved in post4.css)):
body {color: #08f; background: #fff; font-size: 100%}
h1 {text-align: center; margin: 0;}
div.sidebar-right {position: fixed; top: 0; left: 0; width: 15%; height: 100%; background-color: #00b;}
div.main {position: fixed; top: 0%; left: 16%; width: 84%; height: 100%; background-color: #000;}

and the html for the page looks like this (viewable here):
<head>
<title>Webdesign: chapter four</title>
<link rel=”stylesheet” type=”text/css” href=”post4.css” />
</head>
<html>
<body>
<div class=”sidebar-right”>
<h1>Navigation</h1>
<p>link to something</p></div>
<div class=”main”>
<h1>Hi There !</h1>
<p>some text</p>
</div>
</body>
</html>

obviously the colors aren’t all that great yet, but it’s reasonably good for demonstration purposes. The body itself has a background color of fff (white), which is then covered by 00b (reasonably dark blue) on the left and 000 (black) on the right, leaving a 1% separator between the navigation and the main content, which is not covered and thus white.

Webdesign, chapter three: CSS syntax

This is going to be a very short post because all I’m saying here I should have said in the last one.

In the last post I have just briefly mentioned how to put CSS into an html document. I failed to mention what it is we’re actually doing. It is all pretty simple and the syntax is the same in all three forms of integrating it into an html document. In the previous post I had two examples:
<body style=”color: #f00;”>
and:
p {color: #00F;}.

The only difference here is that in the first option we put the CSS code inside the html tag itself and thus we obviously don’t have to specify which tag the CSS code applies to.

The second one is how it usually looks: We have a Selector and a declaration of property and value. Here we’re giving the property color (for text foreground color) the value #00F, which is blue. The Selector can be either a tag, a class, or an ID. If we’re writing code specific to one html tag we just put the exact tag into the CSS code, without the angle brackets, and define what we want to change. If we write code for an ID we’re changing one specific tag inside the html document, for example:
#uniqueelement {color: #F00;}
defines a specific element that would look something like this in html:
<p ID=”uniqueelement”>some red text</p>.

If we were to put two html tags into the same document with the same ID, the browser should only apply the CSS to the first of them.

Classes are more useful in my opinion, in the CSS code you define a class by putting a dot before the name of the class and then just add your declarations:

.italic {font-style:italic;}. Then you add that class to the tags that you want to be printed italic:
<p class=”italic”>This part should be italic</p>. You can even use multiple classes inside the same html tag.

So with that you should be able to write your own basic CSS code and get all the style information out of the html tags. enjoy.

ps. I also think it’s weird that I capitalize CSS but not html, but I think HTML looks weird.

Webdesign, chapter two: CSS

This is just going to be a short introduction to CSS, it will only show a fraction of the things that you can do with CSS. This post is just meant to introduce how to use CSS and how to replace things that were formerly done with pure html with CSS.

I have decided to just focus on html5 and CSS3 since both of those are already usable even though they’re still in development. That obviously changes the doctype of the previous post to the much easier <!doctype html>. we’re also going to throw in a <meta charset=”UTF-8″> to define which character set we’re using. Now we’re going to have to save all of our files in utf8 which is never a bad idea (unless, of course, if you’re speaking a language that uses an alphabet not covered in utf8, in which case i’ll leave it up to you to find the right charset to use (all “western” languages use only characters that are included in utf8 (English, German, French, Italian, etc.), Chinese, Japanese, Korean, Farsi, Arabic, etc. are not included)).

Now with all of that in mind our previous html code changes to this (viewable here):
<!DOCTYPE html>
<meta charset=”UTF-8″>
<html>
<head>
<title>My First Website</title>
</head>
<body>
<p>This is my first website !</p>
</body>
</html>>

Back to the CSS at last….
There are three different locations inside an html document where you can put your CSS code:
in a seperate file,
inside the <head> tag,
inside the html tag of the content you’re trying to beautify.
If you want to put your CSS into a seperate file (which is strongly recommended, at least for things that you’re using a lot), you have to link to that file inside the <head> tag. Just insert a tag into the <head> like this: <link href=”./style.css” type=”text/css” rel=”stylesheet”/>. That assumes that you have a file named style.css in the same folder as your html file.
You can put all of the CSS code for the current document inside the <head> tag itself as well. For that you just need to add a new tag like this: <style type=”text/css”>, add your CSS code in there just like you would put it into a different file, for example: body {background-color: #000000; color: #0000FF} and close the tag with </style>.
The third option is to put all of the CSS inside each of the tags that you’re changing, like so <body style=”color: #ff0000;”>.
If you now add both of the latter CSS statements to your website the color of the text will be red (ff0000), unless you change it to a different color inside a deeper tag. That is because the code inside the html tag is closer to the content than the code in the head tag, which in turn would be closer to the content than an external stylesheet, and thus would overwrite the external stylesheet should there be anything that is defined contradictingly (for some reason that’s not a word) in both.
so with that we have our new website (viewable here):
<!DOCTYPE html>
<meta charset=”UTF-8″>
<html>
<head>
<style type=”text/css”>
p {color: #00F;}
</style>
<title>My First Website</title>
</head>
<body style=”color: #f00;”>
<p>This is my first website !</p>
</body>
</html>

Webdesign (Introduction)

When I made my first blog I have always wanted to actually teach people how to do stuff. I had assumed that i would educate people about the joys of programming and why it feels good when you work all through the night (or day) and finally get a “build complete, 0 errors, 0 warnings”.

However, lately I have ventured into the field of Webdesign, not just because my own site looks horrible, but because lots of sites don’t look all that great, even though many of them are professionally made websites that most probably cost quite a bit of money to make. Also, there is so much you can do that most people don’t, and then there are so many people who get a website template, or even a content management system (or a blog) and then can’t change even the tiniest things because the whole thing is way too complicated for the uninitiated.

So for the duration of this series i will be focusing on HTML (very briefly, because you don’t actually need to know much about html these days), CSS (this will be the main focus of the series since this part is doing the actual webdesign), JavaScript (very, very late in the series since you don’t need it for even dynamic websites (by the usual definition anyway, in which the dynamic part is the server sending a website depending on who’s visiting, what information was sent, etc.), but mostly for some effects), and PHP (the PHP part will mostly be used to make things easier for now, later i might get into the programming of dynamic features of websites and how to show every user a different website if you so chose).

I will probably also make some short posts about how to simplify things with CSS, or how to replace old, outdated html stuff with CSS.

Now, this is the first post of the series:
What is HTML ? HTML stands for HyperText Markup Language and was originally made for publishing websites. That link will tell you much more than I would ever be willing to write, or even read, about HTML. What HTML was not made for was looking good. HTML is made for structuring of the document you want to publish and, before CSS was made, was used to make things look a certain way. I still use HTML to make my own website look good, but I fail, and it’s mostly because I don’t update it much. HTML should be used to declaring parts of text, images, other content; it should not be used to declare how said content is supposed to look. With that i give you a very simple website that we will start with (same exact website can be viewed here):

<!DOCTYPE html PUBLIC
\”-//W3C//DTD XHTML 1.0 Strict//EN\”
\”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\”>
<html>
<head>
<title>My First Website</title>
</head>
<body>
<p>This is my first website !</p>
</body>
</html>

What it all means:
In HTML we have tags that define content, the tags are always surrounded by angle brackets.
The first line defines the Document Type. That line just tells your browser how to interpret the information it receives. The document type declaration can actually be left out, but I kinda want to do things the way they\’re supposed to be done, which is why i picked one of the strictest document type declarations.
Then we have the <html> tags that surround the whole document, after which we declare the head of the document which contains information such as the title (as shown), there could be css in there, meta information (maybe I’ll get into that later), javascript, etc.
The title just tells the browser what the title of the website is, it appears in the browsers title bar.
Then we have the <body> tags surrounding (drumroll, wait for it) the body of the document. Many people still put information about the text color, background color and various other things into this tag, but doing it with CSS is preferred.
After that we just have <p> for paragraph and then the actual text that we’re trying to show.

Global Companies (that produce stuff)

Ok, so I already have a problem with global companies selling the same exact thing in 2 countries for 2 different prices (like mp3s, software, games that all are sold by download and thus cost the one selling them exactly the same no matter if the buyer is in the US or Germany or southeast mongolia). But, and even more annoyingly, I hate that companies that sell things in more than one country are not selling the same things in both countries.

I’m mostly talking about companies like Pepsi, Coke, McDonald’s, etc.
Why can a company like pepsi not sell the same things in Germany that they sell in america. They’re selling Pepsi here and i’m sure it wouldn’t be all that hard to produce things the same way here as in America. I really like Cherry Pepsi and they just don’t even sell it here for some reason even though coke makes a lot of money with Cherry Coke. Now I don’t even wanna start about dr pepper and Doritos and all the other stuff that I loved while I was in america. I guess there is just no one out there that travels all over the world wondering how it’s possible to buy Pepsi in pretty much any country, but not Cherry Pepsi.

Also, how does cherry coke not taste the same in germany as it does in the UK ? And on the same note, how does malasyan Pepsi taste like Coke ?