Eigen website

Pagina layout aanpassen

Gestart door Junior op 18 mar 2010, 12:24 14 berichten 4.505 keer gelezen
Junior Startte dit onderwerp 18 mar 2010, 12:24 Kapellen 430 berichten
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.
Laptop : Windows 11, AVG, Mozilla Firefox & Thunderbird
ultddave 18 mar 2010, 12:54 Limburg > Genk 248 berichten

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
.NET en Java Programmeur
ultddave 18 mar 2010, 13:21 Limburg > Genk 248 berichten
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
.NET en Java Programmeur
Junior Startte dit onderwerp 18 mar 2010, 13:23 Kapellen 430 berichten
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 ?
Laptop : Windows 11, AVG, Mozilla Firefox & Thunderbird
ultddave 18 mar 2010, 13:33 Limburg > Genk 248 berichten
Ah de implementatie. Vergeten uit te leggen :D.
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
.NET en Java Programmeur
Junior Startte dit onderwerp 18 mar 2010, 13:48 Kapellen 430 berichten
De hele boel is nu inderdaad versmald, maar alles staat links ipv in het midden...
Laptop : Windows 11, AVG, Mozilla Firefox & Thunderbird
ultddave 18 mar 2010, 13:49 Limburg > Genk 248 berichten
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
.NET en Java Programmeur
ultddave 18 mar 2010, 14:03 Limburg > Genk 248 berichten
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
.NET en Java Programmeur
Junior Startte dit onderwerp 18 mar 2010, 14:08 Kapellen 430 berichten
Ja, stomme fout. Alles is perfekt nu !!! Zeer bedankt voor de snelle hulp !!:)
Laptop : Windows 11, AVG, Mozilla Firefox & Thunderbird
ultddave 18 mar 2010, 14:24 Limburg > Genk 248 berichten
Graag gedaan. :wink: 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
.NET en Java Programmeur
Junior Startte dit onderwerp 18 mar 2010, 16:37 Kapellen 430 berichten
html is toegevoegd. Kontroleer je nog eens ?
Laptop : Windows 11, AVG, Mozilla Firefox & Thunderbird
Junior Startte dit onderwerp 18 mar 2010, 16:43 Kapellen 430 berichten
Nogmaals dank ! Probleem hier was dat ik op deze webruimte individuele paginas wil plaatsen zonder dat die met elkaar verbonden zijn.
Laptop : Windows 11, AVG, Mozilla Firefox & Thunderbird
ultddave 18 mar 2010, 16:49 Limburg > Genk 248 berichten
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 :D.)

Mvg,
Dave
.NET en Java Programmeur