Gathering of Tweakers

pedorus

pedorus — Mon, 17 Oct 2011 21:54:48 GMT

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.

A.Kebab

A.Kebab — Mon, 17 Oct 2011 21:21:28 GMT

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:
1
2
3
4
5
6
7
8
9
10
11
/* 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.

Guillome

Guillome — Mon, 17 Oct 2011 10:01:03 GMT

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

Bosmonster

Bosmonster — Fri, 14 Oct 2011 12:18:02 GMT

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

DutchStoner

DutchStoner — Fri, 14 Oct 2011 11:50:37 GMT

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

Bosmonster — Fri, 07 Oct 2011 23:24:52 GMT

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.

meneer william

meneer william — Fri, 07 Oct 2011 15:17:09 GMT

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.

Fid3lity

Fid3lity — Fri, 07 Oct 2011 15:02:16 GMT

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

Raynman

Raynman — Fri, 07 Oct 2011 14:58:40 GMT

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.)

meneer william

meneer william — Fri, 07 Oct 2011 14:49:24 GMT

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.

3dfx

3dfx — Fri, 07 Oct 2011 14:08:29 GMT

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

RobIII

RobIII — Fri, 07 Oct 2011 14:02:03 GMT

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.

OkkE

OkkE — Fri, 07 Oct 2011 13:59:15 GMT

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.

mcDavid

mcDavid — Fri, 07 Oct 2011 13:07:10 GMT

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

meneer william

meneer william — Thu, 06 Oct 2011 13:01:44 GMT

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">startmenudiv>
                <div class="taakb" >
                    <div class="start" id="button" onclick="init()">
                        <img src="picto/vlagk.png" class="vlag"> <div class="starttext">Startdiv>
                    div>
                    <div id="clockdiv">
                        <img src="picto/geluid.png" class="geluid"> <span id="clock">0:00 PMspan>
                    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.

noes

noes — Tue, 04 Oct 2011 13:30:32 GMT

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

Snoz Lombardo

Snoz Lombardo — Fri, 30 Sep 2011 13:16:28 GMT

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.

RobIII

RobIII — Fri, 30 Sep 2011 13:11:38 GMT

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?

TERW_DAN

TERW_DAN — Fri, 30 Sep 2011 13:09:26 GMT

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

meneer william

meneer william — Fri, 30 Sep 2011 12:56:06 GMT

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

tussen

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"

StephanVierkant

StephanVierkant — Fri, 30 Sep 2011 12:51:50 GMT

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

meneer william

meneer william — Fri, 30 Sep 2011 12:33:22 GMT

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.

Verwijderd

Verwijderd — Fri, 30 Sep 2011 12:26:49 GMT

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.

TERW_DAN

TERW_DAN — Fri, 30 Sep 2011 12:26:35 GMT

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%.

RobIII

RobIII — Fri, 30 Sep 2011 12:24:33 GMT

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.

MueR

MueR — Fri, 30 Sep 2011 12:24:21 GMT

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.

meneer william

meneer william — Fri, 30 Sep 2011 12:14:41 GMT

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

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.