Afbeelding Positie verschillende browsers

[joeyzbg]

Hallo allemaal,
Ik ben net enkele dagen bezig met een website te bouwen
en loop nu tegen het volgende probleem aan.

Op de website gebruik ik een afbeelding waar de text op staat
Zodat in iedergeval de text altijd op de goede plek blijft.

Nu is mijn probleem dat met verschillende resoluties en verschillende browsers
De afbeelding zich niet aanpast qua formaat.

De site werkt goed met resoluties boven 1024x768,
en alleen met Chrome, IE7+8, en safari 5.0.5 op osx 10.6

Op andere browsers en lagere resoluties valt het bord
Half buiten de pagina.

Link naar de actuele website:
http://good-meat.nl/nietvoordeep/

Ik heb het bord zogenaamd aan kettingen hangen voor een mooi effect,
Met sommige browsers zakt hij zo ver weg dat dat niet meer te zien is,
en dat je ver naar beneden moet scrollen om de text te kunnen lezen.

Dit is mijn css

@charset "utf-8";
/************************************************************************
 * SITE EN CSS GEMAAKT DOOR JOEY SCHRAMA,
 * ALLE RECHTEN ZIJN VOORBEHOUDEN
 ***********************************************************************/

/************************************************************************
 * OPTIES VOOR LOGO
 ***********************************************************************/
* { margin: 0; padding:0; }
#wit {  background-color:#FFF; }


/************************************************************************
 * OPTIES VOOR ACHTERGROND
 ***********************************************************************/
body { 
background-image:url(afbeeldingen/bg.jpg); 
background-repeat:no-repeat;
background-size:100%;
height:100%;
background-attachment:fixed;
a:link color:#FF0000;
a:visited color:#FFFFFF;
a:hover color:#FFFFFF;
a:active color:#FFFFFF;
}

#body {
padding:0px;
padding-bottom:10px;   /* Height of the footer */
}

#contact {
	overflow: hidden;
} 


/************************************************************************
 * HUIDIGE PAGINA INDICATOR
 ***********************************************************************/
body.one a.one, body.two a.two, body.three a.three, body.four a.four, body.five a.five, body.six a.six
{font-weight:bold;}



/************************************************************************
 * OPTIES VOOR NAVIGATIEBALK
 ***********************************************************************/
div#navbar2 {
	height: 30px;
	width: 100%;
	border-top: solid #000 0px; /*Border voor navbar*/
	border-bottom: solid #000 1px;
	background-color: #FFF;
}
div#navbar2 ul {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
line-height: 30px;
white-space: nowrap;

}
div#navbar2 li {
list-style-type: none;
display: inline;
}

div#navbar2 li a {
	text-decoration: none;
	padding: 7px 10px;
	color: #000;
}

div#navbar2 li a:link {
color: #FFF:
}

div#navbar2 lia:visited {
color: #CCC;
}

div#navbar2 li a:hover {
	font-weight: small;
	color: #FFF;
	background-color: #333333;
}



/************************************************************************
 * OPTIES VOOR INHOUD
 ***********************************************************************/
div#content {
	background-image:url(afbeeldingen/testbord.png);
	background-repeat:no-repeat;
	/*background-attachment:fixed;*/
	height:700px;
	width:900px;

	*/background-position:center;*/
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #fff;
	font-size:14px;
	padding-left:90px;
	padding-top:300px;
	a:link color:#FF0000;
}

div#home {
	background-image:url(afbeeldingen/hometestbord.png);
	background-repeat:no-repeat;
	/*background-attachment:fixed;*/
	height:900px;
	width:700px;
	z-index:1;

	*/background-position:center;*/
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #fff;
	font-size:14px;
	font-size-adjust:inherit;
	padding-left:90px;
	padding-top:200px;
	a:link color:#FF0000;
}

div#kalender {
	background-image:url(afbeeldingen/kalenderbord.png);
	background-repeat:no-repeat;
	/*background-attachment:fixed;*/
	height:900px;
	width:700px;
	z-index:1;

	*/background-position:center;*/
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #fff;
	font-size:14px;
	font-size-adjust:inherit;
	padding-left:90px;
	padding-top:200px;
	a:link color:#FF0000;
}

/************************************************************************
 * OPTIES VOOR GALERIJ-INHOUD
 ***********************************************************************/
div#photocontent {
	/*background-image:url(afbeeldingen/woodklein.png);*/
	background-repeat:no-repeat; 
	background-size:0%;
	background-position:center;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #000000;
	font-size:14px;
}



 
/************************************************************************
 * OPTIES VOOR GALERIJ
 ***********************************************************************/
.thumbnails img {
height: 80px;
border: 4px solid #555;
padding: 1px;
margin: 0 10px 10px 0;
}
 
.thumbnails img:hover,
 {
border: 4px solid #00ccff;
cursor:pointer;
display:inline;

}
 
.preview img {
border: 4px solid #444;
padding: 1px;
height: 500px;
}




/************************************************************************
 * OPTIES VOOR FOOTER
 ***********************************************************************/
#container {
   min-height:100%;
   position:relative;
}
/* Everything but chrome1+, opera9+, ff 3.5+  */

div#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:20px;   /* Height of the footer */
   background-color:transparent;
   color:#FFF;

}


a:link { 
	color: #FFFFFF;
	}
a:visited { 
	color: #FFFFFF;
	}
a:hover {
	color: #FFFFFF;
	}
a:active { 
	color: #FFFFFF;
	}

Dit is de html code van index.html:

<div id="container">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css"> 
<title>Good-Meat</title>
</head>
<body class="one">



	<!--LOGO -->
<div id="wit">
<center>
  <p><img src="afbeeldingen/logo.JPG" width="500" height="115" /></p>
</center>
</div>

<!--NAVIGATIEBALK -->
<div id="navbar2">
  <div align="center">
    <ul>
      <li><a href="index.html" class="one">Home</a></li>
      <li><a href="photos.html" class="two">Photos</a></li>
      <li><a href="videos.html" class="three">Videos</a></li>
      <li><a href="downloads.html" class="four">Downloads</a></li>
      <li><a href="contact.html" class="five">Contact</a></li>
      <li><a href="kalender.html" class="six">Kalender</a>  </li>
    </ul>
  </div>
</div>


<div id="home"> 


</div>


<div id="footer">
<center><h6>Copyright® Good-Meat 2011 &nbsp; &nbsp; &nbsp; Website by Joey Schrama</h6></center> 
</div>
</body>
</html>
</div>

Ik hoop dat iemand mij hiermee kan helpen!


EDIT:
Voor de duidelijkheid,
Ik heb vandaag al de hele dag google afgezocht
en verschillende methodes geprobeerd.
helaas mocht dit niet baaten.

Mvg Joey

 

[Djoane]

Met dreamweaver kun je verschillende layout mogelijkheden zien ... Zoals op pda, breedbeeld, en normaal scherm...