login  Naam:   Wachtwoord: 
Registreer je!
 Forum

positioneren op de op de bodem (Opgelost)

Offline gijsgg - 05/11/2008 23:24
Avatar van gijsggLid Ik zit met een probleem, om dit uit te leggen heb ik een voorbeeldje aangemaakt op: http://gt-media.nl/gijs/help/

in het midden gecentreerd een tekstvlak met aan de linker kant een blokje aan de bodem vastgezet en rechts een blokje aan de top. Als de pagina niet langer is dan het beeld gaat dit goed maar zodra er gescrolled moet worden zit het rechter blokje niet meer aan de bodem maar ergens halverwege...

hoe los ik dit op?? dit is de code:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. body, html {
  8.   margin: 0px;
  9.   height: 100%;
  10. }
  11.  
  12. html {
  13.   overflow: -moz-scrollbars-vertical;
  14.   overflow-y: scroll;
  15. }
  16. #een {
  17.   min-height: 100%;
  18.   height:auto !important;
  19.   height:100%;
  20.   margin: auto; 
  21.   width: 500px;
  22.   position: relative;
  23. }
  24. #twee {
  25.   left: 0px;
  26.   bottom: 0px;
  27.   background-color:#00CC33;
  28.   width:100px;
  29.   height:100px;
  30.   position:absolute;
  31. }
  32. #drie {
  33.   left: 100px;
  34.   width: 300px;
  35.   min-height: 100%;
  36.   height:auto !important;
  37.   height:100%;
  38.   margin: auto; 
  39.   background-color:#996633;
  40.   position: absolute;
  41. }
  42. #vier {
  43.   left: 400px;
  44.   height: 100px;
  45.   width: 100px;
  46.   background-color:#FF0000;
  47.   position: absolute;
  48. }
  50. </head>
  51.  
  53. <div id="een">
  54.   <div id="twee">twee</div>
  55.   <div id="drie">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras tortor elit, semper id, laoreet at, consequat ac, nunc. Praesent accumsan auctor neque. Aenean a magna nec arcu blandit ullamcorper. Mauris mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec varius vulputate felis. Phasellus nisl. Ut eu magna quis turpis placerat posuere. Nullam quis nulla. Etiam tortor nisi, bibendum quis, pellentesque ut, adipiscing in, eros. Donec vitae elit. Integer tincidunt vestibulum orci. Vivamus eget ligula a augue cursus rhoncus. Vestibulum lacus metus, ullamcorper non, pretium ut, imperdiet vel, mauris. Sed venenatis, erat vitae tempus dignissim, orci felis pretium nunc, ut varius est odio quis augue. Nulla rhoncus sem vel ipsum. Nam vulputate nisi vel sapien. Duis eu tellus a ipsum sollicitudin tincidunt. Praesent velit. Nunc consequat cursus velit. Nunc eros felis, auctor sed, venenatis quis, tristique et, arcu. Nunc turpis nisl, ornare id, blandit imperdiet, bibendum lobortis, leo. Vestibulum dapibus tincidunt purus. Fusce neque. In porta accumsan purus. Aliquam egestas purus sed urna. Mauris ultrices nisl a mi. Quisque turpis. Curabitur nunc velit, vehicula ac, lacinia in, viverra ac, dui. Aliquam erat volutpat. Curabitur vitae magna. Suspendisse potenti. Nullam dictum ligula ut est. Sed cursus. Morbi et nunc. Cras quis felis vitae est faucibus tincidunt. Praesent augue lorem, consectetuer sed, congue vel, mollis eu, metus. Sed porttitor sagittis ligula. Suspendisse tortor. Pellentesque ut magna et erat mattis luctus. Nam augue tortor, aliquet quis, vestibulum non, euismod tempor, eros. Quisque aliquet, massa quis convallis mollis, est arcu mollis nisi, placerat tristique leo eros a erat. Mauris ac pede et quam posuere euismod. Ut luctus imperdiet orci. Nulla facilisi. Proin eros. Morbi tincidunt semper risus. Maecenas at velit in est faucibus euismod. Quisque molestie nibh non elit. Cras condimentum mattis mauris. Proin luctus neque eu ligula. Aliquam erat volutpat. Nullam dignissim consequat risus. Praesent libero turpis, eleifend vitae, viverra non, fringilla a, mauris. Suspendisse auctor auctor metus. Phasellus at nulla ut libero accumsan ultricies. Fusce porta accumsan felis. In nec pede. Nam iaculis pede sit amet erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque cursus tincidunt massa. Nunc iaculis tempus mauris. Etiam faucibus mi sit amet eros suscipit tempus. Duis eros. Quisque at justo eu ante rutrum eleifend. Donec sodales elit et mauris. Cras mollis purus sit amet dui. Pellentesque justo. Curabitur orci neque, interdum sed, suscipit eget, accumsan eget, tortor. Vestibulum commodo imperdiet enim. Mauris bibendum dui ac odio. Proin suscipit orci blandit leo. Proin volutpat massa a nibh. Maecenas id ante. Morbi leo. Cras pharetra. Integer ornare augue nec neque. Etiam sit amet libero. Aliquam id odio eu mi lacinia rutrum. Proin ullamcorper dui cursus mi. Cras non sapien. Nullam in tellus. Mauris interdum. In hac habitasse platea dictumst. Donec lacinia rutrum diam. Ut aliquet purus ac ligula. Maecenas at odio ac sem viverra ornare. Suspendisse dapibus tellus fermentum tellus. Morbi et nunc quis est interdum fringilla. Duis euismod velit sit amet magna tristique blandit. Sed eget est eu elit interdum porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec egestas porttitor nibh.</div>
  56.   <div id="vier">vier</div>
  57. </div>
  58. </body>
  59. </html>

2 antwoorden

Gesponsorde links
Offline rredspike1 - 05/11/2008 23:34
Avatar van rredspike1 Lid Je bedoelt het linker blokje zit niet meer aan de grond, maar ergens aan de top halverwege.
Offline gijsgg - 05/11/2008 23:38 (laatste wijziging 05/11/2008 23:51)
Avatar van gijsgg Lid #twee {
background-color:#00CC33;
bottom:0;
float:right;
height:100px;
position:fixed;
width:100px;
}

het is gelukt thnx anyway
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.199s