Toon posts:

[css] positionering zuigt (of snap ik het niet?)

Pagina: 1

Acties:

108 views sinds 30-01-2008
Reageer

maandag 17 september 2001 12:59

Acties:

Pelle

🚴‍♂️

Topicstarter

Mensen, aanschouw deze pagina: http://jj.upnet.nl/got/vaagprobleem.html

Hier is nog niks aan de hand, maar zodra ik onder die 3 kolommen en nieuw stuk tekst probeer te zetten, gaat het fout: http://jj.upnet.nl/got/vaagprobleem2.html

Ik snap niet wat ik verkeerd doe; als ik in CSS iets positioneerde dan deed ik dat altijd absolute, en ten opzichte van de <body> en nooit in een andere <div>.
Ik zal hier nog even uitleggen wat ik precies wil:

Ik heb een pagina, en in die pagina heb je headers en content. Headers staan links uitgelijnd (in een <div class="header">), content staat 100 pixels naar rechts (<div class="content">). Beide zijn relatief gepositioneerd.
Nu wil ik een aantal kolommen toevoegen, die ik ook met CSS wil positioneren. Die kolommen stop ik dus ook in een <div class="content">, en vervolgens wil ik die kolommen dus absoluut (ten opzichte van de <div> waar ze in staan) positioneren. Kolom1 met een left van 0 en een top van 0, zodat dit ding linksboven in de parent-div komt te staan (=honderd pixels vanaf links). Kolom2 moet 220 pixels vanaf z'n parent krijgen (=320 vanaf links), en kolom3 krijgt er 440 (=dus 540 pixels vanaf links).
Gaat allemaal prima. Maar nu wil ik onder die kolommen weer een gewone <div> met tekst zetten. En dat lukt dus niet; hij positioneert die <div> over die kolommen heen. En dat moet niet.

Hier nog even een image ter verduidelijking:
Afbeeldingslocatie: http://jj.upnet.nl/got/cssdoetnie.gif

Afbeeldingslocatie: http://jj.upnet.nl/got/cssdoetnie.gif

Wat doe ik verkeerd?

maandag 17 september 2001 13:05

Acties:

Verwijderd

het gaat mis bij class="tekst" denk ik.
noch bericht, noch tekst krijgt vertikaal een positie opgegeven.
denk eraan dat de div's een aparte layer zijn die je herpositioneert, waardoor ze geen ruimte reserveren.
probeer een extra class aan te maken waarbij je de tekst wèl een vertikale positie opgeeft.

maandag 17 september 2001 13:12

Acties:

Pelle

🚴‍♂️

Topicstarter

Op maandag 17 september 2001 13:05 schreef Cheatah het volgende:
het gaat mis bij class="tekst" denk ik.
noch bericht, noch tekst krijgt vertikaal een positie opgegeven.
denk eraan dat de div's een aparte layer zijn die je herpositioneert, waardoor ze geen ruimte reserveren.
probeer een extra class aan te maken waarbij je de tekst wèl een vertikale positie opgeeft.

Maar dat schiet niet op toch? Verticale positie weet ik niet omdat dat afhangt van de hoeveelheid tekst die in de <div> erboven staat.

/edit:
Kijk hier maar eens; ik heb diezelfde alinea nu nog een keer neergezet, maar dan boven die 3 kolommen. Daar gaat het wel goed. Komt netjes onder de vorige alinea, en die kolommen beginnen daar weer onder.

maandag 17 september 2001 13:14

Acties:

Verwijderd

Op maandag 17 september 2001 13:12 schreef Pelle het volgende:

[..]

Maar dat schiet niet op toch? Verticale positie weet ik niet omdat dat afhangt van de hoeveelheid tekst die in de <div> erboven staat.

Ja dat is dus een nadeel van div's, maar waarom doe je alles niet 'gewoon' in een tabel?
Ik ben ook wel een css en div freak geworden, maar sommige dingen blijven met tabellen makkelijker.

maandag 17 september 2001 13:16

Acties:

Verwijderd

Ik heb een keer een soort gelijk probleem gehad, maar dan met een image. Ik heb het toen opgelost door de image een height te geven. (is in jou geval wel veel werk)

maandag 17 september 2001 13:17

Acties:

Verwijderd

Op maandag 17 september 2001 13:16 schreef jrs het volgende:
Ik heb een keer een soort gelijk probleem gehad, maar dan met een image. Ik heb het toen opgelost door de image een height te geven. (is in jou geval wel veel werk)

Dat kan bij Pelle dus niet, hoogte van de tekst is variabel, dat heeft hij al gezegd.

maandag 17 september 2001 13:19

Acties:

Verwijderd

Dat kan bij pelle dus wel, met javascript!!! De hoogte van het object uitlezen, en toekennen. Oke het is een paardenmiddel, maar het kan....

maandag 17 september 2001 13:19

Acties:

Pelle

🚴‍♂️

Topicstarter

Op maandag 17 september 2001 13:14 schreef Cheatah het volgende:
Ja dat is dus een nadeel van div's, maar waarom doe je alles niet 'gewoon' in een tabel?
Ik ben ook wel een css en div freak geworden, maar sommige dingen blijven met tabellen makkelijker.

Omdat ik dit soort dingen altijd met tabellen doe, maar dat vaak zo omslachtig was dat ik het nu met CSS wil proberen. CSS zou je een hoop werk moeten besparen, maar als er dit soort dingen inzitten dan heeft het natuurlijk helemaal geen zin.

Het probleem is (denk ik) dat de <div id="kolommen"> niet de hoogte aanneemt die alle <div>'s erin innemen. En dat vind ik dus raar. Is hier iets aan te doen, of heb ik gewoon dikke pech en moet ik weer good ol' tabellen gaan kloppen met overal spacer.gif's?

maandag 17 september 2001 13:21

Acties:

Pelle

🚴‍♂️

Topicstarter

Op maandag 17 september 2001 13:19 schreef jrs het volgende:
Dat kan bij pelle dus wel, met javascript!!! De hoogte van het object uitlezen, en toekennen. Oke het is een paardenmiddel, maar het kan....

Hoe doen we dat? Ik heb dus die 3 kolommen, maar die 3 kolommen hebben elk ook weer childs. Dan zou ik per kolom dus de hoogte van de childs uit moeten lezen, en dan de complete div de hoogte moeten geven van de langste kolom?

Goed, dan kom ik het nu nog even wat moeilijker maken: het moet werken in IE4+ en NS4+.

maandag 17 september 2001 13:22

Acties:

Verwijderd

Je kan ook met javascript positioneren!

maandag 17 september 2001 13:22

Acties:

paragon

Misschien kan je die tekst die fout gepositioneerd staat relatief positioneren. En dan tenopzichte van de kolom die het hoogt is.

maandag 17 september 2001 13:25

Acties:

Verwijderd

Op maandag 17 september 2001 13:19 schreef Pelle het volgende:

Omdat ik dit soort dingen altijd met tabellen doe, maar dat vaak zo omslachtig was dat ik het nu met CSS wil proberen. CSS zou je een hoop werk moeten besparen, maar als er dit soort dingen inzitten dan heeft het natuurlijk helemaal geen zin.

Het probleem is (denk ik) dat de <div id="kolommen"> niet de hoogte aanneemt die alle <div>'s erin innemen. En dat vind ik dus raar. Is hier iets aan te doen, of heb ik gewoon dikke pech en moet ik weer good ol' tabellen gaan kloppen met overal spacer.gif's?

Ik had begrepen dat je als je div's gaat verplaatsen, dat je ze naar een nieuwe laag gooit, waardoor ze de interactie met andere margins ontvluchten.

Misschien is het een idee om alles te positioneren met margin-left en margin-top.
Volgens mij kan dat wel in jouw geval.

[edit]
voor de lege ruimte links moet je eventueel een lege div neergooien...

maandag 17 september 2001 13:27

Acties:

Pelle

🚴‍♂️

Topicstarter

Op maandag 17 september 2001 13:22 schreef jrs het volgende:
Je kan ook met javascript positioneren!

Ja, dat weet ik. Maar waarom zou ik dat doen als het ook gewoon in HTML kan? 't is namelijk echt een #*&^#-karwei om dat met JS te doen, als je goed browsercompatible wilt werken.

Hier staan de kolommen relatief gepositioneerd, en dan neemt de parent-div wel de hoogte aan van z'n child. Maar zo krijg ik die kolommen dus nooit naast elkaar.

maandag 17 september 2001 13:32

Acties:

Pelle

🚴‍♂️

Topicstarter

Op maandag 17 september 2001 13:25 schreef Cheatah het volgende:
Misschien is het een idee om alles te positioneren met margin-left en margin-top.
Volgens mij kan dat wel in jouw geval.

Hoe moet ik me dat voorstellen? Wat moet dan de parent-child-structuur van die divjes zijn? Volgens mij is het namelijk niet mogelijk om <div>'s die relatief gepositioneerd zijn (al of niet met top en left of met margins), naast elkaar te krijgen.

maandag 17 september 2001 13:35

Acties:

Verwijderd

Op maandag 17 september 2001 13:32 schreef Pelle het volgende:

[..]

Hoe moet ik me dat voorstellen? Wat moet dan de parent-child-structuur van die divjes zijn? Volgens mij is het namelijk niet mogelijk om <div>'s die relatief gepositioneerd zijn (al of niet met top en left of met margins), naast elkaar te krijgen.

Ik wil het zelf ook graag weten, ik ga dus ook even klooien

Misschien niet meteen, maar ik post wel of het me wel/niet is gelukt

maandag 17 september 2001 13:35

Acties:

Verwijderd

Op maandag 17 september 2001 13:27 schreef Pelle het volgende:

[..]

Ja, dat weet ik. Maar waarom zou ik dat doen als het ook gewoon in HTML kan? 't is namelijk echt een #*&^#-karwei om dat met JS te doen, als je goed browsercompatible wilt werken.

Nou dat valt ook wel mee hoor, en daarbij, is het denk ik het laatste redmiddel boven tables. Dus als je wil vasthouden aan de divs, maar het met css niet lukt, kan je dit nog gebruiken....

maandag 17 september 2001 13:49

Acties:

drm

f0pc0dert

[edit]

bij nader inzien snapt * drm er ook niet zo veel van ...

ik ga ff puzzelen.

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz

maandag 17 september 2001 13:59

Acties:

Pelle

🚴‍♂️

Topicstarter

Op maandag 17 september 2001 13:49 schreef drm het volgende:
bij nader inzien snapt * drm er ook niet zo veel van ...

ik ga ff puzzelen.

Leuk he, CSS? Het zou het leven van de gemiddelde webdevver er logischer op moeten maken, maar dat valt dus even vies tegen

* Pelle gaat maar eens even lunchen..
Je schijnt beter te kunnen denken met een volle maag

maandag 17 september 2001 14:02

Acties:

drm

f0pc0dert

Op maandag 17 september 2001 13:49 schreef drm het volgende:
ik ga ff puzzelen.

en dat hen ik gedaan:

als je de _alleen_ de langste kolom position:relative maakt gaat het wel goed....

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz

maandag 17 september 2001 14:36

Acties:

oh,when?

...

* oh,when? gaat vanavond wel ff puzzelen als ie klaar is met werken.

"You're only as good, as what you did last week."

maandag 17 september 2001 14:43

Acties:

Dennis

Op maandag 17 september 2001 14:02 schreef drm het volgende:
en dat hen ik gedaan:

als je de _alleen_ de langste kolom position:relative maakt gaat het wel goed....

En hoe weet jij welke de langste is?

maandag 17 september 2001 14:52

Acties:

DeFeCt

je wéét toch

* DeFeCt glimlacht...

Heb hier ongeveer dezelfde ellende en ben nu weer terug naar good 'ol spacers en tables... met een klein beetje css

Flickr

maandag 17 september 2001 15:24

Acties:

drm

f0pc0dert

Op maandag 17 september 2001 14:43 schreef dennisdotcom het volgende:
En hoe weet jij welke de langste is?

* drm hoorde van pelle via andere kanalen (lees ICQ) dat het gegenereerde stuff met PHP is

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz

maandag 17 september 2001 15:32

Acties:

Pelle

🚴‍♂️

Topicstarter

Op maandag 17 september 2001 15:24 schreef drm het volgende:
* drm hoorde van pelle via andere kanalen (lees ICQ) dat het gegenereerde stuff met PHP is

Idd. 't wordt een verzameling linkjes à la startpagina, maar met een CMS erachter. Klant kan zelf bepalen welke categorie in welke kolom komt, en in welke volgorden. Wij hebben zelf dus geen enkele invloed op de layout van die tabel.

Zat al even te fantaseren over een functie die het aantal categorieën en links per categorie telt, en vervolgens bepaalt welke kolom de hoogste is. Dat werd wel weer bemoeilijk door het feit dat een linkje meerdere regels in beslag kan nemen, dus daar zou je dan ook rekening mee moeten houden.
Maar om dat weer te laten werken zou je de hoogte en breedte van elke letter weer moeten weten om te bepalen hoeveel regels het linkje in beslag neemt.

* Pelle heeft maar even snel een tabelletje geklopt...

maandag 17 september 2001 16:31

Acties:

Op maandag 17 september 2001 15:32 schreef Pelle het volgende:
* Pelle heeft maar even snel een tabelletje geklopt...

Psies, ik weet niet maar het lukt mij ook nooit, zeker niet als je het ook nog crossbrowser wilt regelen. Dus wat dat betreft zijn tabelletjes sneller als je het mij vraagt, en het werkt op zich toch prima?

Pagina: 1

Reageer