[HTML] Achtergrond van pagina en tabel op 1 lijn

[JaymzHetfield]

Voor het eerst sinds eeuwen ben ik weer eens begonnen met het maken van een website, maar nu loop ik dus tegen een probleem aan. Googlen en tot grote frustratie pielen met tabelinstellingen heeft tot nog toe niks geholpen.

De situatie:
Een html pagina met als achtergrond een afbeelding van 3 pixels hoog: licht, licht, donker, voor zo'n leuk streepdesigntje.
In de pagina een tabel met 3 rijen:
Rij1: Vaste hoogte, achtergrond afbeelding met een hoogte die een veelvoud van 3 is.
Rij2: Variabele hoogte (afhankelijk van de content), achtergrond afbeelding met een hoogte van 3.
Rij3: Vaste hoogte, achtergrond afbeelding met een hoogte die een veelvoud van 3 is.

Het probleem:
Rij1 sluit mooi aan bij de achtergrond, de lijntjes van de achtergrond lopen door in die van de afbeelding in de rij. Bij Rij2 is dit ook het geval, maar onderaan gaat het mis. Zoals ik al zei is de hoogte van Rij2 afhankelijk van de inhoud en het nare is dat de gebruikte achtergrondafbeelding in Rij2 niet een volledig aantal keren herhaald wordt. Soms bestaat de laatste herhaling uit 1, 2, of 3 pixels hoog. Met als gevolg dat de onderkant van Rij2 eindigt met ofwel een donker of een licht streepje. Rij3 sluit hierdoor niet meer mooi aan.

De vragen:
Hoe kan ik afdwingen dat Rij2 een veelvoud van 3 pixels hoog wordt? Ofwel: Hoe kan je afdwingen dat de achtergrondafbeelding van Rij2 een heel aantal keren herhaald wordt?
Is dit trouwens wel dé manier om dit te doen?

Mocht het niet helemaal duidelijk zijn, hier wat voorbeelden:
Hier zoals 'ie bedoeld is: http://home.wanadoo.nl/jaymz/test/
Hier zonder de onderkant, zodat het probleem nog duidelijker zichtbaar is: http://home.wanadoo.nl/jaymz/test/zonderonderkant.htm
Hier de losse afbeeldingen: http://home.wanadoo.nl/jaymz/test/img/layout

[sig69]

Ik denk dat je beter de "streepjes" in de table background transparant kan maken, dan klopt het altijd. Het is niet erg handig om die streepje ook in je table background te zetten (zoals je nu dus ondervindt).

[Salandur]

maak de streepjes tot achtergrond van je pagina, en de overige afbeeldinging maak je transparant voor het gedeelte dat streepjes bevat. Dan heb je het probleem ook niet meer en sluit alles mooi aan.

[JaymzHetfield]

Goed idee op zich... maar volgens mij heb ik dat expres niet zo gedaan omdat je nu die lijntjes mooi in die dropshadows weg ziet faden, volgens mij wordt dat best lelijk als je die shadows op een transparante ondergrond doet.

[JaymzHetfield]

Zoals ik al vermoedde krijg je dan gezeik met die dropshadows, want je anti-aliasing gaat dan naar de maan.

Zie hier 2 pogingen tot het gebruik van transparantie:
http://home.wanadoo.nl/jaymz/test/transparant1.htm
http://home.wanadoo.nl/jaymz/test/transparant2.htm

Dat ziet er dus niet uit.
Andere suggesties? Ik zal toch vast niet de eerste zijn die iets dergelijks probeert?

[André]

Dit zou je heel mooi met PNG kunnen doen, die legt de dropshadow heel mooi over die streepjes heen

[sig69]

André schreef op vrijdag 22 april 2005 @ 13:27:
Dit zou je heel mooi met PNG kunnen doen, die legt de dropshadow heel mooi over die streepjes heen

Alle jammer dat je dan weer een omweg moet bewandelen om het in IE netjes weer te geven. Maar goed, dan werkt het wel.

[JaymzHetfield]

André schreef op vrijdag 22 april 2005 @ 13:27:
Dit zou je heel mooi met PNG kunnen doen, die legt de dropshadow heel mooi over die streepjes heen

Ik had eerst een transparante PNG gemaakt (in Photoshop CS), maar die was in firefox wel transparant en in IE niet! Vandaar die gifs. Maar die zijn dus om te kotsen.

[sig69]

JaymzHetfield schreef op vrijdag 22 april 2005 @ 14:13:
[...]


Ik had eerst een transparante PNG gemaakt (in Photoshop CS), maar die was in firefox wel transparant en in IE niet! Vandaar die gifs. Maar die zijn dus om te kotsen.

Heb je m'n post hierboven gelezen of niet?

[JaymzHetfield]

Je post stond er nog niet toen ik replyde... ik zal het straks uitproberen... maar ik vermoed nu al dat je de held vd dag wordt.

[JaymzHetfield]

Ik heb een soort van oplossing in elkaar geflanst...
Met dit in m'n css:

code:

.trans_test 
{   
  /* Mozilla ignores crazy MS image filters, so it will skip the following */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='img/layout/transpng.png');
}
/* IE ignores styles with [attributes], so it will skip the following. */
.trans_test[class] {
  background-image:url(img/layout/transpng.png);
}

En dit in m'n html:

code:

<td class="trans_test">&nbsp;</td>

En zoals je hier kan zien: http://home.wanadoo.nl/jaymz/test/transparant4.htm werkt het dus ook wel... maaaaar in IE krijg je nu een vette waarschuwing. Dat is ook niet bepaald bezoekersvriendelijk:
"Om de beveiligingsopties van uw computer te verbeteren, heeft Internet Explorer dit bestand beperkt in het weergeven van actieve inhoud, die mogelijk toegang verschaft tot uw computer."

Die website wordt voor een klein bedrijfje, en ik denk niet dat er ook maar 1 bezoeker is die op "Geblokkeerde inhoud toestaan..." gaat klikken. Klinkt namelijk niet erg aantrekkelijk voor de "gemiddelde huisvrouw" e.d.

Is dat nog te omzeilen door het op een andere manier te doen?

[We Are Borg]

JaymzHetfield schreef op vrijdag 22 april 2005 @ 20:05:

"Om de beveiligingsopties van uw computer te verbeteren, heeft Internet Explorer dit bestand beperkt in het weergeven van actieve inhoud, die mogelijk toegang verschaft tot uw computer."

Dat is omdat je het lokaal test. Online hoor je daar geen last van te hebben

[JaymzHetfield]

Inderdaad! Oh man, ik ben echt zoooo lomp.

Dank aan allen!!

[JaymzHetfield]

Grrr, nu loop ik weer tegen een ander vaag IE probleem aan!!!

Ik heb nu dit in m'n css:

code:

.cellinks 
{   
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='img/layout/linkerkant.png');
}

.cellinks[class] {
  background-image:url(img/layout/linkerkant.png);
}

En dit in m'n html:

code:

<td class="cellinks">&nbsp;</td>

Maar goed een beetje wat nuttigs in je <td> is wel zo fijn, dus ik wou er wat linkjes in maken die normaal zwart zijn, niet onderstreept en wit als je er op klikt of als je er over heen gaat.
Dus, dit in m'n css gestopt:

code:

a:link {
    color: #000000;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #000000;
}
a:hover {
    text-decoration: none;
    color: #FFFFFF;
}
a:active {
    text-decoration: none;
    color: #FFFFFF;
}

Werkt als een speer in Firefox (zoals gebruikelijk), maar in IE werkt het niet... heb ik 5 links onder elkaar, doet ie het alleen bij de onderste zoals de bedoeling is

Plaats ik de links echter ergens buiten die <td> met de "cellinks" class, dan werkt het weer wel! Wat nu?

[André]

Heb je een online voorbeeld? We kunnen natuurlijk zo niet raden waarom dat niet werkt. Ik vermoed dat IE het achtergrondplaatje over de links heen legt door het filter waardoor de hover niet meer werkt.

[JaymzHetfield]

Het is nog erger, niet alleen de hover werkt niet, de links werken überhaupt niet. Je uitleg klinkt wel logisch op zich.
Zal zo eens een voorbeeldje maken en online zetten.


edit:
Daar is ie dan: http://home.wanadoo.nl/jaymz/test2/

[ Voor 16% gewijzigd door JaymzHetfield op 25-04-2005 13:18 ]

[JaymzHetfield]

Opgelost!

Check deze site: http://allinthehead.com/retro/69/sleight-of-hand
Hier gaan ze in op het probleem om transparante PNG's als <td> of <div> backgrounds te gebruiken. Bij beiden heb je dan echter het probleem dat hrefs niet meer werken.

Na veel geneuzel over 1px hacks levert reactie 54 uiteindelijk de oplossing. Ik heb dit in m'n css toegevoegd en nu werkt het wel:

code:

.cellinks* {
position:relative;
}