Vraag pagina aanpassen aan browser.

markvelde

veldesign
Hallo,

een webpagina gemaakt voor verschillende schermgrootte.
- als je op je pc de window verkleint, merk je bij de kleinere resoluties dat de structuur uit formatie valt.
Naamloos document

alles in procenten. Marges etc in em.
Behalve de hoogte van de afbeelding en het blok waar de afbeelding in staat heb ik pixels meegegeven.
Waar kan mijn fout zitten?
 

Abraham54

Administrator
Team lid
Welke schermgroottes prescies heb jij ingesteld.
 

markvelde

veldesign
/* Mobiele lay-out: 480 px en lager. */
* Tabletlay-out: 481 px tot 768 px. Neemt stijlen over van: mobiele lay-out. */
/* Bureaubladlay-out: 769 px tot maximaal 1232 px. Neemt stijlen over van: mobiele lay-out en tabletlay-out. */
 

Abraham54

Administrator
Team lid
Dit forum werkt met de breedtes 1200-, 900-, 650- en 480 px
Dat zijn de vast ingestelde waardes, die elk door vergroten dan wel verkleinen door een gebruiker kunnen worden aangepast.
 

maulem

Gevestigd lid
Beste Mark

In de Bureaubladlay-out zijn te grote waardes gebruikt voor margin-left. Deze zijn allen in em, als je de drie divs van 32.1% breedte optelt kom je op 96.3%. Je hebt dus nog 3.7% over. Je kunt de margin-left dan beter in procenten uitdrukken. In de volgende CSS voor de Bureaubladlay-out van de blokken 1 t/m 6 heb ik de 3.7% die over zijn verdeeld in 0.7% voor de eerste margin-left en elk 1.5% voor de tweede en de derde margin-left:

CSS:
#blok_1 {
    clear: none;
    float: left;
    width: 32.1%;
    display: block;
    margin-left: 0.7%;
    position:relative;
}
#blok_2 {
    clear: none;
    float: left;
    width: 32.1%;
    display: block;
    margin-top: 1em;
    margin-left: 1.5%;
    position:relative;
}
#blok_3 {
    clear: none;
    float: left;
    width: 31.2%;
    display: block;
    margin-left: 1.5%;
    position:relative;
}
#blok_4 {
    clear: both;
    float: left;
    width: 32.1%;
    display: block;
    margin-left: 0.7%;
    margin-top: 1em;
    position:relative;
}
#blok_5 {
    clear: none;
    float: left;
    margin-left: 1.5%;
    width: 32.1%;
    display: block;
    margin-top: 1em;
    position:relative;
}
#blok_6 {
    clear: none;
    float: left;
    margin-left: 1.5%;
    width: 32.1%;
    display: block;
    margin-top: 1em;
    position:relative;
}
 

markvelde

veldesign
Bedankt,

idd beter procenten gebruiken voor de marges i.p.v em.
De em is meer geschikt voor de fontsize, was al aan het rekenen gegaan hoeveel procent is em e.d maar procenten werkt idd beter. Opgelost, dank jullie wel
 

Nieuwste berichten

Bovenaan Onderaan