foto plaatsen volgens html strict met css

Status
Niet open voor verdere reacties.
djeric

djeric

Gebruiker
Lid geworden
22 nov 2006
Berichten
955
hallo.

ik krijg het niet goed voor elkaar om foto's goed neer te plaatsen op mij website.

steeds als ik bv in kleinere scherm resoluties bekijk dan verschuiven de foto's naar links. ik heb in de css bv de code float : left; gebruikt, maar het lukt me niet dat de fotos goed geplaats staan.

ik heb de volgende html code in de body tag staan:

Code: 
<p id="fotos" style="text-align: center; clear: both;">
<a href="foto/rotterdam2010/slides/1.JPG" rel="lightbox" title="optreden in Rotterdam"><img src="foto/rotterdam2010/thumbs/1.JPG" alt="" /></a>
<a href="foto/rotterdam2010/slides/2.JPG" rel="lightbox" title="optreden in Rotterdam"><img src="foto/rotterdam2010/thumbs/2.JPG" alt="" /></a>
<a href="foto/rotterdam2010/slides/3.JPG" rel="lightbox" title="optreden in Rotterdam"><img src="foto/rotterdam2010/thumbs/3.JPG" alt="" /></a>
<a href="foto/rotterdam2010/slides/4.JPG" rel="lightbox" title="optreden in Rotterdam"><img src="foto/rotterdam2010/thumbs/4.JPG" alt="" /></a>
<a href="foto/rotterdam2010/slides/5.JPG" rel="lightbox" title="optreden in Rotterdam"><img src="foto/rotterdam2010/thumbs/5.JPG" alt="" /></a>
</p>

en de volgende bij behorende css:

PHP: 
p#fotos { 
clear : both; 
text-align : center; 
}

wat is er niet goed? volgens de css/html validator vind hij geen fouten. maar wel 5 waarschuwingen.

volledige website adres is: http://members.ziggo.nl/sorpresa/foto's.html
 
Laatst bewerkt:
niemand enige idee waarom de foto's dan vershuiven als scherm resolutie kleiner is?

mijn gehele css code:

PHP: 
/* begin index */

body {
            background: url(index/achtergrond.jpg);
            }
			
div#welkom { 

text-align : center; 

}

#menu {
 position:absolute;
 top:30px;
 left:10px; 
 padding: 0;
 margin:0px 0px 0px 0px;
 text-align:center;
 width:180px;
} 
#menu ul {
	list-style-type:none;
	display:block; 
	padding: 0; 
	margin:0px	;
} 
#menu a {
 background-color:#333300; /* Dit is de achtergrondkleur van de menu groen hier veranderen als je een andere kleur wil*/
 display: block;
 padding: 5px;
 margin: 10px;
 line-height:normal;
 text-decoration: none;
 border: 0px #0000FF solid;
 width: 120px; 
 color:#FFD700;/* Dit is de kleur van het lettertype in de knop wit hier veranderen als je een andere letterkleur wil*/
 font-weight: bold;   /*Dit verdikt het lettertype*/
} 
#menu a:hover{
 color:#0000FF; /* Dit is de kleur van het lettertype als je met de muis over de knop gaat blauw hier veranderen als je een andere kleur wil*/
 background: #FFFF00;/* Dit is de kleur van de knop als je met de muis over de knop gaat geel hier veranderen als je een andere kleur wil*/
}

#inhoud { 

margin : 0 12.5em; 

} 


h1#titel { 

color : #0000FF; 

font-size : 1.5em; 

text-align : center; 

} 

h2#top { 

color : #ff0000; 

font-size : 1.5em; 

text-align : center; 

} 

#inleiding1 { 

color : #000066;

font-weight : bold; 

font-size : 1.3em; 

} 

#inleiding2 { 

color : #000066;

font-weight : bold; 

font-size : 1.3em; 

} 

#inleiding3 { 

color : #000066;

font-weight : bold; 

font-size : 1.3em; 

} 

div#teller { 

float : right;

} 

p#stealth { 

margin : 0; 

} 

/* einde van index */

/* begin van biografie */ 

#inf1 { 
 background-attachment:scroll;
 background-repeat:repeat-y;
 position: absolute;
 top: 230px;
 left: 200px;
 width: 600px;
 color:#000066; /* dit verandert de hoofd tekst kleur van de weergegeven pagina's, die nu bruin is*/
 font-family:Georgia, "Times New Roman", Times, serif;
 font-style:italic;
 font-size:large;
 font-weight:100;
}

#inf2 { 
 background-attachment:scroll;
 background-repeat:repeat-y;
 position: absolute;
 top: 370px;
 left: 200px;
 width: 600px;
 color:#000066; /* dit verandert de hoofd tekst kleur van de weergegeven pagina's, die nu bruin is*/
 font-family:Georgia, "Times New Roman", Times, serif;
 font-style:italic;
 font-size:large;
 font-weight:100;
}

#inf3 { 
 background-attachment:scroll;
 background-repeat:repeat-y;
 position: absolute;
 top: 490px;
 left: 200px;
 width: 600px;
 color:#000066; /* dit verandert de hoofd tekst kleur van de weergegeven pagina's, die nu bruin is*/
 font-family:Georgia, "Times New Roman", Times, serif;
 font-style:italic;
 font-size:large;
 font-weight:100;
}

#inf4 { 
 background-attachment:scroll;
 background-repeat:repeat-y;
 position: absolute;
 top: 610px;
 left: 200px;
 width: 600px;
  color:#000066; /* dit verandert de hoofd tekst kleur van de weergegeven pagina's, die nu bruin is*/
 font-family:Georgia, "Times New Roman", Times, serif;
 font-style:italic;
 font-size:large;
 font-weight:100;
}

/* einde van biografie */

/* begin van crew */ 

#crew{
 background-attachment:scroll;
 background-repeat:repeat-y;
 position: absolute;
 top: 210px; /* Hier dan ook 10px gezakt omdat de inhoud niet tegen het logo zou plakken.*/
 left: 200px;
 width: 600px;
 color:#000066; /* dit verandert de hoofd tekst kleur van de weergegeven pagina's, die nu bruin is*/
 font-family:Georgia, "Times New Roman", Times, serif;
 font-style:italic;
 font-size:large;
 font-weight:100;
}

#picture{
 background-attachment:scroll;
 background-repeat:repeat-y;
 position: absolute; /* dit zorgt ervoor dat letters op voorgrond staan ipv achtergrond*/
 top: 270px;
 left: 200px;
 font-family:Georgia, "Times New Roman", Times, serif;
 font-style:italic;
 font-size:large;
 font-weight:100;
}

#text1 { 
 background-attachment:scroll;
 background-repeat:repeat-y;
 position: absolute;
 top: 270px;
 left: 300px;
 width: 600px;
 font-family:Georgia, "Times New Roman", Times, serif;
 font-style:italic;
 font-size:large;
 font-weight:100;
}

#text2 { 
 background-attachment:scroll;
 background-repeat:repeat-y;
 position: absolute;
 top: 300px;
 left: 300px;
 width: 600px;
 font-family:Georgia, "Times New Roman", Times, serif;
 font-style:italic;
 font-size:large;
 font-weight:100;
}

#text3 { 
 background-attachment:scroll;
 background-repeat:repeat-y;
 position: absolute;
 top: 330px;
 left: 300px;
 width: 600px;
 font-family:Georgia, "Times New Roman", Times, serif;
 font-style:italic;
 font-size:large;
 font-weight:100;
}

#text4 { 
 background-attachment:scroll;
 background-repeat:repeat-y;
 position: absolute;
 top: 360px;
 left: 300px;
 width: 600px;
 font-family:Georgia, "Times New Roman", Times, serif;
 font-style:italic;
 font-size:large;
 font-weight:100;
}

#text5 { 
 background-attachment:scroll;
 background-repeat:repeat-y;
 position: absolute;
 top: 390px;
 left: 300px;
 width: 600px;
 font-family:Georgia, "Times New Roman", Times, serif;
 font-style:italic;
 font-size:large;
 font-weight:100;
}

/* einde van crew */

/* begin van foto's */ 

p#fotos { 
clear : both; 
text-align : center; 
} 

/* einde van foto's */

/* begin van prijzen */ 

#prijzen{
 background-attachment:scroll;
 background-repeat:repeat-y;
 position: absolute;
 top: 210px; /* Hier dan ook 10px gezakt omdat de inhoud niet tegen het logo zou plakken.*/
 left: 200px;
 width: 600px;
 color:#8B0000; /* dit verandert de hoofd tekst kleur van de weergegeven pagina's, die nu bruin is*/
 font-family:Georgia, "Times New Roman", Times, serif;
 font-style:italic;
 font-size:large;
 font-weight:100;
}

/* einde van prijzen */

/* begin van agenda */ 

#agenda{
 background-attachment:scroll;
 background-repeat:repeat-y;
 position: absolute; /* dit zorgt ervoor dat letters op voorgrond staan ipv achtergrond*/
 top: 210px; /* Hier dan ook 10px gezakt omdat de inhoud niet tegen het logo zou plakken.*/
 left: 200px;
 width: 600px;
 color:#8B0000; /* dit verandert de hoofd tekst kleur van de weergegeven pagina's, die nu bruin is*/
 font-family:Georgia, "Times New Roman", Times, serif;
 font-style:italic;
 font-size:large;
 font-weight:100;
}

.table{
	position:absolute;
	top:280px;
	left:200px;
	width:600px;
	height:50px;
	color:#330066;
}

/* einde van agenda */

/* begin van referenties */ 

#referentie{
 background-attachment:scroll;
 background-repeat:repeat-y;
 position: absolute;
 top: 210px; /* Hier dan ook 10px gezakt omdat de inhoud niet tegen het logo zou plakken.*/
 left: 200px;
 width: 600px;
 color:#8B0000; /* dit verandert de hoofd tekst kleur van de weergegeven pagina's, die nu bruin is*/
 font-family:Georgia, "Times New Roman", Times, serif;
 font-style:italic;
 font-size:large;
 font-weight:100;
}

/* einde van referenties */
 
Je hebt je foto's gecentreerd dus staan ze altijd in het midden van het venster en verschuiven ze als het venster groter of kleiner wordt. Als je niet wilt dat ze verschuiven moet je ze even absoluut positioneren. dus zoiets:
Code: 
p#fotos { 
clear : both; 
margin-left: 200px; // foto's altijd op 200px afstand van de linkerkant van het beeldscherm
}

is dit wat je bedoelde?
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan