Feanor

You know Opera 9.5 has been relased. It has got a tool named "Dragonfly" in "tools - advanced - developer tools". What is it? For the other geeks out there it is an obvious redo of Firebug. For my other readers, it is a tool for "inspecting" the structure of the webpage you have loaded in Opera. What does it mean? Lets say you want to change the color of your blog title. You open Dragonfly, click on the title and it displays what line of code in the page corresponds to the "object" title, plus the CSS properties of that object. It shows you the hierarchy relations of the object and other objects in the page (it is the DOM structure) and does the same for its CSS properties. Once you have got these information you can edit your "user.css" file and change (almost) anything in your blog.

Dragonfly can be used to debug webpages at a more complex level but people who know what it means don't need explainations

Anyway, everybody ask me if you need help.

When you want to add a file to a blog post (out of your albums) the editor asks you to either give the remote URL of the image or upload it on MyOpera and it goes in the "blog" directory. You can select left, center or right alignment.

Problem:
When you select "center" or you don't select any alignment, the image probably stays its original size, with the limit of 100% of the post area. When left or right are selected the image is displayed RESIZED to accomodate it at 48% of the blog post area, regardless what the image actual size is. See the CSS:

.imgleft img {
clear:left;
float:left;
margin:4px 15px 8px 0pt;
max-width:48%;
}

In the previous post the image I uploaded is 320x240px and it is actually displayed in 288x216px (excluding the 1px border and the 4px padding I've added to every image).
This solution allows the editor to handle any kind of picture you may upload but has got 2 major drawbacks:
1. The image is ALWAYS displayed resized, besides the improbable event that 48% of the post area is exaclty the original image size.
2. Your readers download the image in the original size even if it is displayed much smaller. That is waste of space on your file hosting area and waste of bandwith for your readers. That is expecially heavy for vertical images.

My advice is to resize the images you want to align left or right at least to 320px of width before you upload to MyOpera. Pictures that go in your albums are already displayed with a thubnail, so that is done automatically by the editor.

---------------------------------------------

Quando volete aggiungere una immagine ad un post su MyOpera (a parte il caso in cui la aggiungiate ad un photoalbum) l'editor vi chiede la URL oppure vi fa fare upload del file dentro la directory Blog. A questo punto potete selezionare l'allineamento sinistro, centrato o destro.

Problema:
Se selezionate centrato o non selezionate l'allineamento, l'immagine rimane della dimensione originaria fino al limite del 100% della dimensione dell'area del post. Se selezionate invece sinistro o destro l'immagine viene ridimensionata via CSS (vedi sopra) in modo che appaia al massimo il 48% della dimensione dell'area del post.
Questo ha due inconvenienti fondamentali:
1. L'immagine viene SEMPRE ridimensionata.
2. Il lettore del vostro blog dovrà scaricare l'immagine nella dimensione originaria anche se poi la vede effettivamente più piccola. Questo implica spreco di spazio sul vostro spazio di hosting di MyOpera e spreco di banda per i vostri lettori.

Il mio consiglio è di ridimensionare tutte le immagini che volete allineare almeno a 320px, tranne quelle che inserite nei photoalbum perché in quel caso l'editor crea dei thumbnail automaticamente.

I've found a page layout I made some time ago. Maybe somebody needs a template to use or to study in oder to see how a page without tables works. The page adapts to the client window width till a max and min limit. It includes also a drop down menu with multiple levels. Honestly I don't remember why I wrote the page. It is not rocket science, just a leftover but I hope somebody find it useful.
Here we are:
See it working:
http://files.myopera.com/LorenzoCelsi/files/demo/home-fluid.html
Download:
http://files.myopera.com/LorenzoCelsi/files/demo/layout.zip

Here is a sample of how to center a DIV in a Web page. Remember in case you want to add CSS properties for any IE versions but IE7, you change:

Ecco un esempio di come centrare un DIV in una pagina Web. Ricordatevi nel caso vogliate aggiungere proprietà CSS per qualsiasi versione di IE tranne IE7 di cambiare:

<!--[if IE]>

with

<!--[if lt IE 7]>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
<!--
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#centeredbox {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 320px;
height: 240px;
margin: auto;
border: 1px solid red;
}
-->
</style>
<!--[if IE]>
<style type="text/css">
#centeredbox {
top: 50%;
left: 50%;
margin-left: -160px;
margin-top: -120px;
}
</style>
<![endif]-->
</head>
<body>
<div id="centeredbox">Ciao</div>
</body>
</html>