3 Layers onder elkaar - Softwareontwikkeling

vrijdag 23 april 2004 11:53

Acties:

TEC

Topicstarter

Ik ben al twee dagen bezig om het volgende te bereiken:

[layer1] <- vaste hoogte
[layer2] <- vult resterende hoogte op
[layer3] <- vaste hoogte

Hieronder zie je de gecopy paste pagina die ik nu heb het probleem is echter dat de onderste layer af en toe een pixel naar boven schiet waardoor de opmaak verstoord wordt.. De oplossing is denk ik om alles van bovenaf uit te lijnen maar dit krijg ik dus niet voor elkaar.

code:

<html>
<head>
<title>Untitled Document</title>
<style>
body{
    font-family:Arial, Helvetica, sans-serif;
    font-size:10px;
    margin: 0px
}
.position_container{
    position: absolute;
    width: 834px;
    margin-left: -417px;
    left: 50%;
    top: 0px;
    height: 100%;
    padding-top:122px;
    padding-bottom:129px;
    z-index: 1}
    .position_middle{
        height: 100%;
        z-index: 20}
        .position_decoration_left{
            position: static;
            float: left;
            top: 0px;
            width: 49px; 
            height: 100%; 
            z-index: 21;
            background-color:#000088}
        .position_history{
            position: static;
            float: left;
            margin-left: 2px;
            top: 0px;
            width: 185px; 
            height: 100%; 
            z-index: 22;
            background-color:#000088}
        .position_content{
            position: static;
            float: left;
            margin-left: 2px;
            top: 0px;
            width: 547px; 
            height: 100%; 
            z-index: 23;
            background-color:#000088}
        .position_eigengegevens{
            position: static;
            float: left;
            margin-left: 2px;
            top: 0px;
            width: 47px; 
            height: 100%; 
            z-index: 24;
            background-color:#000088}
.position_top{
    position: absolute; 
    width:834px; 
    height:122px; 
    left: 50%;
    margin-left: -417px;
    top: 0px;
    z-index:30}
    .position_klantlogo{
        position: absolute;
        top: 0px;
        left: 51px;
        width: 185px; 
        height: 86px; 
        z-index: 31; 
        background-color:#009900}
    .position_decoration_top{
        position: absolute;
        top: 88px;
        left: 51px;
        width: 185px; 
        height: 32px; 
        z-index: 32; 
        background-color:#009900}
    .position_header{
        position: absolute;
        top: 0px;
        left: 238px;
        width: 547px; 
        height: 86px; 
        z-index: 33; 
        background-color:#009900}
    .position_klantdocumenten{
        position: absolute;
        top: 88px;
        left: 238px;
        width: 547px; 
        height: 32px; 
        z-index: 34; 
        background-color:#009900}
.position_bottom{
    position: absolute; 
    width: 834px; 
    height: 129px; 
    left: 50%; 
    margin-left: -417px;
    bottom: 0px;
    z-index: 40}
    .position_bottom_menu{
        position: absolute;
        top: 39px;
        left: 0px;
        width: 834px; 
        height: 90px; 
        z-index: 41;
        background-color:#990000}
    .position_decoration_bottom{
        position: absolute;
        top: 2px;
        left: 238px;
        width: 547px; 
        height: 35px; 
        z-index: 42;
        background-color:#990000}
</style>
</head>
<body>
<div id="top" class="position_top">
    <div id="klantlogo" class="position_klantlogo">tekst</div>
    <div id="decorationtop" class="position_decoration_top">tekst</div>
    <div id="header" class="position_header">tekst</div>
    <div id="klantdoc" class="position_klantdocumenten">tekst</div>
</div>
<div id="container" class="position_container">
    <div id="middle" class="position_middle">
        <div id="decorationleft" class="position_decoration_left">tekst</div>
        <div id="history" class="position_history">tekst</div>
        <div id="content" class="position_content">tekst</div>
        <div id="eigengegevens" class="position_eigengegevens">tekst</div>
    </div>
</div>
<div id="bottom" class="position_bottom">
    <div id="bottommenu" class="position_bottom_menu">tekst</div>
    <div id="decorationbottom" class="position_decoration_bottom">tekst</div>
</div>
</body>
</html>

Ik heb gezocht met google en heb de GoT search gebruikt maar het enigste dat ik vind zijn pagina's met daarop discussies over het wel of niet gebruiken van layers of tutorials en examples van hoe je 3 column pagina's kan maken met layers, grrr..

Heeft iemand een oplossing voor dit probleem?

[ Voor 32% gewijzigd door tec op 23-04-2004 12:58 ]

vrijdag 23 april 2004 12:19

Acties:

T-MOB

(In mozilla gaat er wel meer mis dan wat verspringende pixels... ). Waarschijnlijk heb je hier wel wat aan: http://steve.pugh.net/test/test57a.html . Dat is zo'n klassieker als het gaat om een header, content, footer verhaal. De footer staat hierbij onderin de viewport met korte content en lager bij lange.

[ Voor 2% gewijzigd door T-MOB op 23-04-2004 12:19 . Reden: typo ]

Regeren is vooruitschuiven

vrijdag 23 april 2004 12:36

Acties:

tec

TEC

Topicstarter

Het wordt iexplorer only, dus heb niks te maken met andere browsers. De pagina die jij aandraagt heeft last van hetzelfde probleem als die van mij.. onderste layer verspringt elke keer een paar pixels..

vrijdag 23 april 2004 12:45

Acties:

T-MOB

mmmzz. ik zie niet helemaal wat je bedoelt met het pixel verspringen. Anyway als je de footer van bovenaf wil uitlijnen kun je ongeveer hetzelfde doen als met centreren:
[code]
.position_bottom{
position: absolute;
width: 834px;
left: 50%;
margin-left: -417px;
height: 129px;
top: 100%;
margin-top: -129px;
z-index: 40}
[/code]

zoiets dus, geen idee of het helpt aangezien ik niet helemaal zie wat het probleem is, welke IE hebben we het over?

Ow, ik zie het al, je hebt het probleem ivm met de scrollbar aan de onderkant. IE reserveert daar ruimte voor waardoor je pagina niet goed uitlijnt. Die scrollbar aan de onderkant kun je uitzetten met CSS (pagina wordt dan wel vrij onhandig in browserwindow < 1024x768)

code:

1	body { overflow-x: hidden; }

[ Voor 25% gewijzigd door T-MOB op 23-04-2004 12:55 ]

Regeren is vooruitschuiven

vrijdag 23 april 2004 13:01

Acties:

tec

TEC

Topicstarter

T-MOB schreef op 23 april 2004 @ 12:45:
mmmzz. ik zie niet helemaal wat je bedoelt met het pixel verspringen. Anyway als je de footer van bovenaf wil uitlijnen kun je ongeveer hetzelfde doen als met centreren:
[code]
.position_bottom{
position: absolute;
width: 834px;
left: 50%;
margin-left: -417px;
height: 129px;
top: 100%;
margin-top: -129px;
z-index: 40}
[/code]

zoiets dus, geen idee of het helpt aangezien ik niet helemaal zie wat het probleem is, welke IE hebben we het over?

Ow, ik zie het al, je hebt het probleem ivm met de scrollbar aan de onderkant. IE reserveert daar ruimte voor waardoor je pagina niet goed uitlijnt. Die scrollbar aan de onderkant kun je uitzetten met CSS (pagina wordt dan wel vrij onhandig in browserwindow < 1024x768)
code:
1
body {  overflow-x: hidden; }

Neej dat bedoel ik niet.. even voor de duidelijkheid onderneem de volgende stappen:

zet het ding fullscreen.. of iig zo dat er geen scrollbars nodig zijn.. Nu is er tussen het bovenste rode blok en het blok daarboven een wit lijntje van 2px hoog (als het goed is..) als je nu de pagina van onder af gaat resizen dus het venster kleiner maken.. dan springt die regel af en toe naar 1px hoogte.. en dat is dus het probleem

Ik heb het margin-top op -129 en top op 100% net geprobeerd en dit lost het helaas niet op..

btw, de pagina wordt straks gebruikt door een klein aantal personen welke allemaal op een resolutie gaan werken van 1024 * 768 en gebruik maken van iexplorer 5.5 of hoger.

[ Voor 6% gewijzigd door tec op 23-04-2004 13:03 ]

zaterdag 24 april 2004 18:46

Acties:

tec

TEC

Topicstarter

Ik vind het toch appart dat iedereen hier pleit voor een layout in layers en dat als je dan vraagt hoe je dit aanpakt er niemand antwoord..

zaterdag 24 april 2004 22:15

Acties:

chris

Je hebt een ontzettend grote lap tekst, bijna niemand heeft zin om dat helemaal door te gaan lezen. Je kan beter ff iets online zetten zodat mensen het kunnen zien.

zaterdag 24 april 2004 23:14

Acties:

Verwijderd

Ik ook heb geen zin om alles te lezen, maar volgens mij zoek jij:
Een JavaScriptje die zorgt dat je pagina refresht bij het resizen.

zondag 25 april 2004 13:27

Acties:

dArtagnan

Een voor allen, allen voor een

Even voor het gemak de pagina online.
http://www.xs4all.nl/~eerden01/rommel/topic904484.html

Maar ik snap er bijzonder weinig van.

zondag 25 april 2004 13:45

Acties:

Verwijderd

Gaat erom dat als je bv. internet explorer niet gemaximaliseerd hebt, en je maakt hem iets kleiner oid, dan overlapt die balk onder het blauwe deel.
Maar als je zoals ik zei een script erbij doet dat bij resize de pagina herladen wordt, dan zou het opgelost moeten zijn.

Maar ik weet niet of tec (lees: topic starter) hier nog komt?

zondag 25 april 2004 14:25

Acties:

Clay

cookie erbij?

tec schreef op 24 april 2004 @ 18:46:
Ik vind het toch appart dat iedereen hier pleit voor een layout in layers en dat als je dan vraagt hoe je dit aanpakt er niemand antwoord..

Dat komt omdat er nooit iemand luistert

Vervolgens doet men het fout, en gaat dan klagen dat CSS troep is. Ja hallo

Er worden vaak genoeg tips gegeven hoe iets handig te doen, maar er komt natuurlijk nooit een A tot Z guide die voor alle layouts opgaat. Elke layout kan op meerdere manieren, en er moet voor jezelf natuurlijk ook wat werk overblijven

Een paar opmerkingen:

• Je zegt dat je 3 delen wil; boven, opvullend en onder. Moet die middelste zelf scrollen als er te weinig content is? of scrollt het hele scherm? Het eerste is makkelijk. Het 2e is lastiger, maar alsnog prima te doen. Weet je eigenlijk wat height:100%; precies inhoudt?

• Je gebruikt veel te veel (alleen maar!) divjes. Je layout met CSS doen betekent niet dat je alleen nog maar divjes nodig hebt. Layers bestaan trouwens niet meer. Dat was een Netscape4 verzinsel, dat bovendien ronduit lastig was om mee te werken. Zoek even op semantiek en xhtml, en schrijf je html dan opnieuw.

• Je zet teveel op position:absolute, en position:static is default, dus die kan je ook weglaten. Iets wat op absolute staat gaat uit de flow, maar die flow is juist handig om hier wel en ergens anders niet te gebruiken.
Bovendien gebruik je allemaal verwijzingen naar layout/positie in je id en class namen. Het is hardstikke tof als je CSS rule een element links of rechts neerzet, maar het is nergens voor nodig dat in de id of class onder woorden te brengen.

• Je doet niets met de id's, en alles heeft een unieke class? De id spreek je in CSS aan met #idnaam {}, en classes hoeven juist niet uniek te zijn.

Ik wil je niet op de teentjes trappen, maar het ziet eruit als iets met klok en klepel

Alsof je met css een table aan het nabouwen bent, maar dat is nou juist niet de bedoeling. Je hebt niet voor elk visueel effect een nieuw element nodig; met backgrounds op in elkaar geneste elementen kan je al heel gauw een groot aantal dingen doen. En iets hoeft niet fysiek zo groot te zijn zoals het visueel lijkt te zijn. Dat is allemaal table-denken dat overboord moet.

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

maandag 26 april 2004 09:17

Acties:

tec

TEC

Topicstarter

Ik had helaas op mijn stage waar ik met dit probleem zat geen mogelijkheid tot het uploaden ervan dus vandaar de lap code.. iig bedankt voor de reacties ik ga er mee aan de gang.

En neej ik ben niet op mn teentjes getrapt ik begin pas net met heel het div gebeuren en ben dan ook erg blij met jou reply clay.