login  Naam:   Wachtwoord: 
Registreer je!
 Forum

foto verticaal centreren/doctype

Offline san - 06/05/2009 11:00 (laatste wijziging 25/06/2009 21:37)
Avatar van sanHTML interesse Ik ben nu al een tijd bezig met iets wat heel eenvoudig lijkt maar ik krijg het niet voor elkaar. Heb al van alles gegoogled en geprobeerd maar het lukt niet. Ik wil een foto op een scherm horizontaal en verticaal centreren. Horizontaal lukt wel maar verticaal niet. Wie weet een oplossing
css code - Bekijk de code zonder highlighting - Klap code in 
  1. <body bgcolor="000000">
  2.  
  3.         <div style="text-align: center;">   
  4.              <a href="index.php?p=gallery" style="font-size: 15px; color:#FFFFFF;"><b>terug</b></a> 
  5.         </div> 
  6.  
  7.         <div style="text-align: center; margin-top: 20px;">
  8.              <img src="images/large/1.jpg" width="323" height="280" border="0" alt="">
  9.         </div>
  10.  
  11.  
  12. </body>

20 antwoorden

Gesponsorde links
Offline NataschaV - 06/05/2009 11:04 (laatste wijziging 06/05/2009 11:24)
Avatar van NataschaV PHP interesse Verticaal centeren kan je o.a met padding doen.
Offline Bart - 06/05/2009 11:22
Avatar van Bart PHP expert
NataschaV schreef:
Verticaal centeren kan je met padding doen.
Volgens mij moet jij nog maar eens een stoomcursus HTML hebben. Want dit kan gewoon met het CSS attribuut vertical-align.
Offline NataschaV - 06/05/2009 11:27 (laatste wijziging 06/05/2009 11:46)
Avatar van NataschaV PHP interesse
Quicky schreef:
[..quote..]Volgens mij moet jij nog maar eens een stoomcursus HTML hebben. Want dit kan gewoon met het CSS attribuut vertical-align.


We zitten hier niet om elkaar af te zeiken, maar om de TS te helpen met haar probleem.
Offline san - 06/05/2009 11:33
Avatar van san HTML interesse Met dit atribuut heb ik het inderdaad geprobeerd op de volgende manier maar dan doet hij het niet.
css code - Bekijk de code zonder highlighting - Klap code in 
  1. <div style="text-align: center; margin-top: 20px;">   
  2.              <a href="index.php?p=gallery" style="font-size: 15px; color:#FFFFFF;"><b>terug</b></a> 
  3.         </div> 
  4.  
  5.         <div style="text-align: center; vertical-align: middle;">
  6.              <img src="images/large/1.jpg" width="523" height="280" border="0" alt="">
  7.         </div>
Offline jc2 - 06/05/2009 11:41
Avatar van jc2 PHP interesse Probeer het ook eens zo:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div style="text-align: center; margin-top: 20px;">   
  2.              <a href="index.php?p=gallery" style="font-size: 15px; color:#FFFFFF;"><b>terug</b></a> 
  3.         </div> 
  4.  
  5.         <div style="text-align: center;" valign="middle">
  6.              <img src="images/large/1.jpg" width="523" height="280" border="0" alt="">
  7.         </div>
Offline san - 06/05/2009 11:50
Avatar van san HTML interesse nee ook niet
Offline NataschaV - 06/05/2009 11:52
Avatar van NataschaV PHP interesse Heb je misschien een voorbeeld ervan?
Offline san - 06/05/2009 11:54
Avatar van san HTML interesse Nee zo even niet maar de foto blijft boven aan de pagina staan. Wel netjes horizontaal gecentreerd maar verticaal doet hij niet.
Offline Bart - 06/05/2009 12:18
Avatar van Bart PHP expert
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div style="text-align: center; margin-top: 20px;">   
  2.              <a href="index.php?p=gallery" style="font-size: 15px; color:#FFFFFF;"><b>terug</b></a> 
  3.         </div> 
  4.  
  5.         <div style="text-align: center;" style="vertical-align: middle;">
  6.              <img src="images/large/1.jpg" width="523" height="280" border="0" alt="">
  7.         </div>
Probeer dat eens.
Offline san - 06/05/2009 12:30
Avatar van san HTML interesse Nee ook niet helaas
Offline NataschaV - 06/05/2009 13:19 (laatste wijziging 06/05/2009 13:19)
Avatar van NataschaV PHP interesse Dit misschien dan?
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <body bgcolor="000000">
  2.  
  3.         <div style="text-align: center;">   
  4.              <a href="index.php?p=gallery" style="font-size: 15px; color:#FFFFFF;"><b>Terug</b></a> 
  5.         </div> 
  6.  
  7.         <div style="text-align: center; margin-top: 20px; padding: 100px;">
  8.              <img src="images/large/1.jpg" width="323" height="280" border="0" alt="">
  9.         </div>
  10.  
  11.  
  12. </body>
Offline Wim - 06/05/2009 13:21
Avatar van Wim Crew algemeen wat als je "top" en "bottom" beide op 50% zet? (en ook left en right natuurlijk).
Offline Ontani - 06/05/2009 13:25
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 verticaal centreren in CSS2 is nog niet echt voorzien.

Een iets of wat smerige oplossing:

xhtml code - Bekijk de code zonder highlighting - Klap code in 
  1. <div style="width: 200px; height: 100%; margin-left: auto; margin-right: auto;">

  2.  <table cellpadding="0" cellspacing="0" style="width: 100%; height: 100%">

  3.   <tr>

  4.    <td style="vertical-align: center;">

  5.     <img src="images/large/1.jpg" alt="" />

  6.    </td>

  7.   </tr>

  8.  </table>

  9. </div>
Offline san - 25/06/2009 21:47 (laatste wijziging 25/06/2009 22:45)
Avatar van san HTML interesse Ik ben erachter gekomen dat heb bovenstaande probleem aan het gebruikte doctype ligt.
Als je het doctype weghaalt werkt hij wel. Heb verschillende doctypes geprobeerd maar bij allen werkt de valign-tag niet en zonder doctype wel. Wat is de oplossing? Het doctype weglaten of is het nog een andere oplossing voor?
Offline Ontani - 26/06/2009 09:02
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 Doctype verwijderen is sowieso geen oplossing. Verticaal centreren gaat momenteel enkel met een tabel. (of een div die als tabel gestyled wordt).

Een andere oplossing is die afbeelding als background-image van een 100% op 100% div instellen. Met background-repeat: none; en background-position: center;
Offline san - 26/06/2009 12:19
Avatar van san HTML interesse Ik heb deze code:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <table width="100%" height="100%"><tr><td> 
  2.  
  3.          <div style="text-align: center">    
  4.              <a href="index.php?p=gallery" style="font-size: 15px; color:#FFFFFF;"><b>terug</b></a>  
  5.         </div>  
  6.  
  7.         <div style="text-align: center; text-valign: middle; margin-top: 20px;"> 
  8.              <img src="images/large/1.jpg" width="523" height="280" border="0" alt=""> 
  9.         </div> 
  10.  
  11.         <div style="text-align: center; margin-top: 20px; font-size: 15px; color:#FFFFFF;">Afmeting: 84x60  
  12.         </div>  
  13.  
  14. </td></tr></table>

En die werkt wel. Plaatje komt netjes in het midden. Maar alleen als je het doctype weghaalt. Als je deze erbij zet doet hij het niet.
Offline finalforce - 01/07/2009 11:38
Avatar van finalforce Nieuw lid verticaal centreren gaat niet via HTML of CSS, dit zal je moeten gaan doen met Javascript ;)
Offline Ontani - 01/07/2009 11:49
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 Dit gaat wel met html en css en ik heb het voorbeeld ook al gegeven.
Offline finalforce - 01/07/2009 11:54
Avatar van finalforce Nieuw lid ja met tables, maar niet via een 'propere' manier
Offline Tuinman - 01/07/2009 15:00
Avatar van Tuinman Nieuw lid Het kan wel degelijk.
Zie volgende manier.

css code - Bekijk de code zonder highlighting - Klap code in 
  1. .outer{
  2. position: absolute;
  3. left:50%;
  4. top:50%;
  5. height:600px;
  6. width:1000px;
  7. margin-top:-300px; // helft height
  8. margin-left:-500px; //helft width
  9. }
  10.  
  11.  
  12. #center{
  13. position:relative;
  14. margin-left:auto;
  15. margin-right:auto;
  16. height:600px;
  17. width:1000px;
  18. }


html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="outer">
  2. <div id="center">
  3. hier je content dat je wil centreren.
  4. </div>
  5. </div>
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.201s