login  Naam:   Wachtwoord: 
Registreer je!
 Forum

variabele div centreren

Offline adventure - 16/05/2014 21:35
Avatar van adventureNieuw lid Weet iemand een mogelijkheid om een variabele div te centreren over de breedte. De variabele div is .ngg-galleryoverview. (De div is variabel ivm de variabele opmaak van het aantal afbeeldingen naast elkaar.) Heb het al met margin: auto geprobeerd maar dit werkt niet.
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="entry-content">
  2.                   <div class="ngg-galleryoverview "
  3. 	        <div class="ngg-gallery-thumbnail">
  4.                             <a href="afbeelding.jpg">
  5.                                <img  src="afbeeling.jpg"
  6.                                 width="120"
  7.                                 height="90"
  8.                               />
  9.                         </a>
  10.              </div>
  11.           </div> 
  12.         </div>			
  13. </div>

css code - Bekijk de code zonder highlighting - Klap code in 
  1. .main-content:
  2.     width: 100%;
  3.     float: left;
  4.  
  5. .entry-content:
  6.     position: relative;
  7.     width: 100%;
  8.     float: left;
  9.  
  10. .ngg-galleryoverview:
  11.     width: auto! Important;
  12.     float: left;
  13.     margin: auto;
  14.  
  15. .ngg-gallery-thumbnail:
  16.     tekst-align: center;
  17.     float: left;

3 antwoorden

Gesponsorde links
Offline Thomas - 17/05/2014 01:37
Avatar van Thomas Moderator - het HTML fragment wat je hebt geplaatst is onvolledig (mist een openings-div, is dit de main-content div?)
- het HTML fragment wat je hebt geplaatst klopt niet (de div op regel twee heeft geen sluit-haak in de openingstag)
- je css code ziet er raar uit? er staan geen accolades om de stijlen? is dit een alternatieve syntax, of klopt hier gewoon geen biet van?

Als je een script gebruikt om dynamisch afbeeldingen naast elkaar te zetten, en elk van deze afbeeldingen bepaalde breedtes hebben, kun je deze in het script optellen en dan inline (met behulp van stye="width: ...px;") de .ngg-galleryoverview-div een breedte geven, dan wordt deze wel goed gepositioneerd.

Zoiets dus:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Insert title here</title>
  6. <style type="text/css">
  7. <!--
  8. .main-content { width: 100%; }
  9. .entry-content { position: relative; width: 100%; }
  10. .ngg-galleryoverview { margin: 0 auto; }
  11. .ngg-gallery-thumbnail { tekst-align: center; }
  12. //-->
  14. </head>
  15.  
  17. <div class="main-content">
  18.     <div class="entry-content">
  19.         <!-- bereken in je script de breedte en plaats deze in je style-attribuut hieronder -->
  20.         <div class="ngg-galleryoverview" style="width: 250px;">
  21.             <div class="ngg-gallery-thumbnail">
  22.                 <a href="afbeelding.jpg"><img src="afbeeling.jpg" width="120" height="90" /></a>
  23.             </div>
  24.         </div>
  25.     </div>
  26. </div>
  27. </body>
  28. </html>


Ik raad je ook aan al je foutieve / overbodige HTML en CSS te verbeteren / op te ruimen.
Offline adventure - 17/05/2014 10:35
Avatar van adventure Nieuw lid Ja dit is een gedeelte van de code wat ik even in een word-doc had gezet. Ik heb idd ook een main-content op width: 100%. Dat is de ngg-galleryoverview geen vaste breedte kan geven is juist het probleem. De breedte hiervan varieert namelijk, afhankelijk van het aantal afbeeldingen.
Offline Thomas - 17/05/2014 14:45
Avatar van Thomas Moderator Ja, maar dat geval wordt toch dynamisch opgebouwd -> dit impliceert een scriptingtaal (PHP?) -> hiermee druk je HTML-code af en kun je deze manipuleren -> hiermee kun je dus een berekende breedte opnemen in je code, afhankelijk van het aantal afbeeldingen. Ik neem aan dat je wel op een of andere manier weet -of kunt achterhalen- hoeveel thumbnails je hebt?

Hebben de thumbnails een vaste breedte? Dan is het makkelijk. Breedte = [aantal thumbnails] x [vaste breedte].
Hebben thumbnails verschillende breedtes, dan moet je op een of andere manier deze breedtes achterhalen en dan optellen.

Ik denk dat je er niet omheen komt dat je de ngg-galleryoverview-div op deze manier (dynamisch, via een style-tag) een width geeft, te meer omdat deze breedte kan variëren afhankelijk van het aantal thumbnails. Zonder breedte (afmetingen) kan deze div waarschijnlijk niet gepositioneerd worden.

Daarnaast wil je waarschijnlijk ook een maximaal aantal thumbnails dat naast elkaar gezet kan worden definiëren? Of heb je een horizontale layout?

By the way - ngg, was dat niet een plugin/ding voor wordpress? Jij bent vast niet de enige die dit probleem heeft (horizontaal centreren van thumbnails), heb je hier al op gegoogled?
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.178s