[Pagalbos HTML+CSS] Visiems skirtingai rodo

[KSoorak`]

Taigi pradėjau koduoti dizainą ir jau ne pirmą kartą atsitinka toks dalykas jog man rodo štai taip:

 http://prntscr.com/a4yuq5

Tačiau jei kitas žmogus pasijunge turėdamas didesnį ekraną arba aš sumažino puslapio dydį viskas atrodo štai taip:

http://prntscr.com/a4yvbr

CSS kodas atrodo štai šitaip:
 

background: url(images/bg.png) no-repeat center top;


.virsus {
    width: 100%;
    height: 700px;
    position: relative;
}
.virsus img {
    display: block;
    position: absolute;
    top: 0px;
    height: 300px;
    width: 800px;
    margin-top: -200px;
    left: 0; right: 0;
    margin: 0 auto;
}
.navigacija {
display: block;
margin-top: 200px;
margin-left: 420px;
position: absolute;
    left: 0px;
    top: 0px;
z-index; 2;
}

Gal galite detaliai išaiškinti ką blogai darau jog taip gaunasi?

 

[.eK0.]

.navigacija {

display: block;

margin: -kažkiekpx auto;

}

[mindux9]

geriausiai kad labiau taikytusi prie ekrano, stengtis vietoj pikseliu, naudoti procentus

[KSoorak`]

.navigacija {
display: block;
margin: -kažkiekpx auto;
}

Tas pats.

geriausiai kad labiau taikytusi prie ekrano, stengtis vietoj pikseliu, naudoti procentus

Bet tuomet pas mane prisitaikys, o pas kitus išsikraipys vistiek. Būtų tobula jog visas dizainas kaip sumažini ant 20% mastelį dizainas liktų vidurį, o ne headeris vidurį, o buttomai visi kairėje...

[.eK0.]

Reikia pamatyt live, kad galėčiau padėt, su css vien tik kodu nesugebėsiu padėt.

 

Skype: exyno.

[mantas.dev]

.navigacija {
display: block;
margin-top: 200px;
margin-left: 420px;
position: absolute;
    left: 0px;
    top: 0px;
z-index; 2;
}

pakeisk i 

.navigacija {
display: block;
margin: 0 auto;
margin-top: 200px;
}

Viskas turi veikt, ir rodys vienodai ant visu ekranu.

[@foxon]

Tiesiog vietoj:

margin-left: 420px;

Dėk :

margin: 0 auto;

arba

margin-left: 0 auto;

margin-right: 0 auto;

Kaip tau patogiau ar šaudoju pirma varianta.

Redaguota Vasario 19, 2016, nario @foxon

[.eK0.]

 

Tiesiog vietoj:

margin-left: 0 auto;

margin-right: 0 auto;

šitie neveiks, nes neteisingai kodą parašei, turėtų būti: margin-left: auto; margin-right: auto;

[darrel.]

Tas pats.

Bet tuomet pas mane prisitaikys, o pas kitus išsikraipys vistiek. Būtų tobula jog visas dizainas kaip sumažini ant 20% mastelį dizainas liktų vidurį, o ne headeris vidurį, o buttomai visi kairėje...

Tam kad nejudėtu elementai dizaine tai geriau nuotraukas kelk CSS kode o ne HTML nes spėju button'ai kurti paveikslelyje. Pas manę visad ta pati problema kad nuotrauka kuri būna įkelta per HTML kodą tai tada jis visad juda kai zoomini.