Placera objekt vertikalt i block-element

Så här kan man göra för att ange vertikal position på text och bild inuti ett block-element. Man lägger två div runt om varandra och får dem att uppföra sig som tabell respektive tabell-cell.


HTML och CSS

<style type="text/css">
#outer{
width:300px;
height:300px;
border:1px solid #ccc;
padding:5px;
display: table;
position: static;
}
#inner{
display: table-cell;
vertical-align: middle;
position: static;
text-align:center;}
</style>
<div id="outer">
<div id="inner">
<img src="http://www.codeodyssey.se/upload/resource/blog/ufo_light.jpg" alt="ufo light">
</div>
</div>

Att få innehåll att placera sig vertikalt enligt box-modellen har alltid varit lite krångligt. Läs mer på Jakpsatweb.cz där jag hittade lösningen. Finns även länkar till fler som försökt.

By Jesper Lind

Höstens CSS Reboot är igång

http://www.codeodyssey.se/upload/resource/blog/cssrebootbegins.jpg

Yes! Jag har äntligen fått till mitt bidrag till höstens CSS reboot. En tillställningar som knyter samman hundratals webbutvecklare från hela världen och uppmuntrar dem att kollektivt lansera nya versioner av sina webbplatser.

Det nya utseendet på hemsidan är alltså mitt bidrag till årets reboot. Om ni vill se hur den såg ut innan, så kan ni se en skärmdump från när jag bytte design senast.

Processen
Jag är själv ingen webbdesigner utan huvudsakligen programmerare. Jag kan absolut inte tävla med många av de andra deltagarna i "tävlingen". Jag ville skapa en standardsenlig webbsida utan några som helst CSS-hack som min förra version var fylld av. Var rätt så trött på det gamla utseendet och ville ha förändring.

Jag ville ha rundade hörn på en del ställen och till detta använde jag det förträffliga Nifty Corners Tube. Kunde dock inte göra yttre transparens med Nifty CUbe. Det ville ha på de yttersta ramarna. Så jag kompletterade med metoden som finns på 456bereastreet.com.

Inget stöd för IE6
Jag bestämde mig tidigt att inte stödja IE6 eller tidigare versioner av Internet Explorer. Framför allt ville jag prova halvgenomskinliga PNG på en del ställen. Så om du inte ser min logga överst på sidan eller om ramarna ser konstiga ut så använder du antagligen IE6.

Fler rebooters
Det finns många fina webbplatser som deltagit i år, jag kommer uppdatera detta stycket allt eftersom jag hittar fler trevliga bidrag.

Jag gillar bidraget från 32framespersecond.com har gjort ett vacker collage med många mönster.

Den tyska designer-byrån Mein Brandenburg har gjort ett absolut mästerverk. Väldigt fina bilder i galleriet också.

Gillar också Edoardo Sabadelli som är utveckare och har gjort en trevlig upplyftning.

Weknowhtml.com har gjort en stilig design med en groda som maskot.

Gradient Dropshadow Curve är ljus och fin med en häftig AJAX sökruta.

By Jesper Lind

Google köper JotSpot

Läser på Webbsnack skriver om att Google köper ytterligare ett företag. Denna gången är det JotSpot som verkar vara nån slags tjänst för att dela dokument över webben. Man kan ännu inte registrera sig på hemsida för att de håller på att integrera med Google's system. 

By Jesper Lind

Formatera texter med RegEx

Funktionen för att visa källkod på min sida är rätt simpel och highlightar inte några nyckelord. Den visar bara koden i en grå ruta med ram runt. Min har dessutom vart lite buggig och om man hade flera rutor i samma inlägg som formaterades inte alla rätt.

Nu har jag kodat om det och gjort en funktion som använder Regular Expressions. Tänkte dela med mig av denna här. Koden applicerar HtmlEncode på allt som står mellan [codeblock][/codeblock] för att taggarna ska visas som vanlig text.

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Text.RegularExpressions;

public partial class example_RegEx_Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string strInput = "This is a simple code-example that will be formatted with a gray background using RegEx.[codeblock]<html><body>Hello world!</body></html>[/codeblock]";
lblOutput.Text = FormatCodeBlock(strInput);
}

public string FormatCodeBlock (string strInput)
{
string strPattern = @"\[codeblock\]([\w\W]*?)\[/codeblock\]";
string strReplace = @"<div style=""background:#efefef;"">$1</div>";

string strResult;

foreach (Match m in Regex.Matches(strInput, strPattern))
{
string strMatch = m.ToString();
strInput = strInput.Replace(strMatch, Server.HtmlEncode(strMatch));
}

strResult = Regex.Replace(strInput, strPattern, strReplace);
return strResult;
}
}

By Jesper Lind

XSLT med XMLDataSource kontrollen (och GeoNames)

Höll på att testa lite med att koppla en XMLDataSource till en DropDownList och stötte på lite problem. Jag fick följande felmeddelande:

System.Web.UI.WebControls.XmlDataSourceNodeDescriptor innehåller inte någon egenskap med namnet name.

Efter lite sökning på nätet kom jag underfund med att det inte går att ange DataTextField till ett fält-värde i xml-filen. Det ska vara attribut till en tagg för att det ska fungera. Här är ett exempel på den xml fil som jag testade med som för övrigt är genererad av an tjänst på www.geonames.org och visar "first-order administrative division" Sverige. Jag ville få fram alla län men tror inte detta var helt rätt. Resten av parametrarna som man kan skicka med finns på en lista, här.

<geonames>
<totalResultsCount>85543</totalResultsCount>

<geoname>
<name>Stockholm</name>
<lat>59.3294681359869</lat>
<lng>18.0626392364502</lng>
<geonameId>2673730</geonameId>
<countryCode>SE</countryCode>
<countryName>Sweden</countryName>
<fcl>P</fcl>
<fcode>PPLC</fcode>
</geoname>

<geoname>
<name>Gothenburg</name>
<lat>57.7166667</lat>
<lng>11.9666667</lng>
<geonameId>2711537</geonameId>
<countryCode>SE</countryCode>
<countryName>Sweden</countryName>
<fcl>P</fcl>
<fcode>PPLA</fcode>
</geoname>

<geoname>
<name>Uppsala</name>
<lat>59.85</lat>
<lng>17.6333333</lng>
<geonameId>2666199</geonameId>
<countryCode>SE</countryCode>
<countryName>Sweden</countryName>
<fcl>P</fcl>
<fcode>PPLA</fcode>
</geoname>
...
</geonames>

Jag hittade lösningen som jag använder på Raj Kaimal's blogg. För att transformera xml-filen ovan så att name blir ett attribut till geoname kan man använda en XSLT-fil (TransformGeonames.xsl) som ser ut så här.

<?xml version="1.0" encoding="utf-8"?>

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="geonames">
<geonames>
<xsl:apply-templates select="geoname"/>
</geonames>
</xsl:template>
<xsl:template match="geoname">
<geoname>
<xsl:attribute name="name">
<xsl:value-of select="name"/>
</xsl:attribute>
</geoname>
</xsl:template>

</xsl:stylesheet>

Slutligen visar jag den koden som konsumerar web-servicen med XSLT-transformeringen.

<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>XmlDataSource with XSLT</title>
</head>
<body>
<form id="form1" runat="server">
<asp:dropdownlist ID="Dropdownlist1" DataSourceID="XmlDataSource1" DataTextField="name" runat="server"></asp:dropdownlist>
<asp:XmlDataSource ID="XmlDataSource1" DataFile="http://ws.geonames.org/search?q=sverige&country=SE&fclass=ADM1" TransformFile="TransformGeonames.xsl" XPath="geonames/geoname" runat="server"></asp:XmlDataSource>
</form>
</body>
</html>

By Jesper Lind

Den förvirrande cursor:hand deklarationen

Att få fram en hand som markör på alla webbläsare är något som länge förvirrat mig hur man gör. Jag hade helt enkelt inte läst på ordentligt och ibland vad den någon webbläsare som markören inte ändrades alls på mina webbplatser. Nu har jag fått klarhet i det hela cursor:hand är inte någon CSS-standard alls utan ett påhitt från Microsoft. Istället ska det standardiserade cursor:pointer användas. Cursor:pointer fungerar dock bara i den nyare IE6 och IE7 och inte i IE5 eller IE5.5. Om man har besökare som fortfarande använder så gamla browers så kan man använda en dubbeldeklaration.

element { cursor: pointer; cursor: hand; }

Ordningen på deklarationerna är viktiga för att moderna läsare ska ignorera det sista som är felaktigt. De gamla versionerna av IE kommer då också att visa en hand som markör. Att använda en sådan deklaration kan ju dock generera CSS fel vid validering så jag väljer nog att lämna de gamla IE versionerna åt sitt öde och bara använda cursor:pointer i framtiden.

Läs mer om stilar på markören
http://www.quirksmode.org/css/cursor.html

By Jesper Lind

Ny 3D-motor till flash

http://www.codeodyssey.se/upload/resource/blog/3d_rhino.jpg

På Michael Battle's blogg Work & Play läste jag att Papervision kommer släppa den som open source. Ett demo på 3D-noshörningen finns på hemsidan.

Tyvärr så verkar den vara rätt så minneskrävande som de flesta 3D-motorer till flash men ser endå lovande ut. Det verkar finnas planer på att konvertera till AS3 och då blir det förhoppningsvis lite bättre prestanda.

Update: Det finns ett nytt demo.

Blog om Papervision
Papervision3d.org

By Jesper Lind

Firefox 2.0 skördar fältet

http://www.codeodyssey.se/upload/resource/blog/ff_cropcircle.jpg

Redan i måndags smyglanserades Mozillas nya version av webbläsaren Firefox. De verkar ha haft en del problem med FTP sidorna och vädjade till användarna att inte ladda ner den i förväg. Många länkade direkt till filerna, och det riskerade att sänka servrarna helt. Jag kunde dock som många andra inte hålla mig, förlåt Mozilla!

Den nya version släpptes sedan officiellt igår och det har kommit en hel del nyheter bland funktionerna. Man har slipat på designen men man märker inte så stor skillnad. Sökrutan uppe till höger ger nu förslag på ord medan man skriver dem. Tabbhanteringen har även förbättras och man kan nu stänga varje enskild tabb med ett eget stängningskryss.

Man har lagt till ett antiphishing filter som ska skydda en från osäkra webbsidor. Detta har dock fått en del kritik på grund av att det skickar alla dina besökta hemsidor till Google.

Rättstavning på svenska

Den bästa nyheten enligt mig är rättstavningshjälpen som finns inbyggd i läsaren. När du skriver texter i webbformulär så understryks felstavade ord allt eftersom. För att få den att stava på svenska måste man dock installera ett extra tillägg som Hasse Walanger har skapat. Detta kan man ladda ner här: https://addons.mozilla.org/firefox/3064/

Uppdatering: Den svenska ordlistan går inte att ladda hem på länken ovan längre. Åtminstonde inte om man inte har ett medlemskonto hos Mozilla. Här finns en alternativ nedladdningslänk.

Mer läsning om nya Firefox 2.0:
http://webbsnack.wordpress.com/2006/10/23/alla-nyheter-i-firefox-20-med-skarmdumpar/
http://www.idg.se/2.1085/1.79916

By Jesper Lind

Så får du dina länkar att synas

Det finns flera sätt att göra länkar synliga bland textstycken. Här under visar jag några av dem.

This is a link right here but you couldn't see it right? Perhaps we should make them appear with dots beneath them like this or in another color. The yellow shade is a bit too pale, you can hardly see it can you? Or should all links be in bold, inverted or perhaps underlined? Which is your favorite link design?

CSS for the links above

<style type="text/css">
a.noStyle, a.noStyle:link, a.noStyle:active, a.noStyle:visited { color: #000; text-decoration:none; }
a.noStyle:hover { }

a.dotted, a.dotted:link, a.dotted:active, a.dotted:visited { color: #000; text-decoration:none; border-bottom:1px dotted #333; }
a.dotted:hover { border-bottom:1px solid #000; }

a.invert, a.invert:link, a.invert:active, a.invert:visited { color: #fff;background-color: #000; text-decoration:none; border-bottom:1px dotted #333; }
a.invert:hover { border-bottom:1px solid #000; }

a.yellow, a.yellow:link, a.yellow:active, a.yellow:visited { color: #E2D459; text-decoration:none; }
a.yellow:hover { text-decoration:underline;}

a.underlined,a.underlined:link,a.underlined:
active,a.underlined:visited{text-decoration:underline;}
a.underlined:hover { text-decoration:underline;}</style>

By Jesper Lind