[CSS] Een DIV relatief maken tov een container div - Softwareontwikkeling

maandag 16 juli 2007 14:08

Acties:

Multimonitormannetje

Topicstarter

Hallo Allemaal

Ik ben al de hele dag aan het searchen en googlen maar ik kan er maar niet achter komen hoe ik het volgende voor elkaar kan krijgen:

Ik heb een website in elkaar gezet die bestaat uit een hele stapel divs die allemaal een absolute position hebben. Nu wil ik echter de site niet op een vaste plek hebben maar volledige centreren. Ik heb dus een containerdiv gemaakt, met daarin de rest vd site. Nu weet ik wel hoe ik deze containerdiv kan centeren, maar het lukt me maar niet om de andere divs hun positie relatief aan deze div te bepalen.

Zou iemand mij misschien uit kunnen leggen hoe ik deze divs hun positie kan laten bepalen aan de hand van de gecentreerde containerdiv ? Mijn dank zou groot zijn.

www.baskoole.com

maandag 16 juli 2007 14:11

Acties:

BtM909

Watch out Guys...

Je moet gewoon niet die hele stapel divs position absolute meegeven

Mooiste (en makkelijkste) is alles relatief positioneren

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

maandag 16 juli 2007 14:15

Acties:

Jorick

Cascading Stylesheet:

#mijndiv{
position:relative;
top:100px;
left:50px;
}

Wat zegt dit stukje CSS nu eigenlijk? Dat je div 100 pixels naar beneden en 50 pixels naar rechts staat van waar die eigenlijk had moeten staan. En waar die eigenlijk moet staan hangt af van de vorige div.

[ Voor 3% gewijzigd door Jorick op 17-07-2007 11:01 ]

maandag 16 juli 2007 18:05

Acties:

soulrider

relative = tegenover vorig element (meestal op gelijke hoogte in de DOM)
absolute = tegenover omvattend element (1 trap dichter bij <html> in de DOM).

dus als je

code:

<div id=container>
  <div ...></div>
  <div ...></div>
  <div ...></div>
  <div ...></div>
  ....
</div>

hebt dan staat normaal alles netjes gepositioneerd tegenover je container ...als je position: absolute gebruikt.
en met position: relative positioneer je de div's tegenover de div die erboven staat in je html-code...

[ Voor 16% gewijzigd door soulrider op 16-07-2007 18:07 ]

maandag 16 juli 2007 18:59

Acties:

Cadezo

geef de container-div wel een position absolute of relative anders kan deze niet optreden als ancestor...

maandag 16 juli 2007 19:44

Acties:

Cartman!

Nou valt frontenden onder mn dagelijkse werk maar soulrider, ik begrijp werkelijk geen zak van hoe je dit probeert uit te leggen...

TS: Je maakt een <div> en geeft bijv. de class 'wrapper' met de volgende settings:

code:

div.wrapper
{
position:relative;
margin:0 auto;
width:680px;
}

die div zal gecentreert worden en daar kun je je site in kwijt.

Ik kan je alleen als advies geven: alleen position:absolute gebruiken als t echt niet anders kan.

dinsdag 17 juli 2007 01:43

Acties:

soulrider

Cartman! schreef op maandag 16 juli 2007 @ 19:44:
Nou valt frontenden onder mn dagelijkse werk maar soulrider, ik begrijp werkelijk geen zak van hoe je dit probeert uit te leggen...

TS: Je maakt een <div> en geeft bijv. de class 'wrapper' met de volgende settings:
code:
1
2
3
4
5
6
div.wrapper
{
position:relative;
margin:0 auto;
width:680px;
}
die div zal gecentreert worden en daar kun je je site in kwijt.

Ik kan je alleen als advies geven: alleen position:absolute gebruiken als t echt niet anders kan.

offtopic:
Dat ik in mijn toepassingen van div's telkens heb gemerkt dat een position: relative steeds relatief is tegenover vorige elementen in mijn html-code, en niet enkel tegenover de omvattende ("wrapper") div.
dus als je [code]
<div class="wrapper">
<div class="optie"></div>
<div class="optie"></div>
<div class="optie"></div>
<div class="optie"></div>
</div>[/code]
combineert met
[code]
#wrapper{ position: absolute; top: 5px; left: 5px; }
#optie {position: absolute; top: 5px; left: 5px; width: 5px; height:5px; }
[/code]
je de 4 optie-div's op elkaar gaat zetten (dus afstanden _altijd_ gemeten vanaf de randen van de wrapper)
maar met
[code]
#wrapper{ position: absolute; top: 5px; left: 5px; }
#optie {position: relative; top: 5px; left: 5px; width: 5px; height:5px;}
[/code]
je de 4 optie-div's netjes onder elkaar zet met 5px ertss...
en dus altijd gezien naar de eerste 'grens' (of vorig element) dat in een bepaalde richting ligt.
(optie-div #1 staat relatief tegenover de grenzen van de wrapper, maar optie-div #2 staat relatief tegenover de linkerkant van de wrapper en de onderkant van optie-div #1, #3: links wrapper en #2, ...)

met het effect dat je dus door 1 element foutief te positioneren alle andere elementen zich daar op aanpassen, terwijl absolute positionering enkel rekening houdt met het omvattende element en niet met andere elementen die daarin staan.

Maar ja mijne uitleg is mss wat ingewikkeld

als ge met veel div's hebt gespeeld om het menu van een digitale decoder na te bouwen,
zonder gebruik te moeten/willen maken van padding en zo maar enkel met height, width, left,top,right, bottom en position te spelen dan valt je dat verschil wel enorm op...
en loop je vaak te vloeken door zoiets.

kijk ev even op http://www.soulrider.be/idtv/menu/7/2/04/ en naar de css http://www.soulrider.be/idtv/style.css om mijn verhaal van relative en absolute wat door te hebben.
(grote vlakken staan absolute, regels aan de rechterkant staan relative, ...)
en neen dit is geen front-end, maar een eigen uitdaging, namakning van een menu vaneen decoder - sommigen Belgen hier gaan dat wel herkennen.

on-topic:

TS hoe is je html-code ?

heb je

code:

<body>
 <div id="wrapper">...</div>
 <div>...</div>
....
 <div>...</div>
 <div>...</div>
</body>

of een

code:

<body>
 <div id="wrapper">
  <div>...</div>
  ....
  <div>...</div>
 </div>
</body>

bij dat eerste gaat je dat idd niet zo maar lukken voor die onderste div's
bij dat laatste wel - omdat je ze niet positioneerd tov je body maar tov die wrapper ....
en die wrapper kan je dan afzonderlijk positioneren zoals je wilt - center, of ergens in een hoekje
alle html-elementen die erin staan die worden gepositioneerd tegenover die wrapper
(en/of de andere elementen die erin staan)
(daar sloeg mijne uitleg dus ook op

)

geef anders een stukje html en css-code dat je gebruikt en waarbij het misgaat....

[ Voor 15% gewijzigd door soulrider op 17-07-2007 01:54 . Reden: [code] doet het niet in [ot]-tags maar ja die zever is dan ook meer [ot] dan anders :+ ]

dinsdag 17 juli 2007 02:00

Acties:

disjfa

be

soulrider schreef op dinsdag 17 juli 2007 @ 01:43:
[...]
Maar ja mijne uitleg is mss wat ingewikkeld

Nee, je code is te ingewikkeld en kan veel gemakkelijker. Dat is meet het punt. Al dat ge absolute positioneer is geheel niet nodig en een extra moeilijkheid. Je kan beter bedenken wat je wilt maken en dan de juiste code ervoor vinden

disjfa - disj·fa (meneer)
disjfa.nl

dinsdag 17 juli 2007 10:33

Acties:

Cartman!

code:

1	position: relative; top: 5px; left: 5px; width: 5px; height:5px;

Daar heb je niks aan, wordt ie gewoon absolute van dus. bij relative werk je met margins.

dinsdag 17 juli 2007 18:00

Acties:

soulrider

disjfa schreef op dinsdag 17 juli 2007 @ 02:00:
[...]

Nee, je code is te ingewikkeld en kan veel gemakkelijker. Dat is meet het punt. Al dat ge absolute positioneer is geheel niet nodig en een extra moeilijkheid. Je kan beter bedenken wat je wilt maken en dan de juiste code ervoor vinden

offtopic:
daarmee ook de knipoog erachter - ben altijd eentje geweest van "waarom makkelijk als het ook moeilijk kan - zekers als die laatste me minder code opleverd en net zo goed leesbaar is" - zal een poging doen eraan te denken bij volgend onderhoud aan die code, maar nu draait ie netjes dus ga ik er niet aan prullen - die site was ook maar voor mezelve en enkele ex-collega's

Cartman! schreef op dinsdag 17 juli 2007 @ 10:33:
code:
1
position: relative; top: 5px; left: 5px; width: 5px; height:5px;
Daar heb je niks aan, wordt ie gewoon absolute van dus. bij relative werk je met margins.

offtopic:
dat hangt er maar vanaf hoe je elementen in elkaar zitten gevlochten en tegenover welke andere elementen je gaat kijken - bij mij geven de css-regels hetgeen ik ervan verwacht - en ja beter en cleaner kan altijd, mijn eerste echte css-meshup was in ieder geval geslaagd

maar nu terug ontopic want er is nog altijd niet bekend of de TS zijn probleem ondertss is opgelost....

[ Voor 25% gewijzigd door soulrider op 17-07-2007 18:04 ]

dinsdag 17 juli 2007 20:48

Acties:

Cartman!

Niet zo zeer offtopic imo. Een relative element moet je geen top/left meegeven. Als de TS dit aanleert nu dan begint ie al verkeerd. Weldegelijk van belang dus imo.

woensdag 18 juli 2007 15:46

Acties:

Verwijderd

Ligt het aan mij of heb ik nog geen duidelijke oplossing gezien... hmmm....
Edit: ligt aan mij dus...

Cascading Stylesheet:

body { text-align: center; }
#container { position: relative; width: 600px; margin: 0 auto; text-align:left; }
#divje1 { position: absolute; top: 100px; left: 100px; }
#divje2 { position: absolute; top: 200px; left: 200px; }

HTML:

<body>
<div id="container">
    <div id="divje1"></div>
    <div id="divje1"></div>
</div>
</body>

There you have it... (denk ik)

[ Voor 5% gewijzigd door Verwijderd op 18-07-2007 15:48 ]

woensdag 18 juli 2007 16:35

Acties:

soulrider

nog 1 opmerking:
id's zouden uniek moeten zijn,
maak in dergelijke gevallen als in je voorbeeld gebruik van

code:

1	class="div1"

of is het een typfout

(id=divje2 in het laatste geval)

(en @ nog een trapje hoger: jeps is idd wel juist - maar vond het wat te veel richting mij gericht daarmee de "terug ontopic" aub

)

woensdag 18 juli 2007 19:04

Acties:

Cartman!

Verwijderd schreef op woensdag 18 juli 2007 @ 15:46:
Ligt het aan mij of heb ik nog geen duidelijke oplossing gezien... hmmm....
Edit: ligt aan mij dus...
Cascading Stylesheet:
1
2
3
4
body { text-align: center; }
#container { position: relative; width: 600px; margin: 0 auto; text-align:left; }
#divje1 { position: absolute; top: 100px; left: 100px; }
#divje2 { position: absolute; top: 200px; left: 200px; }
HTML:
1
2
3
4
5
6
<body>
<div id="container">
    <div id="divje1"></div>
    <div id="divje1"></div>
</div>
</body>
There you have it... (denk ik)

De oplossing voor t centreren was al gegeven. Wat je echter met de absoluut gepositioneerde div's wilt uitleggen is me onduidelijk.

woensdag 18 juli 2007 22:44

Acties:

basvcds

Multimonitormannetje

Topicstarter

Thanks for the input everybody

Uiteindelijk bleek het voor mij zo simpel als de oplossing van .elu, it works like a charm

www.baskoole.com

woensdag 18 juli 2007 23:14

Acties:

soulrider

basvcds schreef op woensdag 18 juli 2007 @ 22:44:
Thanks for the input everybody Uiteindelijk bleek het voor mij zo simpel als de oplossing van .elu, it works like a charm

euhm mijn eerste of tweede post hierboven wees je er toch ook al op ?
(enkel had ik je geen css gegeven, maar ja iets eigen moeite mag eh
- met de css erboven zou het geen probleem mogen zijn)

maar daar is geen reactie van je opgekomen...
(en de tip was je schijnbaar ook ontgaan om het eens te testen...)

hoe dan ook, goed dat het in orde is.