FOK!forum / Digital Corner / [HTML/Dreamweaver] Tabel en plaatjes probleem.
Annewoensdag 16 augustus 2006 @ 12:42
Hoi!

Normaal weiger ik dreamweaver te gebruiken, maar omdat deze website ook in dreamweaver aangepast gaat worden, vond ik het wel een goed idee om hem daar maar meteen in te maken. (achteraf .. nouja, laat ook maar)

Nu loop ik me alleen een partij te kloten met plaatjes en een tabel.
Het volgende doet zich namelijk voor:



Er zit één kleine rotpixel tussen waardoor de plaatjes niet goed aan elkaar sluiten (don't mind de border eventjes)
Hoe krijg ik dat weg? Ik heb cellpadding, cellspacing uitgezet, de tabel kleiner gemaakt, etcetera. Het werkt allemaal voor geen meter terwijl het plaatje rechts wel mooi tegen de kanten zitten, zoals je kunt zien.

De broncode *ril* :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37		<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#A7DE00">
<table width="791" height="370" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000" bgcolor="#FFFFFF">
  <tr> 
    <td width="41" height="30" bordercolor="#FFFFFF"> </td>
    <td width="698" height="30" bordercolor="#FFFFFF"> </td>
    <td width="42" height="30" bordercolor="#FFFFFF"> </td>
  </tr>
  <tr> 
    <td width="41" height="250" bordercolor="#FFFFFF"><img src="banner02.png" width="42" height="248"></td>
    <td bordercolor="#000000" bgcolor="#C2E559"><img src="banner01.png" width="698" height="248"></td>
    <td width="42" bordercolor="#FFFFFF"> </td>
  </tr>
  <tr> 
    <td width="41" height="21" bordercolor="#FFFFFF"> </td>
    <td height="21" bordercolor="#FFFFFF"><img src="banner03.png" width="100" height="32" align="top"></td>
    <td width="42" height="21" bordercolor="#FFFFFF"> </td>
  </tr>
  <tr>
    <td width="41" bordercolor="#FFFFFF"> </td>
    <td bordercolor="#000000" bgcolor="#C2E559"> </td>
    <td width="42" bordercolor="#FFFFFF"> </td>
  </tr>
  <tr> 
    <td width="41" bordercolor="#FFFFFF"> </td>
    <td height="30" bordercolor="#FFFFFF" bgcolor="#FFFFFF"> </td>
    <td width="42" bordercolor="#FFFFFF"> </td>
  </tr>
</table>
</body>
</html>


In Firefox ziet het er trouwens helemaal fucked up uit:



Kan ik daar ook nog een mooie zwarte border neerzetten? Of moet ik nu alles met plaatjes gaan maken ofzo .

Bij voorbaat dank voor jullie hulp !
Annewoensdag 16 augustus 2006 @ 12:46
Oh ja, nog iets.

In Firefox heeft de tabel rechts en onder wel een 1pixel zwarte border .


Té vaag gewoon . Ik snap er de ballen nog van.
Annewoensdag 16 augustus 2006 @ 13:16
Als ik de borders uitzet pakt ie hem in IE wel. In Firefox doet ie alleen de onderste goed :

Berkerywoensdag 16 augustus 2006 @ 13:27
Je zou hier een beetje mee kunnen spelen, in je style sheet:

1
2
3
4
5
6
7
8
9
10
11
12		td img{
display: block;
}
table{
border-collapse: collapse;
}
td.wit{
border: 1px solid #fff
}
td.black{
border: 1px solid #000
}


De cellen met een witte rand geef je een class="wit" mee, idem voor zwarte randjes.
#ANONIEMwoensdag 16 augustus 2006 @ 19:02
ijsmeis, is het mogelijk dat je de plaatjes en de html bestand ergens upload ofzo?
Annewoensdag 16 augustus 2006 @ 20:48
Liever niet eigenlijk .

Het bovenstaande met witte en zwarte borders heb ik ook al geprobeerd trouwens.
Ik heb de borders nu maar allemaal uitgezet, dan maar geen borders .
Dat was namelijk het enige probleem, die stomme borders. Die werken niet fatsoenlijk in FF.
#ANONIEMwoensdag 16 augustus 2006 @ 20:54
Gebruik is style bij tabellen. (zet je later wel in css ofzo)

1
2		style="border-collapse: collapse; border-left-color: #000000; 
border-right-color: #000000; border-top-color: #000000"

(haal de harde enter weg, even erbij gezet, voor de layout)

zoiets..

hiermee kun je per border van je cel een andere kleur geven.

Het zou wel simpeler gaan met de plaatjes erbij, maar goed

[ Bericht 10% gewijzigd door #ANONIEM op 16-08-2006 20:56:01 ]
Annewoensdag 16 augustus 2006 @ 20:55
En hoe gebruik ik dat dan weer per cel?

Een class geven oid?
#ANONIEMwoensdag 16 augustus 2006 @ 20:57
quote:
Op woensdag 16 augustus 2006 20:55 schreef ijsmeis het volgende:
En hoe gebruik ik dat dan weer per cel?

Een class geven oid?
class kan wel, om uit te proberen, gewoon in <table> (zoals <table border="0" style=""></table). dat werkt wel.

ik weet even niet zeker of het ook met td en tr werkt.. even uitproberen.

als je class geeft, is het wat makkelijker natuurlijk
Annewoensdag 16 augustus 2006 @ 21:00
Okay, ga ik vanavond eens proberen.

Dankjewel .
Xcaliburwoensdag 16 augustus 2006 @ 21:01
een <br /> achter je image zetten wil ook nog wel eens helpen om gekke ruimtes weg te krijgen
#ANONIEMwoensdag 16 augustus 2006 @ 21:27
Ik ben even bezig.. de code is een beetje veranderd... maar ik kan zo wel elke cel border een andere kleur enzo geven..

ik zet de pagina zo wel online..

edit: ijsmeis.html

[ Bericht 38% gewijzigd door #ANONIEM op 16-08-2006 21:56:15 ]
Annewoensdag 16 augustus 2006 @ 21:57
Opgeslagen! Dankjewel . Gaat nu wel goedkomen denk ik .
Annewoensdag 23 augustus 2006 @ 15:02
Het is goed gekomen, mijn dank nogmaals .

Maar nu heb ik er weer eentje.



In IE heb ik deze ruimte, in FF weer niet.
Nu wil ik op zich wel een ruimte er tussen, maar dan wel bij beide even groot en dat lukt mij dus niet.

De code ziet er als volgt uit:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31		<HTML> <HEAD> <TITLE> Stageverslag door censuur </TITLE> </HEAD>
<LINK HREF="stylesheet.css" REL="stylesheet" TYPE="text/css">

<BODY TOPMARGIN="0" LEFTMARGIN="0">

   <TABLE HEIGHT="478" CELLPADDING="0" CELLSPACING="0">
   <TR>
   <TD HEIGHT="350">   

      <IMG SRC="images/index.png">
   </TD>
   <TD ROWSPAN="3">
      Boe
   </TD>
   </TR>
   <TR>
   <TD HEIGHT="128">

      <IMG SRC="images/s.gif" ONMOUSEOVER="this.src='images/rollover.gif'" ONMOUSEOUT="this.src='images/s.gif'"  />
      <IMG SRC="images/t.gif" ONMOUSEOVER="this.src='images/rollover.gif'" ONMOUSEOUT="this.src='images/t.gif'"  />
      <IMG SRC="images/a.gif" ONMOUSEOVER="this.src='images/rollover.gif'" ONMOUSEOUT="this.src='images/a.gif'"  />
      <IMG SRC="images/g.gif" ONMOUSEOVER="this.src='images/rollover.gif'" ONMOUSEOUT="this.src='images/g.gif'"  />
      <IMG SRC="images/e.gif" ONMOUSEOVER="this.src='images/rollover.gif'" ONMOUSEOUT="this.src='images/e.gif'"  />
   </TD>
   </TR>
   </TABLE>


</BODY>

</HTML>


Wat doe ik nou weer fout .
Lexiunwoensdag 23 augustus 2006 @ 15:15
Waarom gebruik je voor je opmaakt tables? Tables zijn niet voor opmaak maar voor het plaatsen van informatie. Gebruik DIVJES voor de opmaak.

Voor de ruimte die je wilt kan je margin of padding gebruiken in je css file, speel er een beetje mee en je ziet dat je zo ruimte kan creeeren. om een idee te geven hoe margin en padding werken:

padding: 0 0 0 0;
margin: 0 0 0 0;

(de 0 kan b.v. 5px worden_

padding: 5px 0 0 0;

de volgorde is als volgt:

padding: top right bottom left;



succes
Annewoensdag 23 augustus 2006 @ 15:22
quote:
Op woensdag 23 augustus 2006 15:15 schreef Lexiun het volgende:
Waarom gebruik je voor je opmaakt tables? Tables zijn niet voor opmaak maar voor het plaatsen van informatie. Gebruik DIVJES voor de opmaak.

Voor de ruimte die je wilt kan je margin of padding gebruiken in je css file, speel er een beetje mee en je ziet dat je zo ruimte kan creeeren. om een idee te geven hoe margin en padding werken:

padding: 0 0 0 0;
margin: 0 0 0 0;

(de 0 kan b.v. 5px worden_

padding: 5px 0 0 0;

de volgorde is als volgt:

padding: top right bottom left;

[afbeelding]

succes
Huh?
Ik gebruik tabellen om informatie te plaatsen. Ik zie nergens een opmaak oid, behalve de padding, omdat ik dacht dat daarom misschien de witruimte tevoorschijn kwam, vandaar dat ik die heb geplaatst met de waarde 0.

Ik klaag alleen dat ie het in FF goed laat zien en in IE niet, doordat ie een witruimte plaatst.
Die wil ik graag wegkrijgen . (later voeg ik de witruimte weer toe, zodat ze in IE en FF weer gelijk zijn, want dat zijn ze nu niet)

Bedankt toch.
Lexiunwoensdag 23 augustus 2006 @ 15:26
Doh beter lezen moet ik

kan je oplossen door je padding een _ (underscore) te plaatsen voor de betreffende padding.

als er een underscore staat voor de code dan leest IE hem wel maar FF niet dus een voorbeeld oplossing kan zijn:

padding: 5px 0 0 0;
_padding: 0 0 0 0;

Met deze code geeft IE een padding van 0 en FF een padding van 5px (just as example)
Annewoensdag 23 augustus 2006 @ 15:58
quote:
Op woensdag 23 augustus 2006 15:26 schreef Lexiun het volgende:
Doh beter lezen moet ik

kan je oplossen door je padding een _ (underscore) te plaatsen voor de betreffende padding.

als er een underscore staat voor de code dan leest IE hem wel maar FF niet dus een voorbeeld oplossing kan zijn:

padding: 5px 0 0 0;
_padding: 0 0 0 0;

Met deze code geeft IE een padding van 0 en FF een padding van 5px (just as example)
Okay, maar ik heb geen enkele padding gegeven nog.
Maar ik heb het al gevonden.

IE maakt gewoon een witruimte door het gebruik van de TD.

1
2		<TD>
</TD>

Zo laat ie een witruimte zien.
1<TD></TD>

En zo niet.

.
Annewoensdag 23 augustus 2006 @ 16:02
Nu heb ik wel weer een ander probleem



Nu heeft ie onder een ruimte over. Ik heb valign="bottom" al geprobeerd voor het plaatje, maar dan blijft ie op dezelfde plek staan.
De cellen zijn even hoog als de plaatjes en alle cellen bij elkaar geteld kloppen ook de waarden van de tabel.

Wat kan ik hieeeeeer nou weer aan doen ?

Hij heeft dit trouwens in FF en in IE.
#ANONIEMwoensdag 23 augustus 2006 @ 17:46
quote:
Op woensdag 23 augustus 2006 16:02 schreef ijsmeis het volgende:
Nu heb ik wel weer een ander probleem

[afbeelding]

Nu heeft ie onder een ruimte over. Ik heb valign="bottom" al geprobeerd voor het plaatje, maar dan blijft ie op dezelfde plek staan.
De cellen zijn even hoog als de plaatjes en alle cellen bij elkaar geteld kloppen ook de waarden van de tabel.

Wat kan ik hieeeeeer nou weer aan doen ?

Hij heeft dit trouwens in FF en in IE.
Zijn dat plaatjes?
Als het plaatjes zijn, hebben we volgens mij de benodigde plaatjes nodig.. anders kunnen we het niet nacreeren om zo te fout te kunnen zien.

Wat wij nu zien is alleen de tekst Boe
Annewoensdag 23 augustus 2006 @ 17:48
quote:
Op woensdag 23 augustus 2006 17:46 schreef zarGon het volgende:

[..]

Zijn dat plaatjes?
Als het plaatjes zijn, hebben we volgens mij de benodigde plaatjes nodig.. anders kunnen we het niet nacreeren om zo te fout te kunnen zien.

Wat wij nu zien is alleen de tekst Boe
Okay, dat gooi ik morgen ofzo online Ik mag bijna naar huis namelijk.

Ik heb wel al de website anders gemaakt, maar toch wil ik wel graag de oplossing weten .
Dus tot morgen .
Annevrijdag 25 augustus 2006 @ 13:47
Ik heb de bestanden niet meer .
#ANONIEMvrijdag 25 augustus 2006 @ 13:48
quote:
Op vrijdag 25 augustus 2006 13:47 schreef ijsmeis het volgende:
Ik heb de bestanden niet meer .
en nu? alles gewoon kwijt? hele webprojectje?
Annevrijdag 25 augustus 2006 @ 13:51
quote:
Op vrijdag 25 augustus 2006 13:48 schreef zarGon het volgende:

[..]

en nu? alles gewoon kwijt? hele webprojectje?
Nee, zoals ik al zei heb ik de hele website weer anders gemaakt . En de oude bestanden (waarbij ik deze probleempjes had dus) heb ik verwijderd met mijn domme kop .

Volgende keer beter . Dan roep ik je wel weer .