Gat tussen Header plaatje en de table

Status
Niet open voor verdere reacties.
K

kuipert

Gebruiker
Lid geworden
28 mei 2009
Berichten
63
Hallo,

Ik ben bezig met een nieuwe website; www.kuiper-stoffen.nl/index2.html

Nu heb ik hetvolgende probleem.

Er zit een gat tussen de header en de table.
De 1 sluit dus niet op de ander aan.

NB: Dit doet hij NIET in explorer..... wel in de meeste andere webbrouwsers.

Hoe kan ik dat gat sluitend maken?


Hier is de code die ik gebruik



Code: 
<html>

<head>
<meta http-equiv="Content-Language" content="de">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Welkom op de site van J</title>
</head>

<body background="http://www.kuiper-stoffen.nl/img01.jpg">

<p align="center"><img border="0" src="http://www.kuiper-stoffen.nl/kuiperheader.jpg" width="730" height="230"><div align="center"><table border="0" width="700" background="http://www.kuiper-stoffen.nl/img03.jpg"><tr><td><p align="center"><a href="http://www.kuiper-stoffen.nl/">
			<img border="0" src="http://www.kuiper-stoffen.nl/netherlands.png" width="72" height="72"></a><a href="http://www.kuiper-stoffen.nl/de.html"><img border="0" src="http://www.kuiper-stoffen.nl/germany.png" width="72" height="72"></a><a href="http://www.kuiper-stoffen.nl/en.html"><img border="0" src="http://www.kuiper-stoffen.nl/britain.png" width="72" height="72"></a></p>
			<p align="center"><b><font color="#CCCCCC" style="font-size: 20pt">Welkom op de site van J. Kuiper Stoffengroothandel 
			b.v</font></b></p>
			<p align="center">&nbsp;<p align="left">&nbsp;<font color="#CCCCCC">Stoffengroothandel 
			J. Kuiper b.v is een groothandel die al sinds 1974 stoffen levert 
			aan zowel de detaillist,&nbsp; </font></p>
			<p align="left"><font color="#CCCCCC">&nbsp;grothandelaar, confectie 
			of markt.</font></p>
			<p align="left">&nbsp;</p>
			<p align="left"><font color="#CCCCCC">&nbsp;Wij brengen niet alleen de 
			actuele modestoffen maar bij ons kunt U ook terecht voor partijen, 
			groot of klein.</font></p>
			<p align="left">&nbsp;</p>
			<p align="left"><font color="#CCCCCC">&nbsp;Het bedrijf richt zich vooral 
			op de verkoop van modestoffen in de dameskleding branche.</font></p>
			<p align="left"><font color="#CCCCCC">&nbsp;Te denken aan blouse stoffen 
			en broeken stoffen. </font></p>
			<p align="left"><font color="#CCCCCC">&nbsp;Maar ook hebben wij vele 
			heren stoffen zoals cord, kostuum stoffen, mantel stoffen, enz.</font></p>
			<p align="center">
			<!--webbot bot="HitCounter" i-image="4" I-ResetValue="3138" B-Reset="TRUE" I-Digits="0" U-Custom --></p>
			<p align="center">&nbsp;</td>
		</tr>
	</table>
</div>

</body>

</html>
 
Laatst bewerkt door een moderator:
Tja, dit probleempje is op te lossen door de eerste <p align="center"> na de <body>, dus in regel 19, te vervangen door:
Code: 
[FONT="Courier New"]<p style="text-align: center; margin: 0; padding: 0;">[/FONT]
... maar op deze pagina (de echte paginacode is wat verschillend van wat hierboven staat) zie ik ook andere pijnpunten. Ik ben bang dat die de pagina (en elke te bouwen vervolgpagina!) vroeger of later tot echte patiënt gaan maken:
  • Het begint met een volstrekt verouderd DOCtype. Zie in m'n handtekening hieronder waar je een beter DOCtype kunt ophalen.
  • Op regel 13 (jawel!) staat een <head> die er helemaal niet hoort > kan gewist worden.
  • Het vaak gebruikte <p align="center"> en <p align="left"> is verouderde en intussen afgekeurde html.
  • Er is een <table> voor de layout gebruikt, dat maakt o.a. de html-code nodeloos ingewikkeld.
  • Er zitten FP-styles (FrontPage-styles) in, die ongeldige code zijn en niet in alle browsers werken.
  • De FP_swapImg() javascript-functie ontbreekt, zodat de knoppen in het menu niet veranderen als je er overheen gaat. Maar deze functie kan veel beter vervangen worden door css-hover code; dan is geen javascript nodig.
  • Er zitten <font color="..."> codes in, terwijl <font> in de html tegenwoordig ook ongeldig en verboden is.
Nu zouden dit soort dingen wat droef stemmen, maar er is licht! ;)
Het meeste in dit rijtje kan namelijk rechtgezet worden door alle style-zaken in nette CSS te zetten. Dat is in het begin even wennen, maar je hebt er heel veel gemak van, en de html-code op de pagina's wordt er heel overzichtelijk van.
Het handige is, dat je met CSS een apart zg. "stylesheet" kunt maken. Dat is een klein bestandje waar alle opmaak van de pagina in staat. In de <head> van je pagina komt dan een verwijzing om dat bestandje te gebruiken voor de pagina. En het prettige daarvan is, is dat dit css-bestand gerecycled kan worden: op elke volgende pagina verwijs je er óók naar. Dat betekent dat je je maar één keer druk hoeft te maken om de opmaak. Op de volgende pagina's gaat het dan vanzelf goed, en hoef je niet alle opmaak binnen de html-code te herhalen. :)

Om wat meer te weten te komen over dit kleine wonder, zou je bv. eens kunnen kijken in het CSS-gedeelte van de handleidinghtml.nl.

Succes!
Met vriendelijke groet,
CSShunter
 
Hallo,

Bedankt voor je tips.

ik zal er zeker in duiken!!

Ondertussen werd ik natuurlijk gek en heb de site compleet opnieuw gemaakt met Dreamweaver.

Alles goed..... tot ik de site wilde uploaden.

Ik kan de index niet uploaden omdat er kritische fouten in zitten (zegt FTP)

Hier de code

Kan iemand mij svp helpen? :(


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>J. Kuiper Stoffengroothandel</title>
<style type="text/css">
<!--
body {
background-image: url(/img01.jpg);
background-repeat: repeat;
margin-top: 0px;
}
.style1 {color: #CCCCCC}
.style2 {
color: #CCCCCC;
font-size: 24px;
font-weight: bold;
}
.style3 {font-size: 24px}
-->
</style></head>

<body>
<div align="center"><img src="/kuiperheader.jpg" width="732" height="230" border="0" /></div>
<table width="702" border="0" align="center" cellspacing="0">
<tr>
<td width="700" background="/img03.jpg"><div align="center">
<p><a href="http://wwwkuiper-stoffen.nl"><img src="/button3C.jpg" width="100" height="20" border="0" /></a><a href="/aboutnl.html"><img src="/button46.jpg" width="100" height="20" border="0" /></a><a href="/collectienl.html"><img src="/button4A.jpg" width="100" height="20" border="0" /></a><a href="/photos.html"><img src="/button4C.jpg" width="100" height="20" border="0" /></a><a href="/customersnl.html"><img src="/button4F.jpg" width="100" height="20" border="0" /></a><a href="/collectienl.html"><img src="/button52.jpg" width="100" height="20" border="0" /></a></p>
<p><img src="/Netherlands.png" width="72" height="72" /><a href="/de.html"><img src="/Germany.png" width="72" height="72" border="0" /></a><a href="/en.html"><img src="/britain.png" width="72" height="72" border="0" /></a></p>
<p align="center" class="style2">Welkom op de website van J. Kuiper Stoffengroothandel b.v</p>
<p align="left" class="style1">*Stoffengroothandel J. Kuiper b.v is een groothandel die al sinds 1974 stoffen levert aan zowel de detaillist, groothandelaar, confectionair of* markt</p>
<p align="left" class="style1">*Wij brengen niet alleen de actuele modestoffen maar bij ons kunt U ook terecht voor partijen, groot of klein.</p>
<p>&nbsp;</p>
<p align="left" class="style1">*Het bedrijf richt zich vooral op de verkoop van modestoffen in de dameskleding branche.</p>
<p align="left" class="style1">*Te denken aan blouse stoffen en broeken stoffen. </p>
<p align="left" class="style1">*Maar ook hebben wij vele heren stoffen zoals cord, kostuum stoffen, mantel stoffen, enz.</p>
<div>
<div align="left"><font color="#CCCCCC"> <img src="http://www.kuiper-stoffen.nl/DSC01922-2.JPG" alt="" width="256" height="194" align="left" />&nbsp;&nbsp;
Wij leveren al vanaf 15 meter, maar vullen ook een container.</font>
</div>
<p align="left"> <font color="#CCCCCC">&nbsp;&nbsp; Wekelijks wisselende voorraad /
collectie</font></p>
<p align="left"><font color="#CCCCCC">&nbsp;&nbsp; Actueel modegoed</font></p>
<p align="left"><font color="#CCCCCC">&nbsp;&nbsp; Zoeken doen wij graag, ook voor U
!!</font></p>
<p align="left"><font color="#CCCCCC">&nbsp;&nbsp; Prijzen oplopend vanaf&nbsp; €0,50</font></p>
<p><font color="#CCCCCC">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </font></p>
</div>
<table width="700" border="0" cellspacing="0">
<tr>
<td width="430"><div class="style1" id="laag2"> <span class="style3">*Inkoop:
</span>
<p>* Natuurlijk hebben wij ook altijd belang bij nieuwe stoffen.</p>
<p>* Dus kunt U ons wat aanbieden, horen wij het altijd graag !</p>
<p>* Wij zoeken ALTIJD:* </p>
<ul>
<li>Hemdenstoffen op kilo basis voor export Afrika</li>
<li>Monsterkamers</li>
<li>Ruwdoek katoen</li>
<li>Kilo partijen</li>
</ul>
</div></td>
<td width="264"><img src="/images/denim_fabric rolls.jpg" width="264" height="276" align="right" /></td>
</tr>
</table>
<p align="center" class="style1">Bent U een Textiel ondernemer?</p>
<p align="center" class="style1"> Internationaal adverteren?</p>
<p align="center" class="style1"> De advertentie site voor Europa</p>
<p><a href="http://www.textiles-online.com"><img src="/logo_textileonline 2.gif" width="302" height="31" border="0" /></a></p>
<p><!-- Start of StatCounter Code -->
<script type="text/javascript">
var sc_project=4802351;
var sc_invisible=0;
var sc_partition=54;
var sc_click_stat=1;
var sc_security="195815fa";
</script>

<script type="text/javascript"
src="http://www.statcounter.com/counter/counter.js"></script><noscript><div
class="statcounter"><a title="wordpress blog stats"
href="http://www.statcounter.com/wordpress.com/"
target="_blank"><img class="statcounter"
src="http://c.statcounter.com/4802351/0/195815fa/0/"
alt="wordpress blog stats" ></a></div></noscript>
<!-- End of StatCounter Code -->
&nbsp;</p>
</div></td>
</tr>
</table>
<p align="center">&nbsp;</p>
</body>
</html>
 
Als je in Dreamweaver een pagina geopend hebt staan, kan je met menu "Bestand > Valideren > Opmaak" zien wat DW als fouten signaleert.
In dit geval:
  • Regel 27: De tag: "td" heeft geen kenmerk: "background" in de momenteel actieve versies.[XHTML 1.0 Transitional]
  • Regel 92: Er is een fout opgetreden bij het nesten. "img" moet worden afgesloten voordat u "a" afsluit.[XHTML 1.0 Transitional]
Gaan we op regel 27 kijken, dan zien we staan: <td width="700" background="/img03.jpg">.

De raadselachtige verklaring van DW betekent: "In regel 27 zit een background-kenmerk, maar dat dat mag niet volgens het DOCtype XHTML1.0 (= de momenteel actieve versie = het DOCtype dat in de eerste regel van de html-code staat)."
En dat betekent dan weer, dat background="/img03.jpg" daar gewist moet worden. Maar hoe geven we die td (tabel-cel) dan wel z'n achtergrondplaatje?
Dat doe je door die td een eigen "ID" (IDentificatie-naam, die maar 1 keer per pagina bestaat) te geven. Dat gaat bijvoorbeeld als volgt:
HTML: 
<td width="700" id="achtergrond-1">
Nu kunnen we een opmaak-stijl aan deze ID vastknopen. Dat gaat met CSS, waarvoor je in de <head> van de pagina moet zetten:
HTML: 
<style type="text/css">
   #achtergrond-1 { 
      background: url(/img03.jpg);
   }
</style>
(het hekje # in de style geeft aan, dat het hier om een ID gaat)
Daar is de background-image weer! :)

Gaan we op regel 92 kijken, dan zien we staan: alt="wordpress blog stats" ></a></div></noscript>.

Dit is het eind van een <img> code (zie de regels erboven). In XHTML mag een <img> niet eindigen met een > alleen, maar moet er een / voor. Dan wordt het:

alt="wordpress blog stats" /></a></div></noscript>.

Kan DW de pagina dan wel uploaden?

Met vriendelijke groet,
CSShunter
 
Hallo CSShunter !!

Bedankt voor de goede tips :thumb:

Ik heb nog het een en ander veranderd en nu is hij fout vrij !!

Daarna kon ik de site nog niet uploaden..... omdat ik niet lezen kan !!!!!!!!!!!:o

Ik kan geen index.html uploaden omdat ik daar geen bevoegdheid toe heb.

De upload via de site van mijn privider was geen probleem en nu werkt de site super !!

Nogmaals bedankt voor je hulp !!

Geweldig
 
Mooi-mooi!
Het gaat er zienderogen op vooruit. :)
en nu is hij fout vrij !!
Klik om te vergroten...
Ja, volgens Dreamweaver. Maar helemaal betrouwbaar is die niet. Als we gaan kijken met de "echte" html-validator van het www-consortium (dat de standaarden vaststelt), dan zitten er nog wat foutjes in. Kijk: deze. De "18 errors" lijken heel erg, maar gelukkig is er niet veel aan de hand. De meeste zijn allemaal hetzelfde, en zeggen dat er bij de plaatjes geen alt="..." bij staat; dat hoort namelijk volgens de regelen der kunst. Het betekent dat er bij elk img een alt(ernatief) in tekst bij hoort: zodat als iemand een plaatje niet kan zien (bv. als de browser het plaatje op een of andere manier niet kan tonen, of als iemand blind is) er toch gemeld wordt waar het plaatje over gaat. Als zo'n alt-beschrijving er niet bij staat, geven pure tekst-browsers de naam van het plaatjes-bestand.
Een naam als <img src="/button3C.jpg" of <img src="/button46.jpg" zegt dan niet zoveel.
Nu zullen denk ik weinig blinden een site van een stoffengroothandel bezoeken, maar ik zou in elk geval de menuknoppen een naam geven die vertelt waar de link naar toe gaat. Dus:
HTML: 
<a href="http://www.kuiper-stoffen.nl"><img src="/button3C.jpg" alt="Home" width="100" height="20" border="0" /></a>
<a href="/aboutnl.html"><img src="/button46.jpg" alt="Wie zijn wij" width="100" height="20" border="0" /></a>
enz.
... dan zijn voor iedereen de vervolgpagina's bereikbaar (zoals de contact-pagina, waar adres, telefoon, e-mail op staan).
Voor plaatjes met stoffen lijkt het ondoenlijk om daar een goede beschrijving bij te geven, maar voor images die als illustratie zijn bedoeld mag je ook een "lege alt" opnemen, d.w.z. alt="" (zonder spatie tussen de aanhalingstekens).

Als je vervolgens de <p> in regel 75, de &nbsp;</p> in regel 95, en de </p> in regel 100 wist, is de homepage 100% html-valid (de overige foutmeldingen blijken dan verdwenen). :)

Met vriendelijke groet,
CSShunter

PS:
Het viel me op, dat er in de header geen mooie stofjes op de achtergrond te zien zijn. De bloem is echt prachtig, maar zo solo zou ik die eerder verwachten bij een blog of een bloembollenhandel. ;)
Om eens te kijken hoe het staat, heb ik de rechter header-image van de oude site (ook een hele mooie) wat aangepast en als achtergrond achter de blom gezet. Daarmee is ie zó geworden. Op een witte achtergrond knalt ie er behoorlijk uit, maar in de pagina met de donkere grijzen geeft dat volgens mij een oppepper die de pagina best kan hebben. Mocht ie bevallen, dan Bestand > Opslaan als... enz.

PS-2:
Ik zou het woord "Enschede" ook opnemen in de pagina-titel > dat geeft meer kans als iemand Google't op "stoffen Enschede", of "stoffengroothandel Enschede".
 
En omdat ik heb gemerkt dat helaas toch vrij veel mensen niet veel moeite willen doen voor blinden en slechtzienden (alt-tags), zet ik er ook altijd even bij dat 'n zoekmachine ook geen plaatjes kan zien. Dus ook voor 'n zoekmachine is 'n alt-tag heel belangrijk.
 
Mien jung.....

Ik weet niet hoe ik je moet bedanken !!:love:

Echt, je bent een grote hulp.

De alt kan me niet echt wat schelen omdat zoals je al zegt niet veel blinden op mijn site zullen komen.

Ook zeer bedankt dat je zelfs de moeite hebt genomen om een nieuwe header te maken...:thumb:

Toch laat ik deze eerst nog even zo....

Ben nu bezig met lightbox (zie www.kuiper-stoffen.nl/lightbox.html )

Werkt niet....

Weet het niet meer..... ben er al weken mee bezig

Jij een idee?

Ik heb echt alle tut's al door gelopen.... ook op tutvid.com

Kan ik nog 1 keer op je hulp rekenen?

Groeten uit het "dom in programmeren" oosten !!
 
betere webtoegankelijkheid = meer winst !

Jazeker Goeroeboeroe, voor het "beter gevonden kunnen worden = meer inkomsten" argument zal men soms gevoeliger zijn dan voor het menselijk aspect. ;)
Bij de Webrichtlijnen staat de gebruiker van een website centraal. Een correcte toepassing van de Webrichtlijnen leidt ertoe dat websites beter en duurzaam toegankelijk zijn voor alle bezoekers, toepassingen en browsers. Dit heeft een directe relatie met het rendement van een website. Een website die is toegesneden op meerdere typen browsers, heeft een hoger rendement, omdat de site meer mensen bereikt.

Ook is de site beter vindbaar in zoekmachines. Die kijken naar de gestructereerde inhoud van webpagina’s. In een website die voldoet aan de Webrichtlijnen is de inhoud gestructureerd in volgorde van belangrijkheid. Zoekmachines kunnen deze gestructureerde inhoud effectiever indexeren, wat gebruikers positieve resultaten oplevert.
... enz.
Klik om te vergroten...
Bron: Kwaliteitsmodel websites/webrichtlijnen: waarom?

Wat veel webbouwers niet weten, is dat zo'n 10% van de internetters aan een website zonder goede toegankelijkheid niets of slechts heel weinig heeft.
Ongeveer tien procent van de bevolking in de meeste landen heeft een functionele beperking die de toegang tot het internet kan beïnvloeden. Organisaties die voorop lopen in het ontwikkelen van toegankelijke websites helpen daarmee dus met het promoten van sociale gelijkheid en integratie van mensen met een functiebeperking.
...
Als mensen ouder worden kunnen er veranderingen optreden in het gezichtsvermogen, het gehoor, de motoriek of het geheugen. Oudere mensen hebben daarom dezelfde voordelen van bepaalde toegankelijkheidsrichtlijnen als mensen met een functiebeperking. Aangezien steeds meer oudere mensen gebruik gaan maken van het internet is dit een groeiende groep waar rekening mee gehouden moet worden.
enz.
Klik om te vergroten...
Bron: Accessibility.nl: voordelen webtoegankelijkheid.

Oftewel: wie zich niets wil aantrekken van het wel een wee van mensen die met een beperking moeten leven, moet het maar voelen: minder klandizie. :D
Het is kiezen of delen: "Design for All" of "Boontje komt om zijn Loontje". Lekkere kleine lettertjes, die niet vergroot kunnen worden? Hopla, daar gaat weer een marktsegment! - Slecht contrast tussen letters en achtergrond? Hopla! - Grafische site of Flash-site zonder alternatief? Hopla! Javascript-afhankelijke site? Hopla! :shocked:

Wie het anders wil: toch maar eens kijken bij de Webrichtlijnen?

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan