---

Jeg er ved at forsøge at stable et layout på benene, men det går ikke
helt perfekt. Et ufravigeligt krav er, at layoutet ikke må baseres på
tabeller.

Forsiden til layoutet (som hovedsageligt er placering af elementer i
øjeblikket) kan ses på:

<http://www.legestue.net/testcenter/aams/>

Jeg vil gerne have have følgende:

- undgå så mange nestede div'er, fx kunne det være fint om man i #extra
bare kunne adskille nye punkter med en ny h2
- #content og #extra til at passe i bredden i browsere IE 5.5+ og så i
øvrigt Mozilla og Opera.
- #content og #extra til at stoppe på samme tid i højre side, så de
flugter med #head og #foot.
- to artikler til at stå ved siden af hinanden i #forsidefeatured, men
hele #forsidefeatuered skal stadig have en baggrundsfarve.
- have uddannelse, jobbet og ressourcer til at stå ved siden af hinanden
(og sikre at de altid kommer til at stå ved siden af hinanden (laver
man billedet mindre, skal brugeren have vertikal scroll).


Jeg vil egentlig gerne have indholdet primært på siden, så en
ønskeopbygning kunne være følgende (hvis I da ikke er uenige).

<div id="#head"></div>
<div id="search"></div>
<ul id="breadcrumb"></ul>
<div id="content"></div>
<div id="extra"></div>
<div id="forsidefeatured"></div>
<ul id="navlist"></ul>
<div id="foot"></div>

--
Lars Olesen
Vejle Idrætshøjskole <http://www.vih.dk>
Valider dine sider
<http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you>
Søg i nyhedsgrupperne
<http://http://www.google.dk/grphp?tab=wg&q=&ie=UTF-8&oe=UTF-8&hl=da&meta=>

---

Lars Olesen wrote:

> <div id="#head"></div>
> <div id="search"></div>
> <ul id="breadcrumb"></ul>
> <div id="content"></div>
> <div id="extra"></div>
> <div id="forsidefeatured"></div>
> <ul id="navlist"></ul>
> <div id="foot"></div>
>

Hvad er dit spm?

Jeg vil gerne spørge hvorfor du vil have navlisten så langt nede i
hierarkiet? Især når du præsenterer den oppe i headeren! For folk med
screenreaders etc. vil navigationen først komme et godt stykke efter alt
indholdet, det var måske mere hensigtsmæssigt at sætte den så højt som
muligt, efter min mening bør den komme lige efter headeren, du sætter jo
heller ikke en indholdfortegnelse i slutningen af et dokument, men først
så man ved hvad dokumentet/rapporten etc indeholder.

et papir dok har jo normalt strukturen: overskrift, forord,
indholdsfortegnelse, etc. ... Sluttekst.

tager man nogenlunde den samme struktur over i den digitale verden, skal
man "blot" prøve at forestille sig, at indholdsfortegnelsen egentlig er
det samme som en menu, headeren svarer til overskriften og så fremdeles.

Derfor vil jeg måske lave en struktur der hedder:

head
navlist
search
forside featured
content
extra
foot.

Men strukturen er jo heldigvis ikke den samme som præsentationen, så
hvordan du fremstiller strukturen er op til dig og jeg synes egentlig
layoutet ser nogenlunde ud, men du bruger meget plads på featured
artikle som faktisk er det primære indhold (pladsmæssigt!)og derfor bør
det nok komme før dit egentlige "content" som jo faktisk fylder mindre
end 1/4 af siden.

Nå håber det kan bruges.

Claus

---

Claus Jacobsen wrote:

> Hvad er dit spm?

Hvordan jeg får det til at se ordentligt ud. Lige nu er grundstrukturen
der, men layoutet er ikke sikkert, og de opfylder ikke de krav, jeg har
opstillet.

> et papir dok har jo normalt strukturen: overskrift, forord,
> indholdsfortegnelse, etc. ... Sluttekst.

Faktisk enig. Tror bare jeg beholder den struktur det har lige nu?

> Derfor vil jeg måske lave en struktur der hedder:
>
> head
> navlist
> search
> forside featured
> content
> extra
> foot.

Jeg vil nok have #content øverst for der kommer til at være nogle links,
som jeg gerne vil have præsenteret som det første. #forsidefeatured er
noget der kun vil være på forsiden og det vil være et par nyheder, som
sagtens kan præsenteres bagefter.

> Nå håber det kan bruges.

Det kunne det i hvert fald. Dog mangler jeg stadig lige noget hjælp til,
hvordan jeg laver layoutet "foolproof" i første omgang så placeringen
ser ordentlig ud (#extra flugter med #head og #foot, #content og #extra
er lige lange, baggrundsfarve på #forsidefeatured i alle browsere mv.).

--
Lars Olesen
Vejle Idrætshøjskole <http://www.vih.dk>
Valider dine sider
<http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you>
Søg i nyhedsgrupperne
<http://http://www.google.dk/grphp?tab=wg&q=&ie=UTF-8&oe=UTF-8&hl=da&meta=>

---

Lars Olesen wrote in dk.edb.internet.webdesign.html:
> Jeg er ved at forsøge at stable et layout på benene, men det går ikke
> helt perfekt. Et ufravigeligt krav er, at layoutet ikke må baseres på
> tabeller.

Jeg har arbejdet lidt videre med det, men er rendt ind i nogle problemer med
højdeangivelserne, som ellers får designet til at nå sammen.:

http://www.legestue.net/testcenter/aams/
http://www.legestue.net/testcenter/aams/velkommen.php

Nu mangler jeg at få layoutet til at tilpasse sig indholdet.

--
Lars Olesen

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

---

Lars Olesen wrote:
> Lars Olesen wrote in dk.edb.internet.webdesign.html:
>
>>Jeg er ved at forsøge at stable et layout på benene, men det går ikke
>>helt perfekt. Et ufravigeligt krav er, at layoutet ikke må baseres på
>>tabeller.
>
>
> Jeg har arbejdet lidt videre med det, men er rendt ind i nogle problemer med
> højdeangivelserne, som ellers får designet til at nå sammen.:
>
> http://www.legestue.net/testcenter/aams/
> http://www.legestue.net/testcenter/aams/velkommen.php
>
> Nu mangler jeg at få layoutet til at tilpasse sig indholdet.
>

Det er her min-height er ganske anvendelig. Desværre er den ikke
synderligt understøttet i IE (problemer med de forskellige versioner!)

MEN

Dave Shea satte sig for at få den "fixet" og han har beskrevet det i
denne artikel: http://www.mezzoblue.com/archives/2004/09/16/minheight_fi/

Virkelig nyttig! sammenkogt sætter de en padding-top for at få skidtet
til at virke i IE og derefter får den tilbage med en negativ padding for
elementerne i div'en.

Nederst er der en alternativ og måske i virkeligheden mere elegant
løsning foreslået af en anden, men ikke så gennemprøvet!


Claus

---

Claus Jacobsen wrote:

> Dave Shea satte sig for at få den "fixet" og han har beskrevet det i
> denne artikel: http://www.mezzoblue.com/archives/2004/09/16/minheight_fi/
>
> Virkelig nyttig! sammenkogt sætter de en padding-top for at få skidtet
> til at virke i IE og derefter får den tilbage med en negativ padding for
> elementerne i div'en.

Hm, har prøvet begge løsninger på #maincontent, men det gør at de
resterende div'er kommer til at opføre sig lidt mærkeligt. Den kode jeg
har forsøgt er udkommenteret i stylesheetet på:

http://www.legestue.net/testcenter/aams/css/style.css

Kan du måske hjælpe mig lidt mere præcist ud fra mit stylesheet, hvad
jeg skal gøre?


--
Lars Olesen
Vejle Idrætshøjskole <http://www.vih.dk>
Valider dine sider
<http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you>
Søg i nyhedsgrupperne
<http://http://www.google.dk/grphp?tab=wg&q=&ie=UTF-8&oe=UTF-8&hl=da&meta=>

---

Lars Olesen wrote:

>
> Hm, har prøvet begge løsninger på #maincontent, men det gør at de
> resterende div'er kommer til at opføre sig lidt mærkeligt. Den kode jeg
> har forsøgt er udkommenteret i stylesheetet på:
>
> http://www.legestue.net/testcenter/aams/css/style.css


Hmm Du skal ikke sætte det på maincontent! det er jo ikke den der skal
have en fast højde! du vil gerne have 3 boxe ved siden af hinanden der
er lige høje! Derfor skal du desværre også sætte koden på hver af dem!
måske lave en class til at gøre det med, så kan du smide klassen på dem
alle 3 uden de store fix faxerier! Det er jo kode der skal bruges mere
end 1 gang.

Øh hvad angår dit andet indlæg! Jeg er bange for at jeg er ved at være
lidt tabt her!, hvad er helt præcist forside og hvad er anden side! (du
har kodet dine menupunkter på begge sider til at være forside og der er
ingen links imellem, så det er lidt svært at skelne!

Men et af hovedpunkterne er måske at bruge * til at få sat padding på!
noget #content * { padding-something } så al indholdet for padding-left
og right. tjek lige med både ie og firefox der er nogle berygtede
forskelle her hvad angår nedarvning og ie skal jo bruge noget #content>*

istedet for at komme til at virke!

Du er faktisk så langt nu at man ikke rigtig kommer udenom at skulle
hacke sig til resten.

Claus

---

Claus Jacobsen wrote:

> Du er faktisk så langt nu at man ikke rigtig kommer udenom at skulle
> hacke sig til resten.

Øv :D

--
Lars Olesen
Vejle Idrætshøjskole <http://www.vih.dk>
Valider dine sider
<http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you>
Søg i nyhedsgrupperne
<http://http://www.google.dk/grphp?tab=wg&q=&ie=UTF-8&oe=UTF-8&hl=da&meta=>

---

Claus Jacobsen wrote:

> Hmm Du skal ikke sætte det på maincontent! det er jo ikke den der skal
> have en fast højde! du vil gerne have 3 boxe ved siden af hinanden der
> er lige høje! Derfor skal du desværre også sætte koden på hver af dem!
> måske lave en class til at gøre det med, så kan du smide klassen på dem
> alle 3 uden de store fix faxerier! Det er jo kode der skal bruges mere
> end 1 gang.

Helt med på det med klassen, men det er jo sådan set #maincontent, der
skal sørge for at udvide sig med indholdet i #content og #ekstra. Jeg
ønsker altså kun to boxe ved siden af hinanden, der har samme højde:

http://www.legestue.net/testcenter/aams/

Jeg har prøvet at sætte .sameheight på både #extra og #content, men det
giver ikke det ønskede resultat at layoutet bare bliver længere med
indholdet af enten #content eller #extra. Hvis det kun kan lade sig gøre
med den ene, skal det være #content.

> Øh hvad angår dit andet indlæg! Jeg er bange for at jeg er ved at være
> lidt tabt her!, hvad er helt præcist forside og hvad er anden side! (du
> har kodet dine menupunkter på begge sider til at være forside og der er
> ingen links imellem, så det er lidt svært at skelne!

Forsiden er: http://www.legestue.net/testcenter/aams/
Velkommen siden er: http://www.legestue.net/testcenter/aams/velkommen.php

Det er på forsiden jeg har tre bokse, der står hhv. uddannelsen, jobbet
og ressourcer i. Der ønsker jeg at kunne få lov at sætte noget padding
på, uden at det spolerer de faste kanter.

> Men et af hovedpunkterne er måske at bruge * til at få sat padding på!
> noget #content * { padding-something } så al indholdet for padding-left
> og right. tjek lige med både ie og firefox der er nogle berygtede
> forskelle her hvad angår nedarvning og ie skal jo bruge noget #content>*

Hm, ville bare helst undgå alt for mange hacks.

Håber det var mere forståeligt?

--
Lars Olesen
Vejle Idrætshøjskole <http://www.vih.dk>

---

Lars Olesen wrote:

> Forsiden er: http://www.legestue.net/testcenter/aams/
> Velkommen siden er: http://www.legestue.net/testcenter/aams/velkommen.php
>
> Det er på forsiden jeg har tre bokse, der står hhv. uddannelsen, jobbet
> og ressourcer i. Der ønsker jeg at kunne få lov at sætte noget padding
> på, uden at det spolerer de faste kanter.


OK! Det hjalp lidt! jeg havde misforstået dig en smule! jeg troede det
var de 3 bokse (udd, job, res) du ville have lige høje!

Men hvad med at smide #ekstra indeni #content! læg en 2-farve gif ind
som baggrund (lav den så den bare dækker #ekstra så fylder den ikke
meget mere end 2-300 byte) og sæt repeat-y og højrestillet! så er du
ligeglad med størrelsen af #ekstra og den vil "følge" med hvis #ekstra
fylder mere end #content. (et mindre indgreb, men kan være lidt smart!
og rent semantisk kan det godt retfærdiggøres.)

Ellers tag et godt kig i kildekoden på www.stopdesign.com - Douglas har
en smart måde at få sine div's til at være lige lange på, alternativet
er, at få dine divs til at opføre sig som tabeller via css.

PS. bruger du firefox til at tjekke koden i browsere! har du så
web-developer plugin'et installeret! det kan vise all css på een side og
lave en hulens masse sjove ting, som kan gøre det meget lettere at
tjekke hvad det er der sker.


Claus

---

Claus Jacobsen wrote:

> Hmm Du skal ikke sætte det på maincontent! det er jo ikke den der skal
> have en fast højde! du vil gerne have 3 boxe ved siden af hinanden der
> er lige høje! Derfor skal du desværre også sætte koden på hver af dem!
> måske lave en class til at gøre det med, så kan du smide klassen på dem
> alle 3 uden de store fix faxerier! Det er jo kode der skal bruges mere
> end 1 gang.

Det skal måske også lige pointeres, at boksene ikke behøver have en fast
højde, men det er den eneste måde jeg kunne få tingene til at stå
ordentligt på!

--
Lars Olesen
Vejle Idrætshøjskole <http://www.vih.dk>
Valider dine sider
<http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you>
Søg i nyhedsgrupperne
<http://http://www.google.dk/grphp?tab=wg&q=&ie=UTF-8&oe=UTF-8&hl=da&meta=>

---

Claus Jacobsen wrote:

>> http://www.legestue.net/testcenter/aams/

Jeg har også problemer med at få noget padding på de der genvejsbokse på
forsiden. Hvis jeg sætter padding på, udvider de sig til højre højre i
Mozilla, mens den øvrige boks ikke udvider sig tilsvarende. Hvordan kan
man løse det problem?

--
Lars Olesen
Vejle Idrætshøjskole <http://www.vih.dk>
Valider dine sider
<http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you>
Søg i nyhedsgrupperne
<http://http://www.google.dk/grphp?tab=wg&q=&ie=UTF-8&oe=UTF-8&hl=da&meta=>