[CSS/DIV] DIV bottom: 0px;

[Verwijderd]

Pagina: http://www.douglasdesign.nl/klanten/kasteelfeesten/css.html

Probleem: de footer bestaat uit 3 div's: footerleft, footer, footerright. Deze heb ik allemaal gepositioneerd als:

code:

position: absolute;
bottom: 0px;

Nu gaat dat in alle browsers goed: IE, en Opera.... maaar FireFox + Safari doet ongezellig en zet de content (div) onder de footer door... je krijgt dus een vreemde blauw balk midden door de content te zien.

Om in de andere browser er voor te zorgen dat de tekst niet door of onder de footer komt te staan heb ik deze css gebruikt:

code:

#content h6 {
    margin-bottom:80px;
    margin-right:17px;
    }

Wie helpt?

edit: Safari werkt ook niet goed.

[ Voor 6% gewijzigd door Verwijderd op 28-07-2004 14:38 ]

[Verwijderd]

Gebruik is 'position:relative' ergens op. Bijvoorbeeld:

code:

html{
 position:relative;
 min-height:100%;
}

[Verwijderd]

Opera werkt hier ook niet goed trouwens 7.53. Zou je dan niet denken dat het aan jou ligt?

[Verwijderd]

Als je voor Firefox de position voor footer, footerleft, footerright op fixed zet gaat het al iets beter.

[Verwijderd]

Verwijderd schreef op 28 juli 2004 @ 14:39:
Als je voor Firefox de position voor footer, footerleft, footerright op fixed zet gaat het al iets beter.

Klopt, alleen zie je het onderste gedeelte van de pagina niet (het blokje met de pijl). En bij resizen van je scherm loopt de achtergrond niet mee (aan de rechterkant)

[ZOMERZON]

Laat me maar weten als je hier een oplossing voor hebt, ik worstel met hetzelfde probleem.

[Verwijderd]

Verwijderd schreef op 28 juli 2004 @ 14:38:
Gebruik is 'position:relative' ergens op. Bijvoorbeeld:

code:

html{
 position:relative;
 min-height:100%;
}

Helaas werkt ook niet
(heb het nu toegepast op de html)

code:

html{
    position:relative;
    min-height:100%;
   }

Andere oplossing?

[cutter]

Als je die bottom: 0px bij alle footers weghaalt lukt het bij ff wel. Alleen is je #boxright dan weer niet in orde omdat alleen je screen hoogte voor 100% wordt gevuld. Naar beneden scrollend zie je dat de kleur niet doorloopt. Daar ook de bottom: 0px weghalen levert weer resultaat op. Ergo: het lijkt erop alsof ff de bottom benadert vanaf de onderkont van de hoogte van het scherm van de user.

[IschaGast]

Waarom alles absoluut positioneren trouwens?
Het kan volgens mij ook gewoon allemaal met floats... enige wat dan misschien het probleem is dat je die footer bij kleine content niet helemaal onderaan je scherm hebt staan.

[ Voor 130% gewijzigd door IschaGast op 29-07-2004 11:36 ]

[Verwijderd]

cutter schreef op 28 juli 2004 @ 16:16:
Als je die bottom: 0px bij alle footers weghaalt lukt het bij ff wel. Alleen is je #boxright dan weer niet in orde omdat alleen je screen hoogte voor 100% wordt gevuld. Naar beneden scrollend zie je dat de kleur niet doorloopt. Daar ook de bottom: 0px weghalen levert weer resultaat op. Ergo: het lijkt erop alsof ff de bottom benadert vanaf de onderkont van de hoogte van het scherm van de user.

Dit werkt goed, in IE, Firefox en Safari... alleen in IE zie ik maar een deel van mn top knopje...

(ben ondertussen op die URL aan het editten, dus als je het ineens wel ziet, is het gelukt )

[IschaGast]

Heb je trouwens al gezien hoe het geheel eruit ziet als je heel weinig tekst hebt?
Je footer gaat dan zelfs over je navigatie heen, dat is ook iets wat je niet wilt hebben neem ik aan.

Je hebt een probleem dat lastig op te lossen is op dit moment denk ik.

Wil je alles werkende krijgen dan zou je voor procentuele breedtes kunnen kiezen of voor een vaste breedte. Ikzelf kon in ieder geval niet zo snel de oplossing vinden. Heb hier nog gekeken voor allemaal verschillende 3 kolom layout maar ze hadden allemaal wel hun voor en nadelen.

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

[Verwijderd]

Je hebt gelijk, ziet er niet goed uit, trouwens nieuwe url:
http://www.douglasdesign.nl/klanten/kasteelfeesten/

[Verwijderd]

Ik heb een nieuwe opzet gemaakt met wat hulp via een link van Anne.

De pagina staat op: http://www.douglasdesign....asteelfeesten/design.html
Zoals je ziet klopt het nog niet helemaal, maar het grootste probleem (linker + rechterkolom even lang maken) is opgelost + de footer blijft ook nog eens netjes onderaan staan.

Daar komt bij dat dit goed werkt in: IE, FireFox, Safari en Opera.

Ik heb nog 2 problemen:

1:

Onder de rode balk bovenaan zie je een klein stukje blauw over de volledige breedte van de pagina, div links, content en rechts sluiten niet netjes aan op div header.

De opbouw van de div's is als volgt:

code:

[header]
[main1]
     [main2]
           [left]
           [content]
           [right]
     [/main2]
[/main1] 
[footer]

2:

De div content loopt niet helemaal door naar beneden (tot de footer) bij weinig tekst... waardoor je een groot blauw vlak ziet onder de div content.

[IschaGast]

Als je er nou eens dit van maakt:

Cascading Stylesheet:

#main1 { 
margin: 0pt; 
padding: 0pt; 
background: #FEF2E5 url(img/bg_links.jpg) repeat-y scroll left top; 
-moz-background-clip: initial; 
-moz-background-origin: initial; 
-moz-background-inline-policy: initial; }

Dan heb je in ieder geval een achtergrondkleur voor je main gedeelte in firefox in ieder geval heb niet gekeken hoe het met de rest zit.


En welke link mag dat trouwens zijn ben wel benieuwd?

[ Voor 9% gewijzigd door IschaGast op 29-07-2004 14:50 ]

[Verwijderd]

Werkt!

http://www.pixy.cz/blogg/clanky/css-3col-layout/

[ Voor 69% gewijzigd door Verwijderd op 29-07-2004 14:53 ]

[Verwijderd]

Bug 2 ook opgelost door doctype te veranderen in:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

[Verwijderd]

Als dat een bug in IE was, zet dan iets van '<!-- blaat -->' voor de doctype in plaats van er transitional van te maken.

[Verwijderd]

Nee in IE was het juist wel goed, alleen Safari, FireFox + Opera deden moeilijk...

Nieuwe url:
http://www.douglasdesign.nl/klanten/kasteelfeesten/

[Verwijderd]

Eerst valideren ;-)

• http://validator.w3.org/c...l/klanten/kasteelfeesten/
• http://jigsaw.w3.org/css-...asteelfeesten/css/css.css

[Verwijderd]

HTML: This Page Is Valid HTML 4.01 Transitional!
CSS: Geen fout of waarschuwing gevonden. Gefeliciteerd!

Woei, maar wat een domme fout