Patrick Leisegang

er gift, har to barn, hund, katt og bor i Høvåg. Monterer kabel-tv for Get!

MenuClose

Stikkord: CSS

Hvordan oppnå full score på Pingdom og GTMetrix.

Før vi begynner tar vi en test på PingdomTools. Da kommer resultatet til 75/100, 58 requests, 6.28 sekunder lastetid og 4.2MB sidestørrelse.

Read more

Responsive YouTube videoer

Responsive HTML5 videoer

video {
max-width: 100%;
height: auto;
}

Responsive YouTube videoer i HTML 4

Anbefaler å legge inn videofeltet i en egen DIV klasse. Slik som dette.

<div class="video-container">
         <iframe src="http://www.youtube.com/watch?v=lnCr3czDNEs" frameborder="0" width="560" height="315"></iframe>
</div>

Da kan du enkelt bruke CSS til å sette vieoen sin maksbredde. Dette gjør siden din litt lettere å vise på mobile enheter.

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Forhindre for store bilder i bloggposter

Har du noen ganger hatt et bilde på bloggen din som har vært for stor og ødelagt designet ditt? Dette er ganske vanlig. Viste du at dette er veldig enkelt å fikse?

Hos meg så har jeg 3 «classes» som bestemmer hvordan bildet skal oppføre seg. Om det er justert til høyre, venstre eller sentrert. Alt du trenger å gjøre er å lime dette inn i CSS filen din.

[css]img.aligncenter { max-width: 500px; }[/css]

Du må antagelig endre img.aligncenter til det som din CSS fil bruker for å justere bildene.

PS: Det er en sjanse for at dette ikke virker med alle versjoner av Internet Explorer.

Slutt med IntenseDebate

Jeg har å sluttet med IntenseDebate her på nettsiden fordi det gav meg ikke nok muligheter til å ha det akkurat sånn som jeg ville. Det var veldig enkelt med å besvare ting med ID men det var så mange ting som var galt med det. Det er pga WordPress fra versjon 2.7 støttet trådede kommentarer som standard og det er like lett som med ID.

Nå skal jeg legge til støtte for å logge inn med Twitter, Facebook og GoogleConnect hvis det går. Jeg har og skrevet nytt stilark (CSS) til kommentarskjemaet.

Noen andre ting du vil ha her på leisegang.no? Forresten…sjekk ut denne videoen!

Forhindre for store bilder i bloggposter

Har du noen ganger hatt et bilde på bloggen din som har vært for stor og ødelagt designet ditt? Dette er ganske vanlig. Viste du at dette er veldig enkelt å fikse?

Hos meg så har jeg 3 «classes» som bestemmer hvordan bildet skal oppføre seg. Om det er justert til høyre, venstre eller sentrert. Alt du trenger å gjøre er å lime dette inn i CSS filen din.

img.aligncenter { max-width: 500px; height: auto; }

Du må antagelig endre img.aligncenter til det som din CSS fil bruker for å justere bildene.

PS: Det er en sjanse for at dette ikke virker med alle versjoner av Internet Explorer.