Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Raar wit lijntje in tabel

5 antwoorden
  • Hallo! Ik ben bezig een template met een tabel te maken (ja ik weet het, div's is beter maar ik krijg het niet voor elkaar ze allemaal even hoog te maken). Wat ik tot nu toe heb is hier te zien: www.joomla2.parkietenfun.nl. Jullie zien aan de linkerkant van de #main en klein wit lijntje. Ik heb werkelijk GEEN idee waar dat vandaan komt! Ik heb geprobeerd cellen groter en kleiner te maken maar dit met als enige resultaat dat alles gewoon wat opschuift, de witte ruimte verdwijnt niet... Dit is de html: [code:1:ef23a0743a]<table id="header" width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <th scope="col"> </th> </tr> </table> <table cellspacing="0" cellpadding="0" id="container"> <tr id="mainbody" align="left"> <th scope="row" id="leftborder"><img src="http://www.parkietenfun.nl/joomla2/templates/2008_BLAUW/images/1leftborder.png" /></th> <th scope="row" id="left"> <jdoc:include type="modules" name="left" style="" /> </th> <th scope="row" id="verloop"><img src="http://www.parkietenfun.nl/joomla2/templates/2008_BLAUW/images/1verloop.png" /></th> <th scope="row" id="main" align="left" background="<?php echo $url;?>"><jdoc:include type="component" /> </th> <th scope="row" id="mainborder"><img src="http://www.parkietenfun.nl/joomla2/templates/2008_BLAUW/images/1mainborder.png" /></th> </tr> </table> <table id="mainbodyfooter" cellspacing="0" cellpadding="0"> <tr> <th scope="col"> </th> </tr> </table>[/code:1:ef23a0743a] En dit de css: [code:1:ef23a0743a]html{ width:100%} body{ font-family:Arial, Helvetica, sans-serif; font-size:12px; text-align:-moz-center; padding:auto; margin:auto; height:100%; } #container{ width:950px; border:0; text-align:center; } #header{ background-image:url(../images/header.png); background-repeat:no-repeat; width:100%; height:149px; background-position:center; } #leftborder{ background-image:url(../images/2leftborder.png); background-repeat:repeat-y; vertical-align:top; width:9px; text-align:left; } #left{ background-color:#FFF73F; background-image:url(../images/leftback.png); background-repeat:repeat-x; background-position:top; width:124px; } #verloop{ background-image:url(../images/2verloop.png); background-repeat:repeat-y; vertical-align:top; width:60px; } #main{ background-color:#fff73f; background-repeat:no-repeat; background-position:top left; text-align:left; width:716px; } #mainborder{ background-image:url(../images/2mainborder.png); background-repeat:repeat-y; vertical-align:top; width:32px; } #mainbodyfooter{ background:url(../images/footer.png); background-repeat:no-repeat; width:950px; height:32px; border:0; } img{border:0;} [/code:1:ef23a0743a] Er gebeuren ook rare dingen als je je browser venster verkleint... Alvast bedankt voor een reactie! :)
  • Ik zie dat je de css-background-image-property gebruikt, dan ben je op de goeie weg. Maar vervolgens stop je toch nog je HTML vol met images? Het is eigenlijk de kunst om zo weinig mogelijk plaatjes te gebruiken (zéker in de HTML zelf): - hoe meer plaatjes, hoe meer laadtijd (5 plaatjes van 20KB laden langzamer dan 1 plaatje van 100 KB). - hoe meer plaatjes, hoe moeilijker je het voor jezelf maakt. Ik weet niet of je site een vaste hoogte heeft, maar je kunt in principe met één afbeelding al klaar zijn: gewoon de body de complete background geven. Een andere manier is om te werken via de principes om vlakken met ronde hoeken te maken. Met die methodes kun je leren een afbeelding op de juiste manier op te knippen en de positioneren. www.google.nl/search?hl=nl&q=css+ronde+hoeken
  • Bedankt! Maar denk je dat dat het probleem is voor het lijntje? EDIT// Ik moet die afbeeldingen wel in de html zetten omdat er een verloop in zit. En de pagina heeft geen vaste hoogte, dus als ik alleen gebruik wil maken van de bakcground in css dan moet ik een oneindig lang plaatje gebruiken... :cry:
  • Ik kan de oorzaak niet achterhalen, maar er vallen me wel een paar dingen op. De tabel die volgens mij de witte lijn links naast zich heeft, heeft een class 'contentpaneopen', maar ik kan niet vinden waar die class is gedefineerd Rechts heb je eenzelfde probleem, en daar zie ik ook een elementje naar rechts uitsteken(wat die witte lijn rechts veroorzaakt) Het vreemde is dat die witte lijn rechts scheeft lijkt te zijn. (Boven iets breder en steeds smaller naar onderen) Oftewel ben je een dijk met CSS dat je een element scheef kunt zetten, of er klopt iets niet met je achtergrond afbeelding, of er is iets heel erg vreemds aan de hand. Dus nogmaals, ik zie wel een aantal dingen die niet kloppen, maar waar de oorzaak nu zit kan ik niet achterhalen. Persoonlijk zou ik nu helemaal opnieuw beginnen, maar wat je als (provisorisch) reddingsmiddel nog zou kunnen proberen is de achtergrond afbeeldingen checken of daar niet een witte lijn in is meegekomen, en in alle betrokken elementen de marges op 0 zetten. (Pssst... het is geen 'Bleus' maar 'Blues' ;-))
  • Bedankt voor je uitgebreide reactie. contentpaneopen is een class die door het CMS wat ik gebruik gedefineerd word (Joomla). Ik denk dat de witte lijn bij #main vandaan komt ;) Ik zie rechts geen witte lijn maar een gele lijn? Hij is niet scheef, maar dat is hij voor je gevoel omdat hij 1 ''effe'' kleur is en daarnaast loopt een kleurverloop. Een beetje gezichtsbedrog dus. De witte (en gele) lijn is écht nergens in een afbeelding terug te vinden, dat weet ik 100% zeker. Dat van Blues wist ik :lol: Iemand had me er al eerder opgewezen. Maarja dat is lastig met dyslexi he. Ik ga het veranderen. EDIT// Ik heb alle <img>'s nu in divs gezet en dus de achtergrond vanuit css laten komen. Dit is nu mijn html: [code:1:679ae744cb]<table id="header" width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <th scope="col"> </th> </tr> </table> <table cellspacing="0" cellpadding="0" id="container"> <tr id="mainbody" align="left"> <th scope="row" id="leftborder"><div id="leftorderback"></div></th> <th scope="row" id="left"> <jdoc:include type="modules" name="left" style="" /> </th> <th scope="row" id="verloop"><div id="verloopback"></div></th> <th scope="row" id="main" align="left" background="<?php echo $url;?>"><jdoc:include type="component" /> </th> <th scope="row" id="mainborder"><div id="mainborderback"></div></th> </tr> </table> <table id="mainbodyfooter" cellspacing="0" cellpadding="0"> <tr> <th scope="col"> </th> </tr> </table>[/code:1:679ae744cb] En dit mijn css: [code:1:679ae744cb]html{ width:100%} body{ font-family:Arial, Helvetica, sans-serif; font-size:12px; text-align:-moz-center; padding:auto; margin:auto; height:100%; } #container{ width:950px; border:0; text-align:center; } #header{ background-image:url(../images/header.png); background-repeat:no-repeat; width:100%; height:149px; background-position:center; } #leftborder{ background-image:url(../images/2leftborder.png); background-repeat:repeat-y; width:9px; } #leftborderback{ background-image:url(../images/1leftborder.png); background-repeat:no-repeat; background-position:top; width:9px; height:258px; } #left{ background-color:#FFF73F; background-image:url(../images/leftback.png); background-repeat:repeat-x; background-position:top; width:124px; } #verloop{ background-image:url(../images/2verloop.png); background-repeat:repeat-y; vertical-align:top; width:60px; } #verloopback{ background-image:url(../images/1verloop.png); background-repeat:no-repeat; background-position:top; height:258px; width:60px; } #main{ background-color:#fff73f; background-repeat:no-repeat; background-position:top left; text-align:left; width:716px; } #mainborder{ background-image:url(../images/2mainborder.png); background-repeat:repeat-y; vertical-align:top; width:32px; } #mainborderback{ background-image:url(../images/1mainborder.png); background-repeat:no-repeat; background-position:top; width:32px; height:255px; } #mainbodyfooter{ background:url(../images/footer.png); background-repeat:no-repeat; width:950px; height:32px; border:0; } [/code:1:679ae744cb]

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.