login  Naam:   Wachtwoord: 
Registreer je!
 Forum

met css divs werken (centreren)

Offline oldsko0l - 29/06/2006 13:03 (laatste wijziging 29/06/2006 13:04)
Avatar van oldsko0lNieuw lid hej, ik heb nu al enkele tutorials over css gelezen en ik begin het stillaan te snappen maar er is nog 1 ding dat ik niet snap.
hier een link naar een foto zodat je m'n uitleg zou snappen --> http://users.telenet.be/oldsko0l/centreren.JPG

hier de uitleg bij de foto:
eerst en vooral, ik wil dus alles positioneren met divs, zoals je op de foto ziet moet alles gecentreerd staan, dus ik dacht aan een grote div layer erboven leggen: dus bv. zo
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div align="center">
  2. <div id="1"> </div>
  3. <div id="2"> </div>
  4. <div id="3"> </div>
  5. </div>

maar dan snap ik niet hoe ik de andere divs bv. "div 2" positioneer t.o.v. die gecentreerde div.
dus dat ik die "div 2" links laat uitlijnen maar wel nog in de gecentreerde grote div.
ik heb al geprobeerd om "width: 800px;" op te geven voor de grote div. maar als ik dan "align: left;" opgeef bij bv. "div 2" dan gaat die div gewoon helemaal links staan inplaats van links IN de gecentreerde div van 800px.

snapje me?
weet iemand hoe ik dit nu wel kan fixen?
dank bij voorbaat!

14 antwoorden

Gesponsorde links
Offline Thomas - 29/06/2006 13:18
Avatar van Thomas Moderator Maak een extra "container" die 800px breed is?

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div align="center">
  2.   <div style="width: 800px">
  3.     <div id="1"></div>
  4.     <div id="2"></div>
  5.     <div id="3"></div>
  6.   </div>
  7. </div>


Meestal werkt het handig (ik gebruik het iig vaak als ik met divs werk) om "onzichtbare" divs te maken met alleen maar afmetingen, en hierin DIVs met visuele opmaak te zetten.

Misschien is het ook verstandiger om je id-namen wat handiger te kiezen, volgens mij is het niet toegestaan om enkel cijfers hiervoor te gebruiken, of de id's te laten beginnen met een cijfer - ze volgen bij mijn weten de naamgevingsregels voor namen van variabelen.

Maak id-namen die omschrijven zijn, bijvoorbeelld "left", "middle" of "right" ofzo.
Offline oldsko0l - 29/06/2006 14:07 (laatste wijziging 29/06/2006 14:13)
Avatar van oldsko0l Nieuw lid tnx ik zal het eens proberen, btw. die id namen was gewoon ter voorbeeld ;) om het simpel te houden
ik snap wel 1 ding niet. waarom maak je NOG een div? 
kan je niet gewoon de grote div zo doen?
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div align="center" style="width: 800px">
  2. </div>
?
Offline Thomas - 29/06/2006 14:15
Avatar van Thomas Moderator Misschien werkt dat ook.

Er is in principe iets voor beide varianten te zeggen. In mijn oplossing hebben de twee divs verschillende functies. Een div om de content te centreren (hoe groot deze ook is) en een div om de content af te bakenen (800 pixels breed).

Tis maar net wat werkt / wat je voorkeur verdient.
Offline oldsko0l - 29/06/2006 14:19 (laatste wijziging 29/06/2006 14:38)
Avatar van oldsko0l Nieuw lid oke,
en nog een klein vraagje, kan je trouwens je divs een border geven?
want border="1" werkt niet.
(ik vind het handig om een border te hebben bij het opstellen van de site-layout)
of is de enigste mogelijkheid met een background-color?

edit:
btw. nog redelijk irritant probleem
als ik jouw code gebruik van hierboven
dan wordt al mijn tekst ook gecentreerd! 
weet je een oplossing hiervoor?

thanks 
Offline Thomas - 29/06/2006 14:36
Avatar van Thomas Moderator Je kunt divs voorzien van een border door middel van een style-attribuut, of via CSS (met behulp van een class of id).

Maar dan begint de designers nightmare:
Internet Explorer telt de borderbreedte (/hoogte) niet op bij de breedte van de div (hij krimpt de breedte van de div-inhoud in, zodat de totale breedte constant blijft), terwijl other browsers (tm) dit wel doen.

Google maar eens op "IE box model problem".
Offline oldsko0l - 29/06/2006 14:38 (laatste wijziging 29/06/2006 14:39)
Avatar van oldsko0l Nieuw lid check de edit even van vorig berichtje aub, tnx
btw. oke sgoed, dan gebruik ik wel background-color bij het opstellen van de layout
Offline Thomas - 29/06/2006 15:09
Avatar van Thomas Moderator Dit komt omdat het align-attribuut in sommige browsers wordt overgeërfd in onderliggende divs en ook wordt toegepast op de inhoud (tekst en dergelijke). Je zult dan in de onderliggende divs in je opmaak het volgende moeten zetten:

text-align: left;
Offline oldsko0l - 29/06/2006 15:23
Avatar van oldsko0l Nieuw lid oke tnx, alles werkt 
Offline Cosca - 29/06/2006 16:11
Avatar van Cosca HTML beginner
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div style="width: 800px; margin-left: auto; margin-right;">
  2.     <div id="1"> </div>
  3.     <div id="2"> </div>
  4.     <div id="3"> </div>
  5. </div>


zo staat die ook in het midden en dan zonder align... zodat je die andere dingen niet terug hoeft te zetten naar links,..
Offline oldsko0l - 29/06/2006 17:49 (laatste wijziging 29/06/2006 17:54)
Avatar van oldsko0l Nieuw lid mjah inderdaad, ik heb het getest, het werkt, maar ik blijf toch bij de vorige methode (die snap ik beter)
btw. nog een probleempje 
kan je op 1 of andere mannier de rand van een div "hard" maken?
wat ik bedoel is, dat wanneer je een tekst typt, de tekst vanzelf overgaat op volgende lijn. want als ik nu zeer veel typ dan gaat de tekst gewoon door (zelfs meer dan 800px) en zelfs wanneer de background stopt, gaat de tekst nog door 

zie hier een screenshotje --> (let niet op de layout )
http://users.telenet.be/oldsko0l/looptdoor.JPG

zoals je ziet verschuift de hele blauwe div naar onder (normaal staat hij rechts van de gele..)

hier mijn divs.css stylesheet
php code - Bekijk de code zonder highlighting - Klap code in 
  1. #logo {
  2. float: top;
  3. height: 200px;
  4. text-align: center;
  5. background-color: green;
  6. }
  7.  
  8. #menu { 
  9. float: left;
  10. margin-top: 10px;
  11. text-align: left;
  12. background-color: yellow;
  13. }
  14.  
  15. #inhoud {
  16. float: left;
  17. margin-left: 20px;
  18. margin-top: 10px;
  19. text-align: left;
  20. background-color: blue;
  21. }


en de divs zijn zo ingesteld
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div align="center">
  2.   <div style="width: 800px">
  3. 	<div id="logo">
  4. 	</div>
  5.  
  6. 	<div id="menu">
  7. 	</div>
  8.  
  9. 	<div id="inhoud">
  10.         hier werk ik trouwens met includes, maar dit is niet van belang                                                        
  11. voor mijn probleem :p 
  12. 	</div>
  13.  </div>
  14. </div>

wat ik dus wil is dat de "grote" omliggende div, een soort "harde" rand krijgt, en dat die ene blauwe div, rechts blijft staan naast de gele.

iemand goede raad? 
Offline CDNC - 29/06/2006 17:54
Avatar van CDNC PHP ver gevorderde ken jij een normaal woord dat zo lang is? nee he, dus dan heb je geen probleem anders zou ik een nieuwe regel beginnen op de plaatst vaan een spatie.
Offline oldsko0l - 29/06/2006 17:58
Avatar van oldsko0l Nieuw lid ik ken zo geen woord, maar wel zo'n lange tekst ;)
en als ik tables zou gebruiken dan zou die regel vanzelf afgebroken worden. dus ik neem aan dat dit ook met css mogelijk is ;)
Offline CDNC - 29/06/2006 18:00
Avatar van CDNC PHP ver gevorderde ik zei al, zet er nu eens een spatie in het midden van het woord, dan zal ie het woord wel in 2 splitsen
Offline oldsko0l - 29/06/2006 18:08 (laatste wijziging 30/06/2006 20:28)
Avatar van oldsko0l Nieuw lid edit,
ik ga dit probleempje eerst nog eens wat googlen en als ik nix vind dan zal ik het onder andere titel posten (aangezien het niet meer met topic titel paste...)
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.209s