Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

[css] Hoogte van div regelen

9 antwoorden
  • Hoi, Ik ben bezig met een nieuwe site waar ik de layout van frames, maar de eigenschappen van een enkele pagina wil gebruiken. Ik wil nu eens geen (i)frames gebruiken omdat dat verschillende pagina's worden en waardoor ik niet makkelijk kan linken en kan vernieuwen. Het werkt niet lekker met zoekmachines, mensen kunnen de site zonder het menu kijken, enz enz ([url=http://www.google.com/search?q=why+not+use+frames][u:04d88ec481]meer[/u:04d88ec481][/url]). Daarom ben ik nu de laatste dagen bezig met het rommelen met CSS frames, waar zowat elke site weer andere methoden gebruikt. Oplossingen als [url=http://www.456bereastreet.com/lab/cssframes/][u:04d88ec481]deze[/u:04d88ec481][/url] waren veel te complex, en daarbij kwam de scrollbar telkens in de problemen zodra ik de breedte van de pagina naar 100% verstelde. [url=http://www.webmasterworld.com/forum83/618.htm][u:04d88ec481]Deze[/u:04d88ec481][/url] code werkte bij mij niet in IE (wel in Mozilla) zodra ik mijn indeling toe ging passen. Ik werk nu [url=http://www.alsacreations.com/articles/frames/][u:04d88ec481]hier[/u:04d88ec481][/url]mee, het stapelen van DIV's dus. Dit werkt crossbrowsing, is verreweg het meest simpel (schone en korte code) en geeft me de mogelijkheid om zowel een header, menu als footer in te stellen. :*) Ok, nu het probleem; [url=http://edit.mosymuis.nl/css_frames.html][u:04d88ec481]hier[/u:04d88ec481][/url] zie je wat ik nu heb en wat er mis is. De middelste DIV zou door moeten lopen tot aan de footer, waar hij stopt en verder gaat door te scrollen. Echter, zodra ik "height: 400px;" weghaal dondert hij naar beneden en is het frame-effect weg. Hem vastzetten met "position: absolute/relative" en "bottom: 30px;" werkt ook niet, want dan schiet hij door naar boven en is hij tevens zijn scrollbalk kwijt. :-? De hoogte opgeven in procenten werkt wel maar dit wil ik niet, omdat ik de header en footer op ga maken met graphics, en deze dus vast moeten liggen op een x aantal pixels. De header en footer op pixels en het middenstuk op procenten kan ook niet, omdat het dan niet uitkomt op verschillende resoluties. De vraag is dus: hoe houd ik het middelste stuk op zijn plek, afhankelijk van de gebruikte resolutie, dus zonder een absoluut aantal pixels op te geven? Ik heb al CSS tuturials als [url=http://www.w3schools.com/css/css_positioning.asp][u:04d88ec481]deze[/u:04d88ec481][/url] en [url=http://www.yourhtmlsource.com/stylesheets/csslayout.html#csspositioning][u:04d88ec481]deze[/u:04d88ec481][/url] doorgewerkt maar kom er niet uit hoe ik dit in mijn opzet oplos. :(
  • Yep, dit is een pittige. Je kunt met margin en padding spelen maar dan is inderdaad zoals je zegt dat hij "doorbreekt" Het vervelende is echter wel dat je constant <br> tags gebruikt, en dat zijn feitelijk ook (block level?) padding elementen http://www.ijsqueen.com/mosy.html Helaas werkt het weghalen van de breaks ook niet..
  • Hoewel het niet de meest ideale oplossing is denk ik dat je met JavaScript een heel eind komt... Geef de div een standaardhoogte met CSS voor de meestgebruikte resolutie, en lees vervolgens met JS de hoogte van het venster uit en pas de hoogte van de div aan. Dit is namelijk idd een probleem dat (nog) niet alleen met CSS is op te lossen, al was het maar vanwege de verschillende box models die IE tov de andere browsers gebruikt. - Bas
  • Kan javascript de effectieve hoogte van een venster opmeten dan? Zoja, dan is het een oplossing. Heb je ook een script of aanwijzing waarmee ik dit kan proberen? :) Van javascript schrijven heb ik geen verstand.
  • [url=http://www.mozilla.org/docs/dom/domref/dom_window_ref.html#1004028]DOM Window Interface[/url] - Bas
  • Hoppa: http://www.howtocreate.co.uk/tutorials/index.php?tut=0&part=16
  • ff offtopic dit maar!! Ik kom jou ook echt overal tegen he mosymuis!!!!! !!! mzzl 8)
  • Ik heb een voorbeeldje gemaakt van wat ik denk dat je wil bereiken: [code:1:96e9e4232c] <html><head><title>Untitled</title> <script type="text/javascript" src="http://www.doxdesk.com/file/software/js/event.js"></script> <script type="text/javascript" src="http://www.doxdesk.com/file/software/js/position.js"></script> <style type="text/css"> body,html{ width:100%; height:100%; margin:0px; padding:0px; //overflow:hidden; } #d1{ width:100%; height:100%; margin:0px; padding:0px; position:relative; } #d2{ position:absolute; top:0px; width:100%; height:100px; background-color:#cc9933; } #d3{ position:absolute; top:100px; bottom:100px; left:0px; right:0px; overflow:auto; } #d4{ position:absolute; bottom:0px; width:100%; height:100px; background-color:#cc9933; } </style> </head> <body> <div id="d1"> <div id="d2"></div> <div id="d3"> Heel veel content<br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br> Heel veel content<br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> Heel veel content<br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> Heel veel content<br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> </div> <div id="d4"></div> </div> </body> </html> [/code:1:96e9e4232c] In Mozilla/Opera is dit een koud kunstje. IE heeft javascript nodig om het goed te laten werken. Voor uitleg zie: http://www.doxdesk.com/software/js/position.html Je hoeft dus geen javascript te schrijven. Het is al geschreven voor je :) Ik ben bang dat er inderdaad geen manieren zijn om IE goed te stylen op de manier zoals jij wil zonder gebruik van javascript.
  • ik zit met exact het zelfde probleem ... nou lees ik overal op internet en in de boeken dat je een div de tags top en bottom mee kiunt geven ... dat zou alles oplossen, maar het werkt niet! hoe kan dat??? weet iemand het antwoord?

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.