[CSS] Faux Columns - achtergrond verschuift - Softwareontwikkeling

zondag 29 juli 2007 15:11

Acties:

Topicstarter

Ik ben bezig met het implementeren van een faux columns oplossing, maar er gaat iets mis. Zodra ik het venster kleiner maak verschuift de achtergrond. Dit gebeurt zowel in FF als in IE.

Ik doe ongetwijfeld iets verkeerd, maar kom er maar niet achter wat dat is. Misschien kan iemand hier zijn licht erop laten schijnen?

Ik heb een simpel voorbeeld gemaakt om goed te kunnen laten zien wat er mis gaat. Het gaat om deze pagina met de volgende code:

Cascading Stylesheet:

body,html
    {
        margin: 0;
        padding: 0;
        height: 100%;
        color: #000;
        background: #FFF url(body_background.png) repeat-y 50% 0;
    }

#container
    {
        position: relative;
        margin: auto;
        width: 800px;
        min-height: 100%;
        height: 100%;
    }

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Faux Columns test</title>
    <link rel="stylesheet" href="screen.css" type="text/css" media="screen" />
</head>

<body>

<div id="container">

    Tekst blijft staan, achtergrond schuift weg!

</div>


</body>

</html>

omniscale.nl

zondag 29 juli 2007 15:24

Acties:

guanche

Dat is nu eenmaal wat je krijgt met faux cols. Ik heb even nagedacht, maar zou niet direct een oplossing weten hiervoor. De background properties CSS ondersteunen dit niet. Waarom niet gewoon echte columns maken?

zondag 29 juli 2007 21:02

Acties:

posttoast

Topicstarter

Echt columns als in table-columns? Dat doe ik liever niet omdat dat indruist tegen alles wat ik over semantiek geleerd heb

Ik kan me bijna niet voorstellen dat er geen andere oplossing voor is...

omniscale.nl

zondag 29 juli 2007 21:06

Acties:

Fuzzillogic

Cool

Het kan wel hoor, met faux columns. Ik doe het all the time. Alleen moet ik zeggen dat ik zo 123 ook niet zie waarom het hier niet goed werkt. Misschien omdat je zowel de body als html een background geeft. Beperkt dat eens tot het html-element alleen?

zondag 29 juli 2007 21:13

Acties:

posttoast

Topicstarter

Als ik het alleen bij het html-element aangeef blijft het probleem. Maar als jij ergens de oplossing hebt liggen dan houd ik me voorbehouden

Ik ben dit probleem al heel vaak tegengekomen, maar ik wil het nu toch een keer goed tackelen.

omniscale.nl

zondag 29 juli 2007 22:03

Acties:

Exe-cuter

achtergrond moet je op #container zetten, niet op de body.

En de CSS moet eerder iets als dit zijn:

code:

#container 
    { 
        position: relative; 
        margin: auto; 
        width: 800px; 
        height: 100%; 
        height: auto !important; 
        min-height: 100%; 
    }

[ Voor 68% gewijzigd door Exe-cuter op 29-07-2007 22:06 ]

zondag 29 juli 2007 22:14

Acties:

posttoast

Topicstarter

Exe-cuter schreef op zondag 29 juli 2007 @ 22:03:
achtergrond moet je op #container zetten, niet op de body.

En de CSS moet eerder iets als dit zijn:
code:
1
2
3
4
5
6
7
8
9
#container 
    { 
        position: relative; 
        margin: auto; 
        width: 800px; 
        height: 100%; 
        height: auto !important; 
        min-height: 100%; 
    }

Maar als ik de achtergrond op de #container zet, dan kan ik hem niet zo breed maken als hij nu is. Hij is nu 4000 pixels breed om ervoor te zorgen dat het patroon doorloopt. Als ik hem op de container zet kan ie maar 800px breed zijn.

omniscale.nl

zondag 29 juli 2007 22:33

Acties:

crisp

Devver

Pixelated

Een min-width:800px op body,html lijkt te helpen in Firefox

Intentionally left blank

zondag 29 juli 2007 22:40

Acties:

Fuzzillogic

Cool

posttoast schreef op zondag 29 juli 2007 @ 22:14:
[...]

Maar als ik de achtergrond op de #container zet, dan kan ik hem niet zo breed maken als hij nu is. Hij is nu 4000 pixels breed om ervoor te zorgen dat het patroon doorloopt. Als ik hem op de container zet kan ie maar 800px breed zijn.

Je geeft html de doorlopende achtergrond, en dan de container de faux columns.

Overigens heb je de container niet nodig, en kun je daar de body prima voor gebruiken. (althans ik XHTML) Scheelt weer een element.

zondag 29 juli 2007 22:45

Acties:

crisp

Devver

Pixelated

Fuzzillogic schreef op zondag 29 juli 2007 @ 22:40:
[...]

Je geeft html de doorlopende achtergrond, en dan de container de faux columns.

Overigens heb je de container niet nodig, en kun je daar de body prima voor gebruiken. (althans ik XHTML) Scheelt weer een element.

In HTML ook hoor, zolang de browser maar in 'standards compliant mode' rendered. IE < 6 zou ik echter niet op rekenen

Intentionally left blank

zondag 29 juli 2007 23:07

Acties:

posttoast

Topicstarter

crisp schreef op zondag 29 juli 2007 @ 22:33:
Een min-width:800px op body,html lijkt te helpen in Firefox

Hmmm, vreemd: hier werkt dat wél in IE7 maar juist niet in FF. Zie dit voorbeeld. Sorry, mijn fout. Ik zat naar een versie uit de cache te kijken. Dit lijkt inderdaad te werken, zowel in FF als in IE7. Maar dit levert wel weer een nieuw probleem op: als het venster kleiner is dan die 800px verschijnt er geen horizontale scrollbar. Dat is niet zo handig dus...

Fuzzillogic schreef op zondag 29 juli 2007 @ 22:40:
[...]

Je geeft html de doorlopende achtergrond, en dan de container de faux columns.

Overigens heb je de container niet nodig, en kun je daar de body prima voor gebruiken. (althans ik XHTML) Scheelt weer een element.

Goede tip!

Dit is alleen wat lastiger als ik een schaduwrandje wil toepassen. Die zit niet in dit voorbeeld zoals je kunt zien, maar hij komt wel in veel ontwerpen voor. Heb je daar nog tips voor?

[ Voor 36% gewijzigd door posttoast op 29-07-2007 23:17 ]

omniscale.nl

maandag 30 juli 2007 01:06

Acties:

Fuzzillogic

Cool

Schaduwrandje kunt je toch prima meenemen in de faux columns, eventueel met een alpha-blended png'tje. Maar het hangt een beetje van je design af. En er is niets dat je tegenhoudt om een extra wrapper-divje te gebruiken, mocht dat handig zijn.

dinsdag 31 juli 2007 20:38

Acties:

posttoast

Topicstarter

Een update van mijn kant. Ik heb een nieuwe opzet in elkaar gezet. De achtergrond in de body, de faux columns in de container-div. Werkt prima inderdaad. Maar nu gaat er iets anders mis: zodra het venster minder breed is dan 800px (de breedte van de container) komt er zowel een horizontale als een verticale scrollbar. Logisch, want hij gaat uit van een hoogte van 100% en zodra er een horizontale scrollbar komt, komt hij die ruimte te kort. Maar nu de vraag: hoe los ik dit op?

Het voorbeeld is weer hier te bekijken, en dit is de code:

Cascading Stylesheet:

body,html
    {
        margin: 0;
        padding: 0;
        height: 100%;
        color: #000;
        background: #FFF url(body_background.png) repeat center;
    }

#container
    {
        position: relative;
        margin: auto;
        width: 800px;
        min-height: 100%;
        height: 100%;
        background: #FFF url(container_background.png) repeat-y;
    }

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Faux Columns test</title>
    <link rel="stylesheet" href="screen.css" type="text/css" media="screen" />
</head>

<body>

<div id="container">

    Er komt bij verkleinen een verticale scrollbar

</div>


</body>

</html>

Edit: ik moet er even aan toevoegen dat dit probleem zich alleen in FF en IE6 voordoet, en niet in IE7.

[ Voor 3% gewijzigd door posttoast op 31-07-2007 21:23 ]

omniscale.nl

woensdag 1 augustus 2007 22:10

Acties:

posttoast

Topicstarter

Niemand?

omniscale.nl

woensdag 1 augustus 2007 22:37

Acties:

Verwijderd

Ik zie eigenlijk niet precies wat er gebeurt en wat het probleem. Maar een voorkomend probleem met faux columns is het verschuiven als het scherm of een even, of oneven aantal pixels breed is. Dat heb ik alleen met IE6 zien gebeuren en niet met Firefox. De oplossing die ik daarvoor hanteer is de background image een extra pixel rechts geven dat transparant is.

woensdag 1 augustus 2007 23:07

Acties:

posttoast

Topicstarter

Nee, dat is hier niet een probleem. Wat wel een probleem is dat IE6 en FF een verticale scrollbar geven zodra het venstel smaller is dan de breedte van de container-div (omdat hij een hoogte van 100% pakt, en hij als de horizontale scrollbar er is dus ruimte te kort komt). Hoe ik dit moet oplossen weet ik niet.

omniscale.nl

vrijdag 3 augustus 2007 16:36

Acties:

posttoast

Topicstarter

Omdat ik me niet kan voorstellen dat niemand hier een oplossing heeft voor dit probleem doe ik een laatste poging:

Ik heb 2 achtergronden: 1 voor de body, 1 voor de containerdiv. De containerdiv bevat de faux-columns. Zowel de body als de containerdiv hebben een hoogte van 100%, en daar gaat het mis. Zodra het browserscherm smaller wordt dan de breedte van de containerdiv (in dit geval 800px) tonen zowel IE6 als FF een verticale scrollbar, terwijl er natuurlijk alleen een horizontale zou moeten zijn. Zie dit screenshot:

Afbeeldingslocatie: http://tweakers.net/ext/f/2e093473d0784d9c756bdb971a2441c9/full.png

Afbeeldingslocatie: http://tweakers.net/ext/f/2e093473d0784d9c756bdb971a2441c9/full.png

omniscale.nl