hensigtsmæssig opbygning af design?

Tags:    html css

hey glade udviklere... jeg har igennem det sidste år "leget" med html / css og lavet ikke kommercielle projekter samt små kommercielle projekter... men efterhånden begynder jeg at være i tvivl om hvor vidt jeg har taget noget "bad teaching" til mig...

så ville høre om nogen ville give et eksempel på en typisk opbygning af et website, altså med en header, en venstre stillet menu samt en højrestillet og med et indhold i midten...

håber nogen er frisk på sådan en lille opgave :)

ps: vil gerne se kodeeksempler, og bare for at det ikke skal lyde som en der vil nasse jeres koder, så har jeg selv forsøgt mig med dette:
http://videbaeklmu.dk/programmering/design/index.html

Og desuden selv lavet siden videbaeklmu.dk...



http://videbaeklmu.dk/programmering/design/index.html

Vil sige det er sådan jeg bygger det op :)



Først og fremmest: Din doctype skal være aller, aller øverst i dokumentet, ellers gælder den ikke!.

Derudover mangler du et content-type meta tag. det er også ret vigtigt, fordi det ellers kan skabe problemer med tegnsætning.

Fold kodeboks ind/udKode 


hvis du bruger UTF-8 skal det naturligvis stå istedet for ISO-8859, og hvis du bruger XHTML (som jeg på det kraftigste vil anbefale dig at skifte over til, i hvert fald indtil HTML5 bliver alment brugbart), skal tag'et naturligvis afsluttes med /> ;) tagget skal sidde i din <head> sektion, hvis du skulle være i tvivl.

Dine <img> tags skal have en alt="" attribut, for at være valid (X)HTML, og for at folk stadig kan få det nært optimale ud af siden, hvis de ikke kan se billedet af den ene eller anden grund. Attributten kan godt være tom, hvis det ikke giver mening at billedet skal have en alt-værdi(fx hvis det er et billede du laver for at vise runde hjørner).

Slutteligt vil jeg anbefale dig at vænne dig til at bruge classes istedet for id'er når det handler om CSS-opsætning af divs og andre ting. I dit eksempel der gør det ingen forskel, men id'er har du ikke brug for medmindre du arbejder med javascript, i hvilket tilfælde det er bedst kun at bruge id-tags på de elementer, der skal kunne arbejdes med i JS.



mindre fejl med den doc-type :P plejer at sætte den øverst ;)

billedet var bare som eksempel... glemte desuden at uploade det, men har rettet det nu :P

sådan som jeg har lært det bruger man id til opbygningen af siden... altså elementer som kun bruges 1 gang per side... til f.eks tekstformatering kan man så bruge class...

f.eks:
.rødtekst {color:red;}
.blåtekst {color:blue}
#header{width:100%;}
#menu{width:15%;}

hvad angår content-type meta tag'et... er det som for nogen kan skabe effekten...

æøå = ???

eller hvad? men tak for svarerne :)

desuden, ville jeg gerne vide om der er en måde der kan justere bredden på mit afsnit "indhold"...

så som:
vmenu: 15%;
hmenu: 15%;
indhold: resten;

answer needed :P





Indlæg senest redigeret d. 06.04.2009 00:40 af Bruger #13768
Jeg ved ikke rigtig noget om visuelt design, men har lige en fortsættelse til det Per skrev:

Din doctype står forkert, så den virker ikke i IE. Den skal stå før <?xml ?>.

Din <meta> Content-Type står også forkert og ignoreres derfor af browserne. Den skal helst være første element i <head> og den skal som minimum være før <title>.



det skulle stå rigtigt nu, altså doctype...

og meta content-type er hermed rettet...

men håbede nogen kunne svare på dette spørgsmål:


jeg vil gerne vide om der er en måde der kan justere bredden på mit afsnit "indhold"...

så som:
vmenu: 15%;
hmenu: 15%;
indhold: resten%;

altså sådan at indhold selv tilpasser sig, fordi at sætte det til 70% ikke virker i alle browsere...





Du kan sagtens bruge width:15%, width:70% og width:15%, bare doctype er sat korrekt.

Hvad virker ikke?



først og fremmest, min side består af en header, og en menu i hver side(venstre / højre) og så et indhold imellem.

men når jeg gør som dit eksempel så hopper indhold boksen op og ned når jeg justere på browservinduets størrelse...

men se evt. mit eksempel hvis du ikk er med på hvad jeg skriver...http://videbaeklmu.dk/programmering/design/index.html



Jeg kan ikke få din side til at hoppe. Hvilken browser taler vi om?

PS: Din side er stadig sat til Quirks Mode (IE5 Mode) i Internet Explorer.



t