weer een vraag over layers

Status
Niet open voor verdere reacties.
R

rob1919

Gebruiker
Lid geworden
5 jul 2007
Berichten
11
Ik heb een pagina gemaakt waar een tabel in staat met 3 kolommen.
In de middelste kolom moeten tekst en foto's komen.

Als ik de foto plaats in een layer, zet ik deze vervolgens keurig naast de tekst.

Als ik nu de site bekijk met F12 blijft de foto op exact dezelfde plaats staan op mijn beedscherm. M.a.w. als ik de pagina bekijk op een volledig scherm staat de foto op zijn plaats. Ga ik nu mijn browser versmallen (ik hoop dat jullie begrijpen wat ik bedoel) blijft de foto op eaxct dezelfde plaats op mijn beeldscherm staan. De website verschuift naar links en de foto blijft staan waar hij staat?????!!!!!

Ik heb 2 screenshots van mijn probleem gemaakt en bijgesloten.

Hieronder staat de html code.

Wie weet raad?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.style27 {font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.style29 {font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
.style39 {font-size: 12px; }
#Layer1 {
position:absolute;
width:132px;
height:132px;
z-index:1;
top: 243px;
left: 619px;
}
-->
</style>
</head>

<body>
<div align="center"><img src="hvb images/kop-01.jpg" width="900" height="160" border="2" /><br />
<table width="904" height="27" border="0" bgcolor="#FF0000">
<tr>
<td>&nbsp;</td>
</tr>
</table>
<table width="904" height="600" border="1" cellspacing="0" bordercolor="#000000" bgcolor="#FFFFFF">
<tr>
<td width="150" height="206">&nbsp;</td>
<td width="590"><div align="center"> <br />
<div id="Layer1"><img src="hvb images/kermis2.jpg" width="130" height="130" /></div>
<br />
<table width="538" height="159" border="0" align="center">
<tr>
<td height="155"><div align="center" class="style27">
<div align="justify" class="style29">
<h5 align="left" class="style39">ilburgse Ria van Dijk in de hoofdrol</h5>
<p align="left" class="style39">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br />
Duis ut metus ut dolor ullamcorper imperdiet. Sed sapien. <br />
Nulla leo. Nulla non lacus eu nisl laoreet scelerisque. Class<br />
aptent taciti sociosqu ad litora torquent per conubia nostra, <br />
per inceptos hymenaeos. Pellentesque nec ipsum. Pellente<br />
sque sagittis posuere elit. Curabitur gravida cursus erat. Eti<br />
am aliquet turpis ut leo volutpat tincidunt. Nunc ac massa. <br />
<br />
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur scelerisque. In lacus. Fusce eu wisi. Donec purus lectus, vestibulum sit amet, posuere in, iaculis quis, leo. Nulla eu est eget mi convallis tincidunt. Duis ut dui. Ut ipsum mauris, venenatis vitae, tempor id, viverra at, felis. Proin placerat nonummy erat. Aliquam vestibulum blandit erat. Donec at nibh vitae diam tincidunt pretium. Sed at erat. Vivamus tincidunt venenatis dolor. Integer porta erat et elit. Nulla elementum leo ut felis. <br />
<br />
Nam fermentum magna nec quam. Aenean bibendum tortor vitae magna. Integer tellus leo, tempor sed, pretium nec, euismod non, leo. Etiam placerat commodo nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed wisi nulla, laoreet eu, luctus at, imperdiet id, sem. Vestibulum quis turpis. Morbi tincidunt leo sit amet eros. In hac habitasse platea dictumst. Integer gravida neque ac lorem. Donec vel dui. <br />
<br />
Quisque velit augue, iaculis quis, sagittis eget, vulputate non, lacus. Duis lobortis porta metus. Cras risus tellus, eleifend et, gravida et, auctor ac, metus. Cras ut leo nec leo interdum viverra. Ut molestie sollicitudin purus. Aliquam varius lorem ac diam. Phasellus at purus. Sed id orci vitae lacus faucibus convallis. Pellentesque eget enim interdum felis sodales bibendum. Nulla in augue sit amet pede semper luctus. Aenean porttitor adipiscing dolor. Suspendisse iaculis luctus risus. Nam nisl.<br />
<br />
Maecenas quis felis in justo nonummy venenatis. Nullam ullamcorper. Suspendisse potenti. Pellentesque metus orci, pretium eget, laoreet id, posuere nec, nibh. Phasellus lacus elit, vulputate quis, congue et, ultrices eget, est. Proin tristique turpis sed augue. Praesent est ipsum, viverra eget, nonummy vel, ultricies at, mi. Sed vestibulum tincidunt risus. Donec dui. Cras congue placerat sapien. Phasellus luctus aliquam quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br />
</p>
<p align="left" class="style39"><br />
orem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ut metus ut dolor ullamcorper imperdiet. Sed sapien. Nulla leo. Nulla non lacus eu nisl laoreet scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque nec ipsum. Pellentesque sagittis posuere elit. Curabitur gravida cursus erat. Etiam aliquet turpis ut leo volutpat tincidunt. Nunc ac massa. <br />
<br />
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur scelerisque. In lacus. Fusce eu wisi. Donec purus lectus, vestibulum sit amet, posuere in, iaculis quis, leo. Nulla eu est eget mi convallis tincidunt. Duis ut dui. Ut ipsum mauris, venenatis vitae, tempor id, viverra at, felis. Proin placerat nonummy erat. Aliquam vestibulum blandit erat. Donec at nibh vitae diam tincidunt pretium. Sed at erat. Vivamus tincidunt venenatis dolor. Integer porta erat et elit. Nulla elementum leo ut felis. <br />
<br />
Nam fermentum magna nec quam. Aenean bibendum tortor vitae magna. Integer tellus leo, tempor sed, pretium nec, euismod non, leo. Etiam placerat commodo nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed wisi nulla, laoreet eu, luctus at, imperdiet id, sem. Vestibulum quis turpis. Morbi tincidunt leo sit amet eros. In hac habitasse platea dictumst. Integer gravida neque ac lorem. Donec vel dui. <br />
<br />
Quisque velit augue, iaculis quis, sagittis eget, vulputate non, lacus. Duis lobortis porta metus. Cras risus tellus, eleifend et, gravida et, auctor ac, metus. Cras ut leo nec leo interdum viverra. Ut molestie sollicitudin purus. Aliquam varius lorem ac diam. Phasellus at purus. Sed id orci vitae lacus faucibus convallis. Pellentesque eget enim interdum felis sodales bibendum. Nulla in augue sit amet pede semper luctus. Aenean porttitor adipiscing dolor. Suspendisse iaculis luctus risus. Nam nisl.<br />
<br />
Maecenas quis felis in justo nonummy venenatis. Nullam ullamcorper. Suspendisse potenti. Pellentesque metus orci, pretium eget, laoreet id, posuere nec, nibh. Phasellus lacus elit, vulputate quis, congue et, ultrices eget, est. Proin tristique turpis sed augue. Praesent est ipsum, viverra eget, nonummy vel, ultricies at, mi. Sed vestibulum tincidunt risus. Donec dui. Cras congue placerat sapien. Phasellus luctus aliquam quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
<p align="center" class="style39"><br />
<br />
</p>
</div>
</div></td>
</tr>
</table>
</div></td>
<td width="150">&nbsp;</td>
</tr>
</table>
</div>
</body>
</html>
 

Bijlagen

  • voorbeeld-probleem.jpg
    voorbeeld-probleem.jpg
    114,6 KB · Weergaven: 40
Aanpassing 1:
HTML: 
#Layer1 {
position:relative;
width:132px;
height:132px;
z-index:1;
margin-top:10px;
float:right;
}

aanpassing 2:
HTML: 
	<table width="538" height="159" border="0" align="center">
								<tr>
									<td height="155">
										<div align="center" class="style27">
											<div align="justify" class="style29">
	<br />
							<div id="Layer1">
								<img src="hvb images/kermis2.jpg" width="130" height="130" />
							</div>
							<br />

												<h5 align="left" class="style39">
													ilburgse Ria van Dijk in de hoofdrol
												</h5>

:cool:
 
bedankt

bedankt voor de tip, hij staat nu correct.

Ik heb gezien dat je bij het bovenste gedeelte absoluteveranderd hebt in relative.
ook heb je margin-top:10px; en float:right; toegevoegd

Bij het tweede gedeelte staan erg veel spaties, zijn deze geplaatst om de foto op zijn plaats te krijgen?

ik moet nog veel meer van dit soort pagina's maken.
kun je op een makkelijke manier uitleggen wat deze veranderingen doen en hoe ik dat bij een volgende pagina zelf kan doen. Het is natuurlijk niet de bedoeling dat ik bij elke pagina om raad moet vragen. Jij zult ook wel andere dingen te doen hebben.

Nogmaals bedankt.

groeten Rob
 
Nou, die spaties hebben geen nut,
alleen zijn ze door mijn editor (Arachnophilia) er in gezet, na het optimaliseren en controleren van de code.
Als zodanig zijn er in feite geen spaties,
doch indien je hier de code kopieert, en inplakt in je html pagina
staan ze er wel, doch je kunt het gewoon opschonen.

Je plaatje stond absolute, dus blijft ook daar staan bij verkleinen window,
nu relatief, dus ten opzichte van zijn element,
in dit geval de cel van de tabel.

Float zorgt ervoor dat het naar rechts schuift.
Top is om het een beetje te positioneren.

:cool:
 
laatste vraag

Ik zie nu dat je het volgende stukje op een andere plaats hebt gezet dan het oorspronkelijk stond.

<br />
<div id="Layer1">
<img src="hvb images/kermis2.jpg" width="130" height="130" />
</div>
<br />

Dit stond eerst boven dit stukje:

<table width="538" height="159" border="0" align="center">
<tr>
<td height="155">
<div align="center" class="style27">
<div align="justify" class="style29">
<h5 align="left" class="style39">ilburgse Ria van Dijk in de hoofdrol</h5>


Jij hebt het er nu tussen geplaatst.
Wat is hier de reden van en hoe kan ik dat zelf doen?

Ik heb volgens mij eerst een layer gemaakt via 'insert layer'
Vervolgens heb ik in die layer een foto geplaatst, meer heb ik hier niet meegedaan.
Doe ik hier iets fout, zie ik iets over het hoofd.

Hoop niet dat je me lastig vind, wil het graag echt begrijpen.

Groeten Rob
 
Zoals je het origineel hebt, dan staat het buiten de tabel.
Nu heb ik het in de tabelcel gezet.
Vandaar ook dat positie absolute weg kan,
je krijgt dan positie relative,
dus ten opzichte van het element waar het inzit.


:cool:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan