Øvelsestimer (opgave 5) v/Morten Davidsen

mdav@itu.dk

Læser til daglig cand.merc.(dat.) på CBS

Udarbejde en HTML version af jeres heroes site, ud fra jeres oprindelige mockup◦ Slice eventuelle billeder ud i photoshop◦ Undlad at benytte flere billeder end nødvendigt,

f.eks. hellere benyt en baggrundsfarve end baggrundsbillede, hvis resultatet er det samme

◦ Opret containers ved hjælp af <div>◦ Benyt CSS positioning til at placere jeres indhold◦ Efterfølgende kan i style resten af jeres indhold,

såsom overskrifter, paragraffer, lister m.v.

Simpelt eksempelSimpelt eksempel

<div id="container"> <div id="header">Hoved</div> <div id="menu">Menu</div> <div id="content">Indhold</div> <div id="footer">Bund</div></div>

HTML delen – næsten HTML delen – næsten intet!intet!

/* Sætter en baggrundsfarve og sætter margin til 0 */body {

margin: 0px;background-color: #96C;

}/* Laver en "container" boks, som indrammer alt indhold */#container {

width: 500px;margin-left: auto;margin-right: auto;

}/* Hoved sektion */#header {

background-color: #438a48;width: 100%;

}

CSS delen #1CSS delen #1

/* Menu sektion */#menu {

background-color: #2675a8;float: left;width: 25%;height: 500px;

}/* Indhold sektion */#content {

background-color: #CF9;float: left;width: 75%;height: 500px;

}

CSS delen #2CSS delen #2

/* Fod sektion */#footer {

background-color: #df781c;clear: both;width: 100%;

}

CSS delen #3CSS delen #3

Der findes mange løsninger på samme problem, vær altid opmærksom på det når man benytter positioning

Altid godt at have en ”container” til at indramme alt indhold og arbejde ud efter

Ved brug af float, så husk at benytte clear når du vil have indhold ned på en ny linje

Undlad generelt at bruge fixed, med mindre du virkelig ved hvad du laver

Bliv bekendt med box modellen!

Lidt tipsLidt tips

Lynda.com Dreamweaver tutorials (10. Controlling Layout with CSS)

http://www.w3schools.com/Css/pr_class_position.asp (W3 schools - positioning)

http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/ (Tutorial fra photoshop til html & css)

Gode linksGode links