[CSS] Div uitlijning

[Verwijderd]

Ik heb dit in mijn stylesheet staan:

Cascading Stylesheet:

div.pageBody {
    width                   :   100%; 
    height                  :   100%;
    left                    :   0px; 
    top                     :   0px; 
    font-family             :   verdana,arial,helvetica,sans-serif; 
    overflow                :   auto; 
    border                  :   1px solid #999999; 
    padding                 :   0px; 
    font-size               :   11px; 
    background-color        :   #ffffff; 
    layer-background-color  :   #ffffff;
    background-image        :   url('../gfx/watermark.gif');
    background-repeat       :   no-repeat;
    background-position     :   bottom right;
    background-attachment   :   fixed; 
}

dit staat in een x aantal geneste tabellen, waarvan alle td's de width mee geven aan de onderliggende tabel. In iedere aangemaakte tabel set ik de width op 100%.

Op de agenda compare pagina waar ik mee bezig ben is het de bedoeling dat er een verticale scrollbalk wordt getoond om langs de x aantal agenda's te scrollen.
Er wordt wel een verticale scrollbalk getoond, maar die scrolled maar 1cm ?!

wat zie ik over het hoofd?

[Johnny]

Verwijderd schreef op 28 October 2003 @ 16:24:
wat zie ik over het hoofd?

Het geven van een link naar de desbetreffende HTML code.

[Blauw]

left: 0px?

[Willem]

position?

[Clay]

height:100%; is honderd procent van de parent, de standaard waarde is "auto", dat kan de te korte scrollbar misschien verklaren. Paas anders eens een url. m'n glazen bol doet het denk ik niet zo goed vandaag.
Background kan je trouwens in 1 "background" propertie met spatie-separated waardes zetten, en layer-background-color is netscape 4 only. kan me niet voorstellen dat je dat wil ondersteunen.

[Verwijderd]

[mierenneukmodus]
#999 ipv #999999
#fff ipv #ffffff
[/mierenneukmodus]

weer wat bespaart

[creative8500]

Verwijderd schreef op 28 October 2003 @ 17:07:
[mierenneukmodus]
#999 ipv #999999
#fff ipv #ffffff
[/mierenneukmodus]

weer wat bespaart

Dan mag je die background-properties ook wel samenvoegen¹ natuurklijk, dat geeft een significanter verschil natuurlijk.

Aan de topicstarter: zou je een link willen geven naar een desbetreffende pagina, dan zul je merken dat de bereidheid om hierin te verdiepen direct stijgt.

_{1) CSS2 specification: Background-properties - 'background'}

[Verwijderd]

creative8500 schreef op 28 October 2003 @ 18:06:
[...]

Dan mag je die background-properties ook wel samenvoegen¹ natuurklijk, dat geeft een significanter verschil natuurlijk.

zie post van clay

[Verwijderd]

Het is natuurlijk van belang om even te zien wat je precies aan het doen bent (door middel van een URL) voordat we je echt kunnen helpen, maar ik zou proberen het gebruik van "overflow" te vermijden. Niet alle browsers ondersteunen deze functie namelijk!

[Verwijderd]

Thnx voor de vele reacties!

Het is een beetje lastig om het online te zetten, alles staat namelijk hier locaal op mijn pc en ik heb geen internet ip

De pagina wordt grotendeels gegenereerd, dus de html copy pasten is ook niet erg handig lijkt me...

hoe kan ik dit oplossen?

[paragon]

Je kan vast wel ergens een html file kwijt toch en als alles gegenreerd wordt genereer je het lokaal en sla je de source op als html deze zet je dan ergen op een server.

[Verwijderd]

Ik heb de boel even kaal gestript en online gezet

de frameset
de file
de css
(een van, deze bevat de opmaak voor de div)

kunnen jullie hier iets mee?

[disjfa]

wij kennen je makkelijk doorsturen naar www.glish.com/css

en haal die width:100%; er eens uit te halen en kijk dan nog eens een keer

inopera werkt de hoogte btw niet. dan zou je in je body css ok al de hoogte moeten meegeven

[ Voor 26% gewijzigd door disjfa op 29-10-2003 14:21 ]

[Verwijderd]

als ik widht=100% weg haal in de css gebeurt er niets?

ik zal die site eens doorspitten

[disjfa]

waarom heb je trouwen 12 tabellen inelkaar gezet zonder dat ze een functie hebben

probeer dan eerst gewoon dis div en die css erbij en dan zou je al een heel ander effect hebben nl en als je er dan een titeltje boven wilt zet je er gewoon een divje boven.......

code:

<body>
<div> titeltje</div>
<div class="pageBody">
a^256
</div>
</body>

en dan verder niets....

_{en dan vanuit daar doorwerken}

[ Voor 14% gewijzigd door disjfa op 29-10-2003 14:33 ]

[Verwijderd]

waarom heb je trouwen 12 tabellen inelkaar gezet zonder dat ze een functie hebben

uhmmm... omdat ik tot kort geleden dacht dat div's enge dingen waren
ik wil de tabel structuur nog even handhaven eigenlijk... ben die div's nog niet helemaal meester & deze page is zo goed als af

[Verwijderd]

probeer dan eerst gewoon dis div en die css erbij en dan zou je al een heel ander effect hebben nl en als je er dan een titeltje boven wilt zet je er gewoon een divje boven

en nu de bovenste div op heigth:25px zetten en de tekst centeren...
een div heeft gewoon niet eens een vertical alignment! Moet ik er alsnog een tabel in zetten.

[Verwijderd]

Cascading Stylesheet:

div.outerdiv {
    width                   :   100%;
    height                  :   100%;
    border                  :   none; 
    overflow                :   hidden;
    padding                 :   5px;
}
div.borderdiv {
    width                   :   100%;
    height                  :   100%;
    border                  :   1px solid #999999; 
    overflow                :   hidden;
    padding                 :   0px;
}
div.pageTitle {
    width                   :   100%;
    height                  :   25px;
    border-bottom           :   1px solid #999999; 
    background-color        :   #97A5C1; 
    layer-background-color  :   #97A5C1;
    overflow                :   hidden;
    font-size               :   14px; 
    font-family             :   verdana,arial,helvetica,sans-serif; 
    color                   :   #ffffff;
    font-weight             :   bold; 
    margin                  :   0px;  
}
span.center{
    border                  :   1px solid red;
    height                  :   100%;
    width                   :   100%;
    vertical-align          :   middle;
    align                   :   center;
}

HTML:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="inc.test-styles.css">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <div class="outerdiv">
        <div class="borderdiv">
            <div class="pageTitle">
                <span class="center" title="Page title">Centered page title</span>
            </div>
        </div>
    </div>
</body>
</html>

waarom is de pageTitle niet verticaal gecentreerd?!
echt lastig die div tags...

*UPDATE* 30-10-2003
Ik krijg het nog steeds niet voor elkaar
ik heb de div & span declaratie aangepast
zie hier de code in actie.

vragen:
- waarom is de rode border om de span niet de volledige grootte van de div?
- waarom werkt de valign niet? hij is nu toch echt groot genoeg om te alignen...

[ Voor 43% gewijzigd door Verwijderd op 30-10-2003 09:48 ]

[creative8500]

Verwijderd schreef op 29 oktober 2003 @ 17:12:
waarom is de pageTitle niet verticaal gecentreerd?!
echt lastig die div tags...

div-elementen zijn echt makkelijk in gebruik hoor, maar je moet ze natuurlijk alleen gebruiken waar nodig.

Je hebt goed gezien dat vertical-align niet op div's toepasbaar is:

quote: http://www.w3.org/TR/REC-...ml#propdef-vertical-align

'vertical-align':
This property affects the vertical positioning inside a line box

De textNode binnen de span zal dus aan de onderkant gezet worden. Maar nu is de vraag: "waar is deze onderkant?" Heb je er wel voor gezorgd dat de span de volledige hoogte van zijn parent beslaat? "Nee!", en daar moet je dus nu voor zorgen.

[ Voor 8% gewijzigd door creative8500 op 30-10-2003 08:31 ]

[Verwijderd]

Heb je er wel voor gezorgd dat de span de volledige hoogte van zijn parent beslaat? "Nee!",

Nu wel gedaan, maar ik krijg het nog steeds niet goed.
Heb het mijn code even online gezet, zie mijn vorige post voor de link

[crisp]

een span is een inline element en kan je dus geen hoogte en breedte geven; hij is enkel net zo hoog en breed als de content ervan....

[Verwijderd]

een span is een inline element en kan je dus geen hoogte en breedte geven; hij is enkel net zo hoog en breed als de content ervan....

dat klopt niet volgens mij, kijk maar naar de rode border in het voorbeeld wat ik online heb gezet...
die is echt 100% en de content niet...

nogmaals het linkje

[ Voor 13% gewijzigd door Verwijderd op 30-10-2003 10:03 ]

[crisp]

Verwijderd schreef op 30 oktober 2003 @ 09:58:
[...]

dat klopt niet volgens mij, kijk maar naar de rode border in het voorbeeld wat ik online heb gezet...
die is echt 100% en de content niet...

nogmaals het linkje

In IE wel ja, maar we weten ondertussen allemaal wel dat IE het niet zo nauw neemt met de specificaties...

bekijk onderstaande eens in IE, en dan in Mozilla:

test

[ Voor 12% gewijzigd door crisp op 30-10-2003 10:11 ]

[Verwijderd]

okee ik ben nu alleen nog aan het testen in IE, ik zal mozilla zo eens installeren.

Crips -> heb jij enig idee hoe ik de tekst in de div kan centeren, zodat het werkt voor alle browsers? (als het uberhaupt kan, want ik krijg het niet voor elkaar)

IEUW
In mozilla ziet het er uberhaupt niet uit!
okee thats it! ik hou het bij tabellen for now!
hoop geklooi & werkt het niet eens

[ Voor 24% gewijzigd door Verwijderd op 30-10-2003 10:25 ]

[crisp]

dit werkt goed in Mozilla, helaas kent IE de display:table-cell niet

PHP:

<div style="display:table-cell;width:200px;height:200px;border:1px solid red;vertical-align:middle">
test
</div>

als je te centreren content een vaste hoogte heeft zou je het zo kunnen doen:

PHP:

<div style="position:relative;width:200px;height:200px;border:1px solid red">
  <div style="position:absolute;height:20px;top:50%;margin-top:-10px">
    test
  </div>
</div>

[ Voor 3% gewijzigd door crisp op 30-10-2003 10:25 ]

[Verwijderd]

mozilla vat de width=100% geheel anders op dan IE?!
width=100% valt bij mozilla buiten het scherm, hoe kan dit? Doe ik iets fout, of is er niets aan te doen?

ik vind een geneste div structuur veel overzichtelijker dan 5 genestte tabellen, maar ik krijg het niet netjes voor mozilla.

als ik harde waardes ga opgeven voor de width werkt het wel, maar wil het resolutie onafhankelijk maken.

[crisp]

een procentuele width is relatief tov de breedte van het containing block-level element.
de body of een block-level element met een position:relative of position:absolute wordt gezien als een containing blocklevel, een table-cell niet (althans, niet in Mozilla wel in IE)

[ Voor 6% gewijzigd door crisp op 30-10-2003 10:54 ]

[Verwijderd]

k, maar wat ik niet snap is het volgende:

Cascading Stylesheet:

body.body{
    margin                  :   0px;
    position                :   absolute;
    width                   :   100%;
    height                  :   100%;
}
div.outerdiv {
    height                  :   100%;
    border                  :   none; 
    overflow                :   auto;
    padding                 :   5px;
}
div.borderdiv {
    height                  :   100%;
    border                  :   1px solid #999999; 
    overflow                :   auto;
    padding                 :   0px;
}

in mijn (denk) wereld bepaald de body nu de height, die is 100% en dus de hele "zichtbare" pagina.
De div's die in deze pagina zitten zijn nooit breder & hoger dan bepaald in de body. ( bij gebruik van procentuele width&height)

nu is de breedte netjes 100% die zet ik in de body en laat ik voor nu even.
maar de height 100% drukt in mozilla de border dwars door de height=100% bepaald in de body...

Volgens mij mis ik het cruciale stukje inzicht waarom dit gebeurt. Het heeft vast een logische rede, maar ik zie het niet!

plz enlighten me!

[crisp]

box-model verschillen

PHP:

<html>
<head>
<title>test</title>
<style type="text/css">

body,html {
  margin: 0px;
  padding: 0px;
  height: 100%;
  overflow: auto;
}

#divje {
  width: 100%;
  height: 100%;
  border: 10px solid red;
  padding: 10px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

</style>
<body>
<div id="divje">blaat</div>
</body>
</html>

[Verwijderd]

omg dat werkt!
wat is de border-box?
op w3schools kennen ze het niet
heb je een linkje naar een tutorial?

[crisp]

Verwijderd schreef op 30 oktober 2003 @ 11:35:
omg dat werkt!
wat is de border-box?
op w3schools kennen ze het niet
heb je een linkje naar een tutorial?

http://www.xs4all.nl/~ppk/css2tests/box.html (op cancel drukken bij de alert)

[Clay]

Boxmodel problemen kan je ook omzeilen door gewoon geen padding margin of border te gebruiken op elementen die een (belangrijke) width of height hebben, en ze alleen te gebruiken op elementen die dan dus geen width of height hebben.
Block-level elementen rekken toch wel uit naar alle beschikbare breedte. Een container een width geven is dan genoeg om er geen hinder van te ondervinden bij geneste elementen.

[Verwijderd]

Personally I find W3C's box model completely counter-intuitive and illogical, and I feel that this is once again an area where W3C is specifying very complicated rules for the sake of specifying very complicated rules.

/me agrees!

wat een onzin zeg, dit moet je ook maar weten!

Het werkt nu wel voor IE & Mozilla echt tegek!
thnx Crisp!

nu verder bouwen!

[crisp]

Clay schreef op 30 oktober 2003 @ 12:16:
Boxmodel problemen kan je ook omzeilen door gewoon geen padding margin of border te gebruiken op elementen die een (belangrijke) width of height hebben, en ze alleen te gebruiken op elementen die dan dus geen width of height hebben.
Block-level elementen rekken toch wel uit naar alle beschikbare breedte. Een container een width geven is dan genoeg om er geen hinder van te ondervinden bij geneste elementen.

In de breedte is dat inderdaad geen probleem, in de hoogte helaas wel...

[Verwijderd]

ik heb alweer een probleem met de heights gevonden...

ik wil graag de scrollbalk tussen de page title en de borders plaatsen.
Ik heb de height op 100% gezet, maar hij houdt geen rekening met de overige aanwezige elementen... ??

Dus ik zet in de border div 2 andere divs: 1 title (height 25px) en 1 scrollbar (height=100%)

de scrollbar div neemt de height=100% zeer goed op, alleen komt het onderste gedeelte van de scrollbalk nu 25 pixels buiten het venster te liggen

kan ik aangeven dat hij de bovenliggende items mee calculeerd in zijn 100% ?

[creative8500]

Kun je niet "span { padding-top: ...px; }'' gebruiken om hem onderaan de div te krijgen?

Toevoeging: wellicht doe je inspiratie op bij het bezoeken van Kaliber10000.

[ Voor 46% gewijzigd door creative8500 op 30-10-2003 13:11 ]

[Clay]

crisp schreef op 30 oktober 2003 @ 12:32:
[...]

In de breedte is dat inderdaad geen probleem, in de hoogte helaas wel...

Dat klopt idd
De enige troost is dat het in de hoogte een stuk minder boeiend is, omdat de algemene flow toch wel van boven naar beneden loopt.

[Verwijderd]

Cascading Stylesheet:

div.subnav {
    height                  :   3%;
    width                   :   100%;
    border                  :   none; 
    overflow                :   hidden;
    position                :   static;
    border-bottom           :   1px solid #eeeeee;
}

div.outerdiv {
    height                  :   97%;
    width                   :   100%;
    border                  :   none; 
    overflow                :   hidden;
    padding                 :   5px;
    position                :   static;
}

Hoe kan ik dit zo omzetten dat ik de subNav div een fixed height van 15px geef en de outerdiv een variable height van 100% (zodat hij altijd goed aansluit op de subnav & onderkant van het scherm)

een procentuele width is relatief tov de breedte van het containing block-level element.
de body of een block-level element met een position:relative of position:absolute wordt gezien als een containing blocklevel, een table-cell niet (althans, niet in Mozilla wel in IE)

als ik er een tabelletje omheen zet werkt het inderdaad wel voor IE maar niet voor Mozilla...
is er iets van een "koppel tag" die wordt gezien als containing blocklevel EN zich aan een tabel houdt? of natuurlijk een manier om de fixed height van de subnav mee te nemen in de height van de outerdiv, zodat deze evengoed 100% beslaat.

[disjfa]

als ik jou was zou ik er data in zetten zodat het de div gevuld is. zoals al een paar keer gezecht is de breedte goed te managen met css maar de hoogte daarintegen (iig variabel per schermgrootte) niet. vooral als je met % en px gaat werken kom je snel in de problemen als de schermgroottes veranderen.

en ik neem niet aan dat je een lege div op je site wilt hebben

wat je overigens dus wel kan doen is een minimum hoogte die bijvoorbeeld vanaf een schermresolutie van 800 * 600 mooi in je scherm zou staan.

[Verwijderd]

gezecht is de breedte goed te managen met css maar de hoogte daarintegen (iig variabel per schermgrootte) niet.

dan komt het er dus gewoon keihard op neer dat div's niet geschikt zijn voor het vormgeven van een pagina. Tenminste zolang je hem niet vast zet op een bepaalde resolutie.

/me baalt...

ik heb het nu van div's toch niet helemaal goed begrepen denk ik
erg jammer het leek zo mooi

[disjfa]

dan komt het er dus gewoon keihard op neer dat div's niet geschikt zijn voor het vormgeven van een pagina.

juist wel.

als jij een table bouwd met een vaste hoogte (zeg even 100%) en je zet er meer data in dan dat er visueel in kan dan zal je table groter worden en dus word je pagina groter. met div`s zou je dit kunnen voorkomen mbv overflow. waardoor divs juist beter zijn om mee vorm te geven juist omdat je het dan pixelprecies kan instellen hoe je pagina eruit ziet.

met tables zou je 99% van de keren toch ergens iets zien resizen oid. zoals ik al zei kan je beter die main div van jou een vaste waarde geven (zeg height:400px;) en die resized dan even hard mee als je er data in zet als wat de table zou doen waarmee je werkte (tenzei je er natuurlijk een overflow in zet )

mijn advies blijft. een site is geen site zinder data op de pagina. de hoogte komt vanzelf wel

_{en clay legt t natuurlijk weer veel mooier uit}

[ Voor 4% gewijzigd door disjfa op 31-10-2003 10:47 ]

[Clay]

dan komt het er dus gewoon keihard op neer dat div's niet geschikt zijn voor het vormgeven van een pagina. Tenminste zolang je hem niet vast zet op een bepaalde resolutie.

nee het komt erop neer dat je anders moet denken in xhtml en css dan in html4 en tables. En dat kan ff duren voordat je helemaal in de vingers hebt. Het suffe is dat het net volstaat met ref's die uitleggen wat welke properties enzo doen, maar een simpele "en zo kan je ermee htmllen" is eigenlijk nergens te vinden.

Waar je met tables alles uitrekt over je hele scherm kan je een pagina met div's en css de flow laten bepalen door de verschillende inline en block elementen. Instellen hoogtes heb je amper nodig omdat een tactisch geplaatste container met een background alles al oplost. display:block rekt vanzelf in de breedte, dus dat hoef je ook niet te controleren etc.

Ik dacht ook dat er in de faq een onderdeel over zou komen...
* Clay wacht iig in spanning daarop

[Verwijderd]

Het suffe is dat het net volstaat met ref's die uitleggen wat welke properties enzo doen, maar een simpele "en zo kan je ermee htmllen" is eigenlijk nergens te vinden.

/me agrees!

ik hoor iedereen zeggen dat het een nieuwe manier van denken is, ik heb idd van alles gevonden over alle properties, maar ik kan er niet mee uit de voeten.

ik heb niemand in de buurt met ervaring die ff naast me kan zitten en me ff de logica in m'n kop stampt en stap voor stap uitlegt hoe die andere gedachte gang dan werkt.

/me stuntelt verder ....

[disjfa]

Verwijderd schreef op 31 oktober 2003 @ 11:07:
[...]
/me stuntelt verder ....

das ook helemaal niet erg bij mij is t er ook hardleers ingeschopt

klik gewoon op veel links hier en kijk en probeer te begrijpen wat het allemaal doet een van de betere kwa heel overzichtelijke denkwijze over divjes blijft voor mij www.glish.com/css

[Verwijderd]

PHP:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="../inc/inc.todo-styles.css">
    <script language="javascript">
        function checkRes(){
            if (navigator.appName=='Microsoft Internet Explorer'){
                var IE_Width = document.body.clientWidth;
                var IE_Height = document.body.clientHeight;
                setRes( IE_Height );
            }else{
                if (navigator.appName=='Netscape'){
                    var NN_Width = window.innerWidth;
                    var NN_Height = window.innerHeight;
                    setRes( NN_Height );
                }else{
                    alert('error decting resolution');
                }
            }
        }
        
        function setRes( height ){  
            setHeight = height-65;
            document.getElementById('content').style.height=setHeight;
        }
    </script>
</head>
<body marginwidth="0" marginheight="0" style="overflow:hidden" onload="checkRes()">
    <table cellspacing="0" cellpadding="0" border="1" width="100%" height="100%">
    <tr>
        <td height="25">subnav</td>
    </tr>
    <tr>
        <td height="100%" valign="top" style="padding:5px;overflow:hidden">
            <table cellspacing="0" cellpadding="0" width="100%" height="100%" border="0">
            <tr>
                <td valign="top" style="border:1px solid #999999;" width="100%" height="100%">
                    <table cellspacing="0" cellpadding="0" width="100%" border="0">
                    <tr>
                        <td height="25" style="background-color:#97A5C1;border-bottom:1px solid #999999;">Titel</td>
                    <tr>
                    <tr>
                        <td valign="top">
                            <div id="content" style="overflow:auto;">
                                content in een scrolling window :)
                            </div>
                        </td>
                    <tr>
                    </table>
                </td>
            </tr>
            </table>
        </td>
    </tr>
    </table>
</body>
</html>

uhm... in code=html worden alle <> vervangen door hun &bullshit's ??!
zow al dat gezeik opgelost met een javascriptje
deze blijf ik lekker gebruiken tot er een duidelijke howto: Div's & toebehoren is geschreven :D:P:+

[ Voor 48% gewijzigd door Verwijderd op 31-10-2003 12:13 ]

[disjfa]

PHP:

<html>
<head>
<link rel="stylesheet" type="text/css" href="../inc/inc.todo-styles.css">
<script language="javascript">
function checkRes(){
if (navigator.appName=='Microsoft Internet Explorer'){
    var IE_Width = document.body.clientWidth;
    var IE_Height = document.body.clientHeight;
    setRes( IE_Height );
}else{
if (navigator.appName=='Netscape'){
    var NN_Width = window.innerWidth;
    var NN_Height = window.innerHeight;
    setRes( NN_Height );
}else{
    alert('error decting resolution');
}
}
}

function setRes( height ){ 
setHeight = height-65;
document.getElementById('content').style.height=setHeight;
}
</script>
</head>
<style>
body{
margin:2px;
padding:0px;
border:1px solid blue;
}
div.top{
height:25px;
}
div.title{
background-color:#97A5C1;border-bottom:1px solid #999999;
}
</style>
<body style="overflow:hidden" onload="checkRes()" onresize="checkRes()">
<div class="top">subnav</div>
<div class="title">Titel</div>
<div id="content" style="overflow:auto;">
content in een scrolling window 
</div>
</body>
</html>

even bekijken.... dit ziet er volgens mij net wat makkelijker en overzichtelijker uit kijk er maar even naar

[ Voor 15% gewijzigd door disjfa op 31-10-2003 12:04 . Reden: ff een onrezize in gezet :) ]

[Verwijderd]

disjfa: nice

PHP:

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="../inc/inc.todo-styles.css"> 
<script language="javascript"> 
function checkRes(){ 
if (navigator.appName=='Microsoft Internet Explorer'){ 
    var IE_Width = document.body.clientWidth; 
    var IE_Height = document.body.clientHeight; 
    setRes( IE_Height ); 
}else{ 
if (navigator.appName=='Netscape'){ 
    var NN_Width = window.innerWidth; 
    var NN_Height = window.innerHeight; 
    setRes( NN_Height ); 
}else{ 
    alert('error decting resolution'); 
} 
} 
} 

function setRes( height ){ 
setHeight = height-60; 
document.getElementById('content').style.height=setHeight; 
} 
</script> 
</head> 
<style> 
body{ 
margin:5px;  
border: 1px solid red;
} 
div.top{ 
height:25px;
padding-left: 5px; 
} 
div.title{ 
background-color:#97A5C1;
border-bottom:1px solid #999999; 
padding-left: 5px; 
} 
div.outer{
border:1px solid blue;
}
</style> 
<body style="overflow:hidden" onload="checkRes()" onresize="checkRes()"> 
<div class="top">subnav</div> 
<div class="outer">
    <div class="title">Titel</div> 
    <div id="content" style="overflow:auto;"> 
        content in een scrolling window 
    </div> 
</div>
</body> 
</html>

dit is hem helemaal


dat kan nu idd ook makkelijk, nu ik de scherm grootte detecteer en daar de div size op aanpas!

is dit nu een oplossing waar alle tweakers van huiveren?

[ Voor 154% gewijzigd door Verwijderd op 31-10-2003 12:39 ]

[disjfa]

nee devschuurders willen content waardoor de pagina even hoog word als de browser of zelfs ergens een scrollbalk in beeld krijgen doordat er zoveel op staat dat het niet meer in je scherm past

een lege div ziet er nl zo stom uit....

[Clay]

Je kan met css prima een div neerzetten waar je wil met een margin aan de onderkant tov het window en met een scrollbar erin als er meer content inzit; maar niet in IE. Dat is dus geen gebrek van css, het is een gebrek van IE. Geef diegene dan de schuld die ook schuld heeft.

Probeer b.v. dit in zowat alles behalve IE. (zelf ff wat voor knip invullen):

PHP:

<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
    <head>
    <meta http-equiv="Content-Type" 
        content="text/html; charset=iso-8859-1" />
    
    <style type="text/css">

    html,body {
        width:100%;
        height:100%;
        padding:0;
        margin:0;
    }

    #content {
        position:absolute;
        left:10px;
        top:200px;
        bottom:10px;
        width:500px;
        border:1px solid blue;
        overflow:auto;
    }
        
    </style>
</head>

<body>
    
    <div id="content">
    
        * knip *

    </div>

</body>
</html>

Maar ik vind het zelf totaaaaal onbelangrijk om dingen per se onderaan het scherm uit te lijnen. Het web is geen reclamefolder waar de ruimte gewoon op is onderaan, scrollen is niet voor niets verzonnen.

* Clay noemt dat het scroll-fobie.

[Verwijderd]

Dat is dus geen gebrek van css, het is een gebrek van IE. Geef diegene dan de schuld die ook schuld heeft.

Lol!
Maar het punt blijft dat het dus niet werkt in alle veel gebruikte browsers.
Je kan het dan dus ook niet in je ontwerp gebruiken. (mits je je site voor een zeer beperkte doelgroep maakt natuurlijk)

Maar ik vind het zelf totaaaaal onbelangrijk om dingen per se onderaan het scherm uit te lijnen.

Tja dat is natuurlijk heel persoonlijk.
Ik vind een gelikt design zeer belangrijk voor een "goede" site!

weet een van jullie misschien waarom dit er raar uitziet in mozilla?

Cascading Stylesheet:

background-image            :   url('../gfx/watermark.gif');
    background-repeat           :   no-repeat;
    background-position         :   bottom right;
    background-attachment       :   fixed;

Hij plaats nu 2 watermarks over elkaar heen?

[ Voor 23% gewijzigd door Verwijderd op 31-10-2003 13:41 ]

[Clay]

Verwijderd schreef op 31 oktober 2003 @ 13:39:
[...]

Lol!
Maar het punt blijft dat het dus niet werkt in alle veel gebruikte browsers.
Je kan het dan dus ook niet in je ontwerp gebruiken. (mits je je site voor een zeer beperkte doelgroep maakt natuurlijk)

in de enige veelgebruikte browser
Op zich kan je het ook best gebruiken, maar in IE loopt je pagina dus gewoon door met een normale scrollbar, en anders in een mooi vakje, het wordt niet onbruikbaar. Elke desinger is denk ik wel in staat (of zou dat moeten zijn) dat verschil te verwerken in een ontwerp imo.
Het is ueberhaupt gewenst om een site primair bruikbaar te maken. op de pixel gelijk in elke browser is een illusie. Dit soort verschillen zijn juist door de kracht van css naadloos te verwerken om alle browsers en hun tekortkomingen tegenoet te komen.

[...]

Tja dat is natuurlijk heel persoonlijk.
Ik vind een gelikt design zeer belangrijk voor een "goede" site!

Dat is het ook! maar "de onderkant van het window" is niet de graadmeter voor gelikte designs of goede sites.

weet een van jullie misschien waarom dit er raar uitziet in mozilla?

Cascading Stylesheet:

background-image            :   url('../gfx/watermark.gif');
    background-repeat           :   no-repeat;
    background-position         :   bottom right;
    background-attachment       :   fixed;

Hij plaats nu 2 watermarks over elkaar heen?

Raar ja Je kan overigens ook al die dingen in 1 background: zetten met een spatie tussen de verschillende aspecten. En ik zou ook dubbele quotes in de url gebruiken, geen enkele.