Layouter i CSS – Exempel med apelsiner

Ett vanligt upplägg på en hemsida är att man förutom meny, sidhuvud och sidfot har en artikel och en kolumn bredvid. Jag gör ett exempel med en sida om apelsiner som ni kan utgå ifrån.

Bygg gärna vidare på den. Ni kan börja med följande :)

  • Kopiera ut CSS:en till en egen fil istället för att vara bifogad i HTML
  • Skapa minst 1 sida om en annan frukt. Byt gärna bakgrundsfärger eller så till tex grönt för äpple-sidan. Utan att behöva göra 2 CSS-filer.
  • Utöka gärna layouten till någon av de 2 bilderna ovan.

Frågor Diplomerad Webbdesigner

F: Jag skulle vilja göra så att en bild zoomas in när man håller musen över. Behöver jag JavaScript då?
S: Nej du kan använda CSS-transitions. Läs i följande tråd på StackOverflow. Berätta gärna hur det går :)

F: Hur gör jag en meny i CSS så att den funkar på mobilen?
S: Jag gjorde två exempel som du kan utgå ifrån. Det ena sättet behöver JavaScript det andra inte.

F: Hur bäddar jag in en Youtube-film?
S: För att bädda in Youtube-filmer surfar du fram filmen på Youtube och sedan precis nedanför själva film-fönstret finns en knapp som heter Dela eller Share. Där innanför finns en Embedd-knapp. I den hittar du HTML-kod som du kopierar och klistrar in. Se till att du får med hela raden. Det funkar bara om du har ett eget webhotell eller webserver. Annars kommer du se det som en grå ruta där videon kommer hamna.

F: Hur vet jag att min HTML & CSS är rätt?
S: Det finns verktyg du kan använda för att testa din HTML & CSS. De kallas att validera den. Det finns en HTML-validator och en CSS-validator. Resultatet från ett sånthär test kan tas med en nypa salt. Vissa saker är inte viktiga att dom är rätt och andra är viktigare. Det är väldigt bra att testa lite då och då för att se så man inte gjort slarvfel (tex glömt avsluta taggar) eller glömt måsvingar i sin CSS.

F: Hur skriver jag ett eget tema till WordPress?
S: WordPress har överlag väldigt välskriven dokumentation. Börja med den om teman :)

F: Hur kommer jag igång med JavaScript?
S: Jag skulle börja med att lära mig en sorts JavaScript som kallas jQuery. Det finns en väldigt fin dokumentation som kan va värd att börja med. Kul!

F: Hur gör jag ett bildspel?
S: Du behöver använda JavaScript eller jQuery för ett bildspel. Testa gärna med Lean Slider. Exempel på hur du använde det finns på deras hemsida. De man gör är att ladda hem några filer från deras hemsida som man kopierar in i sin egen. Sedan lägger man till lite HTML, Javascript och CSS. Klart :)

F: Hur centrerar och beskär jag en bild i CSS?
S: Testa med oversize:hidden i CSS:en och läs i under svaret som fått 49 röster. Det går att göra men det finns inget jättebra sätt. För mig slutade det med att jag gjorde ett exempel där jag lägger bilden som bakgrund.

F: Hur gör man en meny i HTML?
S: Menyer gör man i listor. Det finns en fin artikel på w3schools om det :)

F: Hur gör man bakgrundsbilder som scrollar?
S: Det kallas Fixed Background Scrolling. Eller parallax scrolling. Börja med att läsa på: http://tympanus.net/codrops/2013/05/02/fixed-background-scrolling-layout/ Min kompis Johan använder det på sin hemsida.

F: Hur gör man för att använda olika fonter?
S: Det absolut enklaste sättet att använda fonter är att använda de som finns på datorn. Läs på w3schools om hur. Förutom det så kan man ladda in andra typsnitt via tex Google Fonts.

F: Hur centrerar man i CSS? Utan att använda <center> i HTML.
S: För att centrera i CSS behöver elementet ha en fast bredd. Jag gjorde ett centrera exempel och så kan du läsa överkursvarianten på W3.

Beautiful stacking of DIVs in HTML

Update: Karl just sent me the link to Masonry. Works fine! T H A N K S !

I’ve been tearing my hair the last day to find a way to stack DIVs in multiple columns. I’m illustrating what I’m looking for with some images.

I’m trying to order DIVs with different content and size where you are recommended to read element in this order: One, Two, Three, Four, Five and Six. When you resize the screen (or read it on a smart phone) the DIVs are supposed to be stacked on top of each other in the same reading order. If the width of your screen only can show two columns you read One and two on the first row, three and four on the second and five and six on the last row.

My first idea is to just use float:left. Works kind of good. But only for the last column since it sets the height to all the other columns. Not so nice.

Then I tried to create 3 individual columns and put divs in each of them. This kind of works but you have to sort the DIVs in the wrong order in the HTML. And also the idea is that the DIVs should stack naturally when you make the window smaller. Well. Now they don’t. Too bad.

I searched for a while and found HNterest. They are positioning the DIVs absolute. Ok. So maybe I’ll resort to that? I’ll try that. Later.

Check my sample html and forge it on github as well.

Thanks to Adam for all help in this! I’m not sure what to do without you :)

Add colors to your tag cloud for readability

I’m using the A better tag cloud WordPress widget to be able to configure the tag cloud on my blog. It’s a nice widget that I really recommend!

I wanted to make it easier (and prettier) to use by adding colors to the tags. A darker color means a more used tag, a lighter means that the tag is less used. I based my colors on the Tango palette.

The tag cloud with the original CSS to the left and my customized to the right

All different sizes in A better tag cloud already had their different CSS classes so adding colors were easy. All I had to do was to add the following CSS to the bottom of my styles.css file.

/* Add colors to A better tag cloud */
.nktagcloud-8 {
  background-color:#fce94f;
}
.nktagcloud-9 {
  background-color:#edd400;
}
.nktagcloud-10 {
  background-color:#fcaf3e;
}
.nktagcloud-11 {
  background-color:#f57900;
}
.nktagcloud-12 {
  background-color:#ce5c00;
}
.nktagcloud-13 {
  background-color:#e9b96e;
}
.nktagcloud-14 {
  background-color:#8ae234;
}
.nktagcloud-15 {
  background-color:#73d216;
}
.nktagcloud-16 {
  background-color:#4e9a06;
}
.nktagcloud-17 {
  background-color:#729fcf;
}
.nktagcloud-18 {
  background-color:#3465a4;
}
.nktagcloud-19 {
  background-color:#204a87;
}
.nktagcloud-20 {
  background-color:#ad7fa8;
}
.nktagcloud-21 {
  background-color:#ef2929;
}
.nktagcloud-22 {
  background-color:#cc0000;
}

Enjoy!

SharpWired News Site!

The Planet SharpWired site is now online on our source forge project page!

A screenshot of the SharpWired planet (080813)

Since sourceforge don’t allow outgoing connections on project web pages I have set up the planet elsewhere and uploads the files to sourceforge every hour using rsync. This means that there is a delay for maximum one hour before the page and news feeds are updated. It’s not perfect, but I think it’s good enough. For now at least.

Update: More information about the planet and the customized SharpWired PlanetPlanet skin/template can be found in the SharpWired Wiki.

Update 2: The wiki isn’t alive anymore but here are two screenshots of how it looked.

Please report any problems or errors and have a nice weekend!