[CSS] div's positioneren en mee laten rekken - Softwareontwikkeling

vrijdag 16 april 2004 09:22

Acties:

Topicstarter

Hallo,

ik ben eindelijk aan het proberen om van tabellen over te stappen op css en layers.

Nu heb ik een probleempje, ik weet niet goed hoe relative en absoluut positioneren werkt en wanneer je het moet gebruiken. (althans relatief kom ik niet helemaal uit.)

nu heb ik de volgende opzet:

Afbeeldingslocatie: http://ivo.zelluf.com/zooi/images/div.gif

Afbeeldingslocatie: http://ivo.zelluf.com/zooi/images/div.gif

Nu heb ik 2 problemen, namelijk:

1) ik wil de container div mee laten rekken met de content div (deze bevat een variabele lengte aan text

2) welke div moet ik nu relatief positioneren en welke absoluut.

ik heb begrepen dat absoluut kijkt vanuit de linker bovenhoek van het scherm,
en relatief kijkt naar het onderliggende object.

bedoelen ze hier het object dat in de code onder ligt of op het scherm onder ligt?

en maakt het uit in welke volgorde ik mijn div's in mijn html code zet?

alvast bedankt.

Aspirant Got Pappa Lid | De toekomst is niet meer wat het geweest is...

vrijdag 16 april 2004 09:35

Acties:

jonggoud.nl

@>--"--,--{

wat je kan doen:

Cascading Stylesheet:

#container {
width: 700px;
}

#links {
float: left;
width: 350px;
}

#rechts {
float: left;
width: 350px;
}

#cleardiv {
clear: both;
}

HTML:

<div id="container">
  <div id="links">linkerkant schaalt dus
  </div>
  <div id="rechts">
    <div id="rechtsboven">rechter bovenkant
    </div>
    <div id="rechtsonder">rechter onderkant
    </div>
  </div>
  <div id="cleardiv">
  </div>
</div>

zorg er wel even voor dat alle margins ook 0 zijn hier, anders krijg je problemen als je borders etc. toevoegt.

Ik heb de rechtsboven en rechtsonder div niet in het CSS gezet omdat dat niet even niet van toepassing is. Je kan daar dus ook een hoogte of zo in meegeven. En alle opmaak erin veranderen.

[ Voor 27% gewijzigd door jonggoud.nl op 16-04-2004 09:36 ]

Nieuw (groots) project, mail me wat je er van vindt
Tevens in het bezit van een beeldschone vriendin

vrijdag 16 april 2004 09:38

Acties:

faabman

hmm, lijkt me gewoon dat:
- container div = <body>
- content div heeft een float:left;
- div 2 en div 3 hebben allebei een float right
- onderaan de body gooi een div met een clear:both; zodat je body meerekt met alles wat er boven staat

denk met die floats ff aan de 3px bug van i.e.

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!

vrijdag 16 april 2004 09:47

Acties:

4of9

Topicstarter

faabman schreef op 16 april 2004 @ 09:38:
hmm, lijkt me gewoon dat:
- container div = <body>
- content div heeft een float:left;
- div 2 en div 3 hebben allebei een float right
- onderaan de body gooi een div met een clear:both; zodat je body meerekt met alles wat er boven staat

denk met die floats ff aan de 3px bug van i.e.

bedankt alvast voor de reacties,

alleen kan ik body niet als container div gebruiken omdat ik voor de container div nog borders mee moet geven etc.

Aspirant Got Pappa Lid | De toekomst is niet meer wat het geweest is...

vrijdag 16 april 2004 09:56

Acties:

4of9

Topicstarter

ik heb nu:

code:

<div id="container">
    <div id="content">  VEEL TEXT</div>
    <div id="rechtsboven">rechts boven</div>
    <div id="rechtsonder"> rechts onder</div>
    <div id="cleardiv"></div>
</div>

code:

div {
    border: 1px solid #000;
}

#container {
width: 700px;
height: 100%;
}

#content {
float: left;
width: 250px;
left: 50px;
top: 50px;
position: relative;
}

#rechtsboven {
float: right;
width: 350px;
top: 50px;
}
#rechtsonder {
float: right;
width: 350px;
}

#cleardiv {
clear: both;
}

nu rekt mijn container niet mee met de content.

en moet ik nu de rechter divs absoluut positioneren of relatief?
en als ik relatief positioneer van welke div gaan ze dan uit?

thx!

[ Voor 83% gewijzigd door 4of9 op 16-04-2004 09:57 ]

Aspirant Got Pappa Lid | De toekomst is niet meer wat het geweest is...

vrijdag 16 april 2004 10:12

Acties:

CH4OS

It's a kind of magic

Misschien een beetje een offtopic vraag, maar ik stel hem toch...
En om er speciaal een nieuw topic voor te starten zie ik ook niet echt zitten eigenlijk...

Ik zie hier op GoT dat er veel gebruik wordt gemaakt van ID's icm CSS.
Ikzelf gebruik veel (eigenlijk altijd) classes in CSS.

Maar nou vraag ik me af, wat is het verschil tussen ID's en classes?

En wanneer gebruik je dan een class of een ID als er een (groot) verschil is?

[ Voor 17% gewijzigd door CH4OS op 16-04-2004 10:18 ]

vrijdag 16 april 2004 10:20

Acties:

Savantas

ID is voor een eenmalig gebruik op een object, en class voor als je iets op meerdere objecten gebruikt. Je kan wel ID op dezelfde wijze gebruiken, maar is niet correct (komt ook niet door validatie).

Ik denk niet zwart-wit, ik denk diapositief! ( ͡° ͜ʖ ͡°)

vrijdag 16 april 2004 10:23

Acties:

T-MOB

4of9 schreef op 16 april 2004 @ 09:22:
ik heb begrepen dat absoluut kijkt vanuit de linker bovenhoek van het scherm,
en relatief kijkt naar het onderliggende object.

Dat klopt niet helemaal. Met position absolute positioneer je een element ten opzichte van zijn parent, dat wil zeggen het element waarbinnen je het plaatst. Dat kan zowel ten opzichte van de boven-, onder- linker- en rechterkant.
Een duidelijk voorbeeldje
Absolute positioning zorgt er ook voor dat het element uit de normale flow of elements wordt gehaald. Kort door de bocht komt dat er op neer dat een absoluut element over andere zaken heen kan vallen. Je kunt dus ook meerdere absolute elementen over elkaar heen zetten. Degene die als laatste in je code staat komt standaard bovenop. Die volgorde kun je echter manipuleren met de Z-index.

Met position relative positioneer je ten opzichte van de plaats die het element in de zgn. flow of elements inneemt. Top 10px zorgt er dan voor dat het element 10 pixels lager wordt weergegeven dan normaal. Bekijken we het voorbeeld van daarnet met position: relative dan is het verschil duidelijk. Het voorbeeldblokje wordt gepositioneerd ten opzichte van de tekst in de parent -> niet de bovenkant ervan. (voorbeeld 2 laat gelijk de IE "height als min-height" bug zien, beste effetc in MOZ).

offtopic:
En strax komt Anne het in 4 regels in de juiste bewoording uitleggen

Regeren is vooruitschuiven

vrijdag 16 april 2004 10:27

Acties:

Markieman

T-MOB schreef op 16 april 2004 @ 10:23:
... Dat klopt niet helemaal. Met position absolute positioneer je een element ten opzichte van zijn parent, dat wil zeggen het element waarbinnen je het plaatst. ...

Ook dit is niet waar. Met absolute positioneer je een element ten opzichte van de eerste bovenliggende block element die ofwel relative ofwel absolute is gepositionieerd.

Een block element zijn position waarde is standaard normal.
Het top block element BODY is absolute gepositionioneerd.

Een absolute div binnen een normale div zal dus ten opzicht van de body worden gepositioneerd...

Een absolute div binnen een absolute of relative div zal ten opzichte van deze laatstegenoemde div gepositioneerd worden...

[ Voor 5% gewijzigd door Markieman op 16-04-2004 10:28 ]

You do not fear them? - The Wraith? Naah. Now *clowns*, that's another story.

vrijdag 16 april 2004 10:28

Acties:

4of9

Topicstarter

T-MOB schreef op 16 april 2004 @ 10:23:
[...]

Dat klopt niet helemaal. Met position absolute positioneer je een element ten opzichte van zijn parent, dat wil zeggen het element waarbinnen je het plaatst. Dat kan zowel ten opzichte van de boven-, onder- linker- en rechterkant.
Een duidelijk voorbeeldje
Absolute positioning zorgt er ook voor dat het element uit de normale flow of elements wordt gehaald. Kort door de bocht komt dat er op neer dat een absoluut element over andere zaken heen kan vallen. Je kunt dus ook meerdere absolute elementen over elkaar heen zetten. Degene die als laatste in je code staat komt standaard bovenop. Die volgorde kun je echter manipuleren met de Z-index.

Met position relative positioneer je ten opzichte van de plaats die het element in de zgn. flow of elements inneemt. Top 10px zorgt er dan voor dat het element 10 pixels lager wordt weergegeven dan normaal. Bekijken we het voorbeeld van daarnet met position: relative dan is het verschil duidelijk. Het voorbeeldblokje wordt gepositioneerd ten opzichte van de tekst in de parent -> niet de bovenkant ervan. (voorbeeld 2 laat gelijk de IE "height als min-height" bug zien, beste effetc in MOZ).

offtopic:
En strax komt Anne het in 4 regels in de juiste bewoording uitleggen

thx voor de duidelijke omschrijving.

relative kijkt dus niet naar het element waarin een object staat? (zeg ik het nu goed?)

Aspirant Got Pappa Lid | De toekomst is niet meer wat het geweest is...

vrijdag 16 april 2004 10:30

Acties:

4of9

Topicstarter

Markieman schreef op 16 april 2004 @ 10:27:
[...]

Ook dit is niet waar. Met absolute positioneer je een element ten opzichte van de eerste bovenliggende block element die ofwel relative ofwel absolute is gepositionieerd.

Een block element zijn position waarde is standaard normal.
Het top block element BODY is absolute gepositionioneerd.

Een absolute div binnen een normale div zal dus ten opzicht van de body worden gepositioneerd...

Een absolute div binnen een absolute of relative div zal ten opzichte van deze laatstegenoemde div gepositioneerd worden...

en een relatieve div binnen een normale div?

Aspirant Got Pappa Lid | De toekomst is niet meer wat het geweest is...

vrijdag 16 april 2004 10:50

Acties:

Markieman

4of9 schreef op 16 april 2004 @ 10:30:
[...]
en een relatieve div binnen een normale div?

Ter verduidelijking een opsomming

Position ken vier waarden: static, relative, absolute en fixed

Static = normal flow, ofwel gewoon in volgorde volgens browser net als ieder ander object/element, deze waarde is standaard

Relative = object wordt normal flow geplaatst, maar je kan het ten opzicht van die positie naar lins/rechts/boven/onder verplaatsen middels 1 of meer van de left,top,right en bottom properties

Absolute = object wordt uit de flow gehaald en wordt geplaatst ten opzicht van het eerste bovenliggende block element met position: relative of absolute.
Ook hier gebruik je 1 of meer van de left,top,right,bottom properties

Fixed = Gelijk aan absolute, alleen als je scrollt zal het niet meescrollen =)

You do not fear them? - The Wraith? Naah. Now *clowns*, that's another story.

vrijdag 16 april 2004 10:58

Acties:

Sendy

4of9 schreef op 16 april 2004 @ 10:30:
[...]

en een relatieve div binnen een normale div?

Dat gaat natuurlijk niet op. Een relatief gepositioneerd element heeft uit zichzelf al een positie. Hij wordt verschoven ten opzichte van deze positie.

Het enige gekke is dus een absoluut gepositioneerd element.

vrijdag 16 april 2004 11:02

Acties:

Verwijderd

Fixed = Gelijk aan absolute, alleen als je scrollt zal het niet meescrollen =)

Fout. 'position:fixed' zorgt ervoor dat het geselecteerde element vastgezet wordt op die viewport (dus niet op een ander element, zoals dat met 'position:absolute' het geval kan zijn).

Edit: Je kunt een 'position:absolute' ook positioneren ten opzichte van een 'position:fixed'. Zie ook punt 4 van CSS 2.1: 10.1 Definition of "containing block". Voor de bewering hierboven, zie punt 3, zelfde link.

[ Voor 38% gewijzigd door Verwijderd op 16-04-2004 11:11 ]

vrijdag 16 april 2004 11:17

Acties:

Markieman

Verwijderd schreef op 16 april 2004 @ 11:02:
[...]
Fout. 'position:fixed' zorgt ervoor dat het geselecteerde element vastgezet wordt op die viewport (dus niet op een ander element, zoals dat met 'position:absolute' het geval kan zijn).

Uit CSS2.1:
The box's position is calculated according to the 'absolute' model, but in addition, the box is fixed with respect to some reference. As with the 'absolute' model, the box's margins do not collapse with any other margins. In the case of handheld, projection, screen, tty, and tv media types, the box is fixed with respect to the viewport and doesn't move when scrolled.

Ofwel, volgens absolute alleen dan scollt ie niet =)

Edit: Je kunt een 'position:absolute' ook positioneren ten opzichte van een 'position:fixed'. Zie ook punt 4 van CSS 2.1: 10.1 Definition of "containing block". Voor de bewering hierboven, zie punt 3, zelfde link.

U heeft gelijk, vergeten erbij te melden...

You do not fear them? - The Wraith? Naah. Now *clowns*, that's another story.

vrijdag 16 april 2004 11:37

Acties:

4of9

Topicstarter

hmm niet zo gek dat het een beetje verwarrend is

[ Voor 84% gewijzigd door 4of9 op 16-04-2004 11:37 ]

Aspirant Got Pappa Lid | De toekomst is niet meer wat het geweest is...

vrijdag 16 april 2004 13:20

Acties:

WillyF

4of9 schreef op 16 april 2004 @ 09:56:
ik heb nu:
... code ...

nu rekt mijn container niet mee met de content.

...spul weggeknipt ... .

uhm... heb je ook ipv height: 100% ook height: auto geprobeerd?

The trouble of being a troubleshooter is when trouble starts to shoot back

vrijdag 16 april 2004 13:37

Acties:

crisp

Devver

Pixelated

WillyF schreef op 16 april 2004 @ 13:20:
[...]

uhm... heb je ook ipv height: 100% ook height: auto geprobeerd?

idd, of height gewoon weglaten

Intentionally left blank

vrijdag 16 april 2004 15:14

Acties:

4of9

Topicstarter

Ik heb nu dit en dat werkt, iemand nog tips hoe het beter zou kunnen of ik nog iets verkeerd doe?

(hij rekt dus alleen uit als ik een padding-bottom in mijn container div zet)

code:

div {
    border: 1px solid #000;
}

#container {
    padding-bottom: 100px;
    width: 700px;
}

#content {
    float: left;
    width: 250px;
    left: 50px;
    top: 50px;
    position: relative;
    margin-bottom: 50px;
}

#rechtsboven {
    float: right;
    width: 350px;
    top: 50px;
    right: 20px;
    position: relative;
}

#rechtsonder {  
    float: right;
    width: 350px;
    top: 150px;
    right: 20px;
    position: relative;
}

#onder{
    left: 50px;
    width: 350px;
    clear: both;
    top: 50px;
    position: relative;
}

code:

<div id="container">
    <div id="content">veel text</div>
    <div id="rechtsboven">veel text</div>
    <div id="rechtsonder">veel text</div>
    <div id="onder"> veel text</div>
</div>

[ Voor 14% gewijzigd door 4of9 op 16-04-2004 15:14 ]

Aspirant Got Pappa Lid | De toekomst is niet meer wat het geweest is...

vrijdag 16 april 2004 15:28

Acties:

Markieman

Misschien is dit een nuttig voorbeeld:

Is copy & paste uit mijn site (in ontwikkeling)...

code:

body
{
   margin: 0px;
}

div
{
   border-style: none;
   border-width: 0px;
   margin: 0px;
   padding: 0px;
}

div#site
{
   position: relative;
   width: 800px;
   margin: auto;
}

div#top
{
   position: relative;
   left: 0px;
   top: 0px;
   width: 800px;
   height: 89px;
   border-bottom-style: dotted;
   border-bottom-width: 1px;
}

div#body
{
   width: 800px;
   position: relative;
   left: 0px;
   top: 0px;
}

div#menu
{
   width: 150px;
   float: left;
}

div#main
{
   width: 629px;
   border-left-style: dotted;
   border-left-width: 1px;
   float: right;
   padding: 10px;
}

div#footer
{
   position: relative;
   width: 800px;
   border-top-style: dotted;
   border-top-width: 1px;
   text-align: center;
}

code:

<div id="site">
   <div id="top">
    <p>logootje enzo</p>
   </div>
   <div id="body">
      <div id="menu">
         <h2>Menu</h2>
         <p>menuutje</p>
      </div>
      <div id="main">
      <h1>Welkom</h1>
      <p>blaat</p>
      </div>
   </div>
   <div id="footer">
      <p>Copyright &copy; 2004</p>
   </div>
</div>

Kortom, ik denk dat je in je container ook position: relative moet zetten. Dat padding zal niet nodig hoeven te zijn. Anders moet je even hierboven kijken, hierin gaat wel alles mee...

[ Voor 32% gewijzigd door Markieman op 16-04-2004 15:30 ]

You do not fear them? - The Wraith? Naah. Now *clowns*, that's another story.

vrijdag 16 april 2004 15:50

Acties:

4of9

Topicstarter

dat werkt niet helaas (de onder div valt over de container heen aan de onderkant)

een padding-bottom van 50px zorgt ervoor dat mijn onder div onder tegen de container aan valt, en een padding-bottom van 100px laat hem wel weergeven zoals ik wil.

is dit correct gebruik (padding) en waarom werkt padding 50px niet ?

wederom bedankt! leer enorm veel hiervan!

Aspirant Got Pappa Lid | De toekomst is niet meer wat het geweest is...

vrijdag 16 april 2004 16:04

Acties:

Markieman

4of9 schreef op 16 april 2004 @ 15:50:
dat werkt niet helaas (de onder div valt over de container heen aan de onderkant)
Toch vaag, bij mij blijft alles binnen mijn containers (#site en #body), ik moet eerlijk zeggen; ik weet ook niet hoe ik je verder kan helpen =(

een padding-bottom van 50px zorgt ervoor dat mijn onder div onder tegen de container aan valt, en een padding-bottom van 100px laat hem wel weergeven zoals ik wil.

is dit correct gebruik (padding) en waarom werkt padding 50px niet ?
Het is in principe geen correct gebruik, maar als het werkt... =)

wederom bedankt! leer enorm veel hiervan!

Eigenlijk zijn tabellen toch veeeel makkelijker...

You do not fear them? - The Wraith? Naah. Now *clowns*, that's another story.

vrijdag 16 april 2004 16:11

Acties:

Verwijderd

Wat is er precies mis met de 'float' oplossing? (Ik zou denk ik geen 'position' gebruiken voor zo'n layout.)

vrijdag 16 april 2004 16:15

Acties:

Markieman

Verwijderd schreef op 16 april 2004 @ 16:11:
Wat is er precies mis met de 'float' oplossing? (Ik zou denk ik geen 'position' gebruiken voor zo'n layout.)

Helemaal niks....

Alleen hij probeert zijn floating divjes binnen de container div te houden en dat schijnt niet helemaal te lukken... (en zeg nou zelf, is het oplossen met 'padding' nu een goede oplossing?)

_{In mijn voorbeeld zag je ook een combinatie van float en position}

[ Voor 12% gewijzigd door Markieman op 16-04-2004 16:16 ]

You do not fear them? - The Wraith? Naah. Now *clowns*, that's another story.

vrijdag 16 april 2004 16:41

Acties:

Verwijderd

'padding' heeft er niks mee te maken. Dat heeft misschien te maken met een of andere quirk in Internet Explorer, een van de redenen waarom je niet in die browser moet testen.

Het ging om 'float' versus 'position' en 'position' heeft in dit geval totaal _geen_ voordeel boven 'float' (wellicht kun je het binnen #nav te gebruiken) en 'margin'.

vrijdag 16 april 2004 16:47

Acties:

4of9

Topicstarter

Verwijderd schreef op 16 april 2004 @ 16:41:
'padding' heeft er niks mee te maken. Dat heeft misschien te maken met een of andere quirk in Internet Explorer, een van de redenen waarom je niet in die browser moet testen.

Het ging om 'float' versus 'position' en 'position' heeft in dit geval totaal _geen_ voordeel boven 'float' (wellicht kun je het binnen #nav te gebruiken) en 'margin'.

Ik probeer mijn container div mee te laten rekken met de positie en/of de div die in de container staan.

Zie mijn code van een paar posts hiervoor...

[ Voor 7% gewijzigd door 4of9 op 16-04-2004 16:48 ]

Aspirant Got Pappa Lid | De toekomst is niet meer wat het geweest is...

vrijdag 16 april 2004 16:50

Acties:

Verwijderd

Zie de code die gebruikt maakt van 'float' aan het begin van het topic. Met jouw code gaat het niet werken (bijna 100% zeker).

vrijdag 16 april 2004 16:55

Acties:

4of9

Topicstarter

ik bedoelde de code die ik hiervoor poste.

die werkt in IE goed en in firebird ook maar weet niet of het correct is.

Aspirant Got Pappa Lid | De toekomst is niet meer wat het geweest is...

Pagina: 1

Reageer