CSS background-image niet afkappen

[MattMax]

In een tabel gebruik ik een verticale wave (vergelijk met een slang die om een verticale stok slingert) als background-image voor een tabel. Deze achtergrond is gespecificeerd in CSS met als eigenschappen repeat-y. De wave sluit dan precies aan op de volgende wave bij een repeat in verticale richting.

Helaas wordt de laatste wave afgekapt op het moment dat de tekst in de tabel stopt. Aangezien deze tekst dynamisch is, zou ik willen instellen dat de background-image altijd wordt afgemaakt en nooit wordt afgekapt. Dus bijv. zes volledige herhalingen van de achtergrond in plaats van vijf en een halve herhaling, want dat sluit niet mooi aan. Ik zou niet weten of ik dit met CSS kan instellen, andere alternatieven zijn ook welkom. Het moet echter wel een achtergrond blijven en het aantal herhalingen zal altijd varieren.

[Cavorka]

Lijkt me niet dat dit kan me CSS zelf, aangezien het nogal dynamisch (aka afhankelijk van je tabel hoogte is).

Misschien moet je iets proberen met javascript, dus het bepalen van de hoogte van je tabel of cel waar je tekst in staat.

Nog een optie is om onder je tekst een extra tr te maken met een png met alpha gradient erin (dus van 100% doorzichtig naar 0% doorzichtig) met een bepaalde hoogte om het afkap effect wat minder hard te maken. Uiteraard werkt dit dan dus niet in Internet Explorer (geen goede PNG support) maarja, what does?

[ Voor 11% gewijzigd door Cavorka op 09-10-2004 14:47 ]

[frickY]

Je kunt met Javascript kijken hoe breed je tabel is, en dit afronden naar boven naar een factor van de breedte van je wave.

Dus als je wave 40px breed is, en je tabel 150px, dat javascript je tabel verbreedt naar 160px.

Er is een javascript functie om op te vragen hoe breed/hoog een object is, kan er alleen zo snel niet opkomen.

edit:
offsetWidth was m geloof ik

[ Voor 7% gewijzigd door frickY op 09-10-2004 15:07 ]

[krvabo]

frickY schreef op 09 oktober 2004 @ 15:03:
Je kunt met Javascript kijken hoe breed je tabel is, en dit afronden naar boven naar een factor van de breedte van je wave.

Dus als je wave 40px breed is, en je tabel 150px, dat javascript je tabel verbreedt naar 160px.

Er is een javascript functie om op te vragen hoe breed/hoog een object is, kan er alleen zo snel niet opkomen.

edit:
offsetWidth was m geloof ik

repeat-y is hoogte, niet breedte

code:

       Y |
         |
         |
         |
---------+---------
         |        X
         |
         |
         |

[MattMax]

OK, Java Script lijkt me inderdaad de beste oplossing. Mochten er in de tussentijd nog briljante suggesties binnenkomen, houd ik me aanbevolen.

[Dark Blue]

Waarom bouw je om die tabellen onder elkaar geen tabel, of div... die je laat uitrekken?

Dus

PHP:

<div style="background-image: url('draai.gif'); background-repeat: repeat-y;">
<table>
content
</table>
<table>
content 2
</table>
</div>

Beter nog los je het helemaal op met divjes; imho is dat netter dan een tabel.

PHP:

<div style="background-image: url('draai.gif'); background-repeat: repeat-y;">
<div>
content
</div>
<div id="tussenstukje-met-egale-achtergrond"></div>
<div>
content 2
</div>
</div>

Dan blijft je draaiing verticaal doorgaan een aansluiten. Je kunt als je wilt na elk artikeltje ofzo nog een paar enters geven zodat je wat ruimte hebt onder elk stukje.

[ Voor 31% gewijzigd door Dark Blue op 10-10-2004 14:07 ]

[MattMax]

Dat had inderdaad gekund, maar ik wil een background-image met en vaste hoogte van 152 px een variabel aantal maal laten herhalen, afhankelijk van de voor tekst benodigde hoogte. Ik heb nu de volgende oplossing gebruikt:

code:

<script language="JavaScript" type="text/JavaScript">
function setTableHeight() {
     if (document.getElementById) {
        var menuHeight = document.getElementById('menu').offsetHeight;
        var menuElement = document.getElementById('menu');
        var menuBackgroundHeight = 152;
        var menuAdjustedHeight = Math.ceil(menuHeight/menuBackgroundHeight)*menuBackgroundHeight;
        menuElement.height = menuAdjustedHeight;
     }
}
</script>

Uitvoeren met:

code:

<body onLoad="setTableHeight();">

Tabel laden als:

code:

<table id="menu" class="menu_bg" width="100%"  border="0" cellspacing="0" cellpadding="0">

En zo werkt het perfect!

[Michali]

Maar dan nog, waarom gebruik je hier een tabel voor? Waarschijnlijk is het veel effiecienter om een ander soort element te gebruiken. Je kunt dit truukje ook toepassen op een simpel div element bijvoorbeeld.

[Verwijderd]

en dit in de css, is dat niet nog makkelijker...

code:

height: expression(Math.ceil(this.offsetHeight/125)*125);

[MattMax]

Tabel bestond al in bestaande layout, maar het is zeker een goede suggestie om dit in een <div> te zetten. Het laatstgenoemde CSS voorbeeld met expression zal ik zeker gebruiken, wist niet dat dit mogelijk was.

[-LA-]

Een beetje oude koeien uit de sloot halen maar ik zit ook met een soortgelijk probleem. Mijn background is 200pixels hoog en als de content van die div minder of iets meer is als 200pixels wordt de background afgekapt, ik wil dus dat de div in stappen van 200 pixels wordt vergroot. Nu werkte bovenstaande code in de css wel:


height: expression(Math.ceil(this.offsetHeight/200)*200);

Maar da werkt niet in firefox, dus heb ik de bovenstaande javascript geprobeerd maar dat werkte helemaal niet...

Iemand suggesties? Ideen?

[Michali]

Kijk eens naar min-height.


edit:
Ah, ik zie dat het iets lastiger is, dan ik in eerste opzicht zag. In Firefox moet je dit waarschijnlijk met javascript gaan oplossen. Je kunt de hoogte dan uitrekenen om strategische momenten en dit zelf toekennen. Bijvoorbeeld bij het laden van de pagina (window.onload) en bij het resizen van het venster (window.onresize).

[ Voor 86% gewijzigd door Michali op 30-03-2008 22:03 ]

[-LA-]

Netzoiets als MattMax hierboven zegt ja, alleen dat stukje code van hem krijg ik niet werkend

[kalizec]

Dan zul je toch uit moeten zoeken wat er niet aan werkt. Want de code lijkt mij 123 zo te kloppen. Maak anders even een testcase (voorbeeld) waar die code niet werkt, zet die online en post hier een url naar die testcase.

Ook kun je prima kijken wat er mis gaat met de javascript middels de DOM-inspector van Firefox.

[Michali]

Een fout die ik zo spot is dit:

JavaScript:

menuElement.height = menuAdjustedHeight;

Dit van maken:

JavaScript:

menuElement.style.height = menuAdjustedHeight + 'px';

Krijg je niet gewoon een error verder trouwens?

[-LA-]

Ah geweldig! Dat "style" deed het hem! Dank je wel!