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.
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.
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.
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.
Jag läste en notis på Användbarhet.se som jag instämmer med. Man utforma sina länkar konsekvent och inte blanda understrukna och icke-understrukna länkar. Detta lägger ett alltför tungt tolkningsjobb på användaren.
Menyer och länkar bör vara intuitiva och man ska förstå vad som går att klicka på utan att behöva testa allt. Understrykningar är ett bra sätt eftersom vi är så vana med att länkar ser ut så. Annars är ett annat bra sätt att ange länkar i en speciell utstickande färg.
Jag har tidigare skrivit om hur man kan göra rundade hörn på html objekt utan att använda bilder. I den posten hänvisade jag till Nifty Corners.
Nu har Alessandro Fulciniti som ligger bakom tekniken släppt en ny uppdaterad version som han kallar Nifty Corners Tube. Nu kan man även skapa kolumner knappar och hela layouter med scriptet. Funktionaliteten finns i ett javascript som man kan ladda ner gratis och är släppt under GNU GPL licens.
Jag tycker Nifty Corners Tube är ett väldigt bra skript som jag själv har testat. Det finns dock mängder av andra tekniker och SmileCat.com har sammanställt en fin lista på andra sätt att göra rundade hörn.
Jag har tidigare skrivit om vilka typsnitt som är säkra att använda på webben om man vill ha samma resultat på alla olika system. Nu tänkte förklara lite om hur man anger storleken på typsnittet. I CSS har man följande storlekar att välja bland.
* px - pixels, bildskärmspunkter * pt - points, typografiska punkter * pc - picas, typografiska "punkter" * mm - millimeter * cm - centimeter * in - inches, tum * em - typografisk fyrkant * ex - x-höjd
Glöm punkter på skärmar För det första, glöm bort att visa typsnitt i punkter eller picas. Folk är vana vid att arbeta med punkter i program som Word och Photoshop, och sedan felaktigt använt det för att beskriva textstorlekar på webben. Dessa bör inte användas för skärmvisning. Centimeter, Millimeter och Tum bör också undvikas. Den enda gång man ska ange storlek i punkter är i separata stilmappar för sidor som ska skrivas ut på en skrivare.
Fasta enheter cm - centimeter mm - millimeter in - tum - 1in = 2.54 cm pc - picas - 1pc = 12 pt pt - punkter - 1pt=0.353 mm
Pixlar eller em? Pixlar är ju den naturliga enheten på skärmar och lämpar sig väldigt bra. När det gäller typsnitt har det länge vart populärt att ange storleken i pixlar. Oftast vill designers ha lite mindre text och väljer något mellan 9-11 pixlar på brödtexten. En nackdel med detta är att i vissa webbläsare går det då inte att ändra storleken genom inställningarna (t ex IE6).
Relativa storlekar är bästa valet Fler och fler webbplatser inser nu fördelarna med att ange typsnittstorlekarna i em eller % istället för i fasta pixlar. Vad betyder då em? Den typografiska fyrkanten är olika stor beroende på vilket teckensnitt man använder. Den utgår nämligen från bokstaven M i valt teckensnitt. Detta innebär alltså att måttet em varken är beroende av skärmens upplösning eller vilket operativsystem man använder. Det som styr är i stället besökarens egna inställningar för teckenstorleken.
Ett exempel I följande exempel visas all text i 75% av användarens standardinställning. Radhöjden är 133% för att få in lite luft mellan raderna. Rubriken h3 visas i 200% i relation till det värde vi angett i body.
body { font:0.75em/1.3em Arial, Helvetica, sans-serif; } h3 {font-size:2em;}
När man gör html design och anger vilka typsnitt man vill använda brukar man ange några olika alternativ. Alla plattformar som PC, Mac, Linux och Unix har ju alla olika standardfonter installerade. Man anger fonter i CSS enligt följande. Sans-serif är ett generellt samlingsnamn för att ett typsnitt utan "fötter" ska väljas.
body { font:0.75em/1.3em Arial, Helvetica, sans-serif; }
Om man vill att samma font ska visas för alla besökare blir man väldigt begränsad. Hittade en sida på nätet som skriver att de följande är de vanligaste webb-säkra fonterna.
* Arial / Helvetica * Times New Roman / Times * Courier New / Courier
Andra alternativ som brukar fungera bra är:
* Palatino * Garamond * Bookman * Avant Garde
Några fonter som fungerar bra på Windows and MacOS men inte Unix+X är:
* Verdana * Georgia * Comic Sans MS * Trebuchet MS * Arial Black * Impact
Jag har börjat använda Web.sitemap flitigare i mina applikationer. asp:Menu komponenten är ju smidig eftersom den är så lätt att binda till en SiteMapDataSource och menyn ritas fram automatiskt.
Men jag stötte dock på en del problem som jag inte vet hur man kan lösa. För det första genererar den onödigt mycket kod med mängder av nästlade tabeller och det är väldigt svårt att lista ut hur man ska få den att uppföra sig precis som man vill.
Sen ville jag ha streckade linjer som separatorer och använde StaticBottomSeparatorImageUrl för att ange min bild. Kunde dock inte komma på hur man kan göra för att bara ha dem imellan menylänkarna. Inte före eller efter med andra ord.
Efter ett stunds sökning på nätet gav jag upp. Hittade istället en djupgående artikelserie på www.devx.com där nio problem med sajt navigation tas upp. Där hittade jag ett tips om hur man kan binda ihop en Repeater till sin SiteMapDataSource istället för Menu kontrollen. Men hjälp av Repeatern kunde jag placera separator koden där jag ville samt att få hela menyn att renderera snyggare utan massa överflödiga tabeller.
