Overskrift eller logo

Denne skabelon ligger i mappen 1-1-2-1-rund-alternativ

Beskrivelse:

Du får her et layout med en boks til en overskrift eller et logo og en indlagt menulinje, en venstre spalte, en midterboks, en højrespalte og en boks til en sidefod. Alle fem bokse er forsynet med runde hjørner. Det hele er pakket ind i en boks med en fast bredde på 770 pixels, der er midterstillet på siden.

De runde hjørner på logoboksen og sidefoden er lavet ved hjælp af css, mens hjørnerne på spalterne er lavet med billeder. Det betyder, at hvis du vil ændre farve eller bredde på spalteboksene, skal du ændre farve eller bredde på billederne rundtop.png, rundbund.png og spaltetrick.png. Sidstnævnte bruges til at lave spalterne lige høje.

Det er normalt mere besværligt at ændre farve på billeder end at ændre farve med css-editoren. Jeg har ikke desto mindre valgt at bruge billeder i denne skabelon, fordi de runde hjørner sammen med lige høje spalter ellers vil betyde, at der skal rettes i en forfærdelig masse stilregler for at ændre farve på spalterne. Og det vil samtidig være sværere at bevare overblikket.

Brugen af billeder kan dog også give dig flere muligheder. Du har fx mulighed for at lave meget mere avancerede hjørner, der fx har større rundinger eller andre former. Du kan læse mere om brugen af billeder til hjørner på siden Hjørner.

Hvis du vil benytte samme layout uden at have lige høje bokse, så brug i stedet skabelonen 1-1-2-1-rund, dér er alle hjørnerne lavet med css, så du slipper for at ændre på billeder, hvis du vil ændre farve eller bredde på boksene.

Boksene:

Skabelonen består af fem hovedbokse:
Boksen side er en midterstillet boks, der indeholder de fire andre hovedbokse. Hvis du ændrer bredden på boksen, så husk også at ændre bredden på boksene logosamleboks og sidefodsamleboks. Boksene indhold og hoejreindhold skal sammenlagt have samme bredde som boksen side - vær opmærksom på, at margin tæller med i bredden.

Boksene er lavet i flere dele på grund af de runde hjørner. Nedenstående er de bokse, du kan bruge til tekst og billeder:

Boksen logo er beregnet til en overskrift eller et logo, og den indeholder desuden en menulinje. Boksen er opdelt i to dele, der har fået hver sin baggrundsfarve. Hvis du vil ændre baggrundsfarve på den øverste del, skal du ændre baggrundsfarve i stilklasserne logohjoernetop1-4 og logoindhold.

Farven bag menuen ændres i stilklasserne logohjoernebund1-4 og stilreglen ul.menuliste li. Farven, når du holder musemarkøren over et menupunkt, ændres i stilreglen ul.menuliste li a:hover.

Vil du have flere eller færre link på menulinjen, skal du ændre stilen ul.menuliste li, så den samlede boksbredde giver 100%. I øjeblikket er der fem menupunkter, så der er angivet en boksbredde på 20% for de enkelte punkter, vil du kun have fire menupunkter, skal du ændre til 25%, mens du ved seks menupunkter skal ændre til 16.67. Bemærk, at der bruges amerikansk decimaladskiller, det skal altså ikke være et komma, men et punktum mellem 16 og 67.

Bemærk, at baggrundsfarven i logosamleboks skal være den samme som baggrundsfarven i stilklassen side.

Boksen indhold er denne boks.

Boksen hoejreindhold er boksen til højre.

Boksen sidefod kan fx bruges til at skrive navn og adresse. Jeg har valgt at centrere tekst i boksen, men det kan du selvfølgelig sagtens ændre i stilklassen sidefod med css-editoren.

Baggrundsfarven uden for boksene fastsættes i stilen body.

Ekstra stilklasser

Jeg har lavet nogle ekstra stilklasser, som du måske kan bruge, og ellers kan du selvfølgelig bare slette dem i css-editoren:

Stilklassen fed gør en tekst fed og farver den samtidig mørkegrå. Stilklassen roed farver en tekst rød. Stilklassen centrer midterstiller teksten i et tekstafsnit på siden.

Stilklassen billedvenstre kan bruges til at placere et billede til venstre, mens teksten vil flyde uden om til højre herfor. Den kan også bruges på andre elementer end billeder.

Stilklassen billedhoejre kan bruges til at placere et billede til hoejre, mens teksten vil flyde uden om til venstre herfor. Den kan også bruges på andre elementer end billeder.

OBS! Når du skriver tekst, så husk at vælge Afsnit i rullemenuen i formateringslinjen. Ellers vil du ikke få indsat afstand mellem tekst og bokskanter. Her kan du se et lille eksempel på en tekst, hvor der ikke er valgt tekstafsnit:

Denne tekst går helt ud til kanten, fordi der ikke er valgt Afsnit i rullemenuen. Der er flere andre gode grund til at benytte tekstafsnit: Du får fx automatisk indsat mellemrum mellem afsnit, og det er nemmere at ændre egenskaber på teksten.

P.S. Husk at ændre sidens titel til noget mere passende (menupunktet Formater => Sidens titel og egenskaber => udfyld feltet Titel).

Tilbage til skabelonoversigten