[xhtml + css] Positioneren van Divjes - Softwareontwikkeling

dinsdag 16 maart 2004 16:06

Acties:

hican.net

Topicstarter

Ik ben nou al een halve dag bezig geweest met het positioneren van een paar divjes (klinkt als een noob

). Ik heb de hele search hier uitgespit (gezocht op css, css + div, div + positioneren) noem het maar en heel veel resultaten gevonden, maar niet wat ik zoek. Op google kon ik helaas ook niks vinden.
Ik heb zelf van alles geprobeerd met relative positioning en absolute, verschillende waardes en manieren, noem het maar op.

Wat ik nou wil bereiken is het volgende:
Afbeeldingslocatie: http://www.overruled.nl/divprobleem/divprobleem.jpg

Afbeeldingslocatie: http://www.overruled.nl/divprobleem/divprobleem.jpg

DIV 1 moet de volgende eigenschappen hebben:
top: 0px
left: 0px
height: 50px
width: 100%

DIV 2 moet deze eigenschappen hebben:
top: 50px
left: 0px
height: 100%
bottom: 50px

DIV 3 moet het volgende hebben:
bottom: 0px
right: 0px
width: 100%
height: 50px

dit krijg ik dan nog wel voor elkaar (althans redelijk), maar dan nu het leuke... hoe maak ik dit zodat wanneer het browser venster kleiner word gemaakt alles netjes mee scrolled, maar er GEEN EEN div over een andere heen gaat? Met tables heb ik dit zo voor elkaar, maar met divjes

krijg het niet voor elkaar.

Wie helpt mij een beetje op weg? Of geeft wat tips?
(Ik hoop dat het duidelijk is

)

Hican.net | IT Blog about all that is interesting.

dinsdag 16 maart 2004 16:10

Acties:

faabman

code:

1	style="display:block;"

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

dinsdag 16 maart 2004 16:10

Acties:

Verwijderd

Aangezien een DIV een block-level element is, is het altijd zo breed als z'n parent element (en als je dat doorvoert dus 100%).
http://steve.pugh.net/test/test57.html

dinsdag 16 maart 2004 16:11

Acties:

kleautviool

HTML:

<html>
<head>
<style>
html,body { height: 100%; }
</style>
</head>
<body>
<div style="width: 100%; height: 50px; background-color: red;">Boe</div>
<div style="width: 100%; height: 100%; background-color: lime;">Boe</div>
<div style="width: 100%; height: 50px; background-color: blue;">Boe</div>
</body>
</html>

dinsdag 16 maart 2004 16:15

Acties:

Hican

hican.net

Topicstarter

kleautviool schreef op 16 maart 2004 @ 16:11:

HTML:

<html>
<head>
<style>
html,body { height: 100%; }
</style>
</head>
<body>
<div style="width: 100%; height: 50px; background-color: red;">Boe</div>
<div style="width: 100%; height: 100%; background-color: lime;">Boe</div>
<div style="width: 100%; height: 50px; background-color: blue;">Boe</div>
</body>
</html>

ok, zo ver was ik ook gekomen, maar dan past het niet netjes in je browser window

ik wil dat het in iedere grootte (1024*768, 800*600, etc.) dan ook netjes past en dat je geen scrollbalk hebt.

Hican.net | IT Blog about all that is interesting.

dinsdag 16 maart 2004 16:15

Acties:

Verwijderd

Heb je mijn tweede punt ook doorgenomen? Wonderbaarlijk hoe mensen over dingen heenlezen als ze proberen een probleem op te lossen.

dinsdag 16 maart 2004 16:17

Acties:

Hican

hican.net

Topicstarter

Verwijderd schreef op 16 maart 2004 @ 16:15:
Heb je mijn tweede punt ook doorgenomen? Wonderbaarlijk hoe mensen over dingen heenlezen als ze proberen een probleem op te lossen.

sorry, idd overheen gelezen

eens kijken of ik het hiermee op kan lossen. Ik denk het wel. Bedankt!

Hican.net | IT Blog about all that is interesting.

woensdag 17 maart 2004 15:29

Acties:

Hican

hican.net

Topicstarter

Darn, het is me dus niet gelukt. Die site doet "ongeveer" wat ik wil, maar het punt is dat die onderste div (de bottom div) nog steeds over de middelste heen scrolled

(althans... een beetje) wat ik wil is dit:

code:

----------------------------------------------------
| TOP DIV                                          |
----------------------------------------------------
|                                                  |
|               ------------------------           |
|               | MIDDLE DIV           |           |
|               ------------------------           |
|                                                  |
----------------------------------------------------
| BOTTOM DIV                                       |
----------------------------------------------------

en die onderste div mag dus niet over de middelste heen gaan en die middelste weer niet over de bovenste (en de onderste)! Als je de browser veranderd moet het netjes meebewegen en gepositioneerd blijven, net als hieronder hoe ik het gedaan heb, maar dan in tabellen:

code:

<html>
<head>
<title>dit moet toch ook kunnen m.b.v. CSS?</title>
</head>
<body bottommargin="0" topmargin="0" leftmargin="0" rightmargin="0">

<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="1">
 <tr>
  <td width="100%" height="75">div top</td>
 </tr>
 <tr>
  <td width="100%" height="100%" align="center" valign="middle">
   <table width="550" height="325" cellspacing="0" cellpadding="0" border="1">
    <tr>
     <td>hier dus de content</td>
    </tr>
   </table>
  </td>
 </tr>
 <tr>
  <td width="100%" height="75">div bottom</td>
 </tr>
</table>

</body>
</html>

Hican.net | IT Blog about all that is interesting.

woensdag 17 maart 2004 16:31

Acties:

Schonhose

Retro Icoon

Probeer eens met de position te spelen: volgens mij moet je middelste <div> een position: relative hebben en moet je je header en footer absolute positioneren.

[rml][ xhtml/css]Een header en een footer div auto resize main div[/rml]

[ Voor 40% gewijzigd door Schonhose op 17-03-2004 16:33 ]

"The thing under my bed waiting to grab my ankle isn't real. I know that, and I also know that if I'm careful to keep my foot under the covers, it will never be able to grab my ankle." - Stephen King
Quinta: 3 januari 2005