Ongelooflijk maar waar: Ik plaats de bestandjes online en dan werkt het wel ...Fijne bug in de "voorvertoningsfunctie" van Dreamweaver ...
Hoi,
Ik heb hier ooit een topic gestart over net hetzelfde probleem.
http://www.macfreak.be/cgi-bin/forums/topic.cgi?forum=8&topic=2720&highlight=achtergrondafbeelding
Ik heb toen alle suggesties toegepast. Op een gegeven moment werkte het maar het is me onduidelijk waarom.
Ik heb dus wederom hetzelfde probleem. Ik ben al uren aan het zoeken, wijzigen,... zonder enig resultaat 
http://www.lcns.be/testsite Hier kan je de index-pagina bekijken die gebaseerd is op de template.
Ik heb een sjabloon/template gemaakt en een achtergrondafbeelding toegevoegd aan een DIV "Container".
Die afbeelding is perfect zichtbaar in het "ontwerventer van Dreamweaver.
Van zodra ik echter een preview bekijk in Firefox, Safari,... is de achtergrondafbeelding niet zichtbaar...
<!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" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>template</title>
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* het is een goede gewoonte om de instellingen voor margin (marge) en padding (opvulling) van het element body op nul in te stellen en daarmee op de standaardinstellingen van de verschillende browsers */
padding: 0;
text-align: center; /* hiermee centreert u de container (het hoofdobject) in IE 5*-browsers Vervolgens wordt de tekst ingesteld op de standaardinstelling van links uitlijnen in de kiezer #container */
color: #000000;
background-image: url();
}
.thrColFixHdr #container {
width: 920px;
height: 618px;
margin: 0 auto; /* de automatische marges (d.m.v. auto), in combinatie met een breedte, centreren de pagina */
text-align: left; /* hiermee wordt de instelling text-align: center voor het element body genegeerd. */
background-image: url(websitemenufullsponsors.png);
background-repeat: no-repeat;
background-position: left;
display: block;
}
.thrColFixHdr #header {
padding: 0 10px 0 20px; /* deze instelling voor padding (opvulling) komt overeen met de uitlijning links van de elementen binnen de div-elementen, die volgen op deze padding. Als een afbeelding wordt gebruikt in de #header in plaats van tekst, wilt u wellicht de padding (opvulling) verwijderen. */
}
.thrColFixHdr #header h1 {
margin: 0; /* door de marge van het laatste element in het element div voor #header op 0 in te stellen voorkomt u het wegvallen van marges een onverklaarbare ruimte tussen div-elementen. Als om het element div een rand loopt, is dit niet nodig aangezien dit tevens het wegvallen van de marge voorkomt */
padding: 10px 0; /* door het gebruik van padding (opvulling) in plaats van een marge (via het element margin) kunt u het element van de randen van het element div vandaan houden */
height: 90px;
}
.thrColFixHdr #sidebar1 {
float: left; /* aangezien dit een zwevend element betreft, moet er een breedte worden opgegeven */
width: 190px; /* met een waarde voor padding houdt u de inhoud van het element div van de randen vandaan */
height: 470px;
}
.thrColFixHdr #sidebar2 {
float: right; /* aangezien dit een zwevend element betreft, moet er een breedte worden opgegeven */
width: 110px; /* met een waarde voor padding houdt u de inhoud van het element div van de randen vandaan */
height: 470px;
}
.thrColFixHdr #mainContent {
margin: 100 0px;
height: 470px;
width: 800px;
}
.thrColFixHdr #footer {
padding: 0 20px 0 20px;
}
.thrColFixHdr #footer p {
margin: 0; /* door het gebruik van padding (opvulling) voor dit element maakt u ruimte (op dezelfde manier als door middel van een marge), zonder het probleem van wegvallende marges */
padding-top: 0
px;
padding-right: 0;
padding-bottom: 0px;
padding-left: 0;
clear:both;
}
.fltrt { /* dit exemplaar van class kan worden gebruikt om een element aan de rechterzijde van uw pagina te laten zweven. Het zwevende element moet voorafgaan aan het element dat, op de pagina, naast het zwevende element moet staan. */
float: right;
margin-left: 8px;
}
.fltlft { /* dit exemplaar van class kan worden gebruikt om een element aan de linkerzijde van uw pagina te laten zweven. */
float: left;
margin-right: 8px;
}
.clearfloat { /* dit exemplaar van class moet op een element div of break zijn geplaatst en dient het laatste element te zijn vóór de afsluiting van een container (hoofdobject) die op zijn beurt een zwevend object volledig dient te bevatten */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style><!--[if IE 5]>
<style type="text/css">
/* plaats in deze voorwaardelijke opmerking op het vakmodel gebaseerde css-correcties voor alle versies van IE 5* */
.thrColFixHdr #sidebar1 { width: 180px; }
.thrColFixHdr #sidebar2 { width: 190px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* plaats in deze voorwaardelijke opmerking css-correcties voor alle versies van IE */
.thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }
.thrColFixHdr #mainContent { zoom: 1; }
/* de bovenstaande softwaregebonden eigenschap zoom geeft IE de hasLayout die IE nodig heeft om verschillende bugs te vermijden */
</style>
<![endif]-->
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>
<body class="thrColFixHdr">
<div id="container">
<div id="header">
<h1>Header</h1>
<!-- end #header --></div>
<div id="sidebar1">
<h3>Inhoud sidebar1</h3>
<!-- end #sidebar1 --></div>
<div id="sidebar2">
<h3>Inhoud sidebar2</h3>
<!-- end #sidebar2 --></div>
<!-- TemplateBeginEditable name="EditRegion_mainContent" -->
<div id="mainContent">
<!-- end #mainContent -->
</div>
<!-- TemplateEndEditable -->
<!-- Dit wiselement dient onmiddellijk te volgen op het element div voor #mainContent om het element div voor #container te dwingen om alle zwevende elementen van een lager niveau te bevatten --><br class="clearfloat" />
<div id="footer">
<p>Footer</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
Kent er iemand de oplossing voor dit probleem?
Dank bij voorbaat,
Stoffel
(Bewerkt door StoffelXYZ om 14:44, 22-05-2008)
(Bewerkt door StoffelXYZ om 14:47, 22-05-2008)
(Bewerkt door StoffelXYZ om 14:59, 22-05-2008)
Gast
