Jeg har tidligere skrevet om media typer i CSS for å for eksempel kunne skille mellom layout/formatering på skjerm og utskrift. I CSS3 har vi imidlertid fått et nytt valg som gjør det enda enklere å tilpasse en side, ikke til media-typer, men til skjermoppløsning og portrett/landskapsmodus m.m. Dette kalles Media Queries og er nøkkelen […]
På en responsiv nettside i dag er det utfordringer knyttet til bilder hva gjelder størrelse. Et bilde som skal vises i stor versjon på desktop passer ikke nødvendigvis like godt på mobil, og det er utfordringer knyttet til filstørrelse. Den mest vanlige løsningen på en responsiv nettside i dag er å skalere bilder i prosent: […]
Jeg har tidligere skrevet om bruk av background-size: cover for å lage et heldekkende skalerbart bakgrunnsbilde på en nettside (spørsmålet kom opp på vårt kurs i HTML5 og CSS3). object-fit: cover fungerer på tilsvarende måte, men brukes for å formatere bilder og video, og bestemme hvordan et bilde eller en video skal skaleres/plasseres innenfor et avgrenset […]
Når vi designer nettsider med CSS må vi forholde oss til måten størrelsen på elementer beregnes. Det er ikke så enkelt som at bredden/høyden man setter er den plassen elementet krever på skjermen. .top{ width: 200px; margin: 10px; padding: 10px; border: 1px solid #ccc; }
Å få tekst til å flyte mellom kolonner har ikke vært en enkel sak på nettsider. Men, med CSS3 kan vi nå gjøre dette ved hjelp av column-count. Dette støttes i alle moderne nettlesere (merk: du må bruke prefix for -moz og -webkit og for IE gjelder støtten fra IE10).
CSS som språk har utviklet seg voldsomt de siste årene og blant alt det nye finner vi CSS animations. Lenge var det for dårlig støtte for CSS-animasjoner i nettleserne, men nå begynner dette å endre seg.
I Dreamweaver CC er jQuery UI integrert. Et av elementene vi kan sette inn er Datepicker, for å gjøre valg av dato i et skjema enklere for brukeren. Datepicker setter du inn fra Insert-panelet og valget jQuery UI som vist her:
<div> <p>Avsnitt 1</p> <p>Avsnitt 2</p> <!– Avsnitt 2 skal formateres –> </div>
Hvordan formaterer du en liste som en meny? Vertikalt og horisontalt? Det er ikke så vanskelig, du må bare huske på et par viktige ting.
Å vite forskjellen på eksterne og interne stiler og hvordan disse overlapper hverandre er nødvendig for å få kontroll på CSS. Når skal du bruke det ene og når skal du bruke det andre? Og hva skjer om du bruker begge deler?