Baggrundsbillede med fuld bredde og højde i browseren

Vi kan med CSS få et billede til at vises med fuld bredde og højde i browseren, bag indholdet af hjemmesiden. Så slipper man for at baggrunden abrupt stopper, eller kopierer sig selv i det uendelige.

Se et eksempel her

Vi indsætter først et billede i toppen af vores kode (det er lige meget hvor, men vi vil gerne have det til at indlæse så tidligt som muligt ved pageload). Billedet får klassen “bg”:

<img src="../images/background.jpg" class="bg" />

Den følgende CSS kode ‘vrider’ billedet til den fulde browserbredde, uden at ændre på dimensionerne:

height: auto; /* Højden må ikke afvige fra billedets dimensioner - vis altid det samme format */
top: 0; /* Positioner billedet i toppen */
left: 0; /* Positioner også billedet helt til venstre*/
min-height: 100%; /* Minimumshøjden er billedets 'naturlige' højde */
min-width: 1024px; /* Minimumsbredde, så billedet ikke tvinges lavere */
position: fixed; /* Billedet forbliver stationært */
width: 100%; /* Bredden skal fylde hele browseren - med mindre denne er mindre end 1024 pixels, som defineret ovenfor  */
z-index: -1; /* Billedet skal være bagved andet indhold. Denne skal ændres hvis der er andre elementer med lavere z-akse indhold. */

God fornøjelse! 😀

VN:F [1.9.22_1171]
Rating: 4.8/5 (4 votes cast)

Tilgå WordPress administration med æ, ø og å i domænenavnet

WordPress har det problem at man ikke kan tilgå administrationen af et domæne som indeholder specialtegn, såsom æ, ø og/eller å. Browseren kan simpelthen ikke finde ud af hvor den bliver viderestillet til, og man får en ukendt URL-fejl.

Dette er der heldigvis råd for!

Hjemmesiden URL skal i administrationen skrives uden æ, ø og å, altså den alternative måde domænerne gemmes i DNS på, for eksempel xn--domnenavn-bsd.dk. Denne skulle gerne kunne ses i DNS administrationen hvor domænet hostes

Hvis man er så uheldig at finde ud af dette efter WordPress er installeret og opsat, skal ovenstående ændres i databasen, f. eks. med værktøjet phpMyAdmin

Felterne der skal rettes ligger i wp_options og hedder siteurl og home. Heri indsættes domænenavnene med de alternative stavemåder

VN:F [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)

Internet Explorer 7-specifik CSS

I stedet for at skulle indsætte kode til at indlæse en ny css-fil til IE7, plejer jeg at bruge dette lille trick:

Ved at sætte en stjerne (*) foran css-linjen, indlæses linjen kun af Internet Explorer 7.

Eksempel:
#wrapper {
width: 900px;
height: 450px;
margin: 10px auto 0px;
*margin: 15px auto 0px;
}

I ovenstående eksempel har vores element “wrapper” i IE7 5px mere luft for oven end i alle andre browsere. Husk at indsætte den nye linje med ‘*’ under linjen uden. Ellers vil browseren give wrapper’en 15px luft i toppen, og så overstyre med linjen under der siger 10px. CSS indlæses oppefra og ned 😉

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)

Få CSS-linje til at bestemme mest med “!important”

Det kan være bøvlet at få et element i HTML til at makke ret med CSS’en. Specielt hvis vi er rigtig langt “inde” med definitionerne. Hvis vi fx vil have et specifikt menupunkt til at have en anden farve end de andre menupunkter, kunne brugen af “!important” være nødvendig (og at foretrække).

Eksempel:
I følgende eksempel har vi en linje CSS der definerer baggrundsfaven på menupunkterne
div.gk-menu > ul.level0 > li > a { color: #ffffff; }
Vi vil dog gerne have et specifikt menupunkt til at have en anden farve. I vores HTML står der at <a>-tagget har ID’et menu340, så vi skriver #menu340 { color: blue; }.
Men ak, der skete intet med menupunktet.

Problemet er at den øverste kode definerer “hårdere” end det vi lige har skrevet. Jo tættere vi definerer på målet, des vigtigere anser browseren koden. Og i øverste kode er vi helt ude i fjerde niveau. Vi skal altså enten skrive div.gk-menu > ul.level0 > li > a#menu340 { color: blue; }

ELLER

Vi indsætter da bare den lækre !important:

#menu340 { color: blue !important; }
Med det lille ord blev vores definition af #menu340 vigtigst!

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)