Archief - JS: uitlijnen

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
e

exserco

Legacy Member
Hallo,

ik ben een beetje aan het oefenen met het ontwerpen van websites. ik kom hier echter een probleempje tegen waar ik geen raad me weet.
Op users.telenet.be/exserco/test zie je een voorbeeldje van wat ik wil.

In het navigatiemenu ligt het probleem. Als je de site opent in IE, dan toont hij de site perfect. In Firefox blijkt de onderste button net iets meer naar links te staan.

Kan er mij iemand uitleggen wat er fout is en een oplossing geven? Ik zie het niet.

code van de xhtml:
Code: 
<!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" xml:lang="nl" lang="nl">
<head>
<title>Mamo: luchthaven- en personenvervoer</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style1 {
	color: orange;
	font-size: x-small;
	text-align: right;
}
.style2 {
	font-size: small;
	color: orange;
}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('pics/button_start_rollover.gif','pics/button_voordelen_rollover.gif','pics/button_servicelijst_rollover.gif','pics/button_werknemerslijst_rollover.gif','pics/button_reserveren_rollover.gif','pics/button_contact_rollover.gif','pics/button_links_rollover.gif')">

<div id="container">
  <div id="header">
    <img src="pics/logo.gif" alt="logo Mamo" width="78" height="65" />  </div>
  
  <div id="menu">
    <br />
    <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('start','','pics/button_start_rollover.gif',1)"><img src="pics/button_start.gif" alt="Start" name="start" width="130" height="35" border="0" id="start" /></a><br />
    <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Voordelen','','pics/button_voordelen_rollover.gif',1)"><img src="pics/button_voordelen.gif" alt="Onze Voordelen" name="Voordelen" width="130" height="35" border="0" id="Voordelen" /></a><br />
	<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('servicelijst','','pics/button_servicelijst_rollover.gif',1)"><img src="pics/button_servicelijst.gif" alt="Servicelijst" name="servicelijst" width="130" height="35" border="0" id="servicelijst" /></a><br />
	<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Werknemerslijst','','pics/button_werknemerslijst_rollover.gif',1)"><img src="pics/button_werknemerslijst.gif" alt="Werknemerslijst" name="Werknemerslijst" width="130" height="35" border="0" id="Werknemerslijst" /></a><br />
	<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Reserveren','','pics/button_reserveren_rollover.gif',1)"><img src="pics/button_reserveren.gif" alt="Reserveren" name="Reserveren" width="130" height="35" border="0" id="Reserveren" /></a><br />
    <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','pics/button_contact_rollover.gif',1)"><img src="pics/button_contact.gif" alt="Contact-info" name="Contact" width="130" height="35" border="0" id="Contact" /></a><br />
    <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('links','','pics/button_links_rollover.gif',1)"><img src="pics/button_links.gif" alt="Links naar andere sites" name="links" width="130" height="35" border="0" id="links" /></a>
	<br />
	<br /><br /><br /><br />
  </div>
  
  <div id="content">
    <h3><u>Welkom op de website van Mamo!</u></h3>
	<p>Wij wensen u op eenvoudige wijze, via deze site, wegwijs te maken in onze diensten.<br /><br />Voor inlichtingen of offertes: aarzel niet om met ons <a href="mailto:[email protected]">contact</a> te nemen.<br /><br />Wij staan steeds ter uwer beschikking.</p>
  </div>
  
  <div id="footer"> 
    <p class="style2"><a href="index.html" target="_parent">www.mamo.be</a></p></span>
	<div align="right"><span class="style1"><br />
	  Contacteer de <a href="mailto:[email protected]?subject=mailtje vanaf de Mamo.be-site">webmaster</a> als de pagina fouten bevat.<br />
	  Deze site werd ontwikkeld voor een resolutie van minimum 800*600 onder IE of Firefox. </span> </div>
  </div>
</div>


</div>
</body>
</html>

en hier de code van de css:

Code: 
body {
	margin: 0 auto;
	padding: 10px;
	font-family: Georgia, Times, Serif;
	color: black;
	width: 800px;
	text-align: center; /*voor IE*/
	background-color: #FCF8AD;
}

div#container {
	width: 780px;
	overflow: hidden;
	border: 1px solid orange;
	height: 100%;
	min-height: 100%;
}

div#header {
	width: auto;
	clear: both;
	text-align: left;
	padding: 5px;
	margin-left: 10px;
}

div#menu {
	width: 150px;
	float: left;
	padding: 5px;
	text-align: center;
	border-right: 1px solid orange;
	border-top: 1px solid orange;
	background-image: url(pics/background_menu.jpg);
	background-position: right;
}

div#content {
	width: auto;
	padding: 5px;
	margin-left: 160px; /* doordat in menu de padding links en rechts telkens 5px is */
	text-align: left;
	border-top: 1px solid orange;
}

div#footer {
	width: auto;
	clear: both;
	border-top: 1px solid orange;
	padding-left: 5px;
	padding-right: 5px;
}

Alvast bedankt.
PS: de achtergrond image in het menu-gedeelte moet nog aangepast worden hé :p
e

exserco

Legacy Member
Het is al opgelost. :applause:

Ik heb gewoon in de betreffende div de laatste "<br>'s" tussen <p>-tags gezet en voila ......

(Ge moet daarvoor een ganse morgen knoeien en als je dan hulp vraagt, het zelf oplossen in 5 minuten. :$ Enfin beter zo, dan niet opgelost...)

:offtopic:
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan