venster verkleinen. div element meer naar de rand.

[Verwijderd]

Hallo mensen,

Hoe krijg ik het voor elkaar dat bijvoorbeeld een div element die margin-left:20 heeft dat ik dan het venster (van je webbrouwser) verklein (de linker kant naar rechts ->) dat ie een kleinere margin-left heeft, bijvoorbeeld van 5px; Ipv dat je het venster versleept en het div element nog steeds die 20 px witruimte heeft (niet zoals via de rechterkant).

En is hiervan nog een algemeen benaming? Zodat ik het wat makkelijker kan opzoeken.

Alvast bedankt,

Niels

(sorry voor de onduidelijke vraag)

[EnnaN]

"relatief" ? ALs in, als je niet "20 pixels" instelt maar "4 %", dan zal de ruimte meeveranderen met de breedte?

[TERW_DAN]

Een andere mogelijkheid is natuurlijk om het via javascript af te handelen. Maar dat kost wel wat meer moeite dan simpelweg dingen relatief in te stellen zoals EnnaN aangeeft. Daar zou ik zelf ook beginnen.

[Verwijderd]

Net zoals hier op tweeakters, je verplaatst de linker kant van het venster en dan stopt ie bij het tweakers logo. In volledige breedte staat ie ongeveer 50px; verwijderd van de rand.

Hoe maak je zoiets met de rand? Ik heb margin: 0 en text-align; left/center/right geprobeerd maar dat had geen enkele zin.

[ Voor 25% gewijzigd door Verwijderd op 29-08-2013 12:57 ]

[Exception]

Jij zoekt denk ik de benaming "responsive webdesign"

[Orion84]

Verwijderd schreef op donderdag 29 augustus 2013 @ 12:56:
Net zoals hier op tweeakters, je verplaatst de linker kant van het venster en dan stopt ie bij het tweakers logo. In volledige breedte staat ie ongeveer 50px; verwijderd van de rand.

Hoe maak je zoiets met de rand? Ik heb margin: 0 en text-align; left/center/right geprobeerd maar dat had geen enkele zin.

Ik zou zeggen: kijk eens in de code van de site hier, dan kan je dat gewoon zien hoe dat gerealiseerd is. Bijvoorbeeld in Firefox met "inspect element" om het wat makkelijker te maken dan door de platte code te lezen.

Zoals al is aangegeven kan dat met relatieve waardes voor de margins (of in dit geval voor de width).

[RM-rf]

In CSS kun je ook aangaves doen over de groote van de viewport (en bv het medium van weergave):

Cascading Stylesheet:

@media screen and  (min-width: 990px) and (max-width: 1600px) {

   .selector {
       foo: bar;
    }

}

daarmee kan je erg goed stapsgewijze aanpassingen doen voor verschillende schermbreedtes
(en dat is de basis van wat bekend staat als 'responsive design')

[ Voor 9% gewijzigd door RM-rf op 29-08-2013 15:38 ]

[Bosmonster]

Verwijderd schreef op donderdag 29 augustus 2013 @ 12:56:
Net zoals hier op tweeakters, je verplaatst de linker kant van het venster en dan stopt ie bij het tweakers logo. In volledige breedte staat ie ongeveer 50px; verwijderd van de rand.

Hoe maak je zoiets met de rand? Ik heb margin: 0 en text-align; left/center/right geprobeerd maar dat had geen enkele zin.

Hier op de site lijkt het me simpelweg gedaan met een min-width op de balk waar het logo instaat.

[Orion84]

Bosmonster schreef op donderdag 29 augustus 2013 @ 16:08:
[...]


Hier op de site lijkt het me simpelweg gedaan met een min-width op de balk waar het logo instaat.

Precies. De body heeft 100% breedte (want geen width opgegeven), met een min-width. De menubalk heeft 90% breedte (maar ook met een min-width).

Daardoor schaalt de boel netjes naar wat smallers, waarbij in eerste instantie zowel body als menubalk smaller worden, maar zodra de menu balk z'n min-width bereikt wordt alleen de body nog smaller (tot die ook z'n min-width bereikt). (even los van de trucs om de tracker op bepaalde breedtes netjes in beeld te houden)

Maar dat is dus exact wat ik zei: als je het wilt zoals hier: kijk dan gewoon hoe het hier is gedaan. Dat plus een beetje inlezen in de basisbegrippen van html en css en je komt een heel eind

[ Voor 5% gewijzigd door Orion84 op 29-08-2013 16:13 ]