windows 95 namaken in de browser

[meneer william]

Beste tweakers,

Een leraar daagde mij uit een grafische interface van een os na te maken. nu ben ik bezig met win95 en dat lukt prima alleen loop ik tegen een resolutie probleem op.

zie mijn resultaat tot nu toe:
http://i.imgur.com/IffiH.png

voor dat ik verder ga wil ik graag mijn bureaublad en mijn taakbalk voor alle resoluties goed laten uitlijnen. horizontaal lukt dit alleen verticaal niet.

mijn code ziet er als volgt uit:

mijn html,

HTML: win95.html

<div class="center">
            <div class="buro">
            bureaublad
            </div>
            <div class="taakb" >
                <div class="start" onclick="init()" >
                <img src="picto/vlagk.png" class="vlag"> Start
                </div>
                <div class="clock">
                
                </div>
            </div>
        </div>

ik maak dus voor mijn bureaublad en mijn taakbalk twee verschillende <div> elementen aan. in mijn css laat ik die als volgt opmaken:

mijn css,

Cascading Stylesheet: win95.css

 
.center{
    height: 100%;
    width: 100%;
}

.buro{
    z-index: 10;
    height:90%; /*height:97.2%;*/
    width:90,1%;
    background-color: #008080;
}

.taakb{
    z-index: 10;
    height: 24px;
    width: 90,1%;
    border-top:3px ridge #FFFFFF;
    background-color: #C0C0C0;
}

voor mijn eigen beeldscherm kan ik het perfect afstemmen maar het moet zo afgestemd worden dat de verhoudingen op elk scherm kloppen. ik heb dit geprobeerd met z-index voor afbeeldingen werkt dit prima.

weet iemand hoe ik met css of javascript er voor kan zorgen dat ik mijn bureaublad en taakbalk op elke resolutie kan laten verscheiden als volledig beeld (zonder onderaan nieuw wit te krijgen van de body als ik het uitprobeer op ander beeldscherm)

B.V.D.

[MueR]

Om RobIII even te quoten

RobIII schreef op vrijdag 30 september 2011 @ 11:21:
Ook is het handig als je een concrete vraag stelt; die zie ik nu ook niet echt in je topic; je zegt nu wel "ik wil dit-en-dat" maar ik zie nergens wat je zelf geprobeerd/gezocht/gevonden hebt.

Het moet toch niet zo moeilijk zijn om een oplossing te vinden, zeker als je ook bereid bent javascript te gebruiken. Ik kan me niet helemaal aan de indruk onttrekken dat je eigenlijk gewoon hoopt dat iemand even een quick fix voor je post.

[RobIII]

Ik zie even niet waarom je met z-indexes aan 't rommelen bent, evenals ik niet zie waarom je widths aan 't setten bent als alles (behalve de startknop/clock) 100% breed is. De hoogte (van de taakbalk bijv.) zou ik in pixels doen, niet %.

Verder zou ik de taakbalk nesten in 't bureaublad (zo is 't in de 'werkelijkheid' overigens ook).

offtopic:
Waarom heet je class "center" als 'ie niets centered

Ik denk dat je veel te moeilijk doet.

[ Voor 50% gewijzigd door RobIII op 30-09-2011 14:43 ]

[TERW_DAN]

Zo lastig is het toch niet om je hele scherm te gebruiken, en gewoon onderaan je taakbalk te dokken? Dan maken hoogtes niet zoveel uit, waarom je je bureaublad een hoogte geeft van 90% snap ik niet echt, als je iets niet de volledige hoogte geeft, dan kom je uiteindelijk toch te zitten met lege stukken. Zet dat ding gewoon op 100%.

[Verwijderd]

RobIII schreef op vrijdag 30 september 2011 @ 14:24:

offtopic:
Waarom heet je class "center" als 'ie niets centered

offtopic:
Omdat ie centraal is?... Als in - een sleutelrol vervult? Geen idee.

[meneer william]

RobIII schreef op vrijdag 30 september 2011 @ 14:24:
Ik zie even niet waarom je met z-indexes aan 't rommelen bent, evenals ik niet zie waarom je widths aan 't setten bent als alles (behalve de startknop/clock) 100% breed is. De hoogte (van de taakbalk bijv.) zou ik in pixels doen, niet %.

Verder zou ik de taakbalk nesten in 't bureaublad (zo is 't in de 'werkelijkheid' overigens ook).

offtopic:
Waarom heet je class "center" als 'ie niets centered

wel ik regel de hoogte van de taakbalk ook in px (height: 24px;) maar ik zal proberen om de taakbalk binnen bureaublad te plaatsen ik weet al hoe dom dat ik er zelf niet aan gedacht heb.

[StephanVierkant]

offtopic:
Mocht je dit ooit aan je docent laten zien, gum dan even 'geensteil' en 'kut school' uit je favorieten

[meneer william]

en het wekt heb het al op alle pc's laptops uitgetest binnen mijn netwerk. dank u zeer voor de oplossing ik heb het volgende gedaan:

HTML: win95.html

<div class="buro" onclick="init2()">
            bureaublad
            
            
            
                <div class="taakb" >
                    <div class="start" onclick="init()" >
                        <img src="picto/vlagk.png" class="vlag"> Start
                    </div>
                    <div class="clock">
                
                    </div>
            </div>
            
            
            </div>

onzinnige center weghalen. u had gelijk ik had zelf niet door dat dit niet nodig was de fuctie hiervan zat binnen het bureau blad zelf heb dus <div class="taakb"> tussen <div class="buro"> gezet.

mij css:

Cascading Stylesheet: win95.css

 
.buro{
    height:100%; 
    width:90,1%;
    background-color: #008080;
}

.taakb{
    background-color: #C0C0C0; 
    position:absolute;
    bottom:0px;
    height:24px;
    width:100%;
}

meteen enkele knipsels

http://imgur.com/bbRMw
http://imgur.com/tKkKB

dank u zeer

"May the Force be with you"

[ Voor 7% gewijzigd door meneer william op 30-09-2011 15:05 ]

[TERW_DAN]

Waarom is je bureaublad 90,1% en niet gewoon 100%?

[RobIII]

Terw_Dan schreef op vrijdag 30 september 2011 @ 15:09:
Waarom is je bureaublad 90,1% en niet gewoon 100%?

Waarom daar überhaupt een div voor gebruiken?

[Snoz Lombardo]

Terw_Dan schreef op vrijdag 30 september 2011 @ 15:09:
Waarom is je bureaublad 90,1% en niet gewoon 100%?

En '90,1%' is sowieso geen geldige value, moet '90.1%' (punt, geen komma) zijn.

[noes]

Of je speelt gewoon vals en pakt ext.net, kan je op IIS of apache+mono draaien.

http://examples.ext.net/E...ion/Overview/Desktop.aspx

[meneer william]

Beste tweakers,

Een update: ik ben lekker wezen knutselen en alles lukt prima.

zie mijn resultaat tot nu toe:
http://i.imgur.com/zTSPP.png

ik weet dat er mensen zijn die dit natuurlijk in 5 min doen en dan waarschijnlijk nog veel verder zitten maar ik ben een beginner en ik ben al best trots op mijn resultaat. als er mensen zijn die nog handige tips of een goede toevoeging hebben ben ik één en al oor.

verdere vooruitgingen zijn

• geschikt voor alle resoluties
• start knopje met interactief menu
• werkende klok

zie afb:

http://imgur.com/a/1VfUK

voor als je het wilt weten mijn code ziet er als volgt uit:

mijn html,

HTML: win95.html

<body onload="updateClock(); setInterval('updateClock()', 1000 )">
        
            <div class="buro">
            bureaublad
            <div style="background-color:green;position:absolute;bottom:0px;display:block;height:423px;width:308px;margin:0px 0px 27px 3px;" class="class">startmenu</div>
                <div class="taakb" >
                    <div class="start" id="button" onclick="init()">
                        <img src="picto/vlagk.png" class="vlag"> <div class="starttext">Start</div>
                    </div>
                    <div id="clockdiv">
                        <img src="picto/geluid.png" class="geluid"> <span id="clock">0:00 PM</span>
                    </div>
            </div>
            
            </div>
        
</body>

mijn css,

Cascading Stylesheet: win95.css

 
body{margin:0;padding:0;border:0;font-family:Calibri;}

.buro{
    height:100%;
    width:100%;
    background-color:rgb(43, 153, 153);
}

.taakb{
    background-color: #C0C0C0; 
    border-top:2px solid #FFFFFF;
        position:absolute;
        bottom:0px;
        height:25px;
        width:100%;
}

    .start{
        margin-top:1px;
        margin-left:3px;
        width:50px;
        height:19px;
        border:2px;
        border-style:solid;
        background-color: #C0C0C0;
        border-bottom-color:#4F4B4B;border-right-color:#4F4B4B;
        border-top-color:#FFFFFF;border-left-color:#FFFFFF;
        font-size:15px;
    }

        .vlag{
            margin-top:3px;
            margin-left:1px;
            width:14px;
            height:12px;
            text-align:left;
        }
        
        .starttext{
            bottom:4px;
            position:absolute;
            margin-left:18px;
            font-weight:bold;
        }
        

    #clockdiv{
        width:70px;
        height:19px;
        position:absolute;
        bottom:1px;
        right:3px;
        border:2px;
        border-style:solid;
        padding-right: 6px;
        background-color:#C0C0C0;
        border-bottom-color:#FFFFFF;border-right-color:#FFFFFF;
        border-top-color:#4F4B4B;border-left-color:#4F4B4B;

    }
        
        #clock{ 
            font-family:Calibri;
            font-size: 15px;
            position:absolute;
            bottom:1px;
            margin-left:4px;
        }
        
        .geluid{
            margin-top:3px;
            margin-left:3px;
            width:14px;
            height:12px;
            text-align:left;
        }

voor de mensen die geholpen hebben bij de resolutie bedankt. overigens moet men niet naar die oude code kijken die wekte alleen als ik de taakbalk buiten de bureaublad div lied en dat is nu niet meer zo. overigens als u iets onlogies ziet of overbodigs dan is commentaar welkom. ik kan net een half jaar html en css en een paar maanden ben ik bezig met js, php en msql. ben dus noob en tips zijn altijd welkom.

[mcDavid]

Wat algemene tips:
1) Calibri bestond nog niet in 1995.
2) google eens op "Shorthand CSS"
3) breng je indenting eens op orde.
4) haal die inline-CSS eens weg

[OkkE]

mcDavid schreef op vrijdag 07 oktober 2011 @ 15:07:
Wat algemene tips:
1) Calibri bestond nog niet in 1995.
2) google eens op "Shorthand CSS"
3) breng je indenting eens op orde.
4) haal die inline-CSS eens weg

1) Volgens mij was het in oude Windows versies: MS Sans Serif.
2) Shorthand CSS mag inderdaad wel.
3) Lijkt er op dat zijn CSS indent de HTML volgt? Doe het zelf nooit, maar sommige vinden het handig.
4) Inline CSS zou ik inderdaad ook niet doen.

5) Volgens mij kan je een hoop van die "3D" effecten ook oplossen door border-style op inset of outset te zetten. Weet alleen niet zeker of de kleuren dan mooi matchen.

RobIII schreef op vrijdag 07 oktober 2011 @ 16:02:
Zie bijv. de start-knop hier:
[...]
Alleen even pielen met de "exact" juiste kleurtjes.

Oeps, had over jouw post heen gekeken.

[ Voor 14% gewijzigd door OkkE op 07-10-2011 16:03 ]

[RobIII]

OkkE schreef op vrijdag 07 oktober 2011 @ 15:59:


5) Volgens mij kan je een hoop van die "3D" effecten ook oplossen door border-style op inset of outset te zetten. Weet alleen niet zeker of de kleuren dan mooi matchen.

Zie bijv. de start-knop hier:

RobIII schreef op vrijdag 30 september 2011 @ 15:11:
[...]

Waarom daar überhaupt een div voor gebruiken?

Alleen even pielen met de "exact" juiste kleurtjes.

[3dfx]

Toen ik de titel van dit topic las, dacht ik gelijk aan de met Flash gemaakte Windows RG (Really Good Edition):

http://www.albinoblackshe...albinoblacksheep.com).swf

[ Voor 12% gewijzigd door 3dfx op 07-10-2011 16:11 ]

[meneer william]

haha die Really Good Edition,

maar ff serieus ik heb op het moment wel al mijn css in één css bestand en dus niet meer inline. dit was overigens alleen om te testen of iets met javascript werkte. anders zit ik zo in een css, html en js file te knaken. maar ik weet het het zou wat meer pro lijken als ik dat ook zo had gepost.

maar Shorthand CSS heel handig alleen ben ik ik weer niet zo handig. ik krijg het op deze manier net aan voor elkaar maar ik zal dit zekers gaan toepassen.

overigens doe ik het meeste kwa kleuren enz zelf. ik heb wel gebruik gemaakt van de inset outset style maar die is standaard te licht ik wou de randen die donker waren veel donkerder.

overigens zie ik iemand zeggen waarom ik div's gebruik. ik wil dit zelf doen en niet door middel van screen-shots. en anders zie ik geen mogelijkheid omdat ik een div een id en class kan geven en daarmee weer kan stylen individueel per onderdeel via mijn css bestand. ik heb geen idee hoe ik dit anders zou moeten doen.

[Raynman]

Dat "waarom daarvoor een div gebruiken" ging over de buro-div. Je kunt ook de hele body als bureaublad gebruiken/stylen. (Ook andere elementen kun je uiteraard een id/class geven en stylen.)

[Fid3lity]

Stephan4kant schreef op vrijdag 30 september 2011 @ 14:51:

offtopic:
Mocht je dit ooit aan je docent laten zien, gum dan even 'geensteil' en 'kut school' uit je favorieten

* Fid3lity moest hierom lachen

[meneer william]

Raynman schreef op vrijdag 07 oktober 2011 @ 16:58:
Dat "waarom daarvoor een div gebruiken" ging over de buro-div. Je kunt ook de hele body als bureaublad gebruiken/stylen. (Ook andere elementen kun je uiteraard een id/class geven en stylen.)

ow ja,

tuurlijk ja ik wist niet dat dat ging werken. bedankt voor de tip ik zal dit nu zeker aanpassen ook al maakt het niet heel veel uit het scheelt weer wat code.

[Bosmonster]

Raynman schreef op vrijdag 07 oktober 2011 @ 16:58:
Dat "waarom daarvoor een div gebruiken" ging over de buro-div. Je kunt ook de hele body als bureaublad gebruiken/stylen. (Ook andere elementen kun je uiteraard een id/class geven en stylen.)

Niet dat het gaat gebeuren, maar als je ooit wilt uitbreiden, bijvoorbeeld meerdere desktops of desktop animaties, dan is de flexibiliteit wel prettig dat je niet vast zit aan je body.

[DutchStoner]

Heb je al eens aan Media Queries gedacht mbt het optimaliseren voor de verschillende schermgrotes.?

Cascading Stylesheet:

/* 480px */
@media only screen and (min-width: 480px) { 
    // hier de css
}

/* 600px */
@media only screen and (min-width: 600px) {
    // hier de css
}

// etc, etc

http://coding.smashingmag...or-responsive-web-design/

[Bosmonster]

Ik krijg ineens een beeld van een klok en een klepel in m'n hoofd.

[Guillome]

En ook belangrijk om geen JS in je HTML te hebben. Doe dat gewoon met DOM of nog beter, jQuery oid.

JavaScript:

window.onload = function()
{
  //interval + clock aanroep
}
// of
$(function()
{
  // interval + clock aanroep
});

Evenals onclicks etc

[ Voor 4% gewijzigd door Guillome op 17-10-2011 12:01 ]

[A.Kebab]

DutchStoner schreef op vrijdag 14 oktober 2011 @ 13:50:
Heb je al eens aan Media Queries gedacht mbt het optimaliseren voor de verschillende schermgrotes.?

Cascading Stylesheet:

/* 480px */
@media only screen and (min-width: 480px) { 
    // hier de css
}

/* 600px */
@media only screen and (min-width: 600px) {
    // hier de css
}

// etc, etc

http://coding.smashingmag...or-responsive-web-design/

Je kan ook overdrijven hé, laat die jongen eerst maar eens de basics uitvogelen.

[pedorus]

Iva_Bigone schreef op vrijdag 07 oktober 2011 @ 16:08:
Toen ik de titel van dit topic las, dacht ik gelijk aan de met Flash gemaakte Windows RG (Really Good Edition):

http://www.albinoblackshe...albinoblacksheep.com).swf

Lol. Maar in dit geval lijkt me het eigenlijk het snelste om windows 3.1 (javascript edition) te nemen en die te upgraden zodat je win95 hebt.