Centreren content op een webpagina

**marijke** · 02/07/06 10:14

Beste forumleden,

Ik heb mij vandaag aangemeld bij webhostingtalk. Ik ben 59 jaar

en run een klein webdesign bedrijfje (www.mbwebdesign.nl) en doe computeronderhoud voor particulieren en kleine ondernemers. Ik ben een autodidact en weet dus nog niet alles op dit gebied op het gebied van webdesign.

Mijn vraag is, hoe een graphic/tabel (het eigenlijke informatie gedeelte), zie bijv. www.dakpannen-handel.nl of www.tulip.nl, op de webpagina volledig gecentreerd blijft bij wijziging van de beeldschermresolutie. Tegenwoordig werken de meeste computergebruikers met een beeldschermresolutie van 1280 x 1024, maar de wat oudere mensen geven de voorkeur aan 1024 x 768.

Moet ik om dit bereiken met frames werken en moet het midden frame "vastgezet" worden? Wat zijn de instellingen van de andere frames?

Ik werk zowel met Dreamweaver 4.1 als met Frontpage 2003.

Ik dank jullie voor de hulp

Marijke

**Zor.in** · 02/07/06 10:18

www.dakpannen-handel.nl gebruikt een iframe met een vast width en height.

www.tulip.nl gebruikt gewoon een tabel die gecentreerd is met vaste width en height...

**systemdeveloper** · 02/07/06 10:26

Bedoel je zoals op www.beckersbedrijfsmakelaars.nl of www.hostinglease.nl/nl/ ?
Bij resizen staat de boel altijd in het midden. Komt door dit css stukje:

#wrapper {
width: 800px;
}

html>#wrapper {
background: ********;
width: 800px;
}

Vervolgens je html op deze manier.

<body>
<div id="wrapper">
....
</div>
</body>

Als je nog problemen hebt, dan laat maar horen.

John

**DutchTSE** · 02/07/06 11:53

DIV.center {
position: absolute; left: 50%; top: 50%; margin-left: -150px; margin-top: -150px;
}

<div class="center">
blabla
</div>

om gegevens geheel in het midden van het scherm te krijgen

**V. Kleijnendorst** · 02/07/06 14:08

Code:

body{
  text-align: center;
}
#main{
  margin: 0px auto;
  text-align: left;
  width: 770px;
  background: #ccc;
}

<body>
  <div id="main"></div>
</body>

Overigens best typisch dat je een webdesgin 'bedrijf' hebt en de basiskennis niet hebt. Is het vreemd dat ik vind dat je dit eerst moet kunnen voordat je professioneel hiermee aan de slag gaat?

**Str@nger** · 02/07/06 14:22

Houd ook rekening met de verschillende opvatting van de browsers op 'text-align: center' - er zijn browsers die dit alleen oppikken voor text en niet voor afbeeldingen en tabellen...

**V. Kleijnendorst** · 02/07/06 15:21

W3C schrijft voor dat text-align alleen voor inline elementen gebruikt dient te worden. Daarom gebruik ik in het voorbeeldje margin:auto. Omdat IE juist dat niet ondersteund en text-align op elk element toepast krijg je een cross-browser methode om te centreren, zonder hacks en zonder absolute positionering met alle (nadelige) gevolgen vandien.

**Zenda** · 02/07/06 15:53

Op een simpele manier kunt u het alsvolgt doen:

Maak een tabel aan die een breedte en een hoogte heeft van 100%. Ook de kolom geef je de 100% breedte en hoogte mee. Nu zeg je vervolgens dat het zowel horizontaal als verticaal in het midden gecentreerd moet worden.

Voorbeeld code:

Code:

<table width="100%" height="100%"><tr>
<td width="100%" height="100%" align="center" valign="middle">

Hier komt de content die gecentreerd moet worden.

</td></tr></table>

**V. Kleijnendorst** · 02/07/06 15:59

Tables voor opmaak

**systemdeveloper** · 02/07/06 16:01

Retro... maar klopt... werkt ook

**marijke** · 02/07/06 18:57

Beste forumleden,

Zeer bedankt voor alle goede adviezen. Na terugkeer van het wereldkampioenschappen bridge in Verona, had ik vandaag nog teveel administratieve troep te verwerken, maar morgen ga ik met jullie adviezen aan de slag.

Het centreren horizontaal was nooit een probleem, maar de volledige content (feitelijk de webpagina) zowel horizontaal als verticaal centreren bij elke beeldschermresolutie was mij nog niet gelukt. Voor wat betreft de opmerking van Swiss BV: al mijn klanten zijn meer dan tevreden over de door mij gemaakte websites. Ik schaam mij niet om iets te vragen, ik weet heel veel, maar het kan altijd beter!

Marijke

**Str@nger** · 02/07/06 20:21

Verticaal centreren wordt volgens mij hier nog niet echt besproken in dit topic, dit gaat meer over horizontaal centreren.

**Zenda** · 02/07/06 20:33

Nee hoor, in mijn post staat de oplossing voor het horizontaal en verticaal centreren van de content (of hele website).

De oplossing is inderdaad verreweg van professionaliteit, maar het is een oplossing. Nu kunnen jullie allemaal wel met moeilijke oplossingen komen d.m.v. CSS, maar waarschijnlijk heeft Marijke hier geen verstand van en is de oplossing iets te moeilijk.

**systemdeveloper** · 02/07/06 22:51

Oorspronkelijk geplaatst door Zenda

Nee hoor, in mijn post staat de oplossing voor het horizontaal en verticaal centreren van de content (of hele website).

De oplossing is inderdaad verreweg van professionaliteit, maar het is een oplossing. Nu kunnen jullie allemaal wel met moeilijke oplossingen komen d.m.v. CSS, maar waarschijnlijk heeft Marijke hier geen verstand van en is de oplossing iets te moeilijk.

Kan aan mij liggen maar jouw versie werkt even slecht als die van mijn post

En fouten kunnen we ook niet hebben dus....

Bekijk de code van www.hostinglease.nl/x.html maar (Opera, IE en FF).

Of beter nog.. hiero... voordat er weer iemand klaagt over een link naar mijn eigen site... :P

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
body {
color: black;
background-color: #eeeeee;
margin: 0px;
}
#content {
background-color: #dddddd;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
width: 350px;
height: 100px;
margin-top: -50px;
margin-left: -175px;
visibility: visible;
border: 1px solid #000000;
}
</style>
</head>
<body>
<div id="content">
Groetjes van </br>
SystemDeveloper.NL
</div>
</body>
</html>

Groet

**marijke** · 03/07/06 13:26

Hartelijk dank Zenda.
Ik maak ook cascading style sheets (CSS) en probeer zoveel mogelijk van de programeertaal te begrijpen. Ik heb met behulp van goede studieboeken uitgepuzzeld hoe een webform, database etc. werkt. Natuurlijk is dit de harde manier van leren in vergelijking met diegenen die een studie op dit gebied hebben gevolgd. Echter, een dosis gezond verstand en logisch nadenken brengen je heel ver. Nogmaals dank

en tot mails!

Marijke

Onderwerp Gereedschap

Toon

Onderwerp: Centreren content op een webpagina

Centreren content op een webpagina

Webhostingtalk.nl

Link met ons

Partners

Contact