---

Jeg har lavet denne hjemmeside for mit arbejde. Den er lavet i
Dreamweaver CS4. Jeg har forsøgt mig med CSS mest, men har
problemer med, at menuen (en Spry Accordion) ikke vises ens i
bl.a. explorer 8 og explorer 7, hvor menuen hopper over i højre
side. Jeg ved ikke, hvad jeg skal gøre ved dette, eller hvordan
jeg tester det i andre browsere. Fx kan jeg også se nogle fejl i
Safari hjemmefra, men ikke i Safari her på job.

www.scan-line.net

Håber I kan hjælpe.

Vh Line

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Lav .tekstboks om til dette:
#tekstboks {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   color: #000;
   width: 500px;
   float:left;
   margin-left: 30px;
   margin-top: 20px;
}

I spryaccordion.css tilføj:
#Accordion1 {
   float:left;
   width:200px;
   height:auto;
}

fjern width og height fra .Accordion.

Det undrer mig iøvrigt at du havde en id uden at have en deklaration
for den.

Regards Jens Peter Karlsen.


On 18 Mar 2010 06:58:25 GMT, Line Sams <line@scan-line.net> wrote:

>Jeg har lavet denne hjemmeside for mit arbejde. Den er lavet i
>Dreamweaver CS4. Jeg har forsøgt mig med CSS mest, men har
>problemer med, at menuen (en Spry Accordion) ikke vises ens i
>bl.a. explorer 8 og explorer 7, hvor menuen hopper over i højre
>side. Jeg ved ikke, hvad jeg skal gøre ved dette, eller hvordan
>jeg tester det i andre browsere. Fx kan jeg også se nogle fejl i
>Safari hjemmefra, men ikke i Safari her på job.

---

Line Sams wrote in dk.edb.internet.webdesign.html:
> Jeg har lavet denne hjemmeside for mit arbejde. Den er lavet i
> Dreamweaver CS4. Jeg har forsøgt mig med CSS mest, men har
> problemer med, at menuen (en Spry Accordion) ikke vises ens i
> bl.a. explorer 8 og explorer 7, hvor menuen hopper over i højre
> side. Jeg ved ikke, hvad jeg skal gøre ved dette, eller hvordan
> jeg tester det i andre browsere. Fx kan jeg også se nogle fejl
i
> Safari hjemmefra, men ikke i Safari her på job.
>
> www.scan-line.net
>
> Håber I kan hjælpe.
>
> Vh Line
>

Hej Line

Det er en velkendt problem at den ikke vises ens i 7 og 8
hvis du indsætter nedenstående så skulle den vises ens
<meta http-equiv="X-UA-Compatible" content="IE=8" />
Ellers ingen fejl at finde.

Mvh.

Kim

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Det vil jo ikke løse hans problem.

Regards Jens Peter Karlsen.

On 19 Mar 2010 16:34:11 GMT, Kim Schmidt Wind <oz1juxXXX@mail.tele.dk>
wrote:

>Det er en velkendt problem at den ikke vises ens i 7 og 8
>hvis du indsætter nedenstående så skulle den vises ens
><meta http-equiv="X-UA-Compatible" content="IE=8" />

---

Line Sams skrev:
> Jeg har lavet denne hjemmeside for mit arbejde. Den er lavet i
> Dreamweaver CS4. Jeg har forsøgt mig med CSS mest, men har
> problemer med, at menuen (en Spry Accordion) ikke vises ens i
> bl.a. explorer 8 og explorer 7, hvor menuen hopper over i højre
> side. Jeg ved ikke, hvad jeg skal gøre ved dette, eller hvordan
> jeg tester det i andre browsere. Fx kan jeg også se nogle fejl i
> Safari hjemmefra, men ikke i Safari her på job.
>
> www.scan-line.net
>

Den fejl kan jeg ikke se i hverken Firefox, IE7 eller IE8.
Jeg kan heller ikke se at din menu er en "Spry Accordion"
hvad det nu end er. Din menu er en en simpel flad menu,
konstrueret på en højest umoderne måde.

Det umoderne gælder også din webside: Du blander
tabellayout med div'er. Det skal man være en ganske
websidekonstruktør for at slippe heldigt af sted med.

Der er følgende galt med din webside:
1) Du har en vandret rulleskakt i et 1024 gange 768 pixel
browservindue.
2) Du har en umanerlig stor afstand fra indholdet og ned til
sidefoden.
3) Du har et image map uden tilkendegivelse af,
at der er hotspots på siden.
4) Dit indhold består af et gigantisk billede uden
tekstmæssige oplysninger overhovedet.
5) Du har et stylesheet på næsten 10 kilobyte til at
formatere en side der kunne formateres med nogle få
hundrede bytes stylesheet.

Jeg ved godt at dette her ikke er ris+ros, men den
side er en dediceret ommer, uanset hvilket program
den er lavet med. Det ligner faktisk noget man kunne
lave med det forhåbentligt hedengangne GoLive. Er
du sikker på at du har læst rigtigt på pakken?

--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

---

Jørgen Farum Jensen skrev:

> Det umoderne gælder også din webside: Du
> blander tabellayout med div'er. Det skal man
> være en ganske websidekonstruktør for at slippe
> heldigt af sted med.

Det er dog kun i menuen, hvilket kan være slemt
nok

> Jeg ved godt at dette her ikke er ris+ros, men den
> side er en dediceret ommer

Det er også mit sysnpunkt - der er så mange fejl at
det er bedre at starte forfra.

--
Allan Vebel
http://vebel.dk | http://html-faq.dk

---

Hvis du kun kikkede på hoved siden kan jeg godt forstå at du ikke ser
så meget da den nævnte menu kun findes på undersiderne.
Skidt ide at linke til en side der ikke har problemet.

Regards Jens Peter Karlsen.

On Fri, 19 Mar 2010 22:47:52 +0100, Jørgen Farum Jensen
<jfjenzen@yahoo.dk> wrote:

>Den fejl kan jeg ikke se i hverken Firefox, IE7 eller IE8.
>Jeg kan heller ikke se at din menu er en "Spry Accordion"
>hvad det nu end er. Din menu er en en simpel flad menu,
>konstrueret på en højest umoderne måde.

---

Jens Peter Karlsen skrev:
> Hvis du kun kikkede på hoved siden kan jeg godt forstå at du ikke ser
> så meget da den nævnte menu kun findes på undersiderne.
> Skidt ide at linke til en side der ikke har problemet.

Allright, men efter at have set
de øvrige sider er jeg overhovedet
ikke interesseret i det specifikke
problem. Det hele er så udygtigt lavet
at jeg står fast på at det er en ommer.

Og nu i mere end konstruktionsmæssig
forstand. Informationsarkitekturen er
så indforstået at man skal være ansat
i firmaet for at begribe hvad der er hvad.

Det hele bekræfter mine fordomme om WYSIWYG
programmer. I ukyndiges hænder er de direkte
farlige.

Med venlig hilsen
Jørgen Farum Jensen
..

---

Den 20-03-2010 11:46, Jørgen Farum Jensen skrev:
> Jens Peter Karlsen skrev:
>> Hvis du kun kikkede på hoved siden kan jeg godt forstå at du ikke ser
>> så meget da den nævnte menu kun findes på undersiderne.
>> Skidt ide at linke til en side der ikke har problemet.
>
> Allright, men efter at have set
> de øvrige sider er jeg overhovedet
> ikke interesseret i det specifikke
> problem. Det hele er så udygtigt lavet
> at jeg står fast på at det er en ommer.

Jeg er eeig, for så vidt at f.eks. tekst i billeder er noget, man bare
ikke _må_ lade slippe igennem på en firmaside. Det er ikke for at rakke
ned eller noget, men det vil svare lidt til at man har en hjemmeside
fuld af stavefejl og syntaks og forståelsesfejl. Det er ikke god karma,
det ser ikke proft ud.

> Det hele bekræfter mine fordomme om WYSIWYG
> programmer. I ukyndiges hænder er de direkte
> farlige.

Det er sikkert en grafiker, som sidder bag. Det omvendte ville
formentlig også være tilfældet, hvis en koder skulle lave proft
Photoshop-arbejde ;)

Jeg ville kigge på grafikken først og fremmest, så kan koden ændres
efterfølgende.

F.eks.: http://www.scan-line.net/images/baggrund2/baggrund_web2_01_02.jpg

Den ville jeg lave som en gennemsigtig, repeterende PNG - eller
simpelthen bare som en DIV med gennemsigtighed. Det vil funke for IE7,
men ikke IE6, til gengæld er det hammer nemt at lave fallback til, og
det fylder næsten intet. Menuen bør iøvrigt ikke laves som hotspot, men
som en UL.

Samme grafik (og andre) ville jeg tage væk den blå skygge i siderne, den
er for ufleksibel at have ligeende der (hvad hvis man på et tidspunkt
vil skifte farve på skyggen?). Den skal i stedet placeres med et PNG
billede, som repeteres nedad, og det nemmeste er her at bruge to DIVer,
en til hver side (højre/venstre).

Kort sagt, split designet op i dele, som kan genbruges eller repeteres,
det er hvad man bør gøre, før man i det hele taget går i gang med at
kode. Tænk også i cashing/performance/fleksibilitet.

PS: Der er ikke udnyttet HTMLens muligheder for at give betydning til
indhold, f.eks. angive overskrifter. Kodeeksempel:

<p><img src="../images/heta_web.jpg" width="356" height="117"
alt="heta" /></p>

Dette skulle være en overskrift, men er ikke angivet som en sådan. En
blind vil måske have problemer med at forstå hvad der er hvad i teksten.
Se også:
http://runejensen.dk/tips/html/overskrifter.asp



Ellers er designet rent grafisk set ganske nydeligt, men ovenstående
problemstillinger ville jeg forholde mig til, før jeg gik i gang med at
kode det..


MVH
Rune Jensen

---

Den 20-03-2010 14:18, Rune Jensen skrev:

> Samme grafik (og andre) ville jeg tage væk den blå skygge i siderne, den
> er for ufleksibel at have ligeende der (hvad hvis man på et tidspunkt
> vil skifte farve på skyggen?)

Det er bla. denne jeg mener.

http://www.scan-line.net/images/baggrund2/baggrund_web2_01_03.jpg

Det fylder 23kb, og det giver meget fastlåst design i mere end en
forstand. Med lidt snilde, kan man godt lave de skygger i to PNGer,
måske endda én sprite*), som gentages nedad (og iøvrigt intet fylder).
Fordelene ved opsplitning er, at man så kan lave fleskibelt design i
bredden, det vil fylde mindre, og man kan ændre farven under skyggen
separat uden at skulle åbne sit billedredigeringsprogram, og uden at
skulle skele til farven på indholdsdelen. Man kan såmænd andre skyggerne
helt også uden det påvirker andet end dem.


MVH
Rune Jensen

NOTE: Sprite: Et billede som indeholder flere billeder, og som kan
skiftes imellem ved at bruge background-position. Jeg bruger det til
baggrunde, og det er lightning fast. Sparer et round-trip til serveren
for hvert ekstra billede. Kræver at de forskellige billdeder i spriten
har samme farveskema - noget man skal være klar over, men som jeg synes
skygger er oplagt til, hvis de bruges samme sted.

---

Rune Jensen skrev:

>> Det hele bekræfter mine fordomme om WYSIWYG
>> programmer. I ukyndiges hænder er de direkte
>> farlige.
>
> Det er sikkert en grafiker, som sidder bag. Det omvendte ville
> formentlig også være tilfældet, hvis en koder skulle lave proft
> Photoshop-arbejde ;)

Ja, men hvorfor skal du som en dygtig
websidekonstruktør respektere at du
ikke dermed nødvendigvis også er en
dygtig (grafisk) designer, når det
omvendte helt åbenlyst ikke er tilfældet?

--
Med venlig hilsen

Jørgen Farum Jensen
..

---

Den 20-03-2010 16:19, Jørgen Farum Jensen skrev:
> Rune Jensen skrev:
>
>>> Det hele bekræfter mine fordomme om WYSIWYG
>>> programmer. I ukyndiges hænder er de direkte
>>> farlige.
>>
>> Det er sikkert en grafiker, som sidder bag. Det omvendte ville
>> formentlig også være tilfældet, hvis en koder skulle lave proft
>> Photoshop-arbejde ;)
>
> Ja, men hvorfor skal du som en dygtig
> websidekonstruktør respektere at du
> ikke dermed nødvendigvis også er en
> dygtig (grafisk) designer, når det
> omvendte helt åbenlyst ikke er tilfældet?

Jeg tror faktisk ikke, det er noget, man tænker over, når opgaver skal
uddeles. Fordi papirdesign er langt ældre og derfor langt bedre kendt
end design til WEB, som stadig er ret nyt (på en måde). Alle går derfor
udfra hvad alle gennemsnitsligt kender bedst. Tror ikke, det har noget
at gøre med, hvem der er vigtigere som sådan, det er bare vane og vel
egentlig en slags "uforsætslig" uvidenhed.

En af de ting, som kan give et "vink" er f.esk.
søgeoptimering/tilgængelighed. Hvor f.eks. tekst i billede ikke vil give
nogetsomhelst information, og man vil miste brugere, fordi teskten ikke
er præsenteret. Modsat grafikerens arbejde, hvor dette har nærmest
direkte modsat betydning (udseendet af teksten). Dette har firmaerne
efterhånden lært på den hårde måde, og der kan komme andre ting end det,
så de til sidst anerkender, man kan ikke "bare lige" lave et design til
web uden viden om koden bag, og at der *er* forskel på webdesign og
(papir)grafisk arbejde. Men nok over tid ;)


MVH
Rune Jensen

---

Ja, men i det mindste er der lidt at starte med med mine rettelser.

Når man opbygger et site er det en god ide at starte med at tegne
hierarkiet og derefter designe siderne, hvis man gør det med bokse for
de enkelte dele er det let at oversætte til html med div.
Ved at tegne relationen mellem siderne får man dels den overordnede
navigation på plads og man får et overblik over om det virker logisk
at navigere rundt i og skal der en ny side på senere ser man let hvor
i hirarkiet den skal placeres.

Det ved du selvfølgelig godt, det er mere en generel betragtning til
hjælp for OP og andre der gør sig overvejelser om at starte et site.

Regards Jens Peter Karlsen.

On Sat, 20 Mar 2010 11:46:12 +0100, Jørgen Farum Jensen
<jfjenzen@yahoo.dk> wrote:

>Allright, men efter at have set
>de øvrige sider er jeg overhovedet
>ikke interesseret i det specifikke
>problem. Det hele er så udygtigt lavet
>at jeg står fast på at det er en ommer.

---

Jeg takker for alle svarerne, der er læst med stor grundighed og
kun bekræfter mig i, at jeg har meget at lære, hvilket jeg vil
gøre. Og ja, jeg er grafisk designer ;) samt nybegynder i html og
css.

Vh Line

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Den 22-03-2010 07:47, Line Sams skrev:
> Jeg takker for alle svarerne, der er læst med stor grundighed og
> kun bekræfter mig i, at jeg har meget at lære, hvilket jeg vil
> gøre. Og ja, jeg er grafisk designer ;) samt nybegynder i html og
> css.

Hej, Line,

For du (og andre) nu ikke skal tro, vi er "nogle hårde hunde", så har
jeg bakset lidt med en slags tutorial, hvor jeg gennemgår de ting, man
skal vide, når man designer til web, og jeg bruger dit arbejde som
grundlag for dette - håber ikke du har noget imod det. Den kan måske
også hjælpe andre i samme situation som dig.

Jeg håndkoder mine sider, men grundlæggende er det de samme ting, man
skal tage højde for, om det er håndkodning eller WYSIWYG.

Først, så har du jo teksten klar, så her er der ingen ben. Derudover, så
kan din side bruges som udkast til den endelige sides layout, så man kan
se hvordan det er tænkt at se ud, det er der ikke noget galt i. Vi deler
det herefter op i to halvdele, som dog vil overlappe hinanden på et
tidspunkt:

1. Det grafiske arbejde samt layoutet
2. Selve (tekst)indholdet og tilhørende mark-up

Første del - grafikken:

Der skal grundlæggende bruges 3 stykker grafik. A) Logo, B) skygger
(sprite) og C) menubaggrund.

A) Der skal bruges et logobillede. Hvis det skal kunne klikkes på, får
det betydning, hvorfor det skal (bør, man kan nogle gange "snyde")
lægges i en <img>, ellers skal det lægges som baggrundsbillede. Dette er
nogle gange godt at vide, inden man designer - her vil jeg dog bruge det
som baggrundsbillede. Skyggerne i siderne er fjernet:

http://www.webdesigngruppen.dk/temp/sl/logo_scan_line_baggrund.jpg

Læg mærke til den grå farve til højre i billedet - dette kan udnyttes
senere til at gøre designet fleksibelt i bredden, som virkelig er en
force ved design til web, mere evt. senere, hvis jeg får tid - ellers
kan du spørge.

B) Skyggerne i siderne har jeg lavet selvstændigt og lagt her:

http://www.webdesigngruppen.dk/temp/sl/side_skygger_scan_line_baggrund.png

Det er en såkaldt "sprite", hvilket vil sige, det er flere billeder i
ét, og som virkelig kan bruges til optimering af både hastighed og
størrelse - det fylder ikke engang 1kb. Her er det dog brugt mere
simpelt med kun to billeder i ét.

Med sprites skal man være opmærksom på, om billederne skal kunne
gentages og i hvilken retning, det har betydning for, hvor i spriten de
skal placeres. Skyggerne skal gentages nedefter, derfor plejer jeg at
placere dem i hver sin side af en sprite vandret, og ingen billeder
eller white-space over eller under.

Derudover skal man være opmærksom på, at billederne skal have samme
farveskema, så de skal helst bruges i samme "varme". Det bliver de også
her, hvor de bruges i hver sin side og har ens "udseende".

De er lagt som graderende gennemsigtig PNG, så man kan ændre baggrund
uden at ændre billedet selv. Skygger er ikke betydningsbærende (giver
ikke mening, hvis de bliver læst op), derfor skal de lægges som
baggrundsbilleder (vigtigt når man skal kode det). Sprites virker
allerbedst til baggundsbilleder iøvrigt.

NOTE: PNG forstås ikke fuldstændigt af IE6 - vil man have denne browser
med, skal der laves yderligere et stykke grafik evt. en JPG. Så kan man
ikke uden videre ændre baggrunden.

NOTE2: Yahoo! bruger intensivt sprites, se her:
http://d.yimg.com/a/i/ww/met/pa_icons/us_pa_sprite_063009.png

....som er for deres menu med grafik til venstre på hovedsiden. De har
"fusket" og opskaleret billederne i koden for at spare plads, men det
virker.

C) Den halvvejs gennemsigtige menubaggrund vil jeg udfra umiddelbar
vurdering forsøge at lave med CSS, når selve koden skal laves, fordi CSS
ikke fylder særligt meget, og det er ret fleksibelt (og så er jeg også
doven). Hvis dette ikke funker (IE giver nok problemer), skal der laves
et stykke PNG-grafik mere til dette, men det er ikke et stort problem,
da mit udgangspunkt her er, det bare skal være ensartet gennemsigtigt,
så det gør jeg ikke endnu.

Version 2 af den grafiske-layout tutorial to come...


MVH
Rune Jensen

---

Den 22-03-2010 15:52, Rune Jensen skrev:

> Version 2 af den grafiske-layout tutorial to come...

Så skal der lige fortælles lidt om, hvordan man lægger de skygger på.

Men først lige noget om kodedisciplin.

Jeg har følgende regler, når jeg koder, for det er nemt at se, hvor hvad
hører til:

1: Jeg kommenterer altiid min kode. Dette gøres i HTML med <!-- og -->
som start og slut

2. Det er vigtigt, at man kan se prioriteringen af ens inddeling med
DIVer. derfor laver jeg indrykning, når en DIV eller andet element
ligger inde i en anden. <html>, <head> og <body> er standardelementer,
dem rykker jeg ikke ind.

3. Nu håndkoder jeg, derfcr laver jeg også CSSen selv. Jeg starter altid
med inline CSS, så jeg kan se, hvor det hører til. dette rykker jeg
siden i selvstændig fil.


Nu til det med skyggerne

http://www.webdesigngruppen.dk/temp/sl/fra_grafik_til_layout_1a.asp

DIV-inddelingen har jeg gjort visuel ved at lægge borders på.

For nemheds skyld, så har jeg valgt skygger, som repeteres hele vejen
ned igennem designet. Hvis du vil have forskellige skygger, skal
designet opdeles yderligere.

Den røde border: Denne DIV omhegner hele designet, og den tegner venstre
skygge.

forklaring til inline style:

padding: 0; // jeg sætter alt indvendig padding til 0

padding-left: 10px; // her sætter jeg hvor meget plads der skal være til
skyggen fra venstre side af DIVen

margin: 0; // Der skal ikke være noget mellemrum udenom DIVen

background-image: url( side_skygger_scan_line_baggrund.png) // henter
hele billeder fra spriten som baggrundsbillede

background-position: left top // denne er lidt spciel. Her fortæller vi
hvor i spriten vi vil have billedet vist fra. Da venstre skygge ligger
helt til venstre i spriten, bruges position left. Top har ikke noget at
sige her, da billedet repeteres, men det er med for syns skyld. Med
padding på DIVen på 10, vil vi altså få vist 10px i bredden taget fra
venstre side af spriten.

background-repeat: repeat-y // Billedet skal repeteres nedefter

Den stiplede gule border er der om to DIVewr, fordi de begge ligger
umiddelbart inde i den røde DIV. De DIVer er også rykket ind i koden.

Den første indeholder selve logoet/headeren, og billedet sættes som
baggrundsbillede. Da bredden af billedet allerede er sat af den
omgivende DIV, behøver vi ikke sætte den, men højden af DIVen skal
sættes til højden af billedet. No-repeat betyder, at billedet ikke skal
repeteres.

IndholdsDIVen: Her begynder for første gang noget rigtig HTML. <h1>
angiver en overskrift. <p> angiver teksten som hører til overskriften,
ligesom en artikel i en avis.

Skyggen "skinner igennem" indholdsDIVen fordi der ikke er sat en
baggrundsfarve på indholdsDIVen. Men det er nemt at se de 10px, som er
gjort plads til.

Og her er det uden border:

http://www.webdesigngruppen.dk/temp/sl/fra_grafik_til_layout_1b.asp

--> More...


MVH
Rune Jensen

---

Den 22-03-2010 16:24, Rune Jensen skrev:

> --> More...

.... Så skal der en skygge på i højre side også, og her følges samme
fremgangmåde som med venstres skygge.

Der lægges en omkransende DIV om hele designet, som igen får sit
baggrundsbiillede fra spriten.

Forskellen er her, at denne DIV skal der lægges plads til billedet i
dens højre side (padding-right), og fra spriten skal med
background-position tages fra højre side også (background-position: right)

http://www.webdesigngruppen.dk/temp/sl/fra_grafik_til_layout_2.asp

Da der er kommet en ny omkransende DIV, er der iøvrigt foretaget
indrykninger i koden også, så det er overskueligt.

Det er ikke kønt som det er (jeg er jo ikke grafiker ;) ), men det
viser, hvordan man kan gøre det. Og uden at spilde unødigt plads,
samtidig med det er flesibelt.

Her har jeg ændret baggrundsfarven på body til en hidsig gul kulør, så
man kan se, at den faktisk skinner igennem på skyggerne.

http://www.webdesigngruppen.dk/temp/sl/fra_grafik_til_layout_2_b.asp


MVH
Rune Jensen

---

Den 22-03-2010 17:33, Rune Jensen skrev:

> MVH
> Rune Jensen

Nu har det så fået mere "kant".

http://www.webdesigngruppen.dk/temp/sl/fra_grafik_til_layout_3.asp

Først og fremmest, så har jeg givet indholdsDIVen noget indre padding,
så overskrift og tekst ikke står ude i siden. Der er også sat
baggrundsfarve til white på denne DIV.

Den yderste DIV har jeg centreret ved at angive, at margin højre og
venstre skal være auto. Dette har jeg brugt en short-cut til:

margin: 0 auto 0 auto;

Når man gør dette, fortæller man at margin skal sættes fra toppen og med
uret. Altså:

Margin-top er 0

Margin-right er auto

margin-bottom er 0

margin-left er auto

Desuden, så har jeg givet mindre plads til skyggerne, da jeg synes de
fyldte lidt vel rigeligt. Dette er gjort vha. mindre padding til
skyggeDIVerne, som er sat ned fra 10px til 7px. Det er en fordel ved
denne måde at designe på, det er meget fleksibelt.

Med hensyn til indholdet, så har jeg via body sat hele sidens tekst-type
til Arial.

Overskriften, den er speciel fordi det er et billede, dels ren tekst.
Dette vil blinde ikke få meget ud af (selv om man kan hjælpe på vej med
en alt-tekst), men jeg har brugt et gammelt trick med at skrive
overskriften med alm. tekst, som jeg så rykker hulens langt imod venstre
ud af browseren viewport med text-indent.

Videre, så er billedet lagt ind i overskrift-tagget H1 som et
baggrundsbillede, og H1 har fået højde og bredde efter billedet via en
style. Dette bevirker, at billedet ikke vil blive downloadet på f.eks.
mobiler, som ikke har godt af for mange billeder (det koster penge at
downloade dem). I stedet får man teksten både som mobilbruger og hvis
man bruger skærmlæser.

Ovenstående "hack" vil man iøvrigt ikke behøve med CSS3, da der kommer
en sådan alternativ mulighed, hvis man vil bruge billeder i overskrifter.

En footer har jeg plugget på, der er ikke så meget at sige om den.


Menuen mangler så...


MVH
Rune Jensen

---

Den 22-03-2010 19:02, Rune Jensen skrev:

> Menuen mangler så...

....og den dér cool gennemsigtige effekt.

Men før jeg går i gang med den, skal der lige laves et testforsøg:

http://www.webdesigngruppen.dk/temp/sl/fra_grafik_til_layout_4.asp

Vi lægger mærke til, at det som ventet ikke virker i IE, det vender jeg
tilbage til.

Jeg har her gjort det, at jeg har indlagt en DIV i header-DIVen, som
skal indeholde menuen.

Fordi jeg ikke ved, om headerDIVen skal bevare sin størrelse altid, har
Jeg gjort dette:

Header-DIVen har jeg givet en position: relative, og ingen
placeringsangivelse, sådan at den beholder sin plads. MenueDIVen indeni
HeaderDIVen placerer jeg absolut.

Det betyder, at menuDIVen kan placeres absolut til HeaderDIven. Jeg har
placeret menuDIVen i bunden af HeaderDIven med bottom: 0. Derefter har
jeg givet den en Z-index, for at være sikker på, at den ikke skjules. Nu
vil menuDIVen altid ligge i bunden af headerDIVen.

Jeg har ikke lavet menuen her, kun indsat rn tekst. For problemet med
IE, som ikke kan vise den cool effekt, skal lige løses først. Her laver
jeg en gennemsigtig PNG i billedbehandlingsprogrammet, som så bliver
brugt til at lave den gennemsigtighed.

Jeg har brugt RGB 240,240,240 og en opacity på 40 (ca.):

http://www.webdesigngruppen.dk/temp/sl/gennemsigtig_repeat.png

Så indsætter jeg den PNG som repeaterende baggrundsbillde på menuDIVen,
og det kan ses i IE også - dog ikke IE6 (jeg gider ikke rigtigt rode med
GIFfer for den, men man kan godt). Men dette at vi bruger billeder til
gennemsigtigthed betyder ogå, at hvis vi vil ændre grundlæggende på
gennemsigtigheden, kan vi ikke gøre det med CSS, det skal gøres i
billedbehandligsprogrammet.

http://www.webdesigngruppen.dk/temp/sl/fra_grafik_til_layout_5.asp

Mere...


MVH
Rune Jensen