Na mojej stronie mam centralny wrapper o stałej szerokości, którego nie chcę zmieniać rozmiaru, ale chcę zmienić rozmiar marginesów w zależności od rozmiaru ekranu użytkownika. Próbowałem zawinąć wszystko w jeden element div o nazwie wrapper-outer, a następnie wyśrodkować go z marginesem: 0 auto, ale wydaje się, że to nie działa.

Witryna: http://antonpug.com/mainepark/

CSS:

    body {
    font-family: "Nobile", sans-serif;
    font-size:0.75em;
    text-align:center;
    min-width:1550px;
}

img#bg {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-1;
}

h3 {
    font-size:1.25em;
}

header h1, header h2 {
    font-family: "Ubuntu", sans-serif;
}

header h1 {
    font-size:3em;
    margin:25px 0 0 0;
}

header h2 {
    font-size:2em;
    margin:0 0 25px 0;
}

#wrapper-inner {
    margin:25px 100px 25px 100px;
    padding:15px 0 15px 0;
    background-color:rgba(255,255,255,0.75);
    moz-border-radius: 10px;
    webkit-border-radius: 10px;
    border-radius: 10px;
}

#wrapper-outer {
    width:1500px; -- that didn't work either!!!
    margin: 0px auto;
}

#feature {
    display:inline-block;
    width:80%;
    margin:15px;
}

.column {
    display: inline-block;
    vertical-align:top;
    width:600px;
    margin:15px;
}

#col-1 {
    text-align:right;
}

#col-2 {
    text-align:left;
}

.section {
    margin:0 0 25px 0;
    height:450px;
}

footer {
    color:#909090;
}

footer a {
    margin: 0 0 25px 0;
    text-decoration:none;
    color:#909090;
}
0
antonpug 1 marzec 2012, 22:32

3 odpowiedzi

Najlepsza odpowiedź

Usuń minimalną szerokość na ciele. Jeśli minimalna szerokość ciała jest większa niż opakowanie zawartości, paski przewijania pokażą się, zanim płynne marginesy będą mogły zrobić swoje.

Zmień marginesy div#wrapper-inner na:

margin: 25px 0; //previous values had 100px margins for left/right which add to width per box model

Na koniec dostosuj div#wrapper-outer do szerokości treści, tak jak sugerował Slaks.

0
shaunsantacruz 1 marzec 2012, 22:57

Musisz dodać stałą szerokość do wyśrodkowanego opakowania.

0
SLaks 1 marzec 2012, 22:35

Po prostu dodaj procentową marżę do swojego col-1 div, aby Twoje marże były płynnie dostosowywane.

Coś takiego jak 8% wygląda dobrze.

CSS

#col-1 {
 margin-right: 8%;
}

Usuń również deklarację depozytu zabezpieczającego na swoim div col-2, aby Twoje marginesy dostosowały się proporcjonalnie.

0
Andres Ilich 1 marzec 2012, 23:39