CSS - absolute positioning
For a long time I avoided using positioning in CSS. I think the main reason was that I didn´t really understand it. Absolute positioning was the worst. In stead I used floating alot and it worked most of the time even though it sometimes gave me a lot of headaches.
But as times went by I started to use positioning more and more and I discovered that it is the perfect tool to “positioning” elements on a web-page.
There is one very important rule that one has to remember when using absolute positioning. The parent element has to be positioned relative or absolute. Let me explain with the words of Andy Clarke.
An absolutely positioned element is positioned first to its closest POSITIONED ancestor. If there is no positioned anchestor, the element is positioned to the root element <html>.
Andy Clarke - transcending CSS
To give you an example of how to use absolute positioning i want to show you how i positioned the elements in the footer of this pages.
The xhtml code looks like this
<div id="footer"> <ul id="icons"> <li><a href="#"><img src="images/facebook-icon.png" alt="bippi on facebook" /></a></li> <li><a href="#"><img src="images/flickr-icon.png" alt="bippi on flickr" /></a></li> <li><a href="#"><img src="images/rss-icon.png" alt="rss feed" /></a></li> </ul> <span id="icon-text"></span> <span id="copyright">Copyright © 2008 bippi</span> </div>
There is nothing complicated here. We have one <div> and inside that <div> there is a one un-orded list and two spans.
The CSS code looks like this
#footer
{
position:relative;
width:951px;
height:48px;
}
#footer ul li
{
display:inline;
}
#icons
{
position:absolute;
left:20px;
top:10px;
}
#icon-text
{
position:absolute;
left:172px;
top:20px;
}
#copyright
{
position:absolute;
top:20px;
right:20px;
}
The main thing here is that the footer div is given a relative position and then we are able to use “top”, “right” and “left” to correctly position the three elements.
Flash Map
I was going through my stuff and I found a Flash-Map that i did for my second semester exam project in ATS. I was in a group with Dagný and Katrine and we did a re branding job for Clip-Rens which is a dry cleaning company here in Denmark. We wrote a very fine report and made a nice prototype web page also. The manager for Clip Rens at that time was very helpful and enthusiastic about our project.
After we finished our exam we had a meeting with the manager and he wanted us to finish the web site so the company could use it. We told him that we were ready to do it for very small amount of money because we had to spend our summer holiday on it. He said he would think about it but to make a long story short then it ended up that we got a letter from the Clip-Rens lawyer saying that we should hand in everything that we had done regarding the website. They threaten us to go to court and what can a poor student do when a big company threatens to drag you to court. We gracefully handed in our website with a letter which reminded the company that there were a certain copyright laws in the country. They never did use the stuff that we made.
Well that was the story about Clip-Rens.
I was very proud of the Flash that I made for this project and i´m going to show it to you here on the website. Who knows maybe i´ll get another law-suit.
Nees-Schelde
Client: Nees-Schelde - freelance for 72ppi
Service: Wordpress integration - Theme (XHTML and CSS)
Status: Delivered - http://nees-schelde.dk
hopskud
Client: DHF (Dansk Håndboldl Forbund) - freelance for 72ppi
Service: Making cascading stylesheet (CSS) based on Illustrator files
Status: Delivered www.hopskud.dk
New web page
Finally I´ve manage to design and program a new web page for my self. The purpouse of this site is to introduce me as a multimedia designer and present the skills that I have in that field.
The site is in three languages, English, Icelandic and Danish but blog and portfolio will only be in English.
In the portfolio part I will present the projects that i´ve done so far and even projects that i´m working on. In the blog section i will write down my thoughts and ideas about what I´m dealing with in the heat of the day. It can be about Flex, Flash, XHTML, CSS or what ever related to multimedia.
Fyrir ykkur íslendingana sem hafið komið á þessa síðu til að fylgjast með okkur fjölskyldunni þá vil ég láta ykkur vita að ég mun fljótlega setja upp fjölskyldusíðu þar sem þið getið áfram fylgst með okkar skemmtilega lífi hér í Danmörku. Ég mun láta vita þegar þar að kemur
Flex Image Gallery
This is my final project in multimedia design and communication.
This is a administration system for online image gallery. The system is build with Adobe Flex, PHP and MySql.
For this project i got 12 which is the highest grade given in Denmark.
I hope I will be able to put a demo online soon.
Superstar
Client: NFFA
Service: Video Intro for a scene in school play. Made in Adobe After Effects
Status: Delivered.
ÍSFÁN
Client: ÍSFÁN (Icelanders community in Aarhus Denmark)
Service: Visual design, XHTML, CSS, Flash, Cutenews, PHP
Status: Delivered (www.isfan.dk)
EK - Ökukennsla
Client: EK- Ökukennsla (driving instructors in Iceland)
Service: Visual design, logo, XHTML, CSS, Flash, Wordpress integration
Status: Delivered (www.okukennsla.is)
Suðræn Sveifla
Client: Akranes musical school orchestra:
Service: Graphical design
Status: delivered
