achtergrond tabel uitrekken

Status
Niet open voor verdere reacties.
A

arievanoosten

Gebruiker
Lid geworden
18 aug 2008
Berichten
9
hallo allemaal,
ik heb meerder tabels met de zelfde achtergrond op mijn website. Alleen de tabellen verschillen nog al van groote.. nu wil ik eigenlijk een grote afbeelding en tot de afbeelding krimpt naar de grote van de tabel. ik heb wel een script gevonden dat de achtergrond van de website aanpast. mij is het ook nie gelukt om die om te bouwen.
mijn vraag is weet iemand hoe dat moet of kan iemand dat script ombouwen voor tabellen

script:

<HTML>
<HEAD>
<title></title>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
NS4 = (document.layers);
IE4 = (document.all);

scaleWidth = true;
scaleHeight = true;
imSRC = "http://94.100.113.171/329050001-329100000/329062201-329062300/329062241_2_Ihga.jpeg";
if (NS4) window.onload = setResize;
function setResize(){
setTimeout("window.onresize=reDo;",500);
}
function reDo(){
window.location.reload()
}
if (IE4) window.onresize = reDoIE;
function reDoIE(){
imBG.width = document.body.clientWidth;
imBG.height = document.body.clientHeight;
}
function makeIm() {

winWid = (NS4) ? innerWidth : document.body.clientWidth;
winHgt = (NS4) ? innerHeight : document.body.clientHeight;

imStr = "<DIV ID=elBGim"
+ " STYLE='position:absolute;left:0;top:0;z-index:-1'>"
+ "<IMG NAME='imBG' BORDER=0 SRC=" + imSRC;
if (scaleWidth) imStr += " WIDTH=" + winWid;
if (scaleHeight) imStr += " HEIGHT=" + winHgt;
imStr += "></DIV>";

document.write(imStr);

}
//-->
</SCRIPT>
</HEAD>
<BODY MARGINHEIGHT=400 MARGINWIDTH=0>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
makeIm();
//-->
</SCRIPT>
</body>
</html>

alvast hartelijk bedankt
 
wil je een afbeelding als achtergrond van je tabel? Want dat is niet zo moeilijk. Komt geen javascript aan te pas. Of wil je een afbeelding in de tabel die even groot is als de tabel? Dat kan namelijk met CSS, ook geen javascript voor nodig.

Maar ik snap niet precies wat je wilt?
 
Glest zei:
wil je een afbeelding als achtergrond van je tabel? Want dat is niet zo moeilijk.
Klik om te vergroten...

Klopt, wat je wel kunt doen is die div achter de tabel zetten en vervolgens op een onresize event de tabel hoogte en breedte op de div zetten.
 
ik zal even een voorbeeld geven misschien word het dan iets duidelijker
bv. de achtergrond afbeelding die k neem is 400x500 pixels. maar mijn tabel tabel is 200x400 pixels. nu wil ik dus dat hij de afbeelding aanpast naar de grote van de tabel.. zo dat ik nog steeds de hele afbeelding zie..

bij dit voorbeeld zal de afbeelding wel een beetje raar worden.. maar het gaat even om het idee..

ik hoop dat jullie me nu verder kunnen helpen alvast bedankt
 
Laatst bewerkt:
als het plaatje in de tabel staat is het niet moeilijk.

<img src="plaatje.jpg" style="width: 100%; height: 100%; max-width: 600px; max-height: 400px" />

max-width en max-height kun je weg laten als je het niet wilt.

Als het plaatje niet in de tabel staat kun je het er het beste in zetten, behalve als er een goede rede is om hem niet in de tabel te hebben staan?

Het kan ook met javascript, maar CSS is veel beter (indien mogelijk).
 
bedankt voor je hulp. maar eigenlijk bedoel ik het als achtergrond afbeelding van een tabel. het moet kunnen want k heb het op een site gezien in een gastenboek. alleen weet k nie die site meer om die code er af te halen.

ik hoop dat jullie me verder kunnen helpen
 
Met CSS 3 zou dit mogelijk zijn:

HTML: 
<table style="background-image: url(plaatje.jpg); background-size: 100%;">
</table>

Maar helaas zitten we voorlopig op CSS 2.

Javascript gebruiken voor de layout van je site valt af te raden, dus nu moet je even nadenken wat je precies wilt.

Heb je een plaatje van een ding wat dus moet vervormen met je tabel, of heb je eigenlijk een deel in je achtergrond wat herhaald moet worden? Bijvoorbeeld, als je ronde hoekjes wilt geven aan je tabel, dan wil je niet de hele afbeelding vergroten, maar aleen het midden. De hoeken zouden hetzelfde moeten blijven.

Als je dat wilt is het namelijk makkelijk te regelen, zonder Javascript. Als je echt een plaatje hebt van een hond (ik zeg maar wat) en de hond moet vervormen, dan zul je inderdaad javascript moeten gebruiken. /edit: ook niet waar, lees P.P.S :P

P.S.
Sorry dat ik er zo omheen draai, maar hoe minder Javascript je gebruikt hoe beter. Ik zou je nu een scriptje kunnen geven, maar als iets mogelijk is zonder Javascript, dan moet het (in mijn mening) zonder Javascript :confused:

P.P.S.
Je kunt ook je achtergrond faken. Je kunt het plaatje in je tabel floaten met een z-index van -1 en een width en height van 100%.

P.P.P.S.
Kun je je achtergron laten zien? Dan is het waarschijnlijk meteen duidelijk wat je er precies mee wilt doen.
 
Laatst bewerkt:
ik lat wel een de pagina zien waar 1 zo'n tabel op staat
de website is natuurlijk nog helemaal in de bouw dus let nie op al die raare dingen ;)

bedankt voor de info ik ga even iets anders bedenken maar voor de zekerheid als het nie zou k tog graag dat script willen hebben.
k ben zelf echt nog een beginnen die eigenlijk alleen nog maar HTML kan lezen en nu ook een beetje PHP en CSS. Maar hoe komt het dan tot we nu nog maar CSS 2 hebben, dat verschild toch per server?
 
Laatst bewerkt:
Ok, dus je achtergrond is dit:
http://ophetkleinsteverzet.sportsontheweb.net/afbeeldingen/overige/tabelachtergrond-124.bmp

die kan zoiezo herhaald worden in de lengte, dus dat is geen probleem.

CSS
Code: 
table.achtergrond {
  background-image: url(http://ophetkleinsteverzet.sportsontheweb.net/afbeeldingen/overige/tabelachtergrond-124.bmp)
  background-repeat: repeat-x;
}
HTML: 
<table class="achtergrond">
</table>

Maar wat wil je dat er onder gebeurt? Moet het plaatje gewoon herhalen of moet het plaatje vervormen? Of moet elke rij om-en-om lichtgrijs en gradient zijn?

Moet het plaatje gewoon herhalen dan doe je dit:
Code: 
table.achtergrond {
  background-image: url(http://ophetkleinsteverzet.sportsontheweb.net/afbeeldingen/overige/tabelachtergrond-124.bmp)
  background-repeat: repeat;
}


Als het plaatje moet vervormen wordt het erg lelijk wanneer de tabel lang wordt. Dan zul je Javascript moeten grebruiken aangezien een plaatje met z-index -1 niet wilt werken in IE7 (heb ik geprobeerd).

Als je wilt dat de rijen om-en-om grijs-gradient zijn dan moet je je achtergrond splitsen in twee plaatjes en kun je CSS gebruiken (ik kan voorbeeldje geven als je dit wilt)
 
Laatst bewerkt:
hij moet eigenlijk gaan vervormen.. maar dan wil ik die achtergrond groter gaan maken waardoor hij dus niet lelijk word
 
Laatst bewerkt:
Wat je ook kunt doen is 3 plaatjes maken. Eén bovenkant, één overgang en één onderkant. De boven en onderkant worden dan deheletijd herhaald en deovergang kan in het midden komen. Dan heb je zonder kwaliteitsverlies een overgang en twee gekleurde delen. Bovendien kan het zonder javascript.

Je kunt dan gewoon een tabel nemen en verschillende rijen verschillende achtergronden geven. Dan kun je ook nog eens heel precies bepalen waar in je tekst de scheiding komt.

Code: 
--------------------------------
|                                         |
|  grijs                                |
|                                         |
-------------------------------
| scheiding                         |
-------------------------------
|                                         |
| grijs                                 |
|                                         |
-------------------------------
 
Laatst bewerkt:
ik denk dat dat in somige tabelen niet egt goed gaat lukken. bv. bij kleine tabellen van bv 2 tegels. het vervormen lijkt me mooier

maar wel bedankt voor de moeite
 
Bij zulke tabellen hoef je alleen de overgang te gebruiken, of de bovenkant en de overgang.
 
maar het lijkt me tog mooier om in alle tabellen allemaal de zelfde achtergrond te doen
maar vervormen kan nie in ccs? maar wel in javascript. heb jij dat script dan?
 
Probeer dit eens:
http://www.gwauctions.org/glest/tablebg.zip

Het is een plaatje van 30 bij 1 pixels en deze bron:
bg.gif


Dit wordt het: http://www.gwauctions.org/glest/tablebg.html. En het blijft hetzelfde, hoe groot je de tabel ook maakt. Je moet er dan wel voor zorgen dat de kleur boven en onder je achtergrond hetzelfde zijn. Als je dat niet wilt weet ik nog wel een andere oplossing.
HTML: 
<html>
<head>
<style>
table.bg {
  background-image: url(bg.gif);
  background-repeat: repeat-x;
  background-position: 0% 50%;
  background-color: #c0c0c0;
}
</style>
</head>
<body>

<table class="bg">
  <tr>
    <td>
      Aap Aaap Aaap Aaap Aaap<br />
      Aap<br />
      Aap<br />
      Aap<br />
      Aap<br />
    </td>
  </tr>
</table>

</body>
</html>
 
Laatst bewerkt:
misschien betere oplossing:

een plaatje van 1*1124 pixels (neemt minder dan 1kb in beslag) wat verticaal herhaalt en in het midden van de tbael wordt gezet. Op die manier kun je precies bepalen hoe het er uit ziet, maar je hebt een maximum lengte (nu 1124 pixels). Maar je kunt je plaatje groter maken. Het neemt toch nauwelijks ruimte in beslag. Ik heb hier je eigen plaatje gebruikt, alleen 1 pixel breed gemaakt en 1124 pixels hoog.

zelfde bron, ander plaatje:
http://www.gwauctions.org/glest/tablebg2.zip
http://www.gwauctions.org/glest/tablebg2.html
 
Laatst bewerkt:
THNX!!
bedankt he die vin k een goede oplossing!! alleen vraag k me af hoe kom je aan die kleurencode die je uit me plaatje het gepakt?


VIELE VIELE DANK!!!
 
Graag gedaan ;)

Ik gebruik Paint Shop Pro, die laat voor kleuren ook de HTML code zien, maar het klopt niet helemaal. Alleen bij een gradient maakt het niet extreem veel uit natuurlijk.

Verder zijn er een heleboel gratis HTML color pickers op internet. Maar als je Photoshop, Paint Shop Pro, Gimp of iets dergelijks hebt, dan heb je er waarschijnlijk geen nodig. Ik weet het niet zeker want ik gebruik alleen PSP, maar Gimp en PS laten waarschijnlijk ook de HTML code zien. En anders kun je het ook nog zelf berekenen als je de RGB weet.

De HTML code is hetzelfde als RGB, maar dan hexadecimaal. Window calculator kan converteren tussen hexadecimaal en decimaal. Eerst moet je het rode component in hexadecimaal zetten, dan plak je er het groene achteraan en dan het blauw.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan