div en APdiv

Status
Niet open voor verdere reacties.
J

jeel2008

Gebruiker
Lid geworden
30 okt 2008
Berichten
839
hallo, ik twee vragen over css.

1. wat is het verschil tussen een DIV en een APDIV? ik kan een DIV toch gewoon positioneren waar ik wil, dan is het toch een APDIV?

2. als ik een linkermenu maak, en een maincontainer waar de inhoud in komt, hoe kan ik dan het geheel centreren? moet ik die twee divs dan nesten in een 'hoofd'div en die hoofddiv centreren? zo ja: hoe nest ik die? want voor je het weet loopt een van de twee uit de 'hoofd'div, en dat is lelijk om te zien. ik bedoel: hoe zorg je ervoor dat ze 'binnen de lijntjes blijven'?


groeten jeel2008
 
Hallo

Een APdiv is 'absolute positioned div', dus absoluut gepositioneerd.
Een div is inline, en dus zelf te bepalen waar die staat.

Om je site te centreren is het het gemakkelijkste een 'hoofddiv' te maken en daarin alles te zetten wat in je site moet komen.

deze hoofddiv centreer je en maak je breed genoeg zodat alles erin past.

Bijvoorbeeld, je menu is 250 px breed, je content 850 px, dan moet je hoofddiv zeker 1100 px breed zijn.

Je zal waarschijnlijk ook een float moeten bepalen in je css voor deze divs.

Probeer het even, lukt het niet, post je code.

greetz
P
 
divs

hallo zildjan,
bedankt, ik ga er vandaag nog naar kijken.
is een flexibele hoofdiv maken dan niet de beste oplossing? maar hoe doe je dat? want als je m op 100% zet dan wordt ie 100% breed. maar wat ik wil: 100% breed wat de inhoud betreft. snap je?
groeten jeel2008
 
Laatst bewerkt:
Euhm

Kan je even heel duidelijk stellen wat je doel is?

Je hebt een menu en je hebt inhoud.

De inhoud wordt 100%, maar wat met je menu?

En als de inhoud 100% wordt, waarom ga je dan centreren als het hele scherm toch gevuld wordt?

...

greetz
P
 
div

hallo zildjan,
nee, mn hoofddiv moet 80% worden van het scherm.
...
ik snap het al...denk ik...

ik zet dat ding gewoon op 80%
dan het linkermenu op bijvoorbeeld 200px
en de container met inhoud regelt dan zelf wel hoe breed ie wordt.

is het niet?

groeten jeel2008
 
Hi

Gebruik voor beiden een percentage.

Zoiets bijvoorbeeld

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#container {
	text-align: left;
	margin: 0 auto;
	width: 80%;
}
#menu {
	text-align: left;
	width: 10%;
	float: left;
}
#content {
	text-align: left;
	float: left;
	width: 90%;
}
-->
</style>
</head>

<body>

<div id="container">

<div id="menu">
  <p>menu </p>
  <p>link</p>
  <p>link</p>
  <p>link</p>
  <p>link</p>
  <p>link</p>
  <p>link</p>
</div>

<div id="content">
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec erat   massa, mollis a euismod tincidunt, vulputate vel est. Maecenas nec justo   ante. Aenean sit amet lacus in nibh mollis adipiscing non at nisi. In   hac habitasse platea dictumst. Quisque tellus lacus, aliquet et interdum   eget, sagittis et sapien. Nunc dictum odio nec est mollis a molestie   metus congue. Phasellus molestie ligula ut sapien adipiscing semper. In   vel felis lacus, id porttitor dui. Aliquam placerat, enim non fringilla   venenatis, erat mauris commodo mauris, nec suscipit magna mauris non   augue. Aliquam erat volutpat. Morbi aliquet semper lacus ullamcorper   tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc   neque urna, facilisis sed commodo mattis, rutrum id felis. </p>
  <p> Duis porta luctus sapien at rutrum. Nulla ornare justo ut dolor tempor   nec consequat urna vulputate. Etiam laoreet faucibus erat sit amet   bibendum. Vivamus arcu massa, ultricies et auctor ac, ultrices nec erat.   Etiam imperdiet cursus sem eget cursus. Aliquam imperdiet felis eu   libero dictum aliquet. Nam et massa vitae velit pulvinar ultricies. Ut   ut mi nec nulla aliquam dictum vitae at odio. Donec id nisl euismod est   tempus sollicitudin. Maecenas mauris leo, tempus sed aliquam nec,   laoreet in tortor. </p>
</div>
</div>
</body>
</html>

greetz
P
 
Laatst bewerkt:
Hoi jeel,
ik zet dat ding gewoon op 80%
dan het linkermenu op bijvoorbeeld 200px
en de container met inhoud regelt dan zelf wel hoe breed ie wordt.
Klik om te vergroten...
Dat klopt.
En je hoeft geen extra "wrapper" div om alles heen te zetten, als je het gewoon regelt met de breedte van de body:
Code: 
[FONT="Courier New"][SIZE="2"]body {
     width: 80%;
     margin: 0 auto;
     padding: 0; /* alle browsers gelijk laten lopen */
     border: 1px dotted fuchsia; /* kijken waar ie zit */
}
#menu {
     float: left;
     width: 200px;
     border: 1px dotted green; /* kijken waar ie zit */
}[/SIZE][/FONT]
Een {text-align: left;} hoeft nergens bij, dat is de standaard-instelling.
Alleen gaat nu nog de inhoud onder de menu-kolom, als de inhoud groter is:
Dat kan je verhelpen door de #content een linker margin te geven die net iets groter is dan de breedte van de linkerkolom, bijvoorbeeld:
Code: 
[FONT="Courier New"][SIZE="2"]#content {
     margin-left: 220px;
}[/SIZE][/FONT]
Daarmee wordt het:
Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan