Week 5 – XHTML and CSS

Alright, this week I am more familiar with PHP and how to build access to the database. For those interested, click here. A nice article about using mySql and PHP for beginners.

So, what I am able to do right now is access my database, create queries and retrieve information from it then display.

Following my schedule, I should normally have defined my objectives which are:

• Set up Db containing my recipes information
• Build an appropriate layouts for my web site which should be fairly simple
• Set up the different PHP and HTLM files

The requirements are:

• Install phpMyAdmin on my web host account
• Create the table of recipes
• Secure the Db for the access (password / login)
• Certainly use 2 columns layout for the web site design such as left hand side for the navigation and right hand side for the container. However, I think 1 column should be enough (I can put the navigation on the top, just down the banner). For that, I will use different embedded “div”. For instance,

<div id=”banner”>Here I will create a banner</div>

<div id=”navigation”>Here I will create the menu for the navigation</div>

<div id=”container”><p class=”centered”>Here I will display the content</p></div>

<div id=”footer”>Here the footer</div>

Of course, this is a non-exhaustive list for the objectives and requirements. They may vary during the next following weeks. I can only think about that for the moment

Now, concerning the lecture and tutorial for this week, it was about xhtml and css. Basically, we had to do some CSS exercises. I think I get the idea of how CSS works (how to call an element by class, id and so on)

For example, from my previous “div”, if I want to put a “margin auto auto” (auto size the margin of an element) to the element named “container”, I will have to use that syntax:

#container {

margin : auto auto;

}

‘#’ is used to say “the element with the id container“

Now, if my element is a class, I will have to use the dot notation such as

.centered {

text-align : center;

}

Also, I think it’s possible to declare the previous example like that

p .centered {…}

which will mean, for all the “p” (paragraph) from the class “centered” do that. The structure of your CSS file should be consistent. So, each line inside the curved-brackets should end with “;” except the last line in it. Comments are put between “/* This is a comment */“. Actually, it’s similar as C/C++ or Java.

Finally, remember that the CSS is sequentially read which means that if you have 2 similar lines, the last one will be take in count and not the first one. So,

This one will be skipped

.centered {

text-align: center;

}

This one will be the last one taken in count and your text will be aligned to the left not really what you want ?

.centered {

text-align: left;

}

So, be careful when you are writing your CSS.

Also, I’ve discovered that your CSS file was differently interpreted by Firefox, IE, Opera and so on. That sucks !!!!! I was doing my other assignment when I tested my project on firefox and IE. Firefox display my image map correctly whereas IE just f….. up my CSS >:#

So, I googled and guess what I’ve found, a page talking about “HACKS”. Curious, I had a look. What a HACK is ? Typically, it’s a code you insert into your CSS file in order to trick web browsers, awesome ! Put it around, you can insert a CSS/html code that will be only “recognized” by IE or Firefox !!!!

Let show you. My problem was I couldn’t display 2 pictures properly on IE (Remember the image map ? ).

Here the pictures one from Firefox and IE

The former (firefox) displays the image map correctly, one under another one whereas the latter (IE) displays them from left to right ! As you can see, that’s not really nice. Therefore, I found this hack code

#m0 {float:right;} This line put a float:right for the element (id=”m0″). For those who want to know what float is Click here

html>body #m0 {float:none;} That one will only be understood by the others web browsers and not IE, this is the hack

html>body (which means parents and container of the element with the id=”m0″)

With that, my image map works fine now !

However, this solution does not work with IE7. Indeed, there is an issue with IE7 (oh my god, again), the pictures are overlapping each other and when I reduce the frame only the menu is moving,

SO, I’ve found a solution to solve my problem. Instead of using a hack I used that:

<div style=”clear:both;”></div>. It works fine. Basically, I inserted this line after the picture “menu”

To know more about CSS, Hack, you can check here and there

By the way, there is also some controversy with using hacks, read those articles

http://articles.techrepublic.com.com/5100-10878_11-5452786.html

http://css-discuss.incutio.com/?page=ToHackOrNotToHack

and this last link quite interesting because you can read about the rules that the CSS creator stated

http://24ways.org/2005/avoiding-css-hacks-for-internet-explorer

Okay, that’s it for this week ! Oh and if some of you wanna see my other project, feel free to ask me !

(the site hosted by uts is protected with login/pass)

Also, I am inviting you to read that book about CSS hack

Reference:

Lowery J. W., CSS Hacks & Filters making cascading style sheets work. 2005, Wiley Publishing, Inc., Indianapolis, Indiana.