Webpagina centreren met div container ?

Status
Niet open voor verdere reacties.
T

toetsenbord

Gebruiker
Lid geworden
13 dec 2010
Berichten
158
Hallo,

Graag zou ik de inhoud van de webpagina willen centreren. Niet de tekst zelf maar heel de inhoud. Met een beetje zoekwerk kwam ik terecht bij een divcontainer. Maar hoe moet je dat nu opmaken in een css-sheet zodat deze div mooi gecentreerd wordt, ongeacht de grootte - resolutie van het scherm ?

MVG,
 
je maakt een div om je pagina en dan in de css doe je het volgende

Code: 
body     {text-align:center;} /*IE Tweak*/
div#naamdiv     {margin:0 auto;} /*0 mag je veranderen dat is de ruimte boven en onder*/

Als het goed is moet dit werken.

Brian
 
Brian,

Bedankt voor je antwoord, maar misschien was ik niet duidelijk.
Wanneer ik je code probeer, dan neemt de div heel de pagina in, en ik zou graag hebben dat er langs rechts en links nog een ruimte was. Ook staat de tekst zelf nu gecentreerd, maar dat is wel aan te passen bij text-align. (Dus de tekst zelf moet links maar staat in een div die gecentreerd is.)

MVG,

PS. Is het goed als ik gewoon de code plak in het CSS-bestand en daarna de ID van de div aanpas naar zoals in jouw vb <naam div> (dus de bestandsnaam) ?
 
Laatst bewerkt:
RoboticPro,

Nee, nog niet. Ik ben mij de laatste tijd meer en meer beginnen verdiepen in het WebDesign en ben nog aan het leren...

De div diende voor het begin van de webpagina, dus ze moet zelfs nog gemaakt worden ;).

MVG,

PS. Ik vind dat je een mooie site hebt ! Hoe heb je bv. die groene kader over heel de lengte gemaakt ? Zijn dit allemaal aparte divs ? En in welk programma maak jij je websites ?
 
Laatst bewerkt:
Hier heb je mijn bron:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
	<title>Briansservice.nl Webdesign en Computers</title> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
	<meta http-equiv="Content-Language" content="nl"> 
	<meta name="description" content="Brian's Service is een fris nieuw bedrijf in Oss gespecialiseerd in webdesign en computer service."> 
	<meta name="keywords" content="webdesign, computers, ict, goede service, Oss, brian's service, persoonlijke service, website maken"> 
	<meta name="author" content="Brian van der Horst"> 
	<meta name="rating" content="General"> 
	<meta name="robots" content="index, follow"> 
	<meta name="revisit-after" content="30 days"> 
	<meta name="email" content="info@briansservice.nl"> 
	<meta name="copyright" content="briansservice.nl"> 
	<meta name="google-site-verification" content="62rvagdnUr_n5ykUrtU4_cKHDoQ8qOjERLerzFKoPig"> 
	<link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico"> 
	<link rel="stylesheet" type="text/css" href="/style/default.css"> 
	<link rel='alternate' href='/sitemap.xml' title='sitemap'> 
	<!-- Lightbox --> 
		<script type="text/javascript" src="/plugins/lightbox/js/prototype.js"></script> 
		<script type="text/javascript" src="/plugins/lightbox/js/scriptaculous.js?load=effects,builder"></script> 
		<script type="text/javascript" src="/plugins/lightbox/js/lightbox.js"></script> 
		<link rel="stylesheet" href="/plugins/lightbox/css/lightbox.css" type="text/css" media="screen"> 
	<!-- Lightbox --> 
</head> 
<body> 
	<div id="wrapper"> 
		<div id="header"></div> 
		<div id="navigation"> 
			<ul id="main"> 
				<li><a href="/home/">Home</a></li> 
				<li><a href="/webdesign/">Webdesign</a></li> 
				<li><a href="/computers/">Computers</a></li> 
				<li><a href="/portfolio/">Portfolio</a></li> 
				<li><a href="/contact/">Contact</a></li> 
			</ul> 
		</div> 
		<div id="content"> 
			<p> 
Hartelijk welkom,<br> 
Mijn naam is Brian van der Horst.<br> 
</p> 
<p> 
Al sinds mijn 10e actief met computers. Webdesign had al snel mijn interesse.<br> 
Aanvankelijk met websitemaker van Kennisnet. Daarna volgde al snel Frontpage<br> 
en sinds enkele jaren staat het programmeren van de websites in HTML/PHP centraal.<br> 
</p> 
<p> 
Inmiddels heeft dat geleid tot Brian's Service. Met als doel een prima service<br> 
voor een "prima" prijs.  Voor de particulier, de hobbyist, maar zeker ook voor<br> 
het midden en klein bedrijf.<br> 
</p> 
<p> 
Neemt U gerust een kijkje. Wie weet kunnen wij ook u van dienst zijn.<br> 
Brian van der Horst<br> 
</p>		</div> 
		<div id="footer"> 
			<a href="/voorwaarden/">Algemene voorwaarden</a> | <a href="/sitemap/">Sitemap</a> | <a href="http://validator.w3.org/check?uri=briansservice.nl" title="Valid HTML" target="_blank">HTML</a> | <a href="http://jigsaw.w3.org/css-validator/validator?uri=briansservice.nl" title="Valid CSS" target="_blank">CSS</a> | <a href="/contact/">Contact</a><br> 
			Alle rechten voorbehouden &copy; 2010 Briansservice.nl
		</div> 
	</div> 
</body> 
</html>

Daar zie je alle div's, ook heb ik de achtergrond gemaakt met een plaatje:
http://briansservice.nl/images/background.png

Die laat ik herhalen over de breedte met background-repeat:repeat-x;

Zelf maak ik mijn website in Notepad ++ Die vind je hier:
http://notepad-plus.sourceforge.net/nl/site.htm

Ondertussen zal ik even een voorbeeld maken zodat je het beter begrijpt.

Mvg Brian
 
Brain,

Oké, bedankt.
Dus jij maakt je sites in notepad++ ? Is dat niet vreemd of irritant om alles te programmeren, zonder te zien wat je doet ? Is het niet toffer om te werken met een wysiwyg - programma ?

Ik heb wel gehoord dat wysiwyg-programma's een warboel maken van de html-codes, is dat misschien de reden? En is dat dan 'zo'n' erge warboel (ik werk zelf met een wysiwyg-programma)?

Mvg,

PS. Misschien wel een heel domme vraag :) -> Veel mensen zeggen dat voor grafische dingen, zoals websites ontwerpen etc. een Apple beter is. Zelf gebruik ik Windows... is dat dan minder goed ofzo ?? ;)
 
Laatst bewerkt:
Ik doe niet de site in een keer maken ik doe elke keer de zelfde stappen volgen en
na elke code open ik mijn browser en kijk ik hoe het eruit ziet:) ook heb ik beschikking over php omdat ik usbwebserver heb geinstalleerd. Over WYSIWYG daar ben ik mee begonnen maar het heeft limieten want zodra je php invoegd werken de meeste niet meer.

Zelf maak ik mijn layout in Adobe Photoshop CS5 64x Dat gaat perfect en anders nog GIMP (gratis), en persoonlijk vind ik windows fijner omdat alles wat je gewend bent gewoon werkt.
 
Je kan in de meeste gevallen de hele #wrapper wel missen om een site te centreren:
Code: 
body {
    width: 850px;
    margin: 0 auto;
}
That's all, folks!
Dat doet het zelfs zonder morren van IE6. ;)
Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan