centreren website?

annavangrun · 21 sep 2008

Misschien dubbelop maar er lijkt geen antwoord te komen op mijn voorganger en ik kan me niet voorstellen dat alle zeer ervaren Frontpage-gebruikers ons niet uit de brand kunnen helpen... DE vraag is: hoe centreer ik mijn site? Bij het ontwikkelen heb ik gebruik gemaakt van een vooringestelde pagina-layout (met daarin inmiddels een top, left en bottom-border aangemaakt). De website blijft aan de linkerkant van het beeldscherm geplakt, met aan de rechterkant een grote lege ruimte... Terwijl hij, voor iedereen, gewoon als blok mooi in het midden zou moeten staan.. Hoe moet dat?
Alvast dank!
Groet,
Anna

pakestok · 21 sep 2008

Frontpage is waardeloos vind ik

Maar probeer dit eens: <body align="center"> ... tekst etc. ... </body>

SillyMelody · 21 sep 2008

Dit kan vele oorzaken hebben.
Heb je het hier over alleen een html pagina of worden er ook css bestanden gebruikt waar deze instellingen in staan.

annavangrun · 21 sep 2008

Als ik zelf alles goed begrijp, heb ik het over gewone html-pagina's.

annavangrun · 21 sep 2008

HTML-code

Over de reactie waarin ik in de 'body' zou moeten aangeven dat 'ie gecentreerd moet worden.. Volgens mij wordt het niet gedefinieerd (en zou dat het probleem zijn?).
De HTML-code van mijn homepage begint als volgt (waar KNIPKNIP staat heb ik er dus even iets tussenuit gehaald..):

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>hoofdmenu</title>
<meta name="Microsoft Border" content="tlb, default">
</head>

<body bgcolor="#FFFFCC" leftmargin="8">
<html>

---KNIPKNIP-----

<div style="position: absolute; width: 705px; height: 353px; z-index: 1; left: 179px; top: 162px" id="layer1">
<p style="line-height: 150%">
<font size="4" color="#000080" face="Verdana">Welkom bij
...! </font>
<font size="2" color="#000080" face="Verdana"><br>
<br>

SillyMelody · 21 sep 2008

Maak de afbeelding die bovenin staat in iedergeval net zo breed als de tabel en doe hetzelfde met de layer.

annavangrun · 21 sep 2008

<body align="center">

ik ben wat aan het proberen met het invoeren van deze code, maar wat er dan gebeurt (in het voorbeeldscherm) is dat er 2 pagina's over elkaar heen lijken te staan (waarvan er wel 1 gecentreerd is).
zou iemand kunnen uitleggen welke codes in mijn huidige opmaak vervangen zouden moeten door <body align="center"> ? moet er ook iets weg? en/of op welke positie moet de centreer-opdracht komen te staan?

dank!

SillyMelody · 21 sep 2008

Als je dit aanpast ben je volgens mij op zich al een heel eind.

HTML:

<img border="0" src="http://www.dichtbeeld.nl/_borders/topborder.jpg" width="985" height="108" align="left"></p>

en

HTML:

<div style="position: absolute; width: 822px; height: 353px; z-index: 1; left: 175px; top: 180px" id="layer1" align="left">

annavangrun · 21 sep 2008

Loonytune zei:
Maak de afbeelding die bovenin staat in iedergeval net zo breed als de tabel en doe hetzelfde met de layer.

oke! dank! zal ik in elk geval doen... dat is een begin idd..

daarna weer verder puzzelen met de html-codes..

annavangrun · 21 sep 2008

Loonytune zei:
Als je dit aanpast ben je volgens mij op zich al een heel eind.

HTML:

<img border="0" src="http://www.dichtbeeld.nl/_borders/topborder.jpg" width="985" height="108" align="left"></p>

en

HTML:

<div style="position: absolute; width: 822px; height: 353px; z-index: 1; left: 175px; top: 180px" id="layer1" align="left">

En even voor de zekerheid:
dan bedoel je dat ik de width-eenheden gelijk moet maken
EN/OF
dat ik de twee keer "left" in "center" moet veranderen?
Heel veel dank trouwens!!

SillyMelody · 21 sep 2008

Ja, het is een paardemiddel, maar dan heb je het in iedergeval nu wel net zo breed als de tabel in jouw scherm wordt weergegeven.

annavangrun · 21 sep 2008

beste loonytune,
nogmaals dank.. maar nu nog de vraag:
waar vind jij <img border="0" src="http://www.dichtbeeld.nl/_borders/topborder.jpg" width="985" height="108" align="left"></p> ?

die zie ik niet in de html-code van mijn index-pagina?

peter vazed · 21 sep 2008

Je doet het zelf.
Door aan te geven WAAR de layer moet staan:
style="position: absolute; width: 705px; height: 353px; z-index: 1; left: 179px; top: 162px"

Dus er valt niks te centreren.
Door de style eruit te gooien, en een beetje style in de head toe te voegen
kom je er wel.
Twee divs zorgen voor het gecentreerd zijn.

Code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
	
	<head>
		<meta http-equiv="Content-Language" content="en-us">
		<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
		<title>
			hoofdmenu
		</title>
		<meta name="Microsoft-Border" content="tlb, default">
<style type="text/css" media="screen">
 body
{
background-image: url(start-strps.jpg);
margin: 0;
padding: 0;

color: #000;
background: #ffffcc;
}
.wrapper{
width:100%;
border: 2px solid #008000;
text-align:center;
}
.info{
width:800px;
margin-left:auto;
margin-right:auto;
border: 2px solid #ff0000;
}

</style>
	</head>
	
	<body>
		<div class="wrapper">
			<div class="info">
				<!--msnavigation-->
				<table border="0" cellpadding="0" cellspacing="0" width="100%">
					<tr>
						<td>
							<p>
							<img border="0" src="_borders/topborder.jpg" width="883" height="108" alt="logo">
							</p>
							<p>
							&nbsp;
							</p>
							
						</td>
					</tr>
					<!--msnavigation-->
				</table>
				<!--msnavigation-->
				<table dir="ltr" border="0" cellpadding="0" cellspacing="0" width="100%">
					<tr>
						<td valign="top" width="1%" bgcolor="#009999">
							
							<p style="margin-top: 0; margin-bottom: 0">
							&nbsp;&nbsp;&nbsp;
							</p>
							<p style="margin-top: 0; margin-bottom: 0">
							&nbsp;
							<a href="index.htm"><img src="_derived/home_cmp_blank000_vbtn_p.gif" width="140" height="32" border="0" alt="Hoofdmenu"></a>
							<br>
							<a href="persoonlijk_ontwerp.htm"><img src="_derived/persoonlijk_ontwerp.htm_cmp_blank000_vbtn.gif" width="140" height="32" border="0" alt="persoonlijk ontwerp"></a>
							<br>
							<a href="dichtbeelden.htm"><img src="_derived/dichtbeelden.htm_cmp_blank000_vbtn.gif" width="140" height="32" border="0" alt="dichtbeelden"></a>
							<br>
							<a href="voorkinderen.htm"><img src="_derived/voorkinderen.htm_cmp_blank000_vbtn.gif" width="140" height="32" border="0" alt="voor kinderen"></a>
							<br>
							<a href="overdichtbeeld.htm"><img src="_derived/overdichtbeeld.htm_cmp_blank000_vbtn.gif" width="140" height="32" border="0" alt="over dichtbeeld"></a>
							<br>
							<a href="contact.htm"><img src="_derived/contact.htm_cmp_blank000_vbtn.gif" width="140" height="32" border="0" alt="contact"></a>
							</p>
							<p>
							&nbsp;
							</p>
							<p>
							&nbsp;
							</p>
							<p>
							&nbsp;
							</p>
							<p>
							&nbsp;
							</p>
							<p>
							&nbsp;
							</p>
							<p>
							&nbsp;
							</p>
							
						</td>
						<td valign="top" width="24">
						</td>
						<!--msnavigation-->
						<td valign="top">
							
							
							
							
							
							
							<div  id="layer1">
								<p style="line-height: 150%">
								<font size="4" color="#000080" face="Verdana">
									Welkom bij 
									Dichtbeeld! 
								</font>
								<font size="2" color="#000080" face="Verdana">
									<br>
									<br>
									Het combineren van tekst en beeld is 
									een krachtige manier om boodschappen 
									over te brengen. Korte teksten of 
									gedichten verwoorden gevoelens, 
									raken de kern van een verandering of 
									laten de essentie zien van 
									gebeurtenissen waarvan het soms 
									lijkt alsof er geen woorden voor 
									zijn. Deze kracht van taal wordt 
									versterkt door beelden: tekeningen, 
									kleuren, illustraties bij details, 
									die het gevoel van eenheid 
									versterken. 
									<br>
									<b>
										<br>
										
										Persoonlijk ontwerp
									</b>
									<br>
									Dichtbeeld wil u graag verrassen met 
									mooie en betekenisvolle 
									tekst-beeld-combinaties. Vooral voor 
									uw eigen situatie, 
									bij veranderingen die belangrijk 
									zijn om te markeren. Via ontwerp van 
									kaarten en andere producten (drukwerk). 
									Bij het vieren van gebeurtenissen 
									die een nieuwe tijd inluiden. En in 
									het bijzonder ook bij momenten van 
									verlies en afscheid. 
									U leest er meer over bij 'persoonlijk 
									ontwerp'. 
									<br>
									<br>
									<b>
										Gedichten &amp; beelden
									</b>
									<br>
									Naast de mogelijkheid van ontwerp 
									van 'dichtbeelden' voor uw situatie, 
									heeft Dichtbeeld ook andere 
									gedicht-beeld-combinaties. Voor 
									grote en kleine mensen! Te zien via 
									deze website en desgewenst 
									verkrijgbaar in de vorm van 
									boekenleggers, kaarten en het boekje 
									Binnenstebuiten. 
								</font>
								</p>
								<p>
								
								<font size="2" color="#336699" face="Verdana">
									<br>
								</font>
								<font size="2" face="Verdana" color="#008000">
									<br>
								</font>
								<i>
									<font size="2" face="Verdana" color="#800000">
										Deze website is in ontwikkeling. 
										Er wordt hard gewerkt aan 
										verbeteringen en verdere vulling van 
										de site. Excuses voor het ongemak.
									</font>
								</i>
							</div>
							
							<!--msnavigation-->
						</td>
					</tr>
					<!--msnavigation-->
				</table>
				<!--msnavigation-->
				<table border="0" cellpadding="0" cellspacing="0" width="100%">
					<tr>
						<td>
							
							<p>
							<font size="1" face="Verdana">
								© 2008 
								Dichtbeeld
							</font>
							</p>
							<p>
							<font size="1" face="Verdana">
								<br>
								&nbsp;
							</font>
							</p>
							
<script type="text/javascript" src="http://s49.sitemeter.com/js/counter.js?

site=s49telraam">
</script>
							<noscript>
								<a href="http://s49.sitemeter.com/stats.asp?site=s49telraam" target="_top"><img src="http://s49.sitemeter.com/meter.asp?site=s49telraam" alt="Site Meter"   border="0"></a>
							</noscript>
							
							<p>
							<font size="1" face="Verdana">
								&nbsp;
								<br>
								&nbsp;
							</font>
							</p>
							
						</td>
					</tr>
					<!--msnavigation-->
				</table>
			</div>
		</div>
	</body>
</html>

annavangrun · 21 sep 2008

ik weet idd dat ik de layer een positie meegeef, maar als ik dat zou centreren is er nog steeds iets geks vanwege die gemeenschappelijke randen (borders). hoe krijg je die mee?
gebruikmakend van jouw html-code (dank!) is echt alles gecentreerd, ook het rijtje menuknoppen staat dan midden op de pagina onder elkaar, en ik ben die gemeenschappelijke randen kwijt.. dus dat is ook weer niet de bedoeling..
tja, sorry.. ben er nog niet genoeg in thuis, heb nu al van alles geprobeerd, maar zie het nog niet. zal verder stoeien met de html-codes... maar zie de fout helaas nog steeds niet..
:shocked:

groet!

peter vazed · 21 sep 2008

Bedoel je dit:
<meta name="Microsoft-Border" content="tlb, default">
haal - eruit
krijg je
<meta name="Microsoft Border" content="tlb, default">

kachtem · 22 sep 2008

Kan iemand mij helpen door mijn html code aan te passen zodat alles gecentreerd is?

Mijn website is www.hemaflat.be

Alvast bedankt!!!

P.S. Ik ken niks van html codes.

peter vazed · 22 sep 2008

Zelfde probleem,
oorzaak:
position:absolute;z-index:3;left:636px;top:107px;

Dus opnieuw beginnen.
Met div's werken.
Een div als wrapper en de andere als container.
Met style pas je je pagina aan.
De wrapper zet je op 100% en align:center,
de container geef je een width van 800px
en margin left en right op auto.

googel met
centreren site css voorbeeld

kachtem · 23 sep 2008

peter vazed zei:
Zelfde probleem,
oorzaak:
position:absolute;z-index:3;left:636px;top:107px;

Dus opnieuw beginnen.
Met div's werken.
Een div als wrapper en de andere als container.
Met style pas je je pagina aan.
De wrapper zet je op 100% en align:center,
de container geef je een width van 800px
en margin left en right op auto.

googel met
centreren site css voorbeeld

Alvast bedankt voor de uitleg, maar ik vrees dat ik met mijn beperkte kennis hiermee weinig zal kunnen doen (div als wrapper? container? Hoe doe je dit??). Ik denk dat ik beter ergens een deskundige zoek die me hier ter plaatse kan helpen. Toch bedankt!!

P.S. Of is er iemand waarnaar ik de html-code kan mailen en die die kan aanpassen voor mij? Dat zou uiteraard nog beter zijn! :thumb:

centreren website?

annavangrun

Gebruiker

pakestok

Gebruiker

SillyMelody

Banned

annavangrun

Gebruiker

annavangrun

Gebruiker

SillyMelody

Banned

annavangrun

Gebruiker

SillyMelody

Banned

annavangrun

Gebruiker

annavangrun

Gebruiker

SillyMelody

Banned

annavangrun

Gebruiker

peter vazed

Meubilair

annavangrun

Gebruiker

peter vazed

Meubilair

kachtem

Gebruiker

peter vazed

Meubilair

kachtem

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy