Toon posts:

DIV inheritance

Pagina: 1

Acties:

41 views sinds 30-01-2008
Reageer

woensdag 23 april 2003 04:38

Acties:

Grijze Vos

Topicstarter

Okee, ik word weer eens compleet gek. Na anderhalf uur W3C materiaal doorlezen is dat misschien niet zo gek.

Ik ben een website van tabellen om aan het zetten naar Divjes. Divjes hebben wat voordelen

Maar ik zit met een probleem. Als ik een DIV in een DIV heb, dan moet hij toch, bij absolute position de waarden nemen t.o.v. zn parent DIV, en niet de BODYvan het document. Tenminste, zo heb ik het begrepen. Hier iig het stukje code:

code:

  <BODY>
    <DIV style="text-align: center; height: 100%; width: 480px;">
      <DIV class="footer" STYLE="position: absolute; bottom: 0px; height: 80px; width: 420px; right: 0;">
      </DIV>
    </DIV>
  </BODY>

Zie ik nou iets over het hoofd? In ieder geval alvast bedankt voor jullie hulp. Ik denk dat ik zo maar ga slapen,wantmijn productiviteit begint flink te dalen..

Op zoek naar een nieuwe collega, .NET webdev, voornamelijk productontwikkeling. DM voor meer info

woensdag 23 april 2003 07:42

Acties:

siggy

Wait.... what?

Dan moet je ook geen absolute gebruiken maar relative. Absolute gebruikt ie dus echt van punt 0,0 linksboven. Relative gebruikt ie de positie waar ie wordt aangeroepen.

Btw, kunnen divjes wel normaal getoond worden in opera, netscape en die andere browsers? Ik zit namelijk het tegenovergestelde te doen

"I don't take life too seriously, no one gets out alive anyways..."

woensdag 23 april 2003 08:51

Acties:

Grijze Vos

Topicstarter

Hmz, dat relative kwam op mij anders over.

W3C site:
Once a box has been laid out according to the normal flow, it may be shifted relative to this position.

Kwas niet onder de impressie dat ik zegmaar de 'normal flow' wou hebben. Maar okee, ik ga het ff testen.

Op zoek naar een nieuwe collega, .NET webdev, voornamelijk productontwikkeling. DM voor meer info

woensdag 23 april 2003 09:07

Acties:

crisp

Devver

Pixelated

zet eens position: relative; in je container div

Intentionally left blank

woensdag 23 april 2003 09:20

Acties:

SillyJW

der Gemutlichkeit

siggy schreef op 23 April 2003 @ 07:42:
Dan moet je ook geen absolute gebruiken maar relative. Absolute gebruikt ie dus echt van punt 0,0 linksboven. Relative gebruikt ie de positie waar ie wordt aangeroepen.

Btw, kunnen divjes wel normaal getoond worden in opera, netscape en die andere browsers? Ik zit namelijk het tegenovergestelde te doen

Volgens mij zijn de 'andere' browsers juist netter in het weergeven van css dan ie.

woensdag 23 april 2003 09:36

Acties:

Grijze Vos

Topicstarter

crisp, die container div relative, en de div zelf absolute, dat werkt. Thx.
Is mij dus niet duidelijk gewordenuit de documentatie, dat het zo moest. Maarja, ontzettend bedankt, nu kan ik gaan doorkutten ermee

SillyJW> Klopt idd, Mozilla doetvakerwat ik verwacht dan IE.

Op zoek naar een nieuwe collega, .NET webdev, voornamelijk productontwikkeling. DM voor meer info

woensdag 23 april 2003 10:30

Acties:

Grijze Vos

Topicstarter

de oplossing die werkt voor mozilla:

code:

  <BODY>
    <DIV style="text-align: center; position: relative; height: 780px; width: 800px;">
      [img]"logo.gif"[/img]
      <DIV class="navbar" STYLE="position: absolute; bottom: auto; top: 80px; left: 0px; right: auto;">
      </DIV>
      <DIV class="loginvenster" STYLE="position: absolute; bottom: auto; top: 320px; left: 0px; right: auto;">
      </DIV>
      <DIV class="content" STYLE="position: absolute; bottom: 400px; top: 80px; left: 160px; right: auto; overflow: auto;">
      </DIV>
      <DIV class="footer" STYLE="position: absolute; bottom: 0px; height: 80px; top: auto; width: 420px; right: auto; left: auto;">
      </DIV>
    </DIV>
  </BODY>

Op het centrerenna werkt mozilla nu precies zoals ik het wil. Maar IE loopt te bokken. Om de een of andere reden, zijn de DIVs van de content en footer afhankelijk van de navbar DIV. Is dit nou gewoon een IE bug?

Op zoek naar een nieuwe collega, .NET webdev, voornamelijk productontwikkeling. DM voor meer info

woensdag 23 april 2003 11:09

Acties:

Martin Sturm

Waarschijnlijk is dat wel een bug van IE, want IE zit vol met bugs, met name op het gebied van CSS en <DIV>'s. Komt omdat IE zogenaamd zo soepel is met HTML

[ Voor 6% gewijzigd door Martin Sturm op 23-04-2003 11:09 ]

woensdag 23 april 2003 12:34

Acties:

Grijze Vos

Topicstarter

Kom ik nu ook achter Martin. Eerst vond ik dat wel handig, beetje 'soepel' gedrag. Maar als je eenmaal op een fatsoenlijke manier je opmaak wil regelen, dan werkt het niet meer.

Ik ben het gedrag van die krengen nu aan het onderzoeken, en zo te zien snappen de divjes gewoon niet wie hun parent is. Dat wordt dan maareen javascriptje met translaties, afhankelijk per browser.

*ZUCHT*

[ Voor 4% gewijzigd door Grijze Vos op 23-04-2003 12:35 . Reden: - ]

Op zoek naar een nieuwe collega, .NET webdev, voornamelijk productontwikkeling. DM voor meer info

woensdag 23 april 2003 15:12

Acties:

Grijze Vos

Topicstarter

Nog wat dingen geprobeerd, IDs e.d. toegevoegd. Daar heeft het allemaal niks mee te maken. Om even nog kort neer te zetten wat IE6 dus doet. In plaats van te alignen met zn parent DIV, neemt ie gewoon de DIV die boven hem in de code staat. Als iemand een idee heeft hoe dit in IE6 is te fixen, graag.

Op zoek naar een nieuwe collega, .NET webdev, voornamelijk productontwikkeling. DM voor meer info

woensdag 23 april 2003 15:26

Acties:

crisp

Devver

Pixelated

mm, als ik al die bla=auto dingen eruit gooi en voor de content een height specificieer met alleen een top in plaats van een top en bottom, dan ziet er het hetzelfde uit in IE5.5 en Mozilla1.3 bij mij

HTML:

<body>
  <div style="text-align: center; position: relative; height: 780px; width: 800px;">
    [img]"logo.gif"[/img]
    <div class="navbar" style="position: absolute; top: 80px; left: 0px;">navbar</div>
    <div class="loginvenster" style="position: absolute; top: 320px; left: 0px;">loginvenster</div>
    <div class="content" style="position: absolute; top: 80px; left: 160px; height: 320px; overflow: auto;">content</div>
    <div class="footer" style="position: absolute; bottom: 0px; height: 80px; width: 420px; left: 0px;">footer</div>
  </div>
</body>

Intentionally left blank

donderdag 24 april 2003 02:01

Acties:

Grijze Vos

Topicstarter

Hehe eindelijk het probleem gevonden. Mijn layout zag verder goed uit, maar er was ergens een '>' vermist. Die zorgde voor de troep. *zucht*

Een zo'n klein kut tekentje kostte me dus maar weer es een halve dag

Alles werkt nu. Moet alleen nog zorgen dat de een javascriptje de hoogte van de viewport gaat koppelen aan de hoogtes van een paar divjes, maar dat zal me wel lukken..

Op zoek naar een nieuwe collega, .NET webdev, voornamelijk productontwikkeling. DM voor meer info

Pagina: 1

Reageer