Uitlijnen website lukt niet

**mccbaz** · 25 mei 2012, 11:26

Beste allemaal,

Ik heb problemen met het uitlijnen van mijn website: http://www.c-baz.nl

Ik wil graag dat de uitlijning in alle voorkomende browsers (explorer, chrome, firefox en safari) hetzelfde is. Ik krijg dit echter niet voor elkaar.
Hoe meer ik aan het proberen ben met diverse (CSS) codes, hoe meer mn code een zooitje aan het worden is. Zouden jullie me kunnen helpen?

Ik heb een screenshot toegevoegd hoe ik het graag zou willen.
Het gaat om het logo bovenaan m'n site (C-BAZ), en om de buttons onderaan m'n site (de social media buttons, uitgelijnd links, en het fight cancer logo uitgelijnd rechts). Ik hoop dat jullie me uit de brand kunnen helpen. Alvast bedankt!

(nu is het zo dat het logo bovenaan m'n site alsmede de buttons onderaan helemaal naar links schieten in diverse browsers).

Screenshot.jpg

**Janzwart** · 25 mei 2012, 21:45

Het logo en de buttons staan buiten de TABLE dat is de reden dat ze niet net als de rest gecentreerd worden weergegeven.

**mccbaz** · 26 mei 2012, 20:49

Beste Jan,

Kun je misschien ook uitleggen hoe ik de codes in de table krijg?

**Janzwart** · 27 mei 2012, 20:15

Onderstaand de code waarmee het zou moeten lukken.

De code die op jou site staat is niet correct.
Als je een regel of stuk tekst begint met <table> moet hij afgesloten worden met </table> , dit geldt ook voor <tr> en <td> dit is met jou code lang niet overal het geval.

De code die hier onderstaat is ook nog niet helemaal zuiver, maar werkt (bij mij) wel.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>c-Baz                                            [[official website 2012]]</title>

<script language="javascript"> 
function click() {if (event.button==2) { 
alert('© Copyright www.c-baz.nl');  
}}document.onmousedown=click</script>

 


<style type="text/css">

<!--
body,td,th 				{font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #FF0033; font-weight:bold;}
body 						
					{background-color: #000000; background-image:url('http://www.c-baz.nl/images/achtergronden/black_pattern02.jpg');background-repeat:no-repeat;

body, div					{overflow:auto; SCROLLBAR-FACE-COLOR: #000000; SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF; SCROLLBAR-SHADOW-COLOR: #FFFFFF; SCROLLBAR-3DLIGHT-COLOR: #000000; SCROLLBAR-ARROW-COLOR: #FFFFFF; SCROLLBAR-TRACK-COLOR: #000000; SCROLLBAR-DARKSHADOW-COLOR: #000000;}

#tblmain					{border-collapse:collapse;}
#tblmain2				{border-collapse:collapse;}

.koppen					{color: #ff0000;font-weight: bold;}
.koppen2					{color: #FFFFFF; font-weight: bold; font-size:9px;}
.text2						{color: #FFFFFF}

a 							{font-size: 9px; color: #9EC6EF; font:Verdana, Arial, Helvetica, sans-serif; font-weight:bold;}
a:link 						{text-decoration: none;}
a:visited 					{text-decoration: none;}
a:hover 					{text-decoration: none; color:#FFFFFF;}
.style10 {
	color: #666666;
	font-size: 9px;
}

-->
</style>

<script language="JavaScript" type="text/JavaScript">
<!--
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_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_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('images/knop-home2.jpg','images/knop-news2.jpg','images/knop-agenda2.jpg','images/knop-bio2.jpg','images/knop-music2.jpg','images/knop-pic2.jpg','images/knop-credits2.jpg','images/knop-links2.jpg','images/knop_contact2.jpg')">

 <tr><td><table align="center" id="tbtable>lmain" valign="top">
    <img src="images/Top.png" align='center' border="0"></a></table> </td>
  </tr><table align="center" id="tblmain" valign="top">

    <td height="22" colspan="2" background="images/balk1.jpg"><table width="100%" cellpadding="0" cellspacing="0">
      <tr align="center" valign="top">
        <td valign="middle"><a href="home.php" target="mainframe" onMouseOver="MM_swapImage('Image1','','images/knop-home2.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/knop-home1.jpg" name="Image1" width="85" height="21" border="0"></a></td>
        <td valign="top"><a href="news.php" target="mainframe" onMouseOver="MM_swapImage('Image2','','images/knop-news2.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/knop-news1.jpg" name="Image2" width="85" height="21" border="0"></a></td>
        <td valign="top"><a href="agenda.php" target="mainframe" onMouseOver="MM_swapImage('Image3','','images/knop-agenda2.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/knop-agenda1.jpg" name="Image3" width="85" height="21" border="0"></a></td>
        <td valign="top"><a href="bio.php" target="mainframe" onMouseOver="MM_swapImage('Image4','','images/knop-bio2.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/knop-bio1.jpg" name="Image4" width="85" height="21" border="0"></a></td>
        <td valign="top"><a href="music.php" target="mainframe" onMouseOver="MM_swapImage('Image5','','images/knop-music2.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/knop-music1.jpg" name="Image5" width="85" height="21" border="0"></a></td>
        <td valign="top"><a href="multimedia.php" target="mainframe" onMouseOver="MM_swapImage('Image6','','images/knop-pic2.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/knop-pic1.jpg" name="Image6" width="85" height="21" border="0"></a></td>
        <td valign="top"><a href="credits.php" target="mainframe" onMouseOver="MM_swapImage('Image7','','images/knop-credits2.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/knop-credits1.jpg" name="Image7" width="85" height="21" border="0"></a></td>
        <td valign="top"><a href="links.php" target="mainframe" onMouseOver="MM_swapImage('Image8','','images/knop-links2.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/knop-links1.jpg" name="Image8" width="85" height="21" border="0"></a></td>
        <td valign="top"><a href="contact.php" target="mainframe" onMouseOver="MM_swapImage('Image10','','images/knop_contact2.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/knop_contact1.jpg" name="Image10" width="85" height="21" border="0"></a></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td width="400" height="320" align="left" valign="top" bgcolor="#333333"><br>
    <iframe src="home.php" name="mainframe" style="overflow:auto; solid #CCCCCC; height:300; width:400;" frameborder=0></iframe></td>
    <td width="400" align="right" valign="bottom" background="images/plaatjeRechtsvier.jpg"> </td>
  </tr>
  <tr bgcolor="#666666">
    <td height="15" colspan="2" background="images/balk2.jpg"> </td>
  </tr>
</table>
<table widt="810" align="center"><br>
  <tr><td><a href="http://www.twitter.com/mc_cbaz" target="blank" onMouseOver="MM_swapImage('Image12','','images/twitterkleur.png',1)" onMouseOut="MM_swapImgRestore()"><img src="images/twitter.png" name="Image12" alt="Follow c-Baz on Twitter" border="0"></a>
<a href="http://www.facebook.com/mccbaz" target="blank" onMouseOver="MM_swapImage('Image13','','images/facebookkleur.png',1)" onMouseOut="MM_swapImgRestore()"><img src="images/facebook.png" name="Image13" alt="Add c-Baz as friend on facebook"border="0"></a>
<a href="http://www.mccbaz.hyves.nl" target="blank" onMouseOver="MM_swapImage('Image11','','images/hyveskleur.png',1)" onMouseOut="MM_swapImgRestore()"><img src="images/hyves.png" name="Image11" alt="Add c-Baz as friend on Hyves" border="0"></a>
<a href="http://www.youtube.com/mccbaz" target="blank" onMouseOver="MM_swapImage('Image14','','images/youtubekleur.png',1)" onMouseOut="MM_swapImgRestore()"><img src="images/youtube.png" name="Image14" alt="Watch MC c-Baz material on Youtube"border="0"></a>
<a href="http://partyflock.nl/artist/57295:C_Baz.html" target="blank" onMouseOver="MM_swapImage('Image18','','images/partyflockkleur.png',1)" onMouseOut="MM_swapImgRestore()"><img src="images/partyflock.png" name="Image18" alt="Add c-Baz as favorite artist on Partyflock"border="0"></a>
<a href="http://www.djguide.nl/djinfo.p?djid=7269" target="blank" onMouseOver="MM_swapImage('Image16','','images/djguidekleur.png',1)" onMouseOut="MM_swapImgRestore()"><img src="images/DJGUIDE.png" name="Image16" alt="Vote for c-Baz as your favorite artist"border="0"></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://acties.fightcancer.nl/C-Baz-supports-fight-cancer 

" target="blank" onMouseOver="MM_swapImage('Image17','','images/fightcancer.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/fightcancerzw.gif" name="Image17" alt="Support c-Baz in the fight against cancer!" border="0"></a></td>
  </tr>
</table>
<table align="center">
  <tr>
 </tr>
</table>
</body>
</html>

**csshunter** · 30 mei 2012, 08:23

Hoi mccbaz,
Even terzijde:
Op de pagina credits (oh, 't is een <iframe> pagina-structuur... *) valt m'n oog op:

This website is best viewed at 1024x768 or higher resolution
with Microsoft Internet Explorer 6 or newer.

Dit lijkt een zinnetje uit de oude doos (ten tijde van de browseroorlog IE vs. Netscape).

Niemand gebruikt nog IE5 of IE5.5, en ook IE6 is volledig uit de gratie. Alle IE-gebruikers zitten hoger.
De pagina-breedte is zo'n 830px, en de laatste 3 maanden heeft nog maar 3,8% een lagere resolutie, zeggen de statistieken (afgezien dan van de telefoons, tablets e.d.; maar die renderen op een andere manier).
Ongeveer 10% zit nog maar op 1024*768px, de rest is allemaal hoger.
Elke zichzelf respecterende site is in alle browsers te zien. Zeker als de uitlijning in orde komt, hoeft IE niet het voorrecht van aanbevolen browser te krijgen!

Dus niemand zal boos worden als dat zinnetje geschrapt wordt.

Behalve als je aandelen Microsoft hebt, dan kan je IE als aanbevolen browser er in laten staan. Of 't helpt, weet ik niet.

Met vriendelijke groet,
CSShunter
_____
*) Webrichtlijn R-pd.12.1: Gebruik geen frames op websites. Dit geldt voor zowel reguliere frames binnen framesets, als zogenaamde iframes.

PS: De leveranciers van het basisconcept voor je site zijn nogal tabel-aanhangers. Hun eigen site en de eerste 5 websites uit hun portfolio zijn allemaal gebaseerd op een table-opmaak, ipv op div's met css (de rest heb ik niet bekeken).
Wat zal ik er van zeggen? - Een jaar of 10 geleden waren tabellen gebruikelijk om iets behoorlijk op een pagina te krijgen. - In 2004, 8 jaar gelden, verscheen het artikel Throwing tables out the window, en in de webrichtlijnen.nl staat als richtlijn Gebruik tabellen niet voor lay-out.

Onderwerp: Uitlijnen website lukt niet

Onderwerp opties

Zoek in onderwerp

Vraag is niet opgelost

Uitlijnen website lukt niet

Berichtenregels

Helpmij.nl

Helpmij.nl en business

Contact