Witte balk in Iframe verwijderen !!!

Status
Niet open voor verdere reacties.
M

MMKM47

Gebruiker
Lid geworden
16 jun 2006
Berichten
41
Op mijn Site (www.cvvzonhoven.be) krijg ik in het hoofd-iframe aan de onderkant een witte balk, hoe kan ik deze verwijderen zodat het volledig iframe één geheel vormd.

Website.jpg
 
Op de html-pagina van het Kerstfeest (de inhoud van het <iframe>) is de achtergrond wit, dat zorgt voor die witte balk omdat het img onderaan opgehouden is. Met de pagina-achtergrond op zwart ben je er van af.
HTML: 
<style type="text/css">
   body { background: black; }
</style>
Voor andere pagina's met een afbeelding met een afwijkende achtergrondkleur kan je hetzelfde doen; met die andere kleur dan. ;)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Beste csshunter,

Mijn probleem met de witte balk komt, omdat ik mijn html pagina's niet tot aan de onderkant van het iframe krijg. Er moet iets achter zitten (onzichtbaar iframe ) zodat ik de html pagina niet tot onder krijg, tegen het smalle iframe (met tekst)
 
Beste csshunter,

Als ik doe wat jij voorsteld (body { background: black; }) dan zijn al mijn achtergronden van mijn pagina's met foto's allemaal van dezelfde kleur.
Kijk eens naar de bijlage als daar geen fout in zit, ik heb op de witte balk geklikt en dat is de code...
Groetjes
 

Bijlagen

  • Fout-Witte band.JPG
    Fout-Witte band.JPG
    36,9 KB · Weergaven: 48
Beste csshunter,
Dit is de volledige code van de onderste iframe met tekst, kan ook een foutje inzitten.


</ul><a href="http://www.andyhoppe.com/" title="Bezoekersteller"><img
src="http://c.andyhoppe.com/1300132831" alt="Bezoekersteller" align="texttop" style="border:none" /></a></td>
<td width="1001" align="left" valign="top" bgcolor="#FFFFFF"><iframe src="Paginas/welkom_2011.html"name="inhoud"width="1007" marginwidth="1" height="599" marginheight="1" frameborder="0" id="frame_inhoud"></iframe>&nbsp;</td>
<tr>
<td height="33" colspan="2" bgcolor="#867348"><marquee direction="left"bgcolor="#867348">
<span class="lint">Woensdag 15 juni - "Picnick op de Weide" Is Samen Genieten van Vriendschap!!!</span>
</marquee></td>&nbsp;<td width="0"></td>
</tr>
</table>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
 
Hoi MMKM47,
Ah, het was toch iets anders dan ik dacht.
Kon bij analyse van de html (die table-opmaak, hmm, maakt het niet overzichtelijker...) niet zo gauw ontdekken waar 't 'm in zat.
Dus eerst maar eens de html goed opgeschreven, met alles ingesprongen op de goede manier:
HTML: 
<body>
<table width="1164" border="0" align="center">
	<tr align="left" valign="top">
		<td height="168" colspan="2"><img src="Afbeeldingen/Hoofding CVV Website3.jpg" 
		width="1157" height="164" align="top" /></td>
	</tr>
	<tr>
		<!-- menubar -->
		<td width="150" height="599" align="center" valign="top" bgcolor="#867348">
			<ul id="MenuBar1" class="MenuBarVertical">
				<li><a href="Paginas/Welkom_2011.html" target="inhoud">Welkom</a></li>
				<li><a href="Paginas/Bestuur.html" target="inhoud">Bestuur</a></li>
				<li><a href="Paginas/Voorstelling.html" target="inhoud">Voorstelling</a></li>
				<li><a href="Paginas/Jaarprogamma2011.html" target="inhoud">Jaarprogramma</a></li>
				<li><a href="#" class="MenuBarItemSubmenu">Maandactiviteit</a>
					<ul>
						<li><a href="Paginas/Nieuwjaarsfeest2011.html" target="inhoud">Januari</a></li>
						<li><a href="Paginas/An_Nelissen_4maart_2011.html" target="inhoud">Februari</a></li>
						<li><a href="Paginas/Eupen_Monschau 15maart_2011.html" target="inhoud">Maart</a></li>
						<li><a href="Paginas/C-Mine_Uitnodiging.html" target="inhoud">April</a></li>
						<li><a href="Paginas/Renquieres2011.html" target="inhoud">Mei</a></li>
						<li><a href="Paginas/Picknick_2011.html" target="inhoud">Juni</a></li>
						<li><a href="#">Juli</a></li>
						<li><a href="#">Augustus</a></li>
					</ul>
				</li>
				<li><a href="http://www.activiteiten2011.cvvzonhoven.be/#home" target="inhoud">Foto's Activiteit</a></li>
				<li><a href="http://www.wandelingen2011.cvvzonhoven.be/#home" target="inhoud">Foto's Wandel</a></li>
				<li><a href="Paginas/CVV_Wandelaars_2011.html" target="inhoud" class="MenuBarItemSubmenu">Wandelaars</a>
					<ul>
						<li><a href="Paginas/CVV_Wandelprogramma2011.html" target="inhoud">Agenda</a></li>
						<li><a href="Paginas/CVV_Weekfoto_Wandelaars.html" target="inhoud">Weekfoto</a></li>
					</ul>
				</li>
				<li><a href="Paginas/CVV_Fietsers_2010_2011.html" target="inhoud">Fietsers</a></li>
				<li><a href="Paginas/Contact.html" target="inhoud">Contact</a></li>
				<li><a href="mailto:cvv.zonhoven@telenet.be?subject=Voor Inlichtingen of een Vraagje">E-mail</a></li>
				<li><a href="#">Links</a></li>
				<br />
				<br />
				<br />
			</ul>
			
			<a href="http://www.andyhoppe.com/" title="Bezoekersteller"><img 
			src="http://c.andyhoppe.com/1300132831" alt="Bezoekersteller" align="texttop" 
			style="border:none" /></a>
		</td>
		
		<!-- rechts  -->
		<td width="1001" align="left" valign="top" >
			<iframe src="http://www.cvvzonhoven.be/Paginas/Picknick_2011.html" 
			name="inhoud" width="1007" marginwidth="1" 
			height="599" marginheight="1" frameborder="0" id="frame_inhoud">
			</iframe>
			&nbsp;
		</td>
		
	<!-- footer -->
	<tr>
		<td height="33" colspan="2" bgcolor="#867348">
			<marquee direction="left"bgcolor="#867348">
				<span class="lint">Woensdag 15 juni - "Picnick op de Weide" Is Samen Genieten van 
				Vriendschap!!!</span>
			</marquee>
		</td>
		&nbsp;
		<td width="0"></td>
	</tr>
</table>
	
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>

</body>
Dat loont de moeite, want dan komt al gauw de aap uit de mouw: er zitten een aantal <br />'s en NBSP's (NonBreaking SPaces) &nbsp; in, op plekken waar ze helemaal niet horen.

De &nbsp; na het <iframe>, die wel in de tabelcel <td> van het <iframe> zit, doet hier de das om.
Want de menukolom heeft een opgegeven hoogte van 599px, en het <iframe> ook. De &nbsp; zorgt voor een extra witregel onder het iframe. En omdat het een tabel is, wordt de cel waarin <iframe> en witregel zitten, dan opgerekt met de hoogte van de witregel - en de cel ernaast van de menukolom wordt dan ook in hoogte opgerekt.

Kortom: met goed opgeschreven html-code vermijdt men ongerief! ;)
De &nbsp; geschrapt *), en kijk:
Met vriendelijke groet,
CSShunter
_________
*) En de teller met css i.p.v. <br />'s naar omlaag gebracht, plus een missende </tr> toegevoegd.
 
Laatst bewerkt:
Beste csshunter.

De grijze tekst in je code, tussen haakjes:

<!-- menubar -->
<!-- rechts -->
<!-- footer -->

moet ik die ook in mijn code zetten !!!

Bedankt alvaste voor de moeite, nu ga ik de code bijwerken.

Groetjes,
MMKM47
 
Nee hoor, dat zijn alleen commentaarregels om aan te geven waar wat begint. Die kunnen blijven staan, maar ze kunnen er ook net zo goed uit.

Succes!
CSShunter
 
Beste csshunter,

Alles is met je professionele hulp tot een goed einde gekomen, de site is terug weer up to date. Ik dank je van harte voor de tijd en de inzet die je aan dit probleem hebt besteed.

Fantastisch !!!! Dank je wel....

csshunter, ik heb nog een probleem in mijn menubalk.
Als je naar de site kijkt, dan zie je in de menubalk de 2 bovenste vakjes (Welkom en Bestuur) dat daar om die vakken alleen Rechts, Links en Boven een klein witte omlijning is en bij de andere vakken niet. Hoe krijg ik die omlijning daar weg...

Groetjes,
MMKM47
 
Hoi MMKM47,
O, dat randje was me nog niet opgevallen. Ik kan in de browsers IE6, IE7, Firefox, Opera, Chrome en Safari dit verschijnsel niet ontdekken. Daar heeft het hele menublok van "Welkom" tot vlak boven het tellertje een lichtgrijs bordertje (en dat staat ook zo in de css):

cvv-menublok.png
cvv-menublok-ie8.png

normaal .......... maar IE8​

Maar, aha, IE8 doet het anders! :confused: Daar wijken inderdaad de "Welkom" en de "Bestuur" af: daar zit wel het lichtgrijze randje, en niet er onder...

Oplossing:
Daarin staat onder "DESIGN INFORMATION: describes color scheme, borders, fonts":
Code: 
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
{
	border: 1px solid #CCC;
	color: #867348;
	background-color: #867348;
}
en daar maak je van:
Code: 
/* Outermost menu container has [B]no[/B] borders on all sides */
ul.MenuBarVertical
{
	border: none;
	color: #867348;
	background-color: #867348;
}
Nu is er in geen enkele browser meer een randje te zien, en ook IE8 houdt zich aan de spelregels. :)
Toegepast (op iets andere manier):
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Beste csshunter,

Bedankt voor alles, ik heb weer veel bijgeleerd....
De site ziet er nu wel heel mooi uit...:thumb:

Vriendelijke groeten,
MMKM47
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan