Nieuw lid |
|
Heb een container gemaakt die er als volgt uitziet:
In de container:
Bovenaan in de container gecentreerd 'tekstwit': een regel met tekst gecentreerd.
Daaronder drie horizontaal naast elkaar gelegen afbeeldingen op enige afstand van elkaar met de middelste gecentreerd: fotolinks, logo en fotorechts.
Daaronder op de bodem van de container gecentreerd 'tekstbottum': een regel met tekst onderaan de container
Html:
<div id="container">
<div class="tekstwit">een regel met tekst bovenaan de container</div>
<div class="images"><img src="images/fotolinks.png" alt="foto links" class="fotolinks" />
<img src="images/logo7.png" alt="logo in het midden" class="logo" /><img src="images/fotorechts.png" alt="foto rechts" width="199" height="160" class="fotorechts" /></div>
<div class="tekstbottom">een regel tekst op de bodem van de container gecentreerd </div>
</div>
css:
#container {
margin-left: auto;
margin-right: auto;
background-image: url(images/footer.jpg);
background-repeat: repeat-x;
margin-top: 70px;
background-color: #BBBBFF;
height: 275px;
width: auto;
}
.tekstwit {
font-size: small;
color: #FFFFFF;
text-align: center;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
}
.fotolinks {
margin-right: 50px;
margin-left: 150px;
margin-top: 20px;
margin-bottom: 15px;
}
.logo {
margin-right: 75px;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 50px;
}
.fotorechts {
margin-top: 10px;
margin-left: 25px;
margin-bottom: 50px;
margin-right: auto;
}
.tekstbottom {
font-size: small;
width: auto;
text-align: center;
background-image: url(images/footerdown.png);
background-repeat: repeat-x;
height: 25px;
color: #FFFFFF;
margin-bottom: 0px;
}
Zowel in firefox als IE ziet het er redelijk uit maar ik blijf het verschijnsel houden dat als ik het browservenster verklein vanuit bijvoorbeeld rechtsonder dat bv de afbeeldingen na enige tijd onder elkaar komen te staan en de tekstregels ook afbreken een een gedeelte onder elkaar komt te staan. Wat moet ik veranderen? Waarschijnlijk iets in css? Kan dit wel met css?
Jan
|