Layer centeren

gebruiker72 · 20 feb 2009

Ja hoor daar ben ik weer

.

Ik ben nog steeds met mijn eigen site bezig (inmiddels een heel stuk opgeschoten).

Nu zit ik met het volgende probleem: ik heb een layer gemaakt, deze staat mooi in het midden. Alleen als ik op een andere resolutie mijn pagina bekijk staat hij dat niet meer.

Weten jullie hiervoor een oplossing? Alvast heel erg bedankt!
Layer

HTML:

<div style="position: absolute; width: 440px; height: 100px; z-index: 1; left: 263px; top: 288px" id="layer1">
				<p class="MsoNormal" align="left"><b>R-G-J, 
				Tot uw dienst!</b></p>
				<p class="MsoNormal"><i> Functioneert uw pc of laptop niet 
				meer zoals vroeger? Verschijnen er onverwachte vensters of pop-ups in uw beeld?<br>
				Kunt u een programma niet installeren?<br>
				Werkt uw viruscanner niet meer goed?</i></p>
				<p class="MsoNormal"><i>Tijd om al deze en nog veel meer vervelende&nbsp; 
				problemen voorgoed 
				de das om te doen! 
				<br><br>Maar hoe? </i> </p>
				<p class="MsoNormal"><i>Dat is de vraag die 
				ons al honderden keren gevraagd is, daarom hebben wij besloten 
				hier een website voor te maken. Waar u wel op moeten letten is 
				dat er miljoenen problemen kunnen voorkomen op een pc en dat 
				daarom niet altijd de oplossing hier online staat. Als uw vraag 
				er&nbsp; dus niet tussen staat raden wij u aan contact op te nemen, zodat 
				wij naar uw probleem kunnen kijken en wanneer mogelijk een 
				gratis oplossing voor kunnen vinden.</i></p>
				<p class="MsoNormal"><i>Als uw probleem nog 
				steeds niet opgelost is kunnen wij live support geven, hier zijn 
				echter wel kosten aan verbonden omdat wij ook ons brood moeten 
				verdienen! (voor meer info kijk op de pagina contact)</i></p>
				<p>&nbsp;</div>

Gehele pagina

HTML:

<html>
<center>
<head>
<title>R-G-J-Nooit meer pc klachten!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
	background-image: url(afbeeldingen/background.gif);
	background-repeat: repeat-x;
}
 p.MsoNormal
	{mso-style-parent:"";
	margin-top:0cm;
	margin-right:0cm;
	margin-bottom:10.0pt;
	margin-left:0cm;
	line-height:115%;
	font-size:11.0pt;
	font-family:"Calibri","sans-serif";
	}
-->
</style></head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (rgj.psd) -->
<table id="Tabel_01" width="1025" height="769" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="14">
			<img src="afbeeldingen/home_01.gif" width="1024" height="206" alt=""></td>
		<td>
			<img src="afbeeldingen/spacer.gif" width="1" height="206" alt=""></td>
	</tr>
	<tr>
		<td colspan="14">
			<img src="afbeeldingen/home_02.gif" width="1024" height="6" alt=""></td>
		<td>
			<img src="afbeeldingen/spacer.gif" width="1" height="6" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="3">
			<img src="afbeeldingen/home_03.gif" width="274" height="51" alt=""></td>
		<td rowspan="2"><a href="home.html"><img src="afbeeldingen/home_04.gif" width="89" height="32" alt="" border="0"></a></td>
		<td rowspan="3">
			<img src="afbeeldingen/home_05.gif" width="18" height="51" alt=""></td>
		<td><a href="problemen.html"><img src="afbeeldingen/home_06.gif" width="166" height="28" alt="" border="0"></a></td>
		<td rowspan="3">
			<img src="afbeeldingen/home_07.gif" width="14" height="51" alt=""></td>
		<td colspan="3"><a href="ervaringen.html"><img src="afbeeldingen/home_08.gif" width="210" height="28" alt="" border="0"></a></td>
		<td>
			<img src="afbeeldingen/home_09.gif" width="17" height="28" alt=""></td>
		<td><a href="contact.html"><img src="afbeeldingen/home_10.gif" width="118" height="28" alt="" border="0"></a></td>
		<td>
			<img src="afbeeldingen/home_11.gif" width="53" height="28" alt=""></td>
		<td colspan="2" rowspan="4">
			<img src="afbeeldingen/home_12.gif" width="65" height="74" alt=""></td>
		<td>
			<img src="afbeeldingen/spacer.gif" width="1" height="28" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="afbeeldingen/home_13.gif" width="166" height="23" alt=""></td>
		<td colspan="6" rowspan="2">
			<img src="afbeeldingen/home_14.gif" width="398" height="23" alt=""></td>
		<td>
			<img src="afbeeldingen/spacer.gif" width="1" height="4" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="afbeeldingen/home_15.gif" width="89" height="19" alt=""></td>
		<td>
			<img src="afbeeldingen/spacer.gif" width="1" height="19" alt=""></td>
	</tr>
	<tr>
		<td rowspan="4">
			<img src="afbeeldingen/home_16.gif" width="253" height="505" alt=""></td>
		<td colspan="6" rowspan="3">
			<div style="position: absolute; width: 440px; height: 100px; z-index: 1; left: 263px; top: 288px" id="layer1">
				<p class="MsoNormal" align="left"><b>R-G-J, 
				Tot uw dienst!</b></p>
				<p class="MsoNormal"><i> Functioneert uw pc of laptop niet 
				meer zoals vroeger? Verschijnen er onverwachte vensters of pop-ups in uw beeld?<br>
				Kunt u een programma niet installeren?<br>
				Werkt uw viruscanner niet meer goed?</i></p>
				<p class="MsoNormal"><i>Tijd om al deze en nog veel meer vervelende&nbsp; 
				problemen voorgoed 
				de das om te doen! 
				<br><br>Maar hoe? </i> </p>
				<p class="MsoNormal"><i>Dat is de vraag die 
				ons al honderden keren gevraagd is, daarom hebben wij besloten 
				hier een website voor te maken. Waar u wel op moeten letten is 
				dat er miljoenen problemen kunnen voorkomen op een pc en dat 
				daarom niet altijd de oplossing hier online staat. Als uw vraag 
				er&nbsp; dus niet tussen staat raden wij u aan contact op te nemen, zodat 
				wij naar uw probleem kunnen kijken en wanneer mogelijk een 
				gratis oplossing voor kunnen vinden.</i></p>
				<p class="MsoNormal"><i>Als uw probleem nog 
				steeds niet opgelost is kunnen wij live support geven, hier zijn 
				echter wel kosten aan verbonden omdat wij ook ons brood moeten 
				verdienen! (voor meer info kijk op de pagina contact)</i></p>
				<p>&nbsp;</div>
			<img src="afbeeldingen/home_17.gif" width="447" height="479" alt=""></td>
		<td colspan="5">
			<img src="afbeeldingen/home_18.gif" width="259" height="23" alt=""></td>
		<td>
			<img src="afbeeldingen/spacer.gif" width="1" height="23" alt=""></td>
	</tr>
	<tr>
		<td rowspan="3">
			<img src="afbeeldingen/home_19.gif" width="14" height="482" alt=""></td>
		<td colspan="5">
			<img src="afbeeldingen/home_20.gif" width="257" height="319" alt=""></td>
		<td rowspan="3">
			<img src="afbeeldingen/home_21.gif" width="53" height="482" alt=""></td>
		<td>
			<img src="afbeeldingen/spacer.gif" width="1" height="319" alt=""></td>
	</tr>
	<tr>
		<td colspan="5" rowspan="2">
			<img src="afbeeldingen/home_22.gif" width="257" height="163" alt=""></td>
		<td>
			<img src="afbeeldingen/spacer.gif" width="1" height="137" alt=""></td>
	</tr>
	<tr>
		<td colspan="6">
			<img src="afbeeldingen/home_23.gif" width="447" height="26" alt=""></td>
		<td>
			<img src="afbeeldingen/spacer.gif" width="1" height="26" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="afbeeldingen/spacer.gif" width="253" height="1" alt=""></td>
		<td>
			<img src="afbeeldingen/spacer.gif" width="21" height="1" alt=""></td>
		<td>
			<img src="afbeeldingen/spacer.gif" width="89" height="1" alt=""></td>
		<td>
			<img src="afbeeldingen/spacer.gif" width="18" height="1" alt=""></td>
		<td>
			<img src="afbeeldingen/spacer.gif" width="166" height="1" alt=""></td>
		<td>
			<img src="afbeeldingen/spacer.gif" width="14" height="1" alt=""></td>
		<td>
			<img src="afbeeldingen/spacer.gif" width="139" height="1" alt=""></td>
		<td>
			<img src="afbeeldingen/spacer.gif" width="14" height="1" alt=""></td>
		<td>
			<img src="afbeeldingen/spacer.gif" width="57" height="1" alt=""></td>
		<td>
			<img src="afbeeldingen/spacer.gif" width="17" height="1" alt=""></td>
		<td>
			<img src="afbeeldingen/spacer.gif" width="118" height="1" alt=""></td>
		<td>
			<img src="afbeeldingen/spacer.gif" width="53" height="1" alt=""></td>
		<td>
			<img src="afbeeldingen/spacer.gif" width="12" height="1" alt=""></td>
		<td>
			<img src="afbeeldingen/spacer.gif" width="53" height="1" alt=""></td>
		<td></td>
	</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</center>
</html>

dicabrio · 20 feb 2009

tip: gebruik zo min mogelijk position: absolute in je css/style

<div style="width: 440px; height: 100px; margin: 0 auto;" id="layer1">

dat zet hem alleen niet verticaal gecentreerd.

dit zou dat wel moeten doen waarschijnlijk:
position:absolute; width: 440px; height: 100px; left: 50%; top: 50% margin: -50px auto auto -220px;

gebruiker72 · 20 feb 2009

dicabrio zei:
tip: gebruik zo min mogelijk position: absolute in je css/style

<div style="width: 440px; height: 100px; margin: 0 auto;" id="layer1">

dat zet hem alleen niet verticaal gecentreerd.

dit zou dat wel moeten doen waarschijnlijk:
position:absolute; width: 440px; height: 100px; left: 50%; top: 50% margin: -50px auto auto -220px;

Komt in het midden te staan, alleen wordt de rest er niet beter op.

Kijk maar naar screens:

Nu
[smallimg]http://img18.imageshack.us/img18/8468/screenmm6.jpg[/smallimg]

Eerst
[smallimg]http://img18.imageshack.us/img18/8270/screen1nv9.jpg[/smallimg]

gebruiker72 · 20 feb 2009

Iemand?

dicabrio · 21 feb 2009

hmmm is dit alleen in je frontpage programma of ook in IE/FF?

Frontpage is volgens mij niet te vertrouwen

gebruiker72 · 21 feb 2009

dicabrio zei:
hmmm is dit alleen in je frontpage programma of ook in IE/FF?

Frontpage is volgens mij niet te vertrouwen

Ja ook in Internet explorer! Firefox weet ik niet want die heb ik niet op mijn pc staan.
Iemand een oplossing?

gebruiker72 · 21 feb 2009

Weet iemand misschien een oplossing?

VanTurenhout · 27 feb 2009

Probleem is ook dat je aan het slicen bent geweest, en daarna een layer gaat gebruiken. Dat slicen heb je waarschijnlijk op een bepaalde resolutie gedaan.
Daarnaast zie ik dat je in je DIV ook een P class <p class="MsoNormal" align="left"> hebt, waarin ook het een en ander aan positioneren zit. Kijk daar eens naar, gooi misschien alles wat met left/right etc heeft te maken weg uit die css class.

Rob

gebruiker72 · 28 feb 2009

Het is ondertussen allemaal opgelost!

Bedankt iedereen :thumb:

VanTurenhout · 28 feb 2009

Laat je de oplossing nog even weten?

gebruiker72 · 12 mrt 2009

Je hebt helemaal gelijk, ik was dit helemaal vergeten te melden...
Ik heb de images gewoon weer opnieuw ingevoegd :thumb:

Bjones · 18 mrt 2009

Kun je niet gewoon <div align="center"> </div> Gebruiken?

Layer centeren

gebruiker72

Gebruiker

dicabrio

Gebruiker

gebruiker72

Gebruiker

gebruiker72

Gebruiker

dicabrio

Gebruiker

gebruiker72

Gebruiker

gebruiker72

Gebruiker

VanTurenhout

Gebruiker

gebruiker72

Gebruiker

VanTurenhout

Gebruiker

gebruiker72

Gebruiker

Bjones

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy