website centraal openen

**Frits vd B** · 10-03-2010, 16:29

Hallo,

Ik ben bezig met een website in Dreamweaver te maken. Ik krijg hem echter niet centraal geopend. align="center" werkt prima. Als ik dus ver uitzoom blijft mijn site netjes in het midden staan. Echter wanneer ik de site op een (te) kleine resolutie open begint de site linksboven zeg maar (zie afbeelding). Ik zou graag willen dat wanneer dit gebeurd de site boven-midden opent. Dit is helaas niet simpel met align=center op te lossen. Gek genoeg heeft bijna elke site dit. Snappen jullie wat ik bedoel? Iemand een oplossing?

Situatie:
http://fritsonline.nl/images/openen.png

dit is de site, tot nu toe:
http://fritsonline.nl/djd/

**J. de Boer** · 10-03-2010, 16:32

Html:

<body>
<div id="container">

Hier je website

</div>
</body>

En in je css:

#container {
margin: 0 auto;
width: 900px;
}

**Frits vd B** · 10-03-2010, 16:44

Hoi J. de Boer, bedankt voor je (snelle) reactie maar dit is niet wat ik zoek. Dit is gewoon links uitlijnen toch? Ik wil hem centraal uitgelijnd maar ook centraal geplaatst, zonder kader aan de zijkant, ik heb het even in een afbeelding gezet: http://fritsonline.nl/images/openen.png

Alvast bedankt!

**gast2960** · 10-03-2010, 17:08

Om dit effect te krijgen kan je het beste zoals J de Boer beschrijft een container aanmaken.

Vervolgens is je css dit:

Code:

html {
   overflow-x:hidden;
}

#container {
   text-align:center;
   position:relative;
   left:50%;
   margin-left:-500px;
}

overflow-x:hidden; zorgt ervoor dat je geen zijwaartse scrollbar krijgt.
text-align:center; zorgt ervoor dat je tekst in het midden wordt uitgelijnd.
left:50%; en margin-left:-500px; zorgen ervoor dat je website in het midden komt,
margin:0px auto; kan ook, maar dan werkt de overflow-x:hidden hack niet meer.

Bij de -500px moet je de helft van de breedte van de container opgeven.
Is je container 1000px breed, dan wordt dat dus -500

**Bjorn v U.** · 11-03-2010, 11:16

Gijsbert, jouw methode ken ik niet, de beste manier is die van De Boer.
Andere manier omdat in sommige gevallen het uitlijnen in IE niet werkt:

Code:

body { text-align: center; }
#wrap { text-align: left; }
<body>
<div id="wrap">Alle gecentreerde content</div>
</body>

Maar terug naar het antwoord: je wilt volgens mij een fluid website, dus moet je met bijv. "width: 95%" werken. Alleen zijn dat soort layouts moeilijker te optimaliseren. Plaats anders even wat van je HTML code.

**Frits vd B** · 11-03-2010, 11:56

bednakt voor jullie reacties. Gijsbert, jouw methode werkt bij mij helaas niet.
Dit is mijn volledige code

Code:

<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.agenda {
 margin-left: 100px;
}
.main {
 margin-left: 100px;
}
.content {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 14px;
 color: #FFFFFF;
}
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Table_01" width="1100" height="700" align="center"  border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td colspan="5" background="images/index_01.png" width="1100" height="39"></td>
 </tr>
 <tr>
  <td rowspan="6"  width="50" height="661" background="images/index_02.png"></td>
  <td colspan="3" height="10" width="1000" bgcolor="#FFFFFF"></td>
  <td rowspan="6" width="50" height="661" background="images/index_04.png"></td>
 </tr>
 <tr>
  <td rowspan="3" background="images/index_05.gif" width="392" height="148"></td>
  <td colspan="2">
   <img src="images/index_06.gif" width="608" height="102" alt=""></td>
 </tr>
 <tr>
  <td rowspan="2" background="images/index_07.gif" width="388" height="46"></td>
  <td width="220" height="32"></td>
 </tr>
 <tr>
  <td background="images/index_09.gif" width="220" height="14">
  </td>
 </tr>
 <tr>
  <td width="1000" height="442" colspan="3" background="images/background2.png"><img src="images/frame_1.png" width="507" height="311" class="main"><img src="images/frame_2.png" class="agenda"></td>
  </tr>
 <tr>
  <td colspan="3" width="1000" height="61" background="images/index_11.png"></td>
 </tr>
</table>
</body>
</html>

Zoals te zien is zit er een kader om de website. Hier zal een gradient in zitten, soort schaduweffect. Ik zou dus graag willen dat de site met een lage resolutie opent met de werkelijke site, zie afbeelding.
Hopelijk kunnen jullie helpen!

**J. de Boer** · 11-03-2010, 12:28

Het is niet verstandig om een website in tabellen op te bouwen. Bovendien kan ik nu niet goed zien wat het probleem is, omdat ik niet over de afbeeldingen beschik. Heb je een online voorbeeld?

**Frits vd B** · 11-03-2010, 12:37

Dit is de site tot nu toe http://fritsonline.nl/djd/ ik moet die afbeeldingen, grijze half transparante vlakken nog veranderen, dat moeten gewoon tekst vakken worden.

(was niet bedoeling pm te sturen ;))

website centraal openen