---

Hej alle

Et standard problem som jeg efterhånden har lavet mange dårlige
løsninger på - og de hopper altid i havet i forskellige browsere eller
forskellige setups - derfor vil jeg nu se, hvordan andre løser det! [Og
som mange andre problemer var det relativt nemt med tabeller dengang,
men tabeller ER jo ikke til layout... ]

<div id="footer>
<div id="footerleft">Denne tekst står til venstre</div>
<div id="footerright">Denne tekst står til højre</div>
</div>

Ovenstående skulle vha. af lidt CSS gerne kunne højre- og venstrestille
noget tekst i en footer...

Det er oplagt at floate det - men det giver vist nogle problemer uden en
højdeangivelse og andet fast indhold i boksen

Ellers skal løsningen for at være nogenlunde fornuftig vel overholde:

- fungere i flere forskellige browsere - ikke blot IE!
- fleksibel overfor ændringer i skriftstørrelse
- fleksibel overfor små browservinduer eller små skærmopløsninger
- footer-div'en fylde 100% af side-bredden og have en baggrundsfarve
forskellig fra "dét den ligger ovenpå"
- footerleft-div'en skal have lidt padding til top, left og bottom
- footerright-div'en skal have lidt padding til top, right og bottom

Det skulle vist være det - er lidt spændt på at se jeres løsningsforslag
til dette standardproblem

På forhånd tak og med venlig hilsen

Tommy Ipsen

---

Tommy Ipsen wrote:
> Hej alle
>
> Et standard problem som jeg efterhånden har lavet mange dårlige
> løsninger på - og de hopper altid i havet i forskellige browsere eller
> forskellige setups - derfor vil jeg nu se, hvordan andre løser det!
> [Og som mange andre problemer var det relativt nemt med tabeller
> dengang, men tabeller ER jo ikke til layout... ]
>
> <div id="footer>
> <div id="footerleft">Denne tekst står til venstre</div>
> <div id="footerright">Denne tekst står til højre</div>
> </div>
>
> Ovenstående skulle vha. af lidt CSS gerne kunne højre- og
> venstrestille noget tekst i en footer...
>
> Det er oplagt at floate det

Ja, der skal bruges float. Men først skal du lige bytte om på de to
bundtekster:

<div id="footer>
<div id="footerright">Denne tekst står til højre</div>
<div id="footerleft">Denne tekst står til venstre</div>
</div>

.... og så til css:

#footerleft {
float:left;
width: 45%;
}
#footerright {
float:right;
width:45%;
}

.................

Det er vigtigt at
1. Den footer, der skal være til højre, skal skrives
først i html, ellers er det ikke alle browsere, der
kan finde ud af det.
2. Den samlede bredde må ikke overstige ca. 92%,
da der ellers kan blive problemer med at få plads
til de to footers ved siden af hinanden.

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

---

Erik Ginnerskov wrote:

> <div id="footer>
> <div id="footerright">Denne tekst står til højre</div>
> <div id="footerleft">Denne tekst står til venstre</div>
> </div>
>
> ... og så til css:
>
> #footerleft {
> float:left;
> width: 45%;
> }
> #footerright {
> float:right;
> width:45%;
> }

Denne løsning fungerer ikke med mindre der angives en explicit højde for
#footer, hvilket ikke er interesseret i - fordi layoutet skal være så
fleksibelt så muligt, så højden skal naturligvis automatisk tilpasses
indholdet - hvad enten det er floatet eller ej...

> Det er vigtigt at
> 1. Den footer, der skal være til højre, skal skrives
> først i html, ellers er det ikke alle browsere, der
> kan finde ud af det.

Spøjst - men ok - det fiksede et problem med Opera!

> 2. Den samlede bredde må ikke overstige ca. 92%,
> da der ellers kan blive problemer med at få plads
> til de to footers ved siden af hinanden.

92% var godt nok ikke meget... - kan du forklare det eller evt. linke
til noget forklaring?

Mvh Tommy

---

Tommy Ipsen wrote:

>> <div id="footer>
>> <div id="footerright">Denne tekst står til højre</div>
>> <div id="footerleft">Denne tekst står til venstre</div>
>> </div>

>> #footerleft {
>> float:left;
>> width: 45%;
>> }
>> #footerright {
>> float:right;
>> width:45%;
>> }

> Denne løsning fungerer ikke med mindre der angives en explicit højde
> for #footer,

I og med, at #footerright og #footerleft er indeholdt i #footer, kan de ikke
bryde ud af denne. Det er så bare et spørgsmol om at finde den rigtige
bredde i %, så de floater korrekt ved siden af hinanden, uanset bredden på
browservinduet (fra ca. 800px og op). Måske er de 92% også for meget?

>> Det er vigtigt at
>> 1. Den footer, der skal være til højre, skal skrives
>> først i html,

> Spøjst - men ok - det fiksede et problem med Opera!

>> 2. Den samlede bredde må ikke overstige ca. 92%,

> 92% var godt nok ikke meget... - kan du forklare det eller evt. linke
> til noget forklaring?

Det hænger sammen med den defaulte margin (og til dels padding) på
elementerne.

http://www.hjemmesideskolen.dk/html/float.asp#spalter

På det pågældende sted er jeg helt nede på 88% for at få det til at passe
(med tre spalter).

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

---

Erik Ginnerskov wrote:
> Tommy Ipsen wrote:
>
>
>>><div id="footer>
>>> <div id="footerright">Denne tekst står til højre</div>
>>> <div id="footerleft">Denne tekst står til venstre</div>
>>></div>
>
>>>#footerleft {
>>>float:left;
>>>width: 45%;
>>>}
>>>#footerright {
>>>float:right;
>>>width:45%;
>>>}
>
>
>>Denne løsning fungerer ikke med mindre der angives en explicit højde
>>for #footer,
>
> I og med, at #footerright og #footerleft er indeholdt i #footer, kan de ikke
> bryde ud af denne. Det er så bare et spørgsmol om at finde den rigtige
> bredde i %, så de floater korrekt ved siden af hinanden, uanset bredden på
> browservinduet (fra ca. 800px og op). Måske er de 92% også for meget?

Hvis du prøver ovenstående kode og sætter en baggrundsfarve for #footer,
kan du se hvad jeg mener - det er såmænd ligegyldigt med width i de
browsere, hvor jeg har testet - elementerne floater fint ud i siderne,
hvor de skal være, men der er problemer med højden på #footer-div'en
hvilket ser skidt ud med baggrundsfarven!

>>>2. Den samlede bredde må ikke overstige ca. 92%,
>
>>92% var godt nok ikke meget... - kan du forklare det eller evt. linke
>>til noget forklaring?
>
>
> Det hænger sammen med den defaulte margin (og til dels padding) på
> elementerne.
>
> http://www.hjemmesideskolen.dk/html/float.asp#spalter
>
> På det pågældende sted er jeg helt nede på 88% for at få det til at passe
> (med tre spalter).

Dvs. hvis jeg sætter margin og padding til 0 for de pågældende
elementer, kan jeg bruge width 50%? Hvorfor undlader jeg ikke bare helt
at bruge width - så tager elementerne vel blot den bredde de har brug
for - eller måske sætter den til auto?

Mvh Tommy

---

Tommy Ipsen wrote:

> Dvs. hvis jeg sætter margin og padding til 0 for de pågældende
> elementer, kan jeg bruge width 50%?

Det kan du desværre heller ikke påregne. Regnestykket går tilsyneladende op,
men erfaringen siger noget andet. :(

> Hvorfor undlader jeg ikke bare
> helt at bruge width - så tager elementerne vel blot den bredde de har
> brug for - eller måske sætter den til auto?

Så er du da helt sikker på, at du ikke kan floate dem ved siden af hinanden.

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

---

Tommy Ipsen wrote:

> Hvis du prøver ovenstående kode og sætter en baggrundsfarve for
> #footer, kan du se hvad jeg mener - det er såmænd ligegyldigt med
> width i de browsere, hvor jeg har testet - elementerne floater fint
> ud i siderne, hvor de skal være, men der er problemer med højden på
> #footer-div'en hvilket ser skidt ud med baggrundsfarven!

Det er ikke et spørgsmål om at floate ud til siderne, det er et spørgsmål om
at få dem til at stå ved siden af hinanden, ik'. Derfor *skal* du definere
en bredde.

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

---

Tommy Ipsen wrote:

> Et standard problem som jeg efterhånden har lavet mange dårlige
> løsninger på - og de hopper altid i havet i forskellige browsere eller
> forskellige setups - derfor vil jeg nu se, hvordan andre løser det! [Og
> som mange andre problemer var det relativt nemt med tabeller dengang,
> men tabeller ER jo ikke til layout... ]
>
> <div id="footer>
> <div id="footerleft">Denne tekst står til venstre</div>
> <div id="footerright">Denne tekst står til højre</div>
> </div>
>
> Ovenstående skulle vha. af lidt CSS gerne kunne højre- og venstrestille
> noget tekst i en footer...
>
> Det er oplagt at floate det - men det giver vist nogle problemer uden en
> højdeangivelse og andet fast indhold i boksen

Mit bedste bud (efter at have været igang med at lege med absolut
positionerede div'er i en relativt positioneret id=footer, de gav samme
problemer med floats) er at hvis du kender den af de to halvdele der er
størst risiko for bliver for lang, så kan du lægge den ud i footer-div'en.

Eksempel hvor man regner med at venstre altid er længst:

<div style="background: #6699ff;">
<div style="float: right; width: 48%; border: 1px dotted red;
text-align: right;">Til højre
</div>
Til venstre<br />
med to linier
</div>

Resten af kravene skulle nok kunne opfyldes med ovenstående.

mvh

Jesper Brunholm

---

Jesper Brunholm wrote:

> Mit bedste bud (efter at have været igang med at lege med absolut
> positionerede div'er i en relativt positioneret id=footer, de gav samme
> problemer med floats) er at hvis du kender den af de to halvdele der er
> størst risiko for bliver for lang, så kan du lægge den ud i footer-div'en.
>
> Eksempel hvor man regner med at venstre altid er længst:
>
> <div style="background: #6699ff;">
> <div style="float: right; width: 48%; border: 1px dotted red;
> text-align: right;">Til højre
> </div>
> Til venstre<br />
> med to linier
> </div>
>
> Resten af kravene skulle nok kunne opfyldes med ovenstående.

Jeg har selv på et tidspunkt været inde på ovennævnte løsning og den
fungerer egentlig ok, men jeg synes ikke den er så pæn rent kodemæssigt
- det er det eneste issue jeg har med den - men hvis den pæne udgave
ikke kan bringes til at fungere tilfredsstillende, kan det godt være, at
ovenstående bliver løsningen.

NB: Hvorfor fokuserer dig og Erik så meget på den dér width-parameter -
det forstår jeg ikke helt - er der et problem jeg ikke er løbet ind i
endnu - det jeg lige har testet, virker det som om den introducerer
flere problemer end den løser? Er det noget gammel browser
kompabilitetsting?

Mvh Tommy

---

Tommy Ipsen wrote:

> Jeg har selv på et tidspunkt været inde på ovennævnte løsning og den
> fungerer egentlig ok, men jeg synes ikke den er så pæn rent kodemæssigt
> - det er det eneste issue jeg har med den - men hvis den pæne udgave
> ikke kan bringes til at fungere tilfredsstillende, kan det godt være, at
> ovenstående bliver løsningen.

_Principielt set_ kunne jeg også godt tænke mig at en boks ville
dimensionere sig efter de positionerede elementer den indeholder, det må
vi nok desværre vente på.

> NB: Hvorfor fokuserer dig og Erik så meget på den dér width-parameter -
> det forstår jeg ikke helt - er der et problem jeg ikke er løbet ind i
> endnu - det jeg lige har testet, virker det som om den introducerer
> flere problemer end den løser? Er det noget gammel browser
> kompabilitetsting?

Den forstod jeg ikke - jeg har sat width på div'en fordi den ellers vil
bruge sin default=100%.

Jeg bruger helst under 100% fordi det er den letteste måde at komme
udenom MSIEs box-model-renderingsproblemer på, men det har du måske ikke
mødt som problem?

mvh

Jesper Brunholm

---

Tommy Ipsen wrote:

>...

> <div id="footer>
> <div id="footerleft">Denne tekst står til venstre</div>
> <div id="footerright">Denne tekst står til højre</div>
> </div>



html:

<div id="footer">
   <div id="footerleft">
      <div class="footertext">Venstre</div>
   </div>
   <div id="footerright">
      <div class="footertext">Højre</div>
   </div>
   <div id="showstopper"></div>
</div>



css:

#footer {margin:0; padding:0; min-width:160px; background-color:#ffc}
#footerleft {margin:0; padding:0; width:49.99%; float:left}
#footerright {margin:0; padding:0; width:49.99%; float:right;
text-align:left}
#showstopper {height:1px; clear:both}
..footertext {margin:0; padding:1em}



Noter:

#footer
min-width virker ikke i IE

#footerleft
bredde kan godt være 50%, men det giver en bizar opførsel i IE når man
ændrer størrelse på sin viewport
som du kan se er der ikke problemer med at placere #footerleft før
#footerright som det blev nævnt i et andet indlæg, men der findes måske
user agents der ikke kan håndtere det (det ville være rart med et
eksempel når sådanne påstande fremføres)

#footerright
samme som #footerleft, bortset fra text-align der er medtaget for at
tilfredsstille IE4, der ellers højrestiller teksten

#showstopper
medtaget for at få #footer til at indkapsle de indlejrede div'er (uanset
højde)

..footertext
ved at angive margin/padding her undgår man helt breddeproblematik
vedrørende #footerleft og #footerright


> Ellers skal løsningen for at være nogenlunde fornuftig vel overholde:
>
> - fungere i flere forskellige browsere - ikke blot IE!

Testet i

   Opera 7.54
   Mozilla Firefox 0.9
   Mozilla Firebird 0.7
   Mozilla 1.3.1
   IE 6
   IE 5.5
   IE 5
   IE 4
   Netscape 4.03

og det virker i dem alle, bortset fra manglende baggrundsfarve i Netscape 4.

Har desværre kun adgang til windåse p.t., så du må selv teste på andre
platforme og med andre user agents.

> - fleksibel overfor ændringer i skriftstørrelse

Ja

> - fleksibel overfor små browservinduer eller små skærmopløsninger

Ja

> - footer-div'en fylde 100% af side-bredden og have en baggrundsfarve
> forskellig fra "dét den ligger ovenpå"

Ja (hvis Netscape 4 skal "med", så sæt evt baggrundsfarve på #footerleft
og #footerright)

> - footerleft-div'en skal have lidt padding til top, left og bottom

Nej, det ordnes med .footertext

> - footerright-div'en skal have lidt padding til top, right og bottom

ditto, men du kan da godt lave to id'er, hvis du synes det er bedre

> Det skulle vist være det - er lidt spændt på at se jeres løsningsforslag
> til dette standardproblem
>
> På forhånd tak og med venlig hilsen
>
> Tommy Ipsen


Håber ikke du bliver overspændt!

mvh
Mogens

---

Ravnefane skrev:

>og det virker i dem alle, bortset fra manglende baggrundsfarve i Netscape 4.

Baggrundsfarven vil sikkert komme med i Netscape 4.x, hvis du
bruger kortformen background, i stedet for.

background: #ffc
--
Knud

---

Knud Gert Ellentoft wrote:

> Ravnefane skrev:
>
>
>>og det virker i dem alle, bortset fra manglende baggrundsfarve i Netscape 4.
>
>
> Baggrundsfarven vil sikkert komme med i Netscape 4.x, hvis du
> bruger kortformen background, i stedet for.
>
> background: #ffc


Nej, men jeg fandt nu alligevel en løsning.

Tilføj "border:1px" til #footer.

Her SKAL det være shorthand-udgaven man anvender, ellers kommer der en
aldeles afskyelig ramme på boksen.

mvh

---

Ravnefane skrev:

> html:
>
> <div id="footer">
> <div id="footerleft">
> <div class="footertext">Venstre</div>
> </div>
> <div id="footerright">
> <div class="footertext">Højre</div>
> </div>
> <div id="showstopper"></div>
> </div>

> css:

> #showstopper
> medtaget for at få #footer til at indkapsle de indlejrede div'er (uanset
> højde)

Elegant og godt tænkt (og udført) - my compliments!

mvh

Jesper Brunholm

---

Jesper Brunholm wrote:
> Ravnefane skrev:
>
>> html:
>>
>> <div id="footer">
>> <div id="footerleft">
>> <div class="footertext">Venstre</div>
>> </div>
>> <div id="footerright">
>> <div class="footertext">Højre</div>
>> </div>
>> <div id="showstopper"></div>
>> </div>
>
>
>> css:
>
>
>> #showstopper
>> medtaget for at få #footer til at indkapsle de indlejrede div'er
>> (uanset højde)
>
>
> Elegant og godt tænkt (og udført) - my compliments!
>
> mvh
>
> Jesper Brunholm


Tak. "Thinking outside the box" er ikke altid løsningen.

mvh
Mogens