[css] div's positioneren

[pietje63]

Mede na colspan firefox probleem ben ik het template voor een nieuwe site om gaan zetten van "tabellen" naar "div's". Na een beetje proberen en toekijken valt het best mee, heb ik al een stuk overzichtelijke code en nemen alle browser WEL de goede breedte aan als ik daar om vraag :-).

Maar.. heb nog wat rare probleempjes, waarmee ik hoop dat jullie mij (toch als beginner met css, ben meer een php'er maar moet nu een keer een complete site maken) kunnen helpen.

Het gaat om http://www.eloquent.nl/mambo452/ (http://www.reall.de/eloquent/Webdesign1d.jpg 300KB, idee van hoe het moet gaan worden)

Heel kort de template:

PHP:

<div id="container">
  <div id="top">
    <!-- leeg top gedeelte-->
  </div>
  <div id="banner">
    [img]"/mambo452/images/logo_eloquent.jpg">
[/img]
  <div id="menu">
    <?php mosLoadModules('top'); ?>
  </div>
  <div id="links">
    <?php mosLoadModules('left'); ?>
  </div>
  <div id="main">
    <div "articles">
      <?php mosLoadModules('articles'); ?>
    </div>
    <div id="user1">
      <?php mosLoadModules('user1'); ?>
    </div>
    <div id="user2">
      <?php mosLoadModules('user2'); ?>
    </div>
    <div id="user3">
      <?php mosLoadModules('user3'); ?>
    </div>
    <div id="user4">
      <?php mosLoadModules('user4'); ?>
    </div>
  </div>
  <div id="agenda">
    <?php mosLoadModules('right'); ?>
  </div>
  <div id="footer">
    <?php include_once("includes/footer.php"); ?>
  </div>
</div> <!-- de container div -->

en de bijbehorende css

Cascading Stylesheet:

/* totaal nieuwe aanpak: we gaan met div's werken..... */
#container
{
width: 787px;
margin-left:auto;
margin-right:auto;
position: relative;
border: 2px solid;
height: 100%;
}

#top
{
width: 787px;
height: 10px;
position: relative;
left: 0px;
top: 5px;
background-color: #ffffff;
}

#banner     /* let op postie van menu absoluut via admin */
{
width: 787px;
height: 50px
position: relative;
left: 0px;
top: 15px;
background-color: #ffffff;
text-align: left;
}

#menu
{
width: 582px;
height: 25px
position: relative;
left: 0px;
top: 65px;
background-color #123456;
}

#links
{
width: 180px;
position: absolute;
left: 0px;
top: 90px;
}

#main
{
width: 397px;
position: absolute;
left: 185px;
top: 90px;
}

#agenda
{
width: 200px;
height: 100%-65;
position: absolute;
left: 587px;
top: 60px;
}

#footer
{
width: 787px;
bottom: 5px;
margin-left:auto;
margin-right:auto;
}

/* einde definitie div's */

Het probleem zit hem er in dat ik de footer niet op de goede plaats kan krijgen, ik wil deze graag helemaal onderaan hebben staan.
Ik heb verschillende dingen geprobeerd zoals deze laatste dif onder de "container" maar dat hielp ook niet (tenzij ik hem ONDER de container plaatsen en de position op absolute zet, maar dan werkt mijn 'trucje' met de margins om het in het midden te krijgen niet meer).

Als debugging heb ik nu een dikke border om de container heen en je ziet dat deze eigenlijk al na het menu ophoudt.. Hoe kan dit, deze div houdt toch echt pas na de agenda (events) op?

offtopic:
als iemand mij heel snel kan vertellen hoe het komt dat het fade out effect van het menu wel in firefox/opera maar niet in ie werkt, ondanks dat ik hem een extra hoge z-index heb gegeven scheelt mij dat ook een hoop puzzelen, en misschien morgen een topic
--> opgelost gisteravond in bed kwam de heldere ingeving om deze pas later op te roepen en dan wordt het ook door ie goed weergegeven

[ Voor 13% gewijzigd door pietje63 op 24-04-2005 11:04 ]

[Verwijderd]

Als je alles absoluut gaat positioneren kun je niet meer gebruik maken van de (op zich vrij goede) algoritmes die de browser gebruikt om elementen in de normale "flow" te zetten. Je kunt dan niet zonder scripting aangeven dat een element onder een ander absoluut gepositioneerd moet komen.

Je kunt beter wat elementen laten floaten, zodat je met clear: both; de footer onder alle floatende elementen kunt zetten.

[pietje63]

Dit heeft me inderdaad een stuk verder geholpen. Helaas loopt alles een beetje in het 100 als ik alles relative maak, maar ik heb hem nu al zover dat hij altijd onder de agenda komt.

* pietje63 gaat zich nu wat verder verdiepen in min height e.d.

[bolleh]

pietje63 schreef op zondag 24 april 2005 @ 13:56:
Dit heeft me inderdaad een stuk verder geholpen. Helaas loopt alles een beetje in het 100 als ik alles relative maak, maar ik heb hem nu al zover dat hij altijd onder de agenda komt.

* pietje63 gaat zich nu wat verder verdiepen in min height e.d.

probeer eens met "float: left;" aan de gang te gaan ipv "position: relative;"

overigens ziet je testwebsite er in safari er niet uit
positionering klopt van geen kanten vergeleken met de jpg. divjes over elkaar heen, een pagina van enkele duizenden pixels hoog etc

in de firefox mac versie ziet het er wel goed uit

<edit>
ik vind het trouwens geinig dat je zon grote website om gaat zetten naar divs, maar ga je de php scripten ook aanpassen? want daardoor staan er alsnog een hoop tables die niet nodig zijn, zou een beetje zonde van al het werk zijn

[ Voor 26% gewijzigd door bolleh op 25-04-2005 13:08 ]

[pietje63]

Wat er in safari verkeerd gaat moet ik nog maar een keer nakijken dan, heb zelf geen mac, maar een vriend van mij wel. Ik wordt nu al gek van de verschillen tussen internet explorer, firefox, opera.. van die kleine dingen die mij uren kosten (firefox opeens ruimte tussen 2 div'jes (search en loginbox) internet explorer opeens ruimte rondom de agenda tabs)

En over het "geinig zijn" van het aanpassen: het is een beetje nood-gedwongen omdat ik het met tables niet goed kreeg, er helemaal gek van werd enzo en dacht ach laat ik het dan maar goed doen. En wat vind je zonde als ik alle verschillende scripts enzo wel of niet ga omzetten? Ik was dat niet van plan, alleen op plaatsen waar er problemen optreden. De website moet begin juni af zijn dus erg veel tijd heb ik niet over.

Het probleem van de footer is er nog steeds echter alleen in internet explorer. Volgens internet explorer is het laagste punt van de "container" div gelijk aan het laagste punt van een relative div er binnen. Het relatief maken van de linker div lukt mij niet (heeft mede te maken met problemen rondom de menu div, die ik alleen op kon lossen door deze later op te roepen). Iemand die hier misschien een leuk trucje voor weet?