[CSS / Divs] 'Windows' maken wil niet lukken. - Softwareontwikkeling

donderdag 13 september 2007 20:45

Acties:

Topicstarter

Intro

Ik zit met de volgende situatie:

een div, met daarin 2 divs;

eentje 100% breed en 20px hoog, (Window title)
de ander 100% breed en 100% hoog. (Window content)
Degene die 100% hoog is, wil ik een stukje leeg laten bovenaan zodat daar de titlebar past.
Verder wil ik een scrollbar kunnen in het venster, onder de titlebar.

Hier een voorbeeldje hoe het moet worden:
Afbeeldingslocatie: http://img503.imageshack.us/img503/376/windowmockupld2.png

Afbeeldingslocatie: http://img503.imageshack.us/img503/376/windowmockupld2.png

Het probleem

Er is geen manier om de 2 divs samen te laten werken zodat ik een windowtje kan produceren zoals hierboven. Zodra ik namelijk de titlediv laat floaten en dan de contentdiv een margin-top van 20px geef, schuift de scrollbar naar beneden zodat het onderste pijltje niet meer zichtbaar is.

Wat ik al geprobeerd heb

Omdat de titlebalk 20px hoog is, heb ik zo'n beetje alle combo's van margin-top, margin-bottom, padding-top en padding-bottom geprobeerd met de waarden -40px -20px, 20px en 40px.
Toch zie ik geen verbetering, vaak krijg ik het zelfde effect, namelijk dat mijn window 20px te groot is. (Firefox 2.0.0.6)

De noodkreet
Wie weet een manier zodat ik dit wel goed kan krijgen?

There is no replacement for displacement!

donderdag 13 september 2007 20:55

Acties:

HyperioN

Bekend probleem, ben het ook al eens tegengekomen.
Ik heb het opgelost met javascript:
http://99procentsap.nl/fixdivheights.php

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl">
<head>
<style>
body {
    margin: 0;
}

#container {
    width: 600px;
    margin: 0px auto 0px auto;
}
#header {
    height: 20px;
    width: 600px;
    background-color: yellow;
    margin: 0;
}
#content {
    width: 600px;
    height: 400px;
    background-color: green;
    overflow: auto;
    margin: 0; 
}

</style>
<script type="text/javascript">
function getWindowHeight(){
  if (navigator.appName=="Netscape")
     {
        var windowHeight = window.innerHeight;
     }
     else if (navigator.appName.indexOf("Microsoft")!=-1)
     {
        var windowHeight = document.documentElement.clientHeight;
     }
     else windowHeight = window.innerHeight;
     return windowHeight;
}

function fixDivHeights() {
    newHeight = getWindowHeight() - 20;
    document.getElementById("content").style.height = newHeight + "px";
}
</script>
</head>
<body onload="fixDivHeights();" onresize="fixDivHeights();">
<div id="container">
    <div id="header"></div>
    <div id="content">
                       <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent nulla justo, condimentum ac, porttitor ornare, ornare in, diam. Donec leo. Integer ultricies consectetuer orci. Vivamus faucibus ante. Praesent tempor gravida ante. Donec vehicula ornare erat. Etiam accumsan urna nec pede rutrum viverra. Mauris convallis, tortor porttitor pulvinar egestas, lorem nibh gravida massa, sit amet suscipit eros tortor eget neque. Donec nisl libero, placerat sit amet, lacinia et, iaculis sed, libero. Sed commodo nulla ut ligula. Sed in dui. Ut tellus. Nulla nisi ipsum, vestibulum eleifend, accumsan ac, tincidunt sit amet, est. In bibendum dui. Sed erat ipsum, tempor nec, iaculis nec, imperdiet vel, metus. Praesent rhoncus. Praesent tempus bibendum sem. Etiam adipiscing dui placerat augue. Fusce urna. Duis mauris pede, semper et, feugiat eget, volutpat vel, sem. </p>
                       <p>Integer interdum faucibus massa. Morbi tortor leo, iaculis in, adipiscing a, cursus sit amet, pede. Etiam hendrerit pharetra nisi. Suspendisse rhoncus. Aliquam eu ante. Pellentesque vulputate ante in tellus. Proin vitae magna. Proin tincidunt eros ac mi placerat dapibus. Fusce ut ipsum sed elit auctor vestibulum. Duis augue sapien, condimentum in, feugiat ac, posuere sit amet, lectus. Suspendisse id ipsum nec velit tempus porttitor. Suspendisse quis sapien. Praesent ultrices, augue malesuada adipiscing laoreet, nibh felis luctus erat, sed ultricies erat dolor a turpis. Sed placerat. Vivamus ac enim ut arcu cursus sollicitudin. Nulla aliquam, magna id convallis adipiscing, mauris mauris nonummy tortor, in malesuada quam velit et sem. Nam bibendum purus tempor urna. Ut a urna ac enim tristique lobortis. Fusce turpis erat, facilisis vitae, consectetuer non, mattis nec, pede. Ut diam dui, mattis a, hendrerit ac, tincidunt nec, sapien. </p>
    </div>
</div>
</body>
</html>

Als iemand een betere oplossing weet, hoor ik deze ook graag.. maar volgens mij kan het niet gemakkelijk met alleen css. Als het geheel overigens niet zo groot moet zijn als het window, dan moet je uiteraard het javascriptje even aanpassen dat 'ie de grootte van een ander object pakt, lijkt me duidelijk.

donderdag 13 september 2007 21:01

Acties:

_eXistenZ_

Topicstarter

Ik wist van een Javascript oplossing maar ik vind et stiekum extreem lelijk

Als iemand wat beters weet, graag idd.

There is no replacement for displacement!

donderdag 13 september 2007 21:46

Acties:

Dr. Donald

en wat nou als je de grootte van het venster niet laat bepalen door de container, maar door de content?

Zoiets:

Cascading Stylesheet:

#container{
    position: absolute;
    top: 30px;
    left: 100px;
    border: 2px solid black;
    overflow: hidden;
}

#container #title{
    display: block;
    height: 20px;
    background: #ffccaa;
    border-bottom: 1px solid black;
}

#container #content{
    display: block;
    height: 200px;
    width: 250px;
    margin: 0px 0 0 0;
    padding-top: 20px;
    overflow: auto;
}

donderdag 13 september 2007 21:53

Acties:

HyperioN

Dr. Donald schreef op donderdag 13 september 2007 @ 21:46:
en wat nou als je de grootte van het venster niet laat bepalen door de container, maar door de content?

Zoiets:

Cascading Stylesheet:

#container{
    position: absolute;
    top: 30px;
    left: 100px;
    border: 2px solid black;
    overflow: hidden;
}

#container #title{
    display: block;
    height: 20px;
    background: #ffccaa;
    border-bottom: 1px solid black;
}

#container #content{
    display: block;
    height: 200px;
    width: 250px;
    margin: 0px 0 0 0;
    padding-top: 20px;
    overflow: auto;
}

Je zet nu de hoogte van #content gewoon vast op 200px. Dat is niet wat we vragen.. We willen juist dat die div tot onderaan het window reikt.

donderdag 13 september 2007 21:53

Acties:

NetForce1

(inspiratie == 0) -> true

Kan wel met four sided css positioning, maar dat werkt niet in ie, daar zul je dan met een js oplossing moeten komen.
Voorbeeldje (aangepaste versie van Dr. Donald)

Cascading Stylesheet:

#container{
    position: absolute;
    top: 30px;
    left: 100px;
    border: 2px solid black;
    overflow: hidden;
}

#container #title{
    position: absolute;
    top: 0px;
    bottom: 20px;
    left: 0px;
    right: 0px;
    background: #ffccaa;
    border-bottom: 1px solid black;
}

#container #content{
    position: absolute;
    top: 20px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    overflow: auto;
}

De wereld ligt aan je voeten. Je moet alleen diep genoeg willen bukken...
"Wie geen fouten maakt maakt meestal niets!"

zondag 16 september 2007 16:08

Acties:

_eXistenZ_

Topicstarter

Hij is inmiddels opgelost, ik heb kort samengevat de titlebar een positon:relative top:-20px meegegeven, zodat de inhoud het hele hok voor zichzelf heeft.

[ Voor 5% gewijzigd door _eXistenZ_ op 16-09-2007 16:08 ]

There is no replacement for displacement!