1. #1

    Registered
    24/08/11
    Location
    Elewijt
    Posts
    165
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0

    Centreren van div tegenover viewport

    Ik ben nieuw in het wereldje, en webscript nog maar een weekje of 2. Na HTML en de basis van java en PHP was het de beurt aan CSS. Alleen zit ik al na ongeveer 4 uurtjes met een probleem... Bij mijn site komen de content en de menubar niet naast elkaar. Ook werd er niet gecenterd...
    Code:
    #container       {
    	align-left:auto;
    	align-right:auto;
    	width:1000px;
    	heigth:auto;
    }
    #content      {
    	width:698px;
    	min-heigth:300px;
    	float:left;
    	border-bottom:2px solid;
    	border-right:2px solid;
    	margin: 2px 0px 0px 2px;
    }
    #header       {
    	heigt:300px;
    	width:1000px;
    	float:left;
    	border:2px solid;
    }
    #menubar       {
    	heigth: auto;
    	width: 300px;
    	float:left;
    	border-right:2px solid;
    	border-left:2px solid;
    	border-bottom:2px solid;
    }
    En mijn index
    HTML Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <title>Index</title>
        <link rel="stylesheet" type="text/css" href="style.css">
      </head>
      <body>
        <div id="container">
        <?php include_once("header.php")?>
        <?php include_once("menubar.php")?>
          <div id="content"><h1 class="kop1">Welkom op Mijnsite.nl</h1></div>
        </div>
      </body>
    </html>
    Mijn navigatiebar
    HTML Code:
    <div id="menubar">
    <ul class="menubar">
      <li><a href="">Index</a></li>
      <li><a href="">Forum</a></li>
      <li><a href="">Guides</a><ul class="verder1">
        <!-- Enkel weergeven wanneer in de pagina guides of een subpagina ervan W.I.P.-->
        <li><a href="">Submenu</a></li>
        <li><a href="">Submenu</a></li>
        <li><a href="">Submenu</a><ul class="verder2">
          <!-- Enkel weergeven wanneer in de pagina ... of een subpagina ervan W.I.P.-->
          <li><a href="">Subsubmenu</a></li>
          <li><a href="">subsubmenu</a></li>
          <li><a href="">Subsubmenu</a></li>
          </ul></li>
        </ul></li>
    </ul>
    </div>
    Zou iemand me kunnen vertellen hoe ik dit flik?
    no votes  

  2. #2

    Registered
    14/08/10
    Location
    Diest
    Posts
    2,419
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    8/16
    Om te centeren:

    margin-left: auto;
    margin-right: auto;

    (en verwijder die align dus maar)

    En neen, die gaan niet naast elkaar komen want ze passen niet in de container.

    Container = 1000px
    -
    Content= 698px + 2px margin left + 2px border-right = 702px
    -
    Menubar = 300px + 2px border-left + 2px border-right = 304px
    =
    -6px

    Je hebt dus 6px te veel waardoor je menubar naar de volgende 'lijn' wordt verplaatst.

    P.S.: ik hoop dat je weet dat dit margin: 2px 0px 0px 2px; in de volgende volgorde wordt gelezen: top right bottom left (dus volgens de wijzers van de klok, te beginnen bij top) en dat je nu dus een redelijk onlogische margin-structuur hebt (2px top, 0px right, 0px bottom, 2px left)
    Last edited by -BVR-; 25-08-2011 at 00:20.
    no votes  

  3. #3
    Zero Grav's Avatar
    Registered
    06/06/04
    Location
    Bilzen
    Posts
    8,805
    iTrader
    18 (100%)
    Mentioned
    0 Post(s)
    Reputation
    42/128
    Om te beginnen al even zeggen dat ge op die twee weken beter enkel en alleen xHTML/CSS had gedaan in plaats van direct te beginnen met 5 verschillende dingen, wnat ik zie nu al de problemen die het oplevert. Ge kunt nooit verwachten een goeie kennis op te doen van iets als ge 5 dingen door elkaar leert op zo'n korte tijd.

    Verder, waar zijt ge CSS aan't leren? Want align-left en align-right dat bestaat helemaal niet. Ge moet gewoon margin: 0 auto; doen op uw container. 1000px is feitelijk ook een te grote width.
    no votes  

  4. #4

    Registered
    24/08/11
    Location
    Elewijt
    Posts
    165
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Op een redelijk oude website, de link alweer vergeten want ik heb het helemaal doorgelezen... Even nu ik weet dat ge de margin ook erbij moet tellen. En dat van die rare margin is omdat anders de border over mijn tekst komt.
    no votes  

  5. #5

    Registered
    24/08/11
    Location
    Elewijt
    Posts
    165
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    En na de juiste grootte in de geven is het eindelijk gelukt. Nu verder gaan met wat meer CSS... Weet iemand een goede site om dit de leren?
    no votes  

  6. #6
    Curahee Q's Avatar
    Registered
    07/12/07
    Location
    Hoogstraten
    Posts
    854
    iTrader
    0
    Mentioned
    0 Post(s)
    no votes  

  7. #7

    Registered
    14/08/10
    Location
    Diest
    Posts
    2,419
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    8/16
    no votes  

  8. #8
    Zero Grav's Avatar
    Registered
    06/06/04
    Location
    Bilzen
    Posts
    8,805
    iTrader
    18 (100%)
    Mentioned
    0 Post(s)
    Reputation
    42/128
    Quote Originally Posted by Curahee Q View Post
    This quote is hidden because you are ignoring this member. Show
    'k Heb nu toch al zo vaak die link gegeven waarin uitgelegd wordt hoe belabberd w3schools is.

    HTML and CSS Tutorials, References, and Articles | HTML Dog is echt een veel betere bron voor accuratere en meer up-to-date info.
    no votes  

  9. #9

    Registered
    24/08/11
    Location
    Elewijt
    Posts
    165
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Bedankt voor HTML dog. Eventjes eens terug doorkijken vanaf het begin.

    (En is het erg dat ik al dreamweaver gebruik, of is dit een slecht voor beginners.)
    no votes  

  10. #10

    Registered
    14/08/10
    Location
    Diest
    Posts
    2,419
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    8/16
    Dreamweaver is zeker goed om mee te beginnen. Zorg wel dat je meer je code window open hebt dan je design. Zo leer je het coden beter
    no votes  

  11. #11

    Registered
    24/08/11
    Location
    Elewijt
    Posts
    165
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Ok, van harte bedankt. :')

    Ook wil ik jullie bedanken dat jullie zeiden dat ik niet veel dingen moet leren maar enkele dingen eerst zeer goed! Dat ben ik nu dus ook aan het doen. Moest ik een probleempje hebben dat ik niet kan oplossen, mag ik dit hier dan nog posten? :l
    no votes  

  12. #12

    Registered
    14/08/10
    Location
    Diest
    Posts
    2,419
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    8/16
    Tuurlijk, maar maak dan een nieuw topic. Als iets verband heeft met iets anders dat je al hebt gepost, kan je dat daar dan ook bij posten.
    no votes  

  13. #13

    Registered
    24/08/11
    Location
    Elewijt
    Posts
    165
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Ook moest dit een bump zijn?
    no votes  

  14. #14

    Registered
    14/08/10
    Location
    Diest
    Posts
    2,419
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    8/16
    Als het topic al redelijk oud is, kan je best een nieuwe maken ja
    no votes  

  15. #15

    Registered
    24/08/11
    Location
    Elewijt
    Posts
    165
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Ok, bedankt!
    no votes  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in