Archief - Centreren van div tegenover viewport

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
R

RobinVdB

Legacy Member
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: 
<!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: 
<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? :music:
-

-BVR-

Legacy Member
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)
Z

Zero Grav

Legacy Member
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.
R

RobinVdB

Legacy Member
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. :(
R

RobinVdB

Legacy Member
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?
R

RobinVdB

Legacy Member
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.)
-

-BVR-

Legacy Member
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 :)
R

RobinVdB

Legacy Member
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
-

-BVR-

Legacy Member
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.
-

-BVR-

Legacy Member
Als het topic al redelijk oud is, kan je best een nieuwe maken ja :)
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan