---

Hej Alle!

Jeg håber der er en derude der kender lidt til CSS (/CSS2) og
layout med dette.

Mit store problem er at indholdet på mine sider ikke har helt den
samme mængde tekst, det vil sige at jeg ikke kan have en fast
højde på designet.

Her er et lille håndtegnet billede af hvad jeg gerne vil ende med
at have (.jpg-fil):
http://help.toppenafverden.dk/layout.jpg

Forklaring
1: Fast bredde, variabel højde
2: Fast bredde, variabel højde der følges med felt 3
3: Fast bredde, variabel højde der følges med felt 2
4: Samme bredde som felt 2, variabel højde der følges med felt 5
5: Samme bredde som felt 3, variabel højde der følges med felt 4
2+3 og 4+5: Skal være lige så brede som felt 1

Mellem alle felter skal der være et fast mellemrum.

Jeg håber denne forklaring giver mening, ellers synes jeg det er
godt forklaret på billedet.

Indtil videre er jeg nået så langt med koden (.txt-fil):
http://help.toppenafverden.dk/kode01.txt

Det giver følgende resultat:
http://help.toppenafverden.dk/html01.html

Jeg håber der er en flink sjæl der kan give mig noget
vejledning…

Mvh
eShA

PS. Det er ca. 5 år siden jeg har postet i en nyhedgruppe, så jeg
håber ikke jeg har overtrådt nogle skrevne eller uskrevne regler


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

---

Esben Hansen wrote:
> Hej Alle!
>
> Jeg håber der er en derude der kender lidt til CSS (/CSS2) og
> layout med dette.
>
> Mit store problem er at indholdet på mine sider ikke har helt den
> samme mængde tekst, det vil sige at jeg ikke kan have en fast
> højde på designet.
>
> Her er et lille håndtegnet billede af hvad jeg gerne vil ende med
> at have (.jpg-fil):
> http://help.toppenafverden.dk/layout.jpg
>
> Forklaring
> 1: Fast bredde, variabel højde
> 2: Fast bredde, variabel højde der følges med felt 3
> 3: Fast bredde, variabel højde der følges med felt 2
> 4: Samme bredde som felt 2, variabel højde der følges med felt 5
> 5: Samme bredde som felt 3, variabel højde der følges med felt 4
> 2+3 og 4+5: Skal være lige så brede som felt 1
>

Eller sagt på en anden måde:

Felt 2 og 3 skal altid være lige høje, uanset
hvilket af felterne der har mest indhold;

Felt 4 og 5 skal altid være lige høje, uanset
hvilket af felterne der har mest indhold?

Bredden er sjældent et problem. Den kan du definere
som et antal pixel, procenter eller em'er.

Højden af felterne indretter sig som bekendt efter
indholdet. Det du skal sørge for er selvfølgelig at
4 og 5 skubbes lige meget ned, uanset om 2 eller 3
er det højeste felt.

Hvis ikke du insisterer på de rammekanter rundt om
de enkelte felter kan du sikkert finde en opskrift
blandt de 20-30 stykker, der findes her:

http://www.webdesign101.dk/csslayout/oversigt.php

Måske er

http://www.webdesign101.dk/csslayout/ex/float_8.html

et godt sted at starte.

--

Med venlig hilsen

Jørgen Farum Jensen
http://www.webdesign101.dk
..

---

Jørgen Farum Jensen wrote in dk.edb.internet.webdesign.html:
> Esben Hansen wrote:
> > Hej Alle!
> >
> > Jeg håber der er en derude der kender lidt til CSS (/CSS2) og
> > layout med dette.
> >
> > Mit store problem er at indholdet på mine sider ikke har helt den
> > samme mængde tekst, det vil sige at jeg ikke kan have en fast
> > højde på designet.
> >
> > Her er et lille håndtegnet billede af hvad jeg gerne vil ende med
> > at have (.jpg-fil):
> > http://help.toppenafverden.dk/layout.jpg
> >
> > Forklaring
> > 1: Fast bredde, variabel højde
> > 2: Fast bredde, variabel højde der følges med felt 3
> > 3: Fast bredde, variabel højde der følges med felt 2
> > 4: Samme bredde som felt 2, variabel højde der følges med felt 5
> > 5: Samme bredde som felt 3, variabel højde der følges med felt 4
> > 2+3 og 4+5: Skal være lige så brede som felt 1
> >
>
> Eller sagt på en anden måde:
>
> Felt 2 og 3 skal altid være lige høje, uanset
> hvilket af felterne der har mest indhold;
Ja.
>
> Felt 4 og 5 skal altid være lige høje, uanset
> hvilket af felterne der har mest indhold?
Ja.
>
> Bredden er sjældent et problem. Den kan du definere
> som et antal pixel, procenter eller em'er.
>
> Højden af felterne indretter sig som bekendt efter
> indholdet. Det du skal sørge for er selvfølgelig at
> 4 og 5 skubbes lige meget ned, uanset om 2 eller 3
> er det højeste felt.
>
> Hvis ikke du insisterer på de rammekanter rundt om
> de enkelte felter kan du sikkert finde en opskrift
> blandt de 20-30 stykker, der findes her:
Det er netop det jeg rigtig gerne vil have til at lykkes. De eksempler
har jeg haft kigget på, men det er ikke lykkedes mig at få dem
tilpasset til det jeg skal bruge.

Så jeg håbede på en venlig sjæl, med evnerne i orden der kan vise mig
"løsningen"?
>
> http://www.webdesign101.dk/csslayout/oversigt.php
>
> Måske er
>
> http://www.webdesign101.dk/csslayout/ex/float_8.html
>
> et godt sted at starte.
>
> --
>
> Med venlig hilsen
>
> Jørgen Farum Jensen
> http://www.webdesign101.dk
> ..


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

---

Esben Hansen wrote:
> Hej Alle!
>
> Jeg håber der er en derude der kender lidt til CSS (/CSS2) og
> layout med dette.
>
> Mit store problem er at indholdet på mine sider ikke har helt den
> samme mængde tekst, det vil sige at jeg ikke kan have en fast
> højde på designet.

> Forklaring
> 1: Fast bredde, variabel højde
> 2: Fast bredde, variabel højde der følges med felt 3
> 3: Fast bredde, variabel højde der følges med felt 2
> 4: Samme bredde som felt 2, variabel højde der følges med felt 5
> 5: Samme bredde som felt 3, variabel højde der følges med felt 4
> 2+3 og 4+5: Skal være lige så brede som felt 1

Hvis du putter boks 2 og 3 ind i en fælles div, kan du floate 2 left og give
3 en margin-left svarende til bredden på 2 + det ønskede mellemrum.

Derefter pakker du 4 og 5 ind på samme måde. Den div, der indeholder 4 og 5,
giver du et clear:both, så den lægger sig under den længste af 2 og 3.

Se her, hvordan du burger float:

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

Brug af clear er forklaret her:

http://hjemmesideskolen.dk/html/testsider/float.asp#cle

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

---

"Erik Ginnerskov" <erik@donotspammmeplease.invalid> skrev i en meddelelse
news:4446a0e7$0$15787$14726298@news.sunsite.dk...

> Hvis du putter boks 2 og 3 ind i en fælles div, kan du floate 2 left og
> give
> 3 en margin-left svarende til bredden på 2 + det ønskede mellemrum.
>
> Derefter pakker du 4 og 5 ind på samme måde. Den div, der indeholder 4 og
> 5,
> giver du et clear:both, så den lægger sig under den længste af 2 og 3.

Ja det er forholdsvis simpelt hvis man forudsætter der hverken skal border
eller baggrundsfarve på 2,3,4 og 5. Bliver meget sjovere hvis der skal


--
Med venlig hilsen - Carsten Sørensen

Gode råd til webdesigneren - http://csnet.dk/html/
Nørholm Forsamlingshus - http://forshus.dk

---

CS wrote in dk.edb.internet.webdesign.html:
> "Erik Ginnerskov" <erik@donotspammmeplease.invalid> skrev i en meddelelse
> news:4446a0e7$0$15787$14726298@news.sunsite.dk...
>
> > Hvis du putter boks 2 og 3 ind i en fælles div, kan du floate 2 left og
> > give
> > 3 en margin-left svarende til bredden på 2 + det ønskede mellemrum.
> >
> > Derefter pakker du 4 og 5 ind på samme måde. Den div, der indeholder 4 og
> > 5,
> > giver du et clear:both, så den lægger sig under den længste af 2 og 3.
>
> Ja det er forholdsvis simpelt hvis man forudsætter der hverken skal border
> eller baggrundsfarve på 2,3,4 og 5. Bliver meget sjovere hvis der skal

Og det skal jeg

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

---

Esben Hansen wrote in dk.edb.internet.webdesign.html:
> Hej Alle!
>
> Jeg håber der er en derude der kender lidt til CSS (/CSS2) og
> layout med dette.
>
> Mit store problem er at indholdet på mine sider ikke har helt den
> samme mængde tekst, det vil sige at jeg ikke kan have en fast
> højde på designet.
>
> Her er et lille håndtegnet billede af hvad jeg gerne vil ende med
> at have (.jpg-fil):
> http://help.toppenafverden.dk/layout.jpg
>
> Forklaring
> 1: Fast bredde, variabel højde
> 2: Fast bredde, variabel højde der følges med felt 3
> 3: Fast bredde, variabel højde der følges med felt 2
> 4: Samme bredde som felt 2, variabel højde der følges med felt 5
> 5: Samme bredde som felt 3, variabel højde der følges med felt 4
> 2+3 og 4+5: Skal være lige så brede som felt 1
>
> Mellem alle felter skal der være et fast mellemrum.
>
> Jeg håber denne forklaring giver mening, ellers synes jeg det er
> godt forklaret på billedet.
>
> Indtil videre er jeg nået så langt med koden (.txt-fil):
> http://help.toppenafverden.dk/kode01.txt
>
> Det giver følgende resultat:
> http://help.toppenafverden.dk/html01.html
>
> Jeg håber der er en flink sjæl der kan give mig noget
> vejledning&#8230;

Tak for al hjælpen indtil videre. Jeg svarer på mit eget indlæg for
at holde fremskridtet samlet her.

Jeg er nu nået så langt, at alt ser ud som det skal. Næsten da...

Jeg mangler nu kun at få boksene til at være lige høje. Dette er
meget vigtigt, da alle boksene skal have ensfarvet baggrund, og
selve siden en mere "farverig" baggrund.

Kode:
http://help.toppenafverden.dk/kode02.txt

Der giver dette resultat:
http://help.toppenafverden.dk/html02.html

Hvordan gør jeg dem lige høje?

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

---

Esben Hansen wrote:

> Jeg er nu nået så langt, at alt ser ud som det skal. Næsten da...
>
> Jeg mangler nu kun at få boksene til at være lige høje. Dette er
> meget vigtigt, da alle boksene skal have ensfarvet baggrund, og
> selve siden en mere "farverig" baggrund.
>
> Kode:
> http://help.toppenafverden.dk/kode02.txt
>
> Der giver dette resultat:
> http://help.toppenafverden.dk/html02.html
>
> Hvordan gør jeg dem lige høje?
>

Esben:

Du kan aldrig never ever nogensinde lave to kasser
lige høje, medmindre du vil bruge rulleskakter. Og
det er er en meget dårlig idé.

Go with the flow, og lad kassernes indhold bestemme
størrelsen, i hvert fald højden.

Det, du kan opnå, er at kasserne /ser lige højde ud/,
og det er jo noget helt andet.

Dit udgangspunkt med alle de absolut positionerede
kasser er helt ved siden af. Du skal bruge float for
at sikre at to kasser ved siden af hinanden altid holder
overkant.

Se eksemplet her:
http://www.webdesign101.dk/x/usenet/esben.html

Eksemplet bygger i det store og hele på dit
eget udkast men bemærk følgende:

Kasse 2 og 3 og kasse 4 og 5 er omsluttet
af en containerDIV.

Hvis kasse 2 og 3, hhv kasse 4 og 5 skal
se lige høje ud, skal du give hver af
disse containerDIV'er en grafisk baggrund:

#containertop {
background-image: url(topbg.png)
background-repeat:repeat-y;
}

Denne baggrund skal (i forhold til mit
eksempel) være 700 pixel bred og 10 pixel høj,
og have baggrundsfarve 2 på de 200 pixel til
venster og baggrundsfarve 3 på de 480 pixel
til højre.

Det er meget vigtigt at de to containerDIV'er
clear'es, enten på denmåde jeg har brugt,
eller på en anden åde.


--

Med venlig hilsen

Jørgen Farum Jensen
http://www.webdesign101.dk
..

---

Jørgen Farum Jensen wrote:
> Esben Hansen wrote:
>
>> Jeg er nu nået så langt, at alt ser ud som det skal. Næsten da...
>>
>> Jeg mangler nu kun at få boksene til at være lige høje. Dette er
>> meget vigtigt, da alle boksene skal have ensfarvet baggrund, og
>> selve siden en mere "farverig" baggrund.
>>
>> Kode:
>> http://help.toppenafverden.dk/kode02.txt
>>
>> Der giver dette resultat:
>> http://help.toppenafverden.dk/html02.html
>>
>> Hvordan gør jeg dem lige høje?
>>
>
> Esben:
>
> Du kan aldrig never ever nogensinde lave to kasser
> lige høje, medmindre du vil bruge rulleskakter. Og
> det er er en meget dårlig idé.
>
> Go with the flow, og lad kassernes indhold bestemme
> størrelsen, i hvert fald højden.
>
> Det, du kan opnå, er at kasserne /ser lige højde ud/,
> og det er jo noget helt andet.
>
> Dit udgangspunkt med alle de absolut positionerede
> kasser er helt ved siden af. Du skal bruge float for
> at sikre at to kasser ved siden af hinanden altid holder
> overkant.
>
> Se eksemplet her:
> http://www.webdesign101.dk/x/usenet/esben.html
>
> Eksemplet bygger i det store og hele på dit
> eget udkast men bemærk følgende:
>
> Kasse 2 og 3 og kasse 4 og 5 er omsluttet
> af en containerDIV.
>
> Hvis kasse 2 og 3, hhv kasse 4 og 5 skal
> se lige høje ud, skal du give hver af
> disse containerDIV'er en grafisk baggrund:
>
> #containertop {
> background-image: url(topbg.png)
> background-repeat:repeat-y;
> }
>
> Denne baggrund skal (i forhold til mit
> eksempel) være 700 pixel bred og 10 pixel høj,
> og have baggrundsfarve 2 på de 200 pixel til
> venster og baggrundsfarve 3 på de 480 pixel
> til højre.
>
> Det er meget vigtigt at de to containerDIV'er
> clear'es, enten på denmåde jeg har brugt,
> eller på en anden åde.

Det er vist topmålet af pixel tyrrani. Vi forlanger en perfekt verden, hvor
mennesker har perfekt syn, brugerne har samme skærmopløsning som os og
brugeren tænker lige som os. Sådan er virkeligheden ikke, webdesignere kan
foreslå, hvorledes en side kan se ud, men de kan ikke diktere det, hvis de
gør, taber de flere brugere, end kunden har råd til Det skal ikke kun se
godt ud det skal også være funktionelt for alle.

Med venlig hilsen
Johnny Winther Ronnenberg
--
Det er brugeren der bestemmer http://www.webtilgængelighed.dk (på
dansk) = http://www.webaccessibility.dk (in english) Last: revision:
http://www.webaccessibility.dk/webaccessibility/userutilities/dublincore.htm
and http://www.webtilgængelighed.dk/webaccessibility/upcomingwork.asp

---

Johnny Winther Ronnenberg wrote:

>
> Det er vist topmålet af pixel tyrrani. Vi forlanger en perfekt verden, hvor
> mennesker har perfekt syn, brugerne har samme skærmopløsning som os og
> brugeren tænker lige som os. Sådan er virkeligheden ikke, webdesignere kan
> foreslå, hvorledes en side kan se ud, men de kan ikke diktere det, hvis de
> gør, taber de flere brugere, end kunden har råd til Det skal ikke kun se
> godt ud det skal også være funktionelt for alle.
>

Styr dig lige, manner.

Manden har lavet et layout der ikke duer, og
spø'r om råd.
Så gi'r ham jeg hvad jeg synes er et godt råd,
også i henseende til tilgængelighed, nemlig et float-baseret
layout med fuldstædnig adskillelse af form og indhold.

Lad os snakke om em-bredder eller procentbredder og
rækkefølgen af elementerne i kildekoden når Esben har
fået lidt styr på grundreglerne.

Skulle jeg hellere have foreslået ham tabeller
eller frames?

Johhny - al respekt for dine ofte tankevækkende
og solide synspunkter - men en gang imellem
ku' du godt tage og gå efter bolden.

I det her tilfælde komme med et bedre forslag...

--

Med venlig hilsen

Jørgen Farum Jensen
http://www.webdesign101.dk
..

---

On 20 Apr 2006 07:17:18 GMT, Esben Hansen
<spam--intetskrald--@toppenafverden.dk> wrote:

>Jeg mangler nu kun at få boksene til at være lige høje. Dette er
>meget vigtigt, da alle boksene skal have ensfarvet baggrund, og
>selve siden en mere "farverig" baggrund.

Skal det se sådan ud:
http://wap.odp.dk/test5.php

Jeg har brugt en simpel gif, som ligger i en div rundt om boksene. Det
får de 2 kasser til at se lige høje ud.

--
Thomas Jari
http://thomas.weblogging.dk

---

Den 19-4 2006 skrev Esben Hansen i dk.edb.internet.webdesign.html:

> Her er et lille håndtegnet billede af hvad jeg gerne vil ende med
> at have (.jpg-fil):
> http://help.toppenafverden.dk/layout.jpg

Et forslag med wrappers, relative og absolute position:

<http://www.starcruiser.smorumnet.dk/usenet/boxes.html>

--
Dino

Verdens største samling af danske
script og moduler til Hamsteren
<http://starcruiser.dk/hamstersiden/>

---

Den 21-4 2006 skrev Dino i dk.edb.internet.webdesign.html:

> Et forslag med wrappers, relative og absolute position:

Hm, virker ikke helt... så her er et nyt forslag - wrappers, relative
position og float right... Så er det lige meget om det er højre eller
venstre box, der er den høje...

<http://www.starcruiser.smorumnet.dk/usenet/boxes2.html>

--
Dino

Verdens største samling af danske
script og moduler til Hamsteren
<http://starcruiser.dk/hamstersiden/>

---

Esben Hansen <spam--intetskrald--@toppenafverden.dk> skrev:
.....
>Forklaring
>1: Fast bredde, variabel højde
>2: Fast bredde, variabel højde der følges med felt 3
>3: Fast bredde, variabel højde der følges med felt 2
>4: Samme bredde som felt 2, variabel højde der følges med felt 5
>5: Samme bredde som felt 3, variabel højde der følges med felt 4
>2+3 og 4+5: Skal være lige så brede som felt 1
>
>Mellem alle felter skal der være et fast mellemrum.
.....

Brug javascript til at styre højde og top på dine felter. Sammenligt
højden på de felter som skal føljes ad og sæt højden
på det mindste lig med højden på det højeste. Se evt på
www.cross-browser.com, hvor du kan downloade et gratis js library.
I dette library er der funktioner som både kan aflæse og sætte højde.

Med HTML og CSS alene kommer man desværre ikke så langt på
hjemmesider...