login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Image in een div

Offline roy - 05/06/2008 16:26 (laatste wijziging 05/06/2008 16:27)
Avatar van royPHP gevorderde Beste,

Ik plaats dynamisch afbeeldingen met een verschillend formaat in een div met een vast afmeting. Hoe kan ik ervoor zorgen dat het plaatje in het midden van die div komt?

html

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="loader" class="">
  2. <img src="/img/test.jpg" style="display: block;"/>
  3. </div>


css

css code - Bekijk de code zonder highlighting - Klap code in 
  1. div#loader {
  2. border:1px solid #CCCCCC;
  3. height:588px;
  4. width:588px;
  5. }
  6.  
  7. img {
  8. float:left;
  9. padding:0px;
  10. }


Heeft iemand een oplossing?

13 antwoorden

Gesponsorde links
Offline WumTol - 05/06/2008 16:48
Avatar van WumTol PHP beginner
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <img src="url/naar/plaatje.jpg" alt="" align="center" />


of

css code - Bekijk de code zonder highlighting - Klap code in 
  1. #loader img
  2. {
  3. display: block;
  4. margin: auto;
  5. }
Offline Vincjenzo - 05/06/2008 16:52
Avatar van Vincjenzo Nieuw lid Als ie ook verticaal in het midden moet:
Plaatscode: 9909
Maar daar is vast een mooiere oplossing voor  
Offline jelle - 05/06/2008 16:56 (laatste wijziging 05/06/2008 16:57)
Avatar van jelle PHP beginner yep  
http://msdn.microsoft.com/en-us/library/ms535120(VS.85).aspx

http://msdn.microsoft.com/en-us/library/ms531179(VS.85).aspx
Offline Godlord - 05/06/2008 17:14
Avatar van Godlord PHP gevorderde Ik denk niet dat het HTML maar XHTML is, als je "/>" in de code nog niet gezien had.

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="loader">
  2.     <img id="image" src="img/test.jpg" />
  3. </div>


css code - Bekijk de code zonder highlighting - Klap code in 
  1. #loader {
  2.     border:1px solid #CCCCCC;
  3.     height:588px;
  4.     width:588px;
  5.     margin: auto;
  6.     display: block;
  7. }
  8.  
  9. #image {
  10.     max-width: 588px;
  11.     max-height: 588px;
  12.     border: 0px;
  13.     padding: 0px;
  14.     display: block;
  15. }



M.v.g. Godlord.
Offline mark92 - 05/06/2008 17:34 (laatste wijziging 05/06/2008 17:34)
Avatar van mark92 Gouden medaille

Nieuw lid
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="loader"></div>


css code - Bekijk de code zonder highlighting - Klap code in 
  1. div#loader {
  2.   border:1px solid #CCCCCC;
  3.   height:588px;
  4.   width:588px;
  5.   background: url(img/test.jpg) no-repeat center;
  6. }
Offline Aishla - 06/06/2008 20:52 (laatste wijziging 07/06/2008 10:44)
Avatar van Aishla Nieuw lid Is het ook niet mogelijk om gewoon met html <align=center> te doen? en natuurlijk <valign=center> ?
Of zeg ik nu iets doms? 

Citaat:
PieterC Edit: Ja, want layout en html moet je liefst gescheiden houden. Je manier van werken is een paar jaar verouderd.  
Offline roy - 09/06/2008 16:28 (laatste wijziging 20/10/2008 11:15)
Avatar van roy PHP gevorderde het lukt niet:(

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="loader" class="">
  2. <img id="art" class="jqzoom" src="/img/test.jpg" jqimg="/img/testg.jpg" style="margin: auto; opacity: 1;" alt=""/>
  3. </div>


css code - Bekijk de code zonder highlighting - Klap code in 
  1. #loader {
  2.       border:1px solid #CCCCCC;
  3.       height:588px;
  4.       width:588px;
  5.       display: block;
  6.    background:#ACACAC none repeat scroll 0%;
  7.       }
  8.  
  9. DIV#loader.loading {
  10.   background: url(/img/spinner.gif) no-repeat center center;
  11. }
  12.  
  13.       #art {
  14.       max-width: 588px;
  15.       max-height: 588px;
  16.       border: 0px;
  17.       padding: 0px;
  18.       display: block;
  19.       }


Wat moet ik veranderen???

Hopende op een goed resultaat
Offline mark92 - 09/06/2008 17:49 (laatste wijziging 09/06/2008 17:51)
Avatar van mark92 Gouden medaille

Nieuw lid		 Werkt dit misschien:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #loader {
  2.       border:1px solid #CCCCCC;
  3.       height:588px;
  4.       width:588px;
  5.       display: block;
  6.       background:#ACACAC none repeat scroll 0%;
  7.       text-align: center;
  8.       vertical-align: center;
  9. }
  10.  
  11. DIV#loader.loading {
  12.       background: url(/img/spinner.gif) no-repeat center center;
  13. }
  14.  
  15. #art{
  16.       max-width: 588px;
  17.       max-height: 588px;
  18.       border: none;
  19.       padding: 0px;
  20. }
Offline roy - 09/06/2008 18:36
Avatar van roy PHP gevorderde Nee helaas, hij blijft maar boven-aan staan:(

Ik zou het graag opgelost zien, want er zitten al aardig wat uurtjes in...
Offline zointer - 09/06/2008 20:34
Avatar van zointer HTML gevorderde Alsjeblief, maar je moet wel je div een vaste breedte en hoogte geven van de grootste image dat je inlaat, dat wil zeggen als je kleinste image vb 150x50px is en je grootste 250x150px dan maak je div 270x170px(dit om iets te zeggen)
Offline Kevin - 20/10/2008 11:19
Avatar van Kevin Crew Ajax/REST Geraakt align=center wel nog door de html validator? 
Offline shibble - 20/10/2008 11:43
Avatar van shibble MySQL interesse
css code - Bekijk de code zonder highlighting - Klap code in 
  1. div#loader {
  2. border:1px solid #CCCCCC;
  3. height:588px;
  4. width:588px;
  5. text-align: center;
  6. }
  7.  
  8. div#loader img {
  9. float:left;
  10. padding:0px;
  11. }


werkt dat..
Offline zointer - 20/10/2008 14:00
Avatar van zointer HTML gevorderde
ddReborn schreef:
[.....]

shibble schreef:
[..code..]

werkt dat..


topic van meer dan 4 maanden oud? zal wel al opgelost zijn zeker 
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.198s