De content laag zit te hoog of te laag.

Status
Niet open voor verdere reacties.
F

Frederik10en

Gebruiker
Lid geworden
4 jul 2008
Berichten
9
Ben bezig met een website te maken
http://www.aurelie-en-sven.be/cover.html

Als wonder gaat het in IE7 perfect en laat Firefox en Safari heel wat anders zien.
De content laag zit te hoog of te laag.

Welke instelling gebruik ik het best om zulks correct te krijgen?

Thx voor je bemerkingen

Frederik
 
Laatst bewerkt:
Style aanpassen:

HTML: 
<div id="container">
  <div id="header" style="height:140px;margin-top:20px;">
    <ul id="MenuBar1" class="MenuBarHorizontal">

:cool:
 
Probleem met laag content

Beste Peter,

Bijzondere dank voor je aanwijzing.

Toch loopt het niet lekker in FF en Safari ... desondanks ik er zelfs extra style's heb aangebracht.

In bijlage de html & css code

Kan je me aanwijzen wat er precies moet gewijzigd/aangevoegd worden.

Thx

Frederik

HTML: 
<!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>Naamloos document</title>
<link href="../CSS/kleine-achtergrond945-795.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body class="oneColFixCtrHdr">
<div id="container" style="margin-top:0px;background-position:margin-top: auto;">
  <div id="header" style="height:30px;margin-top:125px;">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="../index.html" title="Home">Home</a>          </li>
      <li><a href="#" title="Cover">Cover</a></li>
      <li><a href="#" title="Foto's">Foto's</a></li>
      <li><a href="#" title="Slideshow">Slideshow</a></li>
      <li><a href="#" title="Gastenboek">Gastenboek</a></li>
      <li><a href="#" title="Contact">Contact</a>        </li>
      <li><a href="#" title="Bedankt">Bedankt</a></li>
    </ul>
   </div>
  <div id="mainContent">
    <h1>Hoofdinhoud </h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>
    <h2>Kop niveau H2 </h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
	<!-- end #mainContent --></div>
  <div id="footer">
    <p>Aurelie en Sven bedanken u voor uw bezoek op deze Online Trouwablbum</p>
  </div>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
      </script>
</body>
</html>


CSS code
Code: 
@charset "utf-8";
body {
	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(../ACHTERGRONDEN/kleineachtergrond2-hartjes-alleen.jpg);
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	background-repeat: no-repeat;
	background-position: center top;
}
.oneColFixCtrHdr #container {
	width: 945px; /* de automatische marges (d.m.v. auto), in combinatie met een breedte, centreren de pagina */
	border: 0px none #000000;
	text-align: left; /* hiermee wordt de instelling text-align: center voor het element body genegeerd. */
	background-image: url(../ACHTERGRONDEN/kleineachtergrondcontent3.gif);
	margin-top: auto;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	background-repeat: no-repeat;
	background-position: center top;
	height: 795px;
	top: 0px;
}
.oneColFixCtrHdr #header {
	height: 10px;
	padding-right: 0px;
	padding-bottom: 0;
	padding-left: 0px;
	margin-top: 0px;
	margin-left: 300px;
	margin-right: 40px;
}
.oneColFixCtrHdr #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 */
}
.oneColFixCtrHdr #mainContent {
	width: 670px;
	padding-top: 0;
	padding-right: 0px;
	padding-bottom: 0;
	padding-left: 0px;
	height: 480px;
	margin-top: 5px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	margin-left: 235px;
	text-align: center;
}
.FOTOLINKS {
	float: left;
	margin-right: 20px;
}

.oneColFixCtrHdr #footer {
	margin-top: 100px;
	margin-bottom: 0px;
	margin-left: 265px;
	padding-top: 0;
	padding-right: 10px;
	padding-bottom: 0;
	padding-left: 10px;
	width: 600px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: italic;
	font-weight: bold;
	color: #6699FF;
}
.oneColFixCtrHdr #footer p {
	margin: 0; /* door de marges van het eerste element in de footer (voettekst) in te stellen op 0 vermijdt u het risico dat de marge wegvalt – een ruimte tussen div-elementen */
	padding: 10px 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 */
}
 
Ok

Deze topic mag afgesloten worden.

Waarrempel ik heb er los over gekeken.
Bedankt voor het mee te denken.

Groetjes,

Frederik
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan