Fixa header med css

Det finns en mängd olika sätt att lägga in en header. Men hur kan du göra det med CSS kod? Det är väldigt simpelt. De flesta sidor du har kan du fixa header själv och sätta din egna prägel. Visa vem du är.

 För att du ska kunna fixa header på din sida behöver du några saker innan du kan börja.

  • Storleken
  • Program
  • Vart css filen ligger
  • Hur ser koden ut
  • Hur man ska få den på sidan

 Fixa headerBildstorlek

I ett tidigare inlägg har jag skrivit om hur du kan hitta bildstorleken på en bild, om du inte kan det här steget får du gärna kolla in det inlägget här.

Program

 Du kommer behöva ett antecknings program som notepad ++ eller liknande. Sedan kan du behöva ett ftp program för att ladda upp dina ändringar i css filen. Här finns en länk om du är nyfiken på hur du gör med ett ftp program. Du behöver också ett bild program som photoshop eller gimp. Använd dig gärna av en online variant som picmokey.

Vart kan css filen vara

Nu blir det lite trixigt för att jag har ingen aning om vilken plattform du bloggar på, om du vill ha hjälp med att hitta på din plattform. Har du hittat den själv grattis, klappa dig själv på axeln. Det är är riktigt bra att du hittar.

Fixa header koden

 

NAMNET PÅ .CLASS ELLER #ID {background: url("ADRESSEN TILL DIN BILD HÄR") no-repeat scroll 0 0 rgba(0, 0, 0, 0);}
 
Om du inte vet vad din header har för id eller class. Ta det lugnt här finns ett inlägg med video som beskriver hur du kan göra. För att få din bild online och få koden till den, enklaste sättet är att lägga upp din bild som du skulle lägga upp din bild till ett vanligt inlägg. Sedan kopiera den adressen som du kan se i Html redigeraren (ibland heter det ändra redigerare)  Ersätt sedan bara de stor bokstäverna med din info. 
 

Slutet på fixa header

Lägg in den färdiga koden på din sida, vart som helst i css filen om du inte kan hitta den class eller id som påverkar headern, om den finns och redan använder sig av url länkning ersätt bara länkningen. Behöver du hjälp, tveka inte hör av dig.

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *

CommentLuv badge