Nu skal vi især se på <font> og <center> samt centrering af hele siden på skærmen.

Størrelse: px

Starte visningen fra side:

Download "Nu skal vi især se på <font> og <center> samt centrering af hele siden på skærmen."

Gabriel Brøgger
8 år siden
Visninger:

1 Validering 4 Nu skal vi især se på <font> og <center> samt centrering af hele siden på skærmen. Det er i HTML ikke forbudt at bruge koden <font>, men lad nu være alligevel, du får blot en masse valideringsproblemer. Når du i stedet for lægger denne formatering over i css, opnår du en renere html-kode og et par ekstra fordele. Lad os se på det. I stedet for at starte hvert afsnit med noget i retning af: <font color= # face= Verdana, Arial, Helvetica, sans-serif > Her følger din tekst i afsnittet </font> og den samme smøre ved det efterfølgende afsnit o.s.v. Så læg hele formateringen over i css. Så står den kun én gang og gælder for alle afsnit, medmindre vi laver undtagelser (med class). Altså i css'en: background-color: #fff; Husk ved hver skriftfarve også at angive en baggrundsfarve! og i html'en: tekst til første afsnit. o.s.v. Når først formateringen er lagt i css'en, så skal den fjernes helt fra html'en. Vil du fremover ændre skriftfarve, så gør du det i css-filen.

2 Jeg nævnte, at vi kan lave undtagelser med class. Lad os vedtage at tredje afsnit skal have rød tekstfarve. Vi udvider css'en med en class redtext. Css:.redtext{ background-color: #0f0; skrifttypen er allerede nedarvet fra p, så den behøver vi ikke at gentage. og i html'en: tekst til første afsnit. <p class= redtext > afsnittet med rød tekst. Lav en side med denne css og html, læg f.eks. css'en i head, så du har det samlet. Og se selv, at det fungerer. Du kan jo samtidig ændre skriftstørrelser. Du kan evt. sammenligne med min kode med titlen redtext sidst i lektionen. Nu skal vi se, hvad vi gør ved det forældede <center> -tag,for selv om et tag er forældet,kunne vi jo godt ønske os tag-funktionen. Læg teksten i en div <div align= center >Det, der skal centreres</div> eller bedre: lav centreringen i css Du har en tekst, som du vil have centreret her., så opret en class, som du f.eks. kalder centreret i dit css.

3 .centreret{ text-align: center; og i din html <p class= centreret >Du har en tekst, som du vil have centreret her. så har du lavet din undtagelse, og da du ikke brugte id,men class, kan den genbruges over hele dokumentet. Hvad nu, hvis det er en hel skærmside, du vil have centreret, ikke kun et enkelt tekstafsnit? Det gøres lidt anderledes, men selvfølgelig kan det gøres, så det validerer. Det er nærmest en ren css-opgave. Lav en boks til netop dette formål. Kald den f.eks. container. Altså i html <div id= container > hele sidens indhold, tekst billeder tabeller, simpelthen alt indhold, der skal med i centreringen.</div>, vi bruger id fordi den kun bruges én gang for hver html-side. Og i css: #container{ width: 760px; margin: 0 auto 0 auto; Når du sætter skærmbredden til 760px, så kan en 600x800 skærmstørrelse vises uden vandret scrollbar. Og med både venstre og højre margin på auto, vil de 760pixels ligge lige langt fra venstre og højre skærmkant. Hvilket særligt ses ved større skærmstørrelser. Rækkefølgen er den sædvanlige, hvis du ikke følger den, får du TRouBLe Top Right Bottom Left

4 (eller start klokken 12 og gå uret rundt). med mindre det er et Århusur et af de få, hvis ikke det eneste ur, hvor viserne drejer venstre rundt og tallene er anbragt tilsvarende omvendt (undtagen lige klokken tolv og klokken seks, som af en eller anden mærkelig årsag er anbragt lige der, hvor du forventer at finde dem). Som sædvanligt ingen regler uden alle undtagelserne., Indeni den her skabte container lægges hele siden i forskellige <div> og de kan sagtens have f.eks text-align: left; Tænk i kasser som du kan skubbe rundt på efter for godt befindende. Men bortset fra at koden til disse kasser også skal validere, så er dette mere et spørgsmål om formatering og design. HTML CSS Validering Formatering og Design, kan vi overhovedet behandle dem enkeltvis, hvis vi vil have noget brugbart ud af det? Vi kan vist højest belyse et eller flere af disse punkter lidt kraftigere end de øvrige. På de efterfølgende sider finder du to kode-eksempler.

5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html> <head> <title>redtext</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> <style type="text/css"> font-size: 25px;.redcolor{ font-size : 50px; background-color: #00f; </style> </head> <body> tekst til første afsnit. <p class="redcolor"> afsnittet med rød tekst. </body> </html>

6 Og den samme kode centreret (nulstil margin border og padding i html og body. Jeg har med vilje sat px enheden på, selv om den ikke er nødvendig for værdien 0. Den skal nemlig på for alle andre værdier.) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html> <head> <title>redtext centreret</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> <style type="text/css"> html, body{ margin: 0px; padding: 0px; border: 0px; color: #fff; background-color: #c6f; #container{ width: 760px; margin: 0 auto 0 auto; color: #fff; background-color: #0f0; font-size: 25px;.redcolor{ font-size : 50px; background-color: #00f; </style> </head> <body> <div id="container">

7 tekst til første afsnit. <p class="redcolor"> afsnittet med rød tekst. </div> </body> </html> Hvis du kopierer koden fra denne pdf-fil, og det evt. ikke vil virke, så skal du specielt undersøge, om gåseøjnene er de rigtige ASCII-tegn. Nogle problemer så start med at erstatte gåseøjne med dem, du har på tastaturet over 2-tallet. lørdag 25. marts 2006

Relaterede dokumenter

Nolde Museet. I gang med Dreamweaver. Opgave. Opgavebeskrivelse. Layout. Mål og CSS

Nolde Museet. I gang med Dreamweaver. Opgave. Opgavebeskrivelse. Layout. Mål og CSS Opgavebeskrivelse Lav en webside om i Sønderjylland. Opgaven fører dig igennem de basale ting, hvad angår opbygningen af en side med CSS. Der er ikke tale om et komplet site, men du kan bruge opgaven som