Image repeat in container div [Opgelost]

Op de [url=http://www.verhoefcommunicatie.nl/klanten/vos]volgende site[/url] maak ik gebruik van een [url=http://www.verhoefcommunicatie.nl/klanten/vos/images/bg.gif]background image[/url] die verticaal moet repeaten in een container div (even doorklikken op de startpagina naar de nederlandse versie).

Normaal gesproken zet ik die backgrounds altijd in de body maar die word al gebruikt voor een andere achtergrond (dat lichtgrijze grid). Wat nu het probleem is dat die background in Safari en Firefox niet goed, of beter gezegd, helemaal niet gerepeat word. In Camino en IE6/Win doet ie het wel goed…

Misschien had ik dat lichtgrijze grid wel in een aparte div moeten zetten en die background tóch maar in de body maar gezien dat ie het in IE6/Win en Camino wél doet moet het wel op te lossen zijn dunkt me.

Iemand misschien een oplossing? :smiley:

Niemand?

je gebruikt in je stylesheet een float: left en float: right. Float wil zeggen dat het element drijft en dus niet maatgevend is voor het omvattende element. Je kunt het oplossen door "#maincol" een margin-left te geven zodat er genoeg ruimte overblijft voor "#leftcol" , de float vervang je door "position: relative; " Ik kan dit natuurlijk niet uit proberen :wink: maar met een beetje experimenteren moet het lukken

Bedankt, daar ga ik morgen even mee experimenteren. Er blijven toch altijd weer meerdere wegen naar Rome leiden hè... En omdat ik normaal gesproken die repeatende images in de body zet was die theorie van jou me nooit opgevallen. Als het lukt ben ik ook meteen van die floats verlost :wink:

Het lijkt mij het makkelijkst om in frames te werken. En vergeet niet ook nog even naar de typografie te kijken, ik lees door de gaten de tekst niet meer ;)

[quote:b7a193b801="bruno"]Het lijkt mij het makkelijkst om in frames te werken. En vergeet niet ook nog even naar de typografie te kijken, ik lees door de gaten de tekst niet meer ;)[/quote:b7a193b801]

Ik mis het sarcasme. :?

En een methode die ook zou kunnen werken: plaats de floats #maincol en #leftcol in een nieuwe div. Geef die div de afbeelding als y-repeatende background en het zou moeten kloppen. Geen zin om te testen, maar als mijn geheugen werkt hoort het wel te werken.

[quote:87af514033="ZB-Rob"]Ik mis het sarcasme. :? [/quote:87af514033] Sorry, ben ik niet zo goed in....

In Safari 1.0 zie ik dat die lichte achtergrond niet over de hele background herhaald worden.

De handigste manier om de zwart/rode kolom te laten repeaten is om een structuur te gebruiken zoals:

[code:1:bd9681a9e1]<div id="container">
<div id="leftbar">
{tekst in zwarte vlak}
</div>

<div id="content">
{tekst in rode vlak }
</div>
</div>[/code:1:bd9681a9e1]

Je kan het dan in de CSS op 2 manieren oplossen. Floating is op zich een goede manier, maar het gaat fout als de tekst in de zwarte kolom langer is dan de tekst in de rode kolom. Op zich is dat wel weer op de lossen door de footer in de container div op te nemen en daar een clear : both op te zetten, maar je zit met de achtergrond van de afgeronde hoeken.

De manier die ik zelf zou gebruiken is positioning:

[code:1:bd9681a9e1]#container {
position : relative;
}

#leftbar {
position : absolute;
top : 0;
left : 0;
width : 150px;
}

#content {
margin-left : 160px;
}[/code:1:bd9681a9e1]

[quote:cf2be3a50e="tennapel"]Floating is op zich een goede manier, maar het gaat fout als de tekst in de zwarte kolom langer is dan de tekst in de rode kolom. Op zich is dat wel weer op de lossen door de footer in de container div op te nemen en daar een clear : both op te zetten[/quote:cf2be3a50e]

Datzelfde geld voor position: absolute, maar in dat geval werkt een footer met clear : both niet meer.
bij float werkt dat in een eenvoudige test wel (safari 1.2.2).

[quote:3276000c7d="mac748"][quote:3276000c7d="tennapel"]Floating is op zich een goede manier, maar het gaat fout als de tekst in de zwarte kolom langer is dan de tekst in de rode kolom. Op zich is dat wel weer op de lossen door de footer in de container div op te nemen en daar een clear : both op te zetten[/quote:3276000c7d]

Datzelfde geld voor position: absolute, maar in dat geval werkt een footer met clear : both niet meer.
bij float werkt dat in een eenvoudige test wel (safari 1.2.2).[/quote:3276000c7d]

Yup, je hebt gelijk. Ik was in de haast dat even vergeten. Meestal zet ik de repeatende background op de body, dan heb je dat probleem niet. Float is voor deze situatie de beste oplossing.

http://www.complexspiral.com/publications/containing-floats/

[url=http://www.verhoefcommunicatie.nl/klanten/vos/]Opgelost![/url]

De truc was idd. de footer opnemen in de container div. met daarop weer een clear:both
Bedankt voor het meedenken :wink:

Syndic,

Als ik in Mozilla kijk, dan loopt de lichtgrijze achtergrond maar een klein stukje onder de header door. De rest van de pagina heeft dan een witte achtergrond. Is dat de bedoeling?

Dat klopt idd. Als je goed kijkt zie je dat er aan de onderkant van het patroontje een lichte horizontale grijze lijn loopt. [url=http://www.verhoefcommunicatie.nl/klanten/vos/images/pattern.gif]Dit[/url] is het plaatje...

Da’s dus wel de bedoeling ja :wink: