Pagina layout aanpassen

Junior · 18 mar 2010, 12:24

Ik heb een nieuwe webpagina gemaakt. Alles is ontworpen op virtuele A4 paginas. Maar met dit om te zetten naar html wordt alles uitgerekt tot de volle breedte van het scherm, wat visueel veel minder aantrekkelijk is.
Dus mijn vraag : welke code moet ik invoeren om links en rechts op mijn scherm een lege band te behouden zodat het 'beschreven' gedeelte smaller wordt ?
Een voorbeeld van wat ik ongeveer wil op http://www.spectropop.com/, maar dan zonder menu balk en een iets breder beschreven gedeelte. Andere voorbeelden op de diverse links. En dus ook zowat als hier op Seniorennet met de lege witte balken links en rechts.

ultddave · 18 mar 2010, 12:54

Code: Selecteer alles

<html>
<head>
<title>Hoofdpagina</title>
<style type="text/css">
#container {
	height: auto !important;
	position: relative;
	text-align: center;
}

#wrapper
{  
   width:831px;  
   margin:0 auto;  
   text-align:center;  
}

#inhoud
{
  text-align: left;
}

</style>
</head>
<body>
<div id="container">
<div id="wrapper">
<div id="inhoud">
Dit is een test.
</div>
</div>
</div>
</body>
</html>

Het middenstuk is in dit geval: 831px breed. Je kan dat in de code aanpassen als je wilt. Dat staat bij #wrapper.

Hij centreert dat stuk altijd ten opzichte van de grootte van de browser.

Als je bijvoorbeeld een menu links in het midden wilt hebben en de inhoud rechts in het midden (zoals sennet), dan moet de code aangepast worden om te werken met "float" in de CSS code. Indien nodig pas ik dat wel aan als je dat wilt.

PS: Die 831px wordt gecentreerd afhankelijk van de grootte van het venster van de browser.

Als je dat wilt zien kan je voor te testen dit veranderen:

Code: Selecteer alles

#inhoud
{
  text-align: left;
}

Naar:

Code: Selecteer alles

#inhoud
{
  text-align: left;
  background-color: red;
}

Dat zorgt ervoor dat het middenstuk een rode achtergrond krijgt. Dan zie je duidelijk hoe breed het is. En wat er gebeurd als je de breedte van je venster verkleind en vergroot.

Ik heb het even op de server geplaatst als je het wilt zien:
http://www.latemar.be/admin/temp/test.html

Mvg,
Dave

ultddave · 18 mar 2010, 13:21

Aangezien ik niet echt uitgelegd heb wat het doet:
Je hebt dus eigenlijk 2 'div' tags nodig met elke apparte CSS code.

Code: Selecteer alles

#container { 
   height: auto !important; 
   position: relative; 
   text-align: center; 
} 

#wrapper 
{  
   width:831px;  
   margin:0 auto;  
   text-align:center;  
}

De container zorgt ervoor dat alles gecentreerd op het scherm staat.

Maar met enkel die code zou ook alle tekst in het midden komen. En dus niet als "blok".

Daarvoor dient die "wrapper". Die zorgt ervoor dat er in het midden een blok van 831 pixels gemaakt wordt. En in die blok kan je de tekst links of rechts uitlijnen. Of centreren. Afhankelijk van wat je wilt.

De "inhoud" div tag zorgt er dus voor dat de inhoud binnen de wrapper, links uitgelijnd is. Als je de text-align naar "right" zet ipv "left". Dan staat de tekst dus aan de rechterkant van die 831px blok.

Mvg,
Dave

Junior · 18 mar 2010, 13:23

Bedankt voor de snelle reactie, maar dit is nog een beetje straf voor mij. Ik heb dit gedeelte :
#container {
height: auto !important;
position: relative;
text-align: center;
}

#wrapper
{
width:831px;
margin:0 auto;
text-align:center;
}

#inhoud
{
text-align: left;
}

in mijn html geplaatst, maar het geeft geen resultaat. Waar moet dat dan precies komen en moet ik verder nog iets toevoegen ?

ultddave · 18 mar 2010, 13:33

Ah de implementatie. Vergeten uit te leggen

.
Je moet dus deze code tussen de <head> en </head> plaatsen:

Code: Selecteer alles

<style type="text/css"> 
#container { 
   height: auto !important; 
   position: relative; 
   text-align: center; 
} 

#wrapper 
{  
   width:831px;  
   margin:0 auto;  
   text-align:center;  
} 

#inhoud 
{ 
  text-align: left; 
} 

</style>

(PS: Als je werkt met editors voor je website te maken. Dan heten die soms <HEAD> en </HEAD> met hoofdletters. Maar dat zijn dus dezelfde.)

Die <style> en </style> zorgt ervoor dat de website de code ertussen als layout gaat zien.

Maar hij weet uiteraard niet waar en hoe hij die layout moet plaatsen. Daarvoor voorzien we de <div> tags tussen <body> en </body>.

Die body tags heb je normaal gezien al staan in je code.

<body>
<div id="container">
<div id="wrapper">
<div id="inhoud">
Dit is een test.
</div>
</div>
</div>
</body>

Je moet dus enkel vlak onder die body tag, deze 3 tags plaatsen:

Code: Selecteer alles

<div id="container"> 
<div id="wrapper"> 
<div id="inhoud">

Die 3 regels openen 3 div tags met de bijpassende layout.

En onderaan je webpagina. Vlak boven het sluiten van de </body> tag. Daar sluit je ook de <div> tags.

Code: Selecteer alles

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

Op die manier staat alle inhoud van uw site tussen die 3 div tags. En staat dus gecentreerd.

In dit voorbeeld is de inhoud een stuk tekst:

<body>
<div id="container">
<div id="wrapper">
<div id="inhoud">
Dit is een test.
</div>
</div>
</div>
</body>

Maar daar kan je dus je tabellen, foto's, tekst, formulieren en dergelijke tussen plaatsen.

Als het niet moest lukken, dan moet je me de .html file maar eens sturen, dan voeg ik het wel toe.

Mvg,
Dave

Junior · 18 mar 2010, 13:48

De hele boel is nu inderdaad versmald, maar alles staat links ipv in het midden...

ultddave · 18 mar 2010, 13:49

Kan je anders de HTML code hier even plaatsen op het forum. Of het bestand even zenden via email?

Dan kan ik eens kijken.

Mvg,
Dave

ultddave · 18 mar 2010, 14:03

Heb de fout gevonden:

Dit staat in uw code:

Code: Selecteer alles

	<STYLE TYPE="text/css">
	<!--
		@page { margin: 0.5cm }
		P { margin-bottom: 0.21cm }
		H3 { margin-bottom: 0.21cm }
		H5 { margin-bottom: 0.21cm }
		TD P { margin-bottom: 0cm }
		A:link { so-language: zxx }
	-->
 
 
   height: auto !important; 
   position: relative; 
   text-align: center; 
} 
 
#wrapper 
{  
   width:831px;  
   margin:0 auto;  
   text-align:center;  
} 
 
#inhoud 
{ 
  text-align: left; 
} 
 
 
 
	</STYLE>

Maar je moet dat vervangen door dit:

Code: Selecteer alles

<STYLE TYPE="text/css">
	<!--
		@page { margin: 0.5cm }
		P { margin-bottom: 0.21cm }
		H3 { margin-bottom: 0.21cm }
		H5 { margin-bottom: 0.21cm }
		TD P { margin-bottom: 0cm }
		A:link { so-language: zxx }

#container {
   height: auto !important; 
   position: relative; 
   text-align: center; 
} 

#wrapper 
{  
   width:831px;  
   margin:0 auto;  
   text-align:center;  
} 

#inhoud 
{ 
  text-align: left; 
} 


	-->
	</STYLE>

De fout zit hem dus bij het feit dat er bij het kopieren, het woordje "#container {" is weggevallen. Waardoor hij die niet ging centreren.

Mvg,
Dave

Junior · 18 mar 2010, 14:08

Ja, stomme fout. Alles is perfekt nu !!! Zeer bedankt voor de snelle hulp !!:)

ultddave · 18 mar 2010, 14:24

Graag gedaan.

Ik heb wel gezien dat er nog een probleem is als je de website bezoekt in bepaalde browsers via de link die je me stuurde.

http://rockofages2.freehostia.com/200motels/200motels toont geen website, maar wel de broncode in:
- FireFox
- Safari
- Google Chrome
- Opera

In Internet Explorer 8 toont hij de pagina wel.

Ik denk dat het komt omdat het bestand geen extensie heeft. Je kan die best opslaan als 200motels.html .

Kan ook ergens iets met de server te maken hebben want als ik die pagina op mijn server plaats, zonder extensie, dan wordt hij wel getoond in de bovenvernoemde browsers.

Als het bestand wel een extensie heeft, dan kan je die best in de URL zetten.

Bijvoorbeeld;
http://rockofages2.freehostia.com/200mo ... otels.html

Mvg,
Dave

Junior · 18 mar 2010, 16:37

html is toegevoegd. Kontroleer je nog eens ?

ultddave · 18 mar 2010, 16:40

Ok, werkt perfect in:
- FireFox
- Safari
- Google Chrome
- Opera
- Internet Explorer 8

PS: de URL wordt dan:
http://rockofages2.freehostia.com/200mo ... otels.html

Mvg,
Dave

Junior · 18 mar 2010, 16:43

Nogmaals dank ! Probleem hier was dat ik op deze webruimte individuele paginas wil plaatsen zonder dat die met elkaar verbonden zijn.

ultddave · 18 mar 2010, 16:49

Geen probleem.

PS: De URL onderaan deze site:
http://www.kollektionist.net/

Moet nog aangepast worden. Die verwijst nog naar:
http://rockofages2.freehostia.com/200motels/200motels
ipv
http://rockofages2.freehostia.com/200mo ... otels.html

Ook andere links naar die pagina moeten aangepast worden. Maar het is dus best om alle bestanden (alleen de webpagina's uiteraard) als extensie .html te geven. Anders weet de browser niet wat hij moet doen. (Buiten Internet Explorer dan, die gaat gokken dat het een webpagina is

.)

Mvg,
Dave