---

Hejsa kære nyhedslæsere.

Jeg står med et lillebitte problem, eller for mig, et mega stort.

Jeg har fået opbygget mit site, med en masse divs og det hele ser ganske
fornuftigt ud.

Dog har jeg et problem med min footer (#bottombar), den vil ikke ned i
bunden af sitet, jeg gætter på det er hele min page (#page) div den er
gal med, den farver ihvertfald ikke det hele.

Problemet opstår i både IE og firefox, så nu vil jeg gerne have lidt
hjælp til hvordan jeg løser problemet.

Siden findes her: <http://www.natten-i.dk/test/test.php>
og CSS'en her: <http://www.natten-i.dk/test/themes/blue/css/test.css>

(PS: i skal ikke tage jer af stierne, men det er fordi jeg har en idé
med det hele, men nu skal hoveddesignet jo først lige på plads)

Tak på forhånd.

--
Martin

---

Martin skrev:

> Dog har jeg et problem med min footer (#bottombar), den
> vil ikke ned i bunden af sitet

Du har givet den position:absolute; - det er det der går galt.

Læg den som en naturlig del af dit flow, så det passer til den
side du opbygger, det kan søgemaskinerne også bedst lide.

--
Allan Vebel
http://html-faq.dk - nu også med rss

---

Allan Vebel wrote:
> Martin skrev:
>
>> Dog har jeg et problem med min footer (#bottombar), den
>> vil ikke ned i bunden af sitet
>
> Du har givet den position:absolute; - det er det der går galt.
>
> Læg den som en naturlig del af dit flow, så det passer til den
> side du opbygger, det kan søgemaskinerne også bedst lide.
>

Det hjalp desværre ikke...
Hvis jeg fjerner position, left og bottom, så vises footeren overhovedet
ikke. (har ikke uploadet versionen med den ændring i)

---

Martin skrev:

> Det hjalp desværre ikke...
> Hvis jeg fjerner position, left og bottom, så vises footeren
> overhovedet ikke. (har ikke uploadet versionen med den ændring
> i)

Problemet er at du bruger positionering overalt - det fungerer ikke
hvis du ikke kender den præcise højde på alle siderne (og det gør
man sjældent). Du har ikke noget normalt indhold til at udvide body
- og dermed sørge for at definere hvor din bund er.

NB: Du har nogle småfejl i xhtml- og css-koden - ikke noget
voldsomt, men det er alligevel en god ide at få dem rettet.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

---

Jens Gyldenkærne Clausen wrote:
> Martin skrev:
>
>
>>Det hjalp desværre ikke...
>>Hvis jeg fjerner position, left og bottom, så vises footeren
>>overhovedet ikke. (har ikke uploadet versionen med den ændring
>>i)
>
>
> Problemet er at du bruger positionering overalt - det fungerer ikke
> hvis du ikke kender den præcise højde på alle siderne (og det gør
> man sjældent). Du har ikke noget normalt indhold til at udvide body
> - og dermed sørge for at definere hvor din bund er.

Hvordan skal jeg ellers lave det, altså med positionering?

>
> NB: Du har nogle småfejl i xhtml- og css-koden - ikke noget
> voldsomt, men det er alligevel en god ide at få dem rettet.

Oki - jeg manglede en alt i en img og ellers er der kun warnings i
css'en, tror næppe det ændrer på footeren, men ja, jeg har smidt den alt
på siden.

---

Martin wrote:

> Hvordan skal jeg ellers lave det, altså med positionering?
>

Hvis du er sikker på at den højre spalte altid har mere indhold
end den vesntre spalte er der kun ét element, du behøver at
positionere:
div#rightcol {
margin:0 0 0 200px;
}
div#leftcol {
position:absolute:
width:180px;
left:10px
top:0;
}

- eller lignende, se eventuelt eksemplet

http://www.webdesign101.dk/csslayout/ex/favorit_1.html
--

Med venlig hilsen

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

---

Jørgen Farum Jensen wrote:
> Martin wrote:
>
>> Hvordan skal jeg ellers lave det, altså med positionering?
>>
>
> Hvis du er sikker på at den højre spalte altid har mere indhold
> end den vesntre spalte er der kun ét element, du behøver at
> positionere:
> div#rightcol {
> margin:0 0 0 200px;
> }
> div#leftcol {
> position:absolute:
> width:180px;
> left:10px
> top:0;
> }

Jeg har prøvet at kopiere ovenstående og selvfølgelig lige kaldt det de
samme ting som på mine egne divs.

Venstrekolonne vises perfekt, men højrekolonne smutter helt op i toppen,
og jeg kan ikke få den ned igen, hverken med margin-top eller
padding-top på stylen. Den vil bare ikke rykke sig.


>
> - eller lignende, se eventuelt eksemplet
>
> http://www.webdesign101.dk/csslayout/ex/favorit_1.html

Den fik jeg lige læst igennem.
Jeg tror jeg har taget fejl af absolute og relativ position, troede
faktisk at relativ var en "under" til absolute, men det ser vidste ikke
sådan ud. (Er det korrekt set/læst?)
Har aldrig rigtigt kunne kende forskel på de 2 :)

---

Martin skrev:

> Hvordan skal jeg ellers lave det, altså med positionering?

Hvis du skal anvende positionering, så prøv med følgende skabelon:

- Position: relative på body eller en ydre wrapper (div#page)
- Position: absolute på faste elementer (menuer, topbar o.l.)
- Ingen positionering af selve indholdet.

Jeg kan ikke huske om det fungerer med position: absolute på en
bundkasse, men man kan altid placere den i flowet (efter det
normale indhold).
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

---

Jens Gyldenkærne Clausen wrote:
> Martin skrev:
>
>
>>Hvordan skal jeg ellers lave det, altså med positionering?
>
>
> Hvis du skal anvende positionering, så prøv med følgende skabelon:
>
> - Position: relative på body eller en ydre wrapper (div#page)
> - Position: absolute på faste elementer (menuer, topbar o.l.)
> - Ingen positionering af selve indholdet.

Jeg tror lige jeg skal have læst på positionering.
Kan du anbefale et godt sted at læse om det?
Meget gerne med forskellen mellem absolute og relative.

>
> Jeg kan ikke huske om det fungerer med position: absolute på en
> bundkasse, men man kan altid placere den i flowet (efter det
> normale indhold).

---

Martin skrev:

> Jeg tror lige jeg skal have læst på positionering.
> Kan du anbefale et godt sted at læse om det?

Nej, egentlig ikke.

> Meget gerne med forskellen mellem absolute og relative.

Det er forholdsvis simpelt. En absolut positioneret boks tages helt
ud af sidens flow, mens en relativt positioneret boks stadig tager
plads i sidens flow. Selv om man godt kan forskubbe en relativt
positioneret boks, er det mest almindelige at man bruger position:
relative uden forskydning (left/top/bottom/right er alle 0).

Den effekt man opnår er at elementer inde i en relativt
positioneret boks placeres i forhold til denne, i stedet for i
forhold til hele siden.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

---

Jens Gyldenkærne Clausen skrev:

>> Meget gerne med forskellen mellem absolute og relative.
>
> Det er forholdsvis simpelt. En absolut positioneret boks tages helt
> ud af sidens flow, mens en relativt positioneret boks stadig tager
> plads i sidens flow.

Man kunne også sige at absolute tager udgangspunkt i øverste, venstre hjørne
mens relative tager udgangspunkt i den originale placering i dokumentet.

--
David Trasbo.
Vær en god Usenet-bruger. http://usenet.dk/netikette.

---

Jens Gyldenkærne Clausen wrote:
> Martin skrev:
>
>
>>Jeg tror lige jeg skal have læst på positionering.
>>Kan du anbefale et godt sted at læse om det?
>
>
> Nej, egentlig ikke.
>
>
>>Meget gerne med forskellen mellem absolute og relative.
>
>
> Det er forholdsvis simpelt. En absolut positioneret boks tages helt
> ud af sidens flow, mens en relativt positioneret boks stadig tager
> plads i sidens flow. Selv om man godt kan forskubbe en relativt
> positioneret boks, er det mest almindelige at man bruger position:
> relative uden forskydning (left/top/bottom/right er alle 0).
>
> Den effekt man opnår er at elementer inde i en relativt
> positioneret boks placeres i forhold til denne, i stedet for i
> forhold til hele siden.

Det går jo fuldstændigt galt nu.

Jeg har lavet #page til at have absolute, og alle andre (#menubar, #top,
#bubble, #bubble #text, #peoples, #left og #middle) til at være relativ,
men nu rykker den helt vildt mærkeligt om på det.

Fx prøvede jeg at positionere bubble og peoples. Jeg endte med at have
left:750px; og top:-70px;

og width på #page er også gået helt i ged, jeg tror siden er ca 200%
bred nu.

Se selv mere på <http://natten-i.dk/test2/test.php>

---

Martin skrev:

> Det går jo fuldstændigt galt nu.
>
> Jeg har lavet #page til at have absolute, og alle andre
> (#menubar, #top, #bubble, #bubble #text, #peoples, #left og
> #middle) til at være relativ,

Det er lige omvendt af hvad jeg foreslog. Du skal have position:
relative på dit ydre element (#page) og position: absolute på de
indre elementer.

Men det kan stadig tænkes at den rykker rundt på det - hvis du
tidligere har positioneret efter browservinduet og nu skal
positionere efter en wrapper, skal der nok ændres nogle mål.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

---

Jens Gyldenkærne Clausen wrote:
> Martin skrev:
>
>
>>Det går jo fuldstændigt galt nu.
>>
>>Jeg har lavet #page til at have absolute, og alle andre
>>(#menubar, #top, #bubble, #bubble #text, #peoples, #left og
>>#middle) til at være relativ,
>
>
> Det er lige omvendt af hvad jeg foreslog. Du skal have position:
> relative på dit ydre element (#page) og position: absolute på de
> indre elementer.

Hovsa - det var så en stor brøler fra min side af
Jeg vil lige kigge på det, lidt senere. Har desværre ikke mere tid ligenu.

Men jeg vender nok stærkt tilbage.

>
> Men det kan stadig tænkes at den rykker rundt på det - hvis du
> tidligere har positioneret efter browservinduet og nu skal
> positionere efter en wrapper, skal der nok ændres nogle mål.

Ok - det bliver spændende. :)

Tak for hjælpen

---

Jens Gyldenkærne Clausen wrote:
> Men det kan stadig tænkes at den rykker rundt på det - hvis du
> tidligere har positioneret efter browservinduet og nu skal
> positionere efter en wrapper, skal der nok ændres nogle mål.

Så nu fik jeg arbejdet lidt med den igen.
Det har hjulpet en lille smule nu med den rigtige slags positionering.

Men min footer er pistborte nu. Samt min #page også har gemt sig, eller
det vil sige den sidder i toppen i 10-15px også er der ikke mere
(firefox) i IE der går den 750px ned. Men stadig er min footer helt væk.

Jeg har lagt siden op på <http://natten-i.dk/test2/test.php>

Håber på lidt hjælp :)

---

Martin wrote:

> Jeg har lagt siden op på <http://natten-i.dk/test2/test.php>

Du har stadig #left og #middle indsat med absolut position. Derfor fylder de
ikke noget i sidens flow og flytter derfor heller ikke #bottombar ned. Din
#bottombar er der skam godt nok - den er bare skjult bag #top.

Lav disse ændringer i css for #left, #middle og #bottombar:

#left {
float:left;
width:45%;
margin-top:115px;
left:10px;
}

#middle {
float: left;
width:45%;
margin-top:115px;
left:260px;
}

#bottombar {
clear:both;
margin-top:10px;
border-top:1px solid #003399;
background: url(../images/design/bottombar/streg.png) repeat-x bottom;
font-family: "Courier New", Courier, monospace;
font-size:90%;
color:White;
}

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

---

Erik Ginnerskov wrote:
> #left {
> float:left;
> width:45%;
> margin-top:115px;
> left:10px;
> }
>
> #middle {
> float: left;
> width:45%;
> margin-top:115px;
> left:260px;
> }
>
> #bottombar {
> clear:both;
> margin-top:10px;
> border-top:1px solid #003399;
> background: url(../images/design/bottombar/streg.png) repeat-x bottom;
> font-family: "Courier New", Courier, monospace;
> font-size:90%;
> color:White;
> }

Sådan - nu ser det rigtigt fedt ud. Det virkede perfekt med floating,
ærligt så troede jeg man skulle bruge position hvis man ville bruge left
right bottom og top, men det skal man åbenbart ikke.

Dog har jeg lige ændret width på begge, ellers blev det hele lidt smalt :)


Dog er der den allersidste ting. Nu er bunden der, og den sidder perfekt
og det hele - men nu er der bare lige content boxene (box 2-7) de hopper
lige ned under box 1 (venstre boks). Har jeg lavet noget forkert eller?
<http://natten-i.dk/test2/test.php>

PS: I IE der er den helt gal. Box 2 den er vistnok pistborte.

---

Martin wrote:
> Erik Ginnerskov wrote:
>> #left {
>> float:left;
>> width:45%;
>> margin-top:115px;
>> left:10px;
>> }
>>
>> #middle {
>> float: left;
>> width:45%;
>> margin-top:115px;

> Dog er der den allersidste ting. Nu er bunden der, og den sidder
> perfekt og det hele - men nu er der bare lige content boxene (box
> 2-7) de hopper lige ned under box 1 (venstre boks). Har jeg lavet
> noget forkert eller? <http://natten-i.dk/test2/test.php>

Ja, du har slettet bredden på #left. Derved får den fuld bredde og #middle
kan ikke komme højere op end hvor den er nu.

> PS: I IE der er den helt gal. Box 2 den er vistnok pistborte.

Du har også fjernet bredden på #middle og i stedet givet den
margin-left:270px; - derved udløser du en bug i IE

Ret det:

#left {
float:left;
width:45%;
margin-top:115px;
margin-left:10px;
}

#middle {
float: right;
width:45%;
margin-top:115px;
margin-right:10px;
}

.... og flyt så i html hele din <div id="left">...</div> ned efter <div
id="middle">...</div>

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

---

Erik Ginnerskov wrote:
> Ret det:
>
> #left {
> float:left;
> width:45%;
> margin-top:115px;
> margin-left:10px;
> }
>
> #middle {
> float: right;
> width:45%;
> margin-top:115px;
> margin-right:10px;
> }
>
> ... og flyt så i html hele din <div id="left">...</div> ned efter <div
> id="middle">...</div>
>

Vupti - nu ser det bare fremrygende ud.... i firefox.

I IE der er der intet af toppen der vises, kan du også finde fejlen for det?
PS: Det ligger udenfor <div id="left>...</div> skal det ned i den eller?

Den nye version ligger igen her <http://natten-i.dk/test2/test.php>

---

Martin wrote:
> Erik Ginnerskov wrote:
>> Ret det:
>>
>> #left {
>> float:left;
>> width:45%;
>> margin-top:115px;
>> margin-left:10px;
>> }
>>
>> #middle {
>> float: right;
>> width:45%;
>> margin-top:115px;
>> margin-right:10px;
>> }
>>

> Vupti - nu ser det bare fremrygende ud.... i firefox.

Det vil jeg ikke give dig ret i. Du har stadig så stor bredde på #middle, at
#left bliver trykket ned under #middle.

Prøv at åbne din side i en FF, der er sat til 800px i bredden og juster
bredderne, så #left kan komme op på plads.

> I IE der er der intet af toppen der vises, kan du også finde fejlen
> for det?

Den eneste forskel, jeg kan se mellem visningen i FF og IE er, at i IE er
der ikke ca. 10px luft vandret mellem #middle og #menubar. Jeg kan ikke
umiddelbart se hvorfor.

FF 1.5 på Win2000
IE 6 på Win2000

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

---

Erik Ginnerskov wrote:
> Det vil jeg ikke give dig ret i. Du har stadig så stor bredde på #middle, at
> #left bliver trykket ned under #middle.

Haha.. nej det fandt jeg ud af da jeg kom hen til en anden computer, med
en anden opløsning, dog har jeg fået klaret den, så nu ser den pæn ud i
firefox igen. Næsten uanset bredde (dog minimum 756px som jeg mener er
iorden, især når man tænker på at siden er til computerspillere, som
oftest har en god skærm, og på den gamle side er der ca 90% der bruger
1024 eller over, så det er helt fint til mig.

> Den eneste forskel, jeg kan se mellem visningen i FF og IE er, at i IE er
> der ikke ca. 10px luft vandret mellem #middle og #menubar. Jeg kan ikke
> umiddelbart se hvorfor.

Oki, ja det lyder underligt. Jeg har lige taget et skærmdump af hvordan
IE6 på WinXP viser siden.
Jeg ville da mene der ikke er forskel på Win2000 og WinXP, men det må
der åbenbart være.

Skærmdump <http://natten-i.dk/test2/iescreen.jpg>

>
> FF 1.5 på Win2000
> IE 6 på Win2000
>

Og mine sidste rettelser på siden findes på
<http://natten-i.dk/test2/test.php>

---

[KLIP]

Efter en masse leg med CSS'en er det faktisk lykkedes mig at lave det så
det ser 99% perfekt ud i IE, og den sidste procent, det må man lære at
leve med hehe.

Så nu er det bare helt perfekt.

Først en stor tak til Erik, for de små fix :) - God mand at have ved
hånden må man sige.

Også en tak til Jens, for at få mig ind på rette spor af positionering :)

Og en tak til de 2 andre med små søde indlæg, som lige giver et pling
oppe i hovedet.

Jeg er selv rigtig tilfreds med resultatet, måske ikke den pæneste CSS
kode, men den overholder standarden, og det gør html'en også, og det er
jo bare helt hip hip hurra :)

Resultatet: <http://natten-i.dk/test2/test.php>

Tak!

---

"Martin" skrev
> [KLIP]
>
> Jeg er selv rigtig tilfreds med resultatet, måske ikke den pæneste CSS
> kode, men den overholder standarden, og det gør html'en også, og det er
> jo bare helt hip hip hurra :)
>
> Resultatet: <http://natten-i.dk/test2/test.php>
>

Må jeg komme med en lille bemærkning??
Teksten på dine links er lidt svære at læse (især i IE), måske skulle du lave
dem med font-weight:bold!
Mine øjne er godt nok 42 år gamle, men selv med briller på er det lidt gnidret
<)

--
Venlig hilsen
Marianne
design af: - www.ragdollys-cat-link.dk - www.dhejne.dk
www.formdinfremtid.dk - www.royalmontana.dk

---

Tidemann wrote:
> "Martin" skrev
>> [KLIP]
>>
>> Jeg er selv rigtig tilfreds med resultatet, måske ikke den pæneste CSS
>> kode, men den overholder standarden, og det gør html'en også, og det er
>> jo bare helt hip hip hurra :)
>>
>> Resultatet: <http://natten-i.dk/test2/test.php>
>>
>
> Må jeg komme med en lille bemærkning??
> Teksten på dine links er lidt svære at læse (især i IE), måske skulle du lave
> dem med font-weight:bold!
> Mine øjne er godt nok 42 år gamle, men selv med briller på er det lidt gnidret
> <)
>

Se - det var så en ting jeg også har kigget lidt på. Men den kære
designer vil ikk lave det om, på nuværende tidspunkt. Så desværre ;)

---

Martin wrote:

> Haha.. nej det fandt jeg ud af da jeg kom hen til en anden computer,
> med en anden opløsning, dog har jeg fået klaret den, så nu ser den
> pæn ud i firefox igen.

Det er den erfaring, man efterhånden tilegner sig: Alle brugere ser det ikke
nødvendigvis på præcis samme måde som en selv.

> Næsten uanset bredde (dog minimum 756px som
> jeg mener er iorden,

Ja, det ser fint ud nu.

> især når man tænker på at siden er til
> computerspillere, som oftest har en god skærm, og på den gamle side
> er der ca 90% der bruger 1024 eller over, så det er helt fint til mig.

En ting er, at dine potentielle brugere forventes at have en stor
skærmopløsning af hensyn til de spil, de kører på skærmen. Men det siger
bare ikke en snus om, hvor stort deres browservindue er åbnet.

Erfaring viser, at jo større skærmflade og -opløsning, des mindre
forholdsvis er brugernes browservindue. Personligt har jeg sædvanligvis en
skærmopløsning på 1024×768px på min 17" skærm, men kan øge til 1280×1024px.
Men min browser er aldrig åbnet i mere end 800×600px - ellers bliver
tekstlinjer læseuvenligt lange.

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

---

Erik Ginnerskov wrote:
> En ting er, at dine potentielle brugere forventes at have en stor
> skærmopløsning af hensyn til de spil, de kører på skærmen. Men det siger
> bare ikke en snus om, hvor stort deres browservindue er åbnet.

Det er så helt korrekt.

>
> Erfaring viser, at jo større skærmflade og -opløsning, des mindre
> forholdsvis er brugernes browservindue. Personligt har jeg sædvanligvis en
> skærmopløsning på 1024×768px på min 17" skærm, men kan øge til 1280×1024px.
> Men min browser er aldrig åbnet i mere end 800×600px - ellers bliver
> tekstlinjer læseuvenligt lange.
>

Tror aldrig jeg har tænkt så langt, men kan sagtens se det, dog er det
sjældent at min browser er "halveret", stortset er den altid maximeret,
ellers så er der altid et eller andet på mit skrivebord som irriterer mig ;)

Men de 750px i bredden, burde det ikke komme til at se korrekt ud i
800x600 - ved ikke hvor meget scrolleren fylder, men tror ikk på 50px :)

Forresten... Så har jeg lige opdaget at siden er helt gal i firefox 1.0x
hvad kan det nu være? (jeg kan desværre ikke selv se fejlen, da jeg ikke
har firefox 1.0, men måske andre har det?