jak wycentrować stronę niezależnie od szerokości ekranu??
: 27 sty 2021, 14:25:18
Witam serdecznie,
Bardzo proszę o pomoc czy podpowiedz.
Uprzedzę, że jestem osobą dość początkującą w HTML i CSS - rozumiem zasady, ale gubię się w szczegółach dlatego bardzo dziękuję za zainteresowanie !
Pracuję nad stroną która zasadniczo ma w głównej części 2 pola tekstowe (lewe wąskie, prawe szerokie). Ale na dwóch podstronach chciałabym zamieścić tylko jedno duże pole tekstowe. Metodą "prób i błędów" uzyskałam jedną przestrzeń, ale nie potrafię jej wycentrować. To znaczy strona ma zasadniczą szerokość 980px. Na moim laptopie jest OK, ale na monitorze o większej szerokości (rozdzielczości 1260px) to pojedyncze pole tekstowe nie wyświetla się w jednej linii z obrazkami tylko albo na całą szerokość ekranu albo przesunięte do prawego lub lewego brzegu..Czyli krótko - co zrobić w kodzie html/css, żeby ta główna, pojedyncza przestrzeń z tekstem wyświetlała się na środku, w jednej linii z górą i dołem strony i miała tę samą szerokość co inne elementy strony niezależnie od wielkości ekranu.
Załączam właściwą stronę dokumentu html i kod css.
Siedzę nad tym trzeci dzień i sama już chyba nic nie wymyślę.
Pomóżcie. Z góry wszystkim dziękuję!!!
********** CSS ***************
*****************************
* { margin: 0; padding: 0; outline:0; }
body {
font-size: 12px;
line-height: 22px;
font-family: "Verdana", Arial, Helvetica, sans-serif;
color: #4a4a4a;
background: #fff url('images/bg.gif') repeat-x 0 106px;
}
a { color: #0252aa; text-decoration: none; cursor:pointer; }
a:hover { text-decoration: underline; }
a img { border: 0px none; }
input, textarea, select { font-size: 12px; }
textarea { overflow: auto; }
.cl { display: block; height: 0; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; }
.notext { font-size: 0; line-height: 0; text-indent: -4000px; }
.left, .alignleft { float: left; display: inline; }
.right, .alignright { float: right; display: inline; }
.shell { width: 980px; margin: 0 auto; }
.last { margin-right: 0 !important; }
#header { position: relative; height: 106px; background: url('images/header-bg.gif') repeat-x 0 0; margin-bottom: 26px; z-index: 5 }
h1#logo { float: left; display: inline; width: 250px; height: 70px; margin: 10px 0 0 12px; }
h1#logo a { display: block; height: 70px; background: url('images/logo1a.gif') no-repeat 0 0; }
Bardzo proszę o pomoc czy podpowiedz.
Uprzedzę, że jestem osobą dość początkującą w HTML i CSS - rozumiem zasady, ale gubię się w szczegółach dlatego bardzo dziękuję za zainteresowanie !
Pracuję nad stroną która zasadniczo ma w głównej części 2 pola tekstowe (lewe wąskie, prawe szerokie). Ale na dwóch podstronach chciałabym zamieścić tylko jedno duże pole tekstowe. Metodą "prób i błędów" uzyskałam jedną przestrzeń, ale nie potrafię jej wycentrować. To znaczy strona ma zasadniczą szerokość 980px. Na moim laptopie jest OK, ale na monitorze o większej szerokości (rozdzielczości 1260px) to pojedyncze pole tekstowe nie wyświetla się w jednej linii z obrazkami tylko albo na całą szerokość ekranu albo przesunięte do prawego lub lewego brzegu..Czyli krótko - co zrobić w kodzie html/css, żeby ta główna, pojedyncza przestrzeń z tekstem wyświetlała się na środku, w jednej linii z górą i dołem strony i miała tę samą szerokość co inne elementy strony niezależnie od wielkości ekranu.
Załączam właściwą stronę dokumentu html i kod css.
Siedzę nad tym trzeci dzień i sama już chyba nic nie wymyślę.
Pomóżcie. Z góry wszystkim dziękuję!!!
********** CSS ***************
*****************************
* { margin: 0; padding: 0; outline:0; }
body {
font-size: 12px;
line-height: 22px;
font-family: "Verdana", Arial, Helvetica, sans-serif;
color: #4a4a4a;
background: #fff url('images/bg.gif') repeat-x 0 106px;
}
a { color: #0252aa; text-decoration: none; cursor:pointer; }
a:hover { text-decoration: underline; }
a img { border: 0px none; }
input, textarea, select { font-size: 12px; }
textarea { overflow: auto; }
.cl { display: block; height: 0; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; }
.notext { font-size: 0; line-height: 0; text-indent: -4000px; }
.left, .alignleft { float: left; display: inline; }
.right, .alignright { float: right; display: inline; }
.shell { width: 980px; margin: 0 auto; }
.last { margin-right: 0 !important; }
#header { position: relative; height: 106px; background: url('images/header-bg.gif') repeat-x 0 0; margin-bottom: 26px; z-index: 5 }
h1#logo { float: left; display: inline; width: 250px; height: 70px; margin: 10px 0 0 12px; }
h1#logo a { display: block; height: 70px; background: url('images/logo1a.gif') no-repeat 0 0; }