login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Centeren div's

Offline gamertje - 27/04/2014 22:32 (laatste wijziging 28/04/2014 18:55)
Avatar van gamertjeNieuw lid Beste leden,

Helaas lukt het me niet de onderstaande div's goed te centeren

http://i62.tinypic.com/dotgna.png

Helaas blijft hij links staan! Misschien nog andere opties

Zie live demo

http://robbert.uphero.com/

4 antwoorden

Gesponsorde links
Offline valles10 - 27/04/2014 23:32 (laatste wijziging 27/04/2014 23:40)
Avatar van valles10 HTML interesse
css code - Bekijk de code zonder highlighting - Klap code in 
  1. .box {
  2. white-space: nowrap;
  3. overflow: hidden;
  4. width: 980px;
  5. margin-bottom: 5px;
  6. margin-left: auto;
  7. margin-right: auto;
  8. }
Offline Thomas - 28/04/2014 10:20
Avatar van Thomas Moderator Je HTML-opbouw is enigszins vreemd, je hebt een inline element (a href) die om een block level element (div class="vak") heen staat. De paragrafen zijn ook niet echt nodig? Als je nu eens van die afbeeldingen achtergronden maakt (desnoods met aparte klasses), en de hyperlinks "uitvult" in de divs en voorziet van een omschrijving? Ook zou ik "persoonlijke.html" hernoemen naar "competenties.html" - maak pagina-bestandsnamen zelf ook omschrijvend.

Je krijgt dan zoiets (hierbij zijn vak-xxx klasses voor het instellen van een afbeelding in de achtergrond):

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="box">
  2.     <div class="vak vak-cv"><a href="cv.html" title="omschrijving">Curriculum Vitae</a></div>
  3.     <div class="vak vak-portfolio"><a href="portfolio.html" title="omschrijving">Portfolio</a></div>
  4.     <div class="vak vak-competenties"><a href="competenties.html" title="omschrijving">Competenties</a></div>
  5. </div>


Het implementeren van de bijbehorende CSS laat ik aan jou over als oefening . Je kunt wrapper divs horizontaal centreren met margin: 0 auto; zoals valles10 hierboven al aangeeft.
Offline gamertje - 28/04/2014 18:40 (laatste wijziging 28/04/2014 19:05)
Avatar van gamertje Nieuw lid Gelukt!
Offline Thomas - 28/04/2014 19:19
Avatar van Thomas Moderator Heb je mijn bovenstaande reactie al gelezen?

Trouwens, als je je box-div zo breed maakt dat deze al de maximale breedte inneemt (980px), heeft margin: auto uiteraard geen effect... Maak je box-div dus zo breed als de optelsom van de elementen daarin.

Theoretisch is 786 pixels genoeg (3x250px vak, 3x2px border, 3x10px margin). Maar ik zou dus gaan voor een wat andere opzet, zie bericht hierboven.

PS: Je hebt geen Content-Type / charset gespecificeerd. Dat is doorgaans niet handig.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.185s