-
25-08-2011, 00:00 #1
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...
En mijn indexCode:#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; }
Mijn navigatiebarHTML 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>
Zou iemand me kunnen vertellen hoe ik dit flik?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>
no votes
-
-
25-08-2011, 00:14 #2Deactivated user
- 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
-
25-08-2011, 00:14 #3Member
- 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
-
25-08-2011, 00:25 #4
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
-
25-08-2011, 00:28 #5
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
-
25-08-2011, 00:39 #6no votes
-
25-08-2011, 00:40 #7Deactivated user
- Registered
- 14/08/10
- Location
- Diest
- Posts
- 2,419
- iTrader
- 1 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 8/16
no votes
-
25-08-2011, 00:41 #8Member
- Registered
- 06/06/04
- Location
- Bilzen
- Posts
- 8,805
- iTrader
- 18 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 42/128
'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
-
25-08-2011, 18:02 #9
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
-
25-08-2011, 18:13 #10Deactivated user
- 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
-
25-08-2011, 18:30 #11
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
-
25-08-2011, 18:42 #12Deactivated user
- 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
-
25-08-2011, 19:21 #13
Ook moest dit een bump zijn?
no votes
-
25-08-2011, 19:24 #14Deactivated user
- 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
-
25-08-2011, 19:51 #15
Ok, bedankt!
no votes

