Week 05

In this week, we basically learned how to position things instead of the default way of top to bottom. Is very useful to make our aside or to put an image in the left of the web page as a logo. the "text-alignment" tag is also very useful, as it allowed me to put the tittle in the middle of the page instead of being on the standard left side. This week, I almost did not change the actual HTML file, since the CSS positioning relies mostly on the style sheet.

here is some of the new code I used in the style sheet to improve the web page:


#cabeca img    { width: 194.1px;
                          height: 140.1px;
                          float: left;}

(...)

#cabeca h1     { color: #004C67 ;
                         font-family: "Comic", cursive, sans;
                         text-align: center;}
(...)

#rodape1        { background-color: #A7E8FF ;
                          color : #004C67 ;
                          margin : auto ;
                          margin-top: 20px;
                          border : 2px solid #004C67 ;
                          border-radius: 10px;
                          width : 97.25%%;
                          padding : 10px ;
                          font-family: "Comic", cursive, sans;
                          float: left;}



I forgot to mention in last week's post, that I am using some strange id's for the HTML tags, like "cabeca", "rodape", or "lado". These are Portuguese words, because I find a little hard to come up with a good id for <header> besides "header" or "heading", so I tried to translate it into Portuguese, my main language.

This is the translation:
Cabeça = head
Navegação = navigation
Secção = section
Rodapé = footer
Lado = side
I hope there is no problem with these id's.

The aside was very troublesome. In the beginning, I set the width of the Contacts box to 97.5% to match the other boxes in the right end of the page, and I put: "float: right;" to make the box go right. When I tested it on my Opera browser, everything was fine, as shown in the picture, until I tested it in my friend's browser (Google chrome). In his computer, the browser completely ignored the "float: right" tag. I took some hours to discover that all browsers, except Opera, will ignore the float: when we define a specific width. I just had to delete the width in the contacts box to make it work in all other browsers, including mobile phones.



#lado        { background-color: #A7E8FF ;
                   color : #004C67 ;
                   margin-top: 20px;
                   border : 2px solid #004C67 ;
                   border-radius: 10px;
                   padding : 10px ;
                   /* width: 97.5%; */
                   font-family: "Comic", cursive, sans;
                   float: right;}



The HTML file has passed with no Errors in the validator.


http://1202236.studentplus.abertay.ac.uk/Week05/Movicel2.html