---

Hej,

På denne side:
http://infoscape.dk/hjaelp/infoscape1.html

står midterboksen (indhold1) forskelligt afhængig af browser og
opløsning. Det skal se ud som det gør i Mozilla, så altså det
hele står side om side.

Jeg kan regne ud, at det er de forskellige browsere der tolker en
bestemt egenskab forkert, men hvilken egenskab er det så?

Jeg har prøvet med en width:xx,x men da mozilla ikke
understøtter, halve procenter, er jeg lige vidt. Hvad gør jeg -
hvilken metode er bedst egnet til mit problem. Måske et hack, så
Mozilla kan køre med på halve procenter?

Mvh. Stefan.

--
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

---

Stefan Køberl wrote:
> Hej,
>
> På denne side:
> http://infoscape.dk/hjaelp/infoscape1.html
>
> står midterboksen (indhold1) forskelligt afhængig af browser og
> opløsning. Det skal se ud som det gør i Mozilla, så altså det
> hele står side om side.

Det gør det da heller ikke i (min 1.5) Firefox, der skulle rendre siden på
samme måde som Mozilla. Faktisk ser det kikset ud i alle browsere:

Er browservinduet smallere end 1024px, er topboksen ikke
centreret vandret.

Den mørkeblå boks med topteksten 'Velkommen' står og
blafrer 127px til højre for den grå boks med menuen.

Du skal starte med at lave en ydre boks, som du centrerer vandret i
browservinduet:

http://hjemmesideskolen.dk/html/flyd.asp?id=fpx

I den boks indsætter du så de to bokse i toppen ved siden af hinanden med
float:

http://hjemmesideskolen.dk/html/float.asp?id=flmenu

Indsæt så - stadig i den ydre boks - den første grå bjælke med clear,
svarende til min metode til placering af footer på omtalte side om float.

Fortsæt så - stadig i den ydre boks - med at indsætte menuen og den mørkeblå
boks side om side med float.

Videre - stadig i den ydre boks - med den anden grå bjælke på samme måde som
den første.

Slut af - stadig i den ydre boks - med at indsætte de to nederste bokse side
om side med float.

> Jeg har prøvet med en width:xx,x men da mozilla ikke
> understøtter, halve procenter,

Den er ny for mig. Men måske det er nyt for dig, at du skal bruge punktum og
ikke komma som decimaladskiller?

width: 55.5%;

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk

---

> Den mørkeblå boks med topteksten 'Velkommen' står og
> blafrer 127px til højre for den grå boks med menuen.

Ja, også den boks jeg taler om.

> Du skal starte med at lave en ydre boks, som du centrerer vandret i
> browservinduet:

Ok, har jeg gjort, dog ikke helt på samme måde som i artiklen.

> Slut af - stadig i den ydre boks - med at indsætte de to nederste bokse side
> om side med float.

Jeg prøver.

> Den er ny for mig. Men måske det er nyt for dig, at du skal bruge punktum og
> ikke komma som decimaladskiller?

Tastfejl ;)

--
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

---

Hvordan vil du angive fast højde på #indhold(1)?

IE køre stadig ikke med på fast højde her.

Du kan se hvordan det ser ud her:
http://infoscape.dk/hjaelp/infoscape2.html



--
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

---

Stefan Køberl wrote:
> Hvordan vil du angive fast højde på #indhold(1)?

Jeg ville lægge en fælles div om de to bokse, gøre baggrunden i denne div
blå og indlæse et baggrundsbillede, som har samme bredde og farve som menuen
og højden 1px:

#faellesmidterboks {
color: #fff; /* hensyn til den mørke baggrund */
background: #00f url(bg.gif) top left repeat-y;
}

Derefter vil jeg fjerne baggrundsfarven (og tekstfarve) i de to bokse. Så er
det mængden af indhold i den længste af de to bokse, der bestemmer hvor
langt ned den blå og den mørkegrå farve kommer.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk

---

> Jeg ville lægge en fælles div om de to bokse

Hvilke to bokse snakker du om?

Lægger man div omkring indhold1, venstre og kolonne er det tre bokse. Dér vil
menuen forhindre background-color i at trække til bunden..

Lægger man div omkring de *to menuer*, #venstre og "kolonne, vil det da heller
ikke lykkes, da der ikke er nogen fast bredde på #fællesboksen.

Mvh. Stefan

--
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

---

Stefan Køberl wrote:

> Hvilke to bokse snakker du om?

Du får min forklaring fra første indlæg igen - med den tilføjede ekstra
boks:
_______________

Boks 1
Du skal starte med at lave en ydre boks, som du centrerer vandret i
browservinduet:

http://hjemmesideskolen.dk/html/flyd.asp?id=fpx

Boks 2 + 3
I den boks indsætter du så de to bokse i toppen ved siden af hinanden med
float:

http://hjemmesideskolen.dk/html/float.asp?id=flmenu

Boks 4
Indsæt så - stadig i den ydre boks - den første grå bjælke med clear,
svarende til min metode til placering af footer på omtalte side om float.

Boks 5
Fortsæt så - stadig i den ydre boks - med at lave en fælles boks til at
indeholde menuen og den mørkeblå boks.

Boks 6 + 7
Indsæt i denne indre fælles boks menuen og den mørkeblå boks side om
side med float.

Boks 8
Videre - stadig i den ydre boks og efter den fælles boks med menuen og
den mørkeblå boks - med den anden grå bjælke på samme måde som
den første.

Boks 8 + 10
Slut af - stadig i den ydre boks - med at indsætte de to nederste bokse side
om side med float.
_______________

Menuen og den mørkeblå boks (5 + 6) fjerner du baggrundsfarven fra. I stedet
gør du baggrundsfarven i den fællesboks (4), som menuen og den mørkeblå boks
befinder sig i, mørkeblå og med en gif i menuens bredde indsat med repeat-y.

<div id="et>
<div id="to"></div><div id="tre"></div>
<div id="fire"></div>
<div id="fem">
div id="seks"></div><div id="syv"></div>
</div>
<div id="otte"></div>
<div id="ni"></div><div id="ti"></div>
</div>

#to, #seks, #ni {
float: left;
width: 160px;
}
#fire {
color: #fff; /* hensyn til den mørke baggrund */
background: #00f url(bg.gif) top left repeat-y;
}

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk

---

Erik Ginnerskov wrote:

> <div id="et>
> <div id="to"></div><div id="tre"></div>
> <div id="fire"></div>
> <div id="fem">
> div id="seks"></div><div id="syv"></div>
> </div>
> <div id="otte"></div>
> <div id="ni"></div><div id="ti"></div>
> </div>
>
> #to, #seks, #ni {
> float: left;
> width: 160px;
> }
> #fire {
> color: #fff; /* hensyn til den mørke baggrund */
> background: #00f url(bg.gif) top left repeat-y;
> }

Ups, en lille smutter i css. Skal være sådan:

#to, #seks, #ni {
float: left;
width: 160px;
}
#fem {
color: #fff; /* hensyn til den mørke baggrund */
background: #00f url(bg.gif) top left repeat-y;
}

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk

---

Tak for din tålmodighed. Jeg har gjort nøjagtigt som du beskriver, også inden
dette indlæg. Måske er der en smutter et sted:

http://www.infoscape.dk/hjaelp/infoscape3.html

> Boks 2 + 3
> I den boks indsætter du så de to bokse i toppen ved siden af hinanden med
> float:

Der er kun 1 boks med et billede, der viser to bokse.

Menuen har af en eller anden grund også to ens div'er at ligge i. Kan jeg rette
senere, bare så du er opmærksom på det.

--

Jeg ved ikke om der er en misforståelse et sted, siden har set sådan ud et godt
stykke tid, nøjagtigt som du beskriver det.

Mvh. Stefan

--
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

---

Hvad er så den bedste løsning til en sådan opstilling/opdeling af min
hjemmeside?

God weekend :)

--
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

---

Stefan Køberl wrote:

>> Boks 2 + 3
>> I den boks indsætter du så de to bokse i toppen ved siden af
>> hinanden med float:
>
> Der er kun 1 boks med et billede, der viser to bokse.

Jeg har nu kigget nærmere på din kode og har fået det til at virke:

http://hjemmesideskolen.dk/usenet/infoscape3.html

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk

---

> Jeg har nu kigget nærmere på din kode og har fået det til at virke:

TAK! Mange tak :)

Mvh. Stefan

--
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

---

Hvad var egentlig problemet?

Jeg har også fundet ud af, at min svage side indenfor design af websites
er, at jeg ikke har så meget viden indenfor, hvilke elementer der er
understøttet af hvilke browsere. Foreksempel vidste jeg ikke inden jeg
gik i gang, at IE ikke ville acceptere fast højde.

Har i eventuelt en side et sted, så det er en smule lettere og mere
overskueligt at designe hjemmesider. (Se hvilke browsere der understøtter
hvilke declarationer mv.)

Mvh. Stefan Køberl

--
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

---

Stefan Køberl wrote:
> Hvad var egentlig problemet?

Jeg fandt egentlig ikke ud af, hvorfor det drillede i første omgang. Men i
og med at den øverste og nederste del af siden ikke var to sidestillede
bokse, kunne den fælles mellemboks i midterfeltet undværes og jeg satte i
stedet baggrundsfarven og menubaggrundsbilledet på #page. Desuden slog jeg
de to bokse i venstre side af midterfeltet sammen til en lang.

> Foreksempel vidste
> jeg ikke inden jeg gik i gang, at IE ikke ville acceptere fast højde.

IE - og især versionerne før 7.x har mange småfejl og forståelsesproblemer i
forhold til css, selv om css2-standarden er adskillige år gammel. Men de
fleste af disse problemer er der efterhånden blevet udviklet løsninger på.
Man skal bare kende dem.

Men generelt kan man komme ret langt alene ved at anvende en DocumentType,
som vil sætte IE <7 i standards-mode og ved at bruge Firefox som monitor,
mens man udvikler. Der er er så sædvanligvis meget lidt, som kræver særlig
opmærksomhed af hensyn til IE.

> Har i eventuelt en side et sted, så det er en smule lettere og mere
> overskueligt at designe hjemmesider. (Se hvilke browsere der
> understøtter hvilke declarationer mv.)

Sort set kan du regne med, at (på Windows-platformen) Firefox, Mozilla,
K-Meleon og Opera forstår moderne html og css. IE7 er kommet meget tættere
på det ideelle, sammenlignet med IE6 og ældre.

Jeg har ingen erfaringer desangående med Mac, OS/2 eller Linux.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk

---

> Jeg fandt egentlig ikke ud af, hvorfor det drillede i første omgang.

Ok :)

> Men generelt kan man komme ret langt alene ved at anvende en
> documentType,
> som vil sætte IE <7 i standards-mode og ved at bruge Firefox som monitor,
> mens man udvikler. Der er er så sædvanligvis meget lidt, som kræver særlig
> opmærksomhed af hensyn til IE.

Ok, tak.

Og mange tak for din hurtige hjælp.

Mvh. Stefan Køberl

--
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

---

Stefan Køberl skrev:

> Har i eventuelt en side et sted, så det er en smule lettere og mere
> overskueligt at designe hjemmesider. (Se hvilke browsere der understøtter
> hvilke declarationer mv.)

http://css-discuss.incutio.com/?page=FrontPage

--

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

---

> http://css-discuss.incutio.com/?page=FrontPage

Tak.

--
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

---

Erik Ginnerskov skrev:

> Det gør det da heller ikke i (min 1.5) Firefox

Min Firefox hedder 2.0.0.1, har du ikke opgraderet?

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

---

> Min Firefox hedder 2.0.0.1, har du ikke opgraderet?

Det gør min også. Men så sidder der jo folk med ældre versioner,
og uanset, bliver jeg jo nødt til at designe mine sider med
henblik på disse ældre versioner.



--
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

---

Allan Vebel wrote:

> Min Firefox hedder 2.0.0.1, har du ikke opgraderet?

Det havde jeg ikke fået gjort. Det er der nu rådet bod på.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk