Universal selector “sjov” med fx. box-border og border-size

Hvem har ikke siddet og bandet mindst 100 gange over width og padding i et design? Hvorfor skal man absolut bruge tid på at sidde og trække padding fra width? Det regnehelvede, som man pludselig risikerer at sidde i, når man skal definere et design”grid”… Chris Coyier fra CSS-Tricks har skrevet et blogindlæg om Paul Irish’s artikel, “* { box-sizing: border-box } FTW“.

De taler om den absolut interessante anvendelse af universal selector til fx. box-model, når du skal definere dit grid i CSS:

/* apply a natural box layout model to all elements */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

Man skal selvfølgelig være opmærksom på de forskellige browseres support af CSS’en (Paul taler om dette i sit oplæg).

Chris og Paul kommer med flere bud på anvendelsen af universal selector, så jeg kan kun anbefale dig at se nærmere på de to indlæg:

Reklamer

Nyt udseende til tankeidyl.dk

Så er jeg blevet færdig med tankeidyls nye udseende. Der er blevet produceret nyt logo, og sidens opsætning og design er blevet videreudviklet.

Det har været vigtigt for mig at holde det simpelt. Sidens formål er at oplyse om mine kompetencer, erhvervserfaring og projekter – that’s it! Jeg har som udgangspunkt forsøgt at holde indholdet til en side (dog kommer der i den nærmeste fremtid en side med flere referencer). De enkelte projekter vil blive præsenteret på siden, men detaljer om det enkelte projekt vil være at finde på min blog.

Jeg har haft nogle udfordringer med mine CSS-columns, som forhindrede min hvide baggrund med runde hjørner(CSS3 – border-radius:10px) i at blive vist korrekt, så højden var 100%. Det har noget at gøre med at float-elementer som udgangspunkt ikke har nogen fysisk størrelse, hvilket betyder at div’en omkring mine columns tolker det som om den er tom – og derfor viser den ikke baggrunden i en 100% højde. Jeg har forsøgt med en clear: both, som skulle løse problemet, men der er et eller andet i min kode som stadigvæk forhindrer at det vises korrekt. Men så igen, det kan være lidt drilsk med 100% højde…

På grund af deadline har jeg måtte ty til en anden løsning, hvor siden vises korrekt: De runde hjørner er lavet som grafik, som man ville have gjort i “gamle dage”. Det er dog ikke den optimale løsning, hvilket jeg må vende tilbage til, så snart tiden tillader det.

Mon der er et eller andet problem med CSS3, border-radius og højde 100%? Tjah, det finder jeg forhåbentlig ud af.  Og når løsningen er fundet, så ligger jeg det ud på bloggen!

– Jeg håber at I kan lide det nye design :) Skriv endelig, hvis du har en kommentar!

Responsive design – the basics

Jeg er i fuld gang med at sætte de sidste tags i mit nye design til tankeidyl.dk, og jeg har gennem hele udviklingsprocessen sagt til mig selv at næste skridt vil være at lære responsive design, så det nye design kan opgraderes og præsenteres optimalt på tværs af platforme. Det er solidt plantet i min bevidsthed – der er blot nogle andre vigtige ting som skal på plads også(så som at søge arbejde, da jeg jo blev færdiguddannet i januar 2012 som multimediedesigner).

– Nok om det!

Responsive design giver webdesigneren mulighed for at gøre websitets udseende fleksibelt, så det automatisk tilpasses den platform en besøgende anvender. Det er super cool, og Chris Coyier “tegner og fortæller” (en amerikansk udgave af Jørgen Clevin) om det i en video på hans side, CSS-tricks.com. Han giver et overordnet indtryk af hvad Responsive design egentlig er:

Se video  (Braindumps on Rsponsive design)

– God fornøjelse!

Der vil garanteret dukke flere indlæg op, når jeg rigtig kommer i gang med emnet!

Sticky footer

På siden www.stickyfooter.com er det muligt at hente et stykke kode, som via CSS sørger for at din footer ALTID placeres i bunden af browseren. Den vil dog ikke vises, hvis du gør vinduet så lille at der er scrollbar på!

%d bloggers like this: