jak wycentrować stronę niezależnie od szerokości ekranu?

Wszystko o HTML, XHTML, XML, CSS.
cew
Posty: 1
Rejestracja: 04 gru 2010, 14:09:25
Reputacja: 0
Płeć: Niewybrana
User Agent: Firefox Windows 1024x768

jak wycentrować stronę niezależnie od szerokości ekranu?

Postautor: cew » 04 gru 2010, 14:21:46

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... :( (chodzi o fragment kodu HTML <! - GLOWNA CZESC - !>)

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; }

#navigation { position: relative; float: right; display: inline; margin-top: 32px; z-index: 5; }
#navigation ul { list-style: none outside none; }
#navigation ul li { position: relative; float: left; display: inline; margin-right: 10px; }
#navigation ul li a { width: 84px; height: 44px; display: block; color: #474747; font-size: 13px; text-align: center; line-height: 43px; padding-right: 2px; }
#navigation ul li a:hover,
#navigation ul li a.active,
#navigation ul li a.hover { background: url('images/nav-hover.gif') no-repeat 0 0; text-decoration: none; z-index: 1 }
#navigation ul li .dd-holder { position: absolute; top: 33px; left: 0; display: none; width: 152px; height: 100%; z-index: 5; }
#navigation ul li .dd { background: url('images/dd-bg.png') repeat-y 0 0; }
#navigation ul li .dd-t { width: 152px; height: 7px; background: url('images/dd-t.gif') no-repeat 0 0; font-size: 0; line-height: 0; text-indent: -4000px }
#navigation ul li .dd-b { position: relative; width: 152px; height: 9px; background: url('images/dd-b.png') no-repeat 0 0; }
#navigation ul li .dd ul { padding-top: 5px; padding-left: 17px; }
#navigation ul li .dd ul li { float: none; display: block; height: 12px; padding-bottom: 10px; background: url('images/pink-arrow.gif') no-repeat 0 4px; padding-left: 10px; margin: 0 }
#navigation ul li .dd ul li a { height: 12px; font-size: 11px; line-height: 12px; width: auto; height: auto; height: 100%; color: #6c6c6c; text-align: left; }
#navigation ul li .dd ul li a:hover { background: none; color: #c40083; }

#slider { position: relative; z-index: 1; height: 225px; margin-bottom: 15px; }
#slider .shell { position: relative; height: 225px; }

#slider1 { position: relative; z-index: 1; height: 400px; margin-bottom: 15px; }
#slider1 .shell1 { position: relative; height: 400px; }

.slider-left1 { float: left; display: inline; width: 284px; height: 400px; background: url('images/slider-left-bg1.gif') no-repeat 0 0; color: #fff; padding-left:20px; padding-right:20px; padding-top:18px; padding-bottom:0 }
.slider-left1 h2 { font-size: 20px; font-weight: normal; margin-bottom: 13px; font-family: Arial, Helvetica, sans-serif; }
.slider-left1 p { font-size: 13px; line-height: 18px; font-family: Arial; }
.slider-left1 .order-now { display: block; width: 134px; height: 38px; background: url('images/ordernow.gif') no-repeat 0 0; font-size: 16px; color: #fff; line-height: 37px; text-align: center; margin-left:69px; margin-right:0; margin-top:41px; margin-bottom:0 }
.slider-left1 .order-now:hover { background-position: 0 bottom; text-decoration: none; }
.slider-right1 { position: relative; float: left; display: inline; width: 656px; height: 400px; }
.slider-content1 { position: relative; width: 656px; height: 400px; overflow: hidden; }
.slider-content1 ul { list-style: none outside none; height: 100%; overflow: hidden; }
.slider-content1 ul li,
.jcarousel-clip { position: relative; width: 656px; height: 400px; z-index: 1; }


.slider-left { float: left; display: inline; width: 284px; height: 207px; background: url('images/slider-left-bg.gif') no-repeat 0 0; color: #fff; padding-left:20px; padding-right:20px; padding-top:18px; padding-bottom:0 }
.slider-left h2 { font-size: 20px; font-weight: normal; margin-bottom: 13px; font-family: Arial, Helvetica, sans-serif; }
.slider-left p { font-size: 13px; line-height: 18px; font-family: Arial; }
.slider-left .order-now { display: block; width: 134px; height: 38px; background: url('images/ordernow.gif') no-repeat 0 0; font-size: 16px; color: #fff; line-height: 37px; text-align: center; margin-left:69px; margin-right:0; margin-top:41px; margin-bottom:0 }
.slider-left .order-now:hover { background-position: 0 bottom; text-decoration: none; }
.slider-right { position: relative; float: left; display: inline; width: 656px; height: 225px; }
.slider-content { position: relative; width: 656px; height: 225px; overflow: hidden; }
.slider-content ul { list-style: none outside none; height: 100%; overflow: hidden; }
.slider-content ul li,
.jcarousel-clip { position: relative; width: 656px; height: 225px; z-index: 1; }

.slider-nav { position: absolute; bottom: 14px; right: 19px; display: block; z-index: 10; }
.slider-nav ul { list-style: none outside none; }
.slider-nav ul li { float: left; display: inline; width: 20px; height: 20px; margin-right: 4px; }
.slider-nav ul li a { width: 20px; height: 20px; display: block; background: url('images/slider-nav.png') no-repeat 0 0; font-size: 0; line-height: 0; text-indent: -4000px }
.slider-nav ul li a:hover,
.slider-nav ul li a.active { background: url('images/slider-nav-hover.png') no-repeat 0 0; }

#main { }
#main h2 { font-size: 20px; font-weight: normal; color: #4c4c4c; font-family: Arial, Helvetica, sans-serif; }
#main h3 { font-size: 20px; font-weight: normal; color: #4c4c4c; font-family: Arial, Helvetica, sans-serif; }

#sidebar { float: left; display: inline; width: 324px; }
#sidebar .text-container { min-height: 570px; background: #eaebeb url('images/text-containerbg.gif') repeat-x 0 0; margin-bottom: 20px; padding-left:18px; padding-right:15px; padding-top:20px; padding-bottom:0; }
#sidebar .text-container1 { min-height: 460px; background: #eaebeb url('images/text-containerbg.gif') repeat-x 0 0; margin-bottom: 0px; padding-left:0px; padding-right:0px; padding-top:1px; padding-bottom:0; }
#sidebar .text-container h2 { margin-bottom: 6px; }

#sidebar2 { float: left; display: inline; width: 60px; }
#sidebar .text-container2 { min-height: 460px; background: #eaebeb url('images/text-containerbg.gif') repeat-x 0 0; margin-bottom: 0px; padding-left:0px; padding-right:0px; padding-top:1px; padding-bottom:0; }

.post { }
.post h2 { border-bottom: 5px solid #e4e4e4; padding-bottom: 5px; margin-bottom: 11px; }
.post h3 { border-bottom: 5px solid #e4e4e4; padding-bottom: 5px; margin-bottom: 11px; width: 400px; }
.post .more { display: block; background: url('images/pink-arrow.gif') no-repeat 0 4px; color: #009933; font-size: 11px; line-height: 12px; padding-left: 10px; margin-top: 10px }
.post .more:hover { color: #003300; text-decoration: none; }
.post .link { display: block; color: #006600; font-size: 11px; line-height: 12px; padding-left: 10px; margin-top: 1px }
.post .link:hover { color: #009933; text-decoration: none; }

#sidebar .post { padding: 0 18px 0 14px; }
#sidebar .post .more { margin-top: 17px; }

#content { float: right; display: inline; width: 600px; padding-top: 17px; margin-right: 10px;}
#content1 { float: left; display: inline; width: 970px; padding-top: 17px; margin-right: 10px;}

.col { margin-bottom: 25px; }
.cols-2 { float: left; display: inline; width: 280px; margin-right: 40px; }

#footer { height: 87px; background: url('images/footer-bg.gif') repeat-x 0 0; font-size: 11px; color: #7f7f7f; font-family: sans-serif; }
#footer .shell { padding: 26px 0 0 0; }
#footer a { color: #7f7f7f; }
#footer p.left span { padding: 0 3px; }


*****************************
************ HTML ***************
*****************************

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html lang="pl" xmlns="http://www.w3.org/1999/xhtml" dir="ltr">

<head>

<title>
tytul, tytul, tytul...
</title>

<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
<meta name="Description" content="opis, opis, opis" />
<meta name="Keywords" content="słowa kluczowe, złowa kluczowe, slowa kluczowe..." />

<link rel="shortcut icon" href="css/images/favicon.ico" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />


<!--[if IE 6]>
<link rel="stylesheet" href="css/ie6.css" type="text/css" media="all" />
<script src="js/png-fix.js" type="text/javascript"></script>
<![endif]-->

<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script src="js/jquery.jcarousel.js" type="text/javascript"></script>
<script src="js/js-func.js" type="text/javascript"></script>

</head>

<body>
<! - NAGLOWEK - !>

<div id="header">
<div class="shell">
<h1 id="logo" class="notext">
<a href="index.html">odsyłacz...</a>
</h1>


<! - NAWIGACJA - !>


<div id="navigation">

<ul>

<li><a href="index.html">Start</a></li>
<li><a href="festschrift.html">Festschrift</a></li>
<li><a href="bibliografia.html">Bibliografia</a></li>
<li><a href="pobrania.html" class="active">Do Pobrania</a><li>
<li><a href="galeria.html">Fotografie</a></li>
<li><a href="sponsorzy.html">Sponsorzy</a>

<! - CZESC MENU ROZWIJANE - !>
<div class="dd-holder">
<div class="dd-t">
</div>

<div class="dd">
<ul>
<li><a href="matzke.html">Helga Matzke</a></li>
<li><a href="connaisseur.html">Connaisseur</a></li>
<li><a href="was.html">Leszek W±s</a></li>
<li><a href="sobczynscy.html">P&M Sobczyńscy</a></li>
<li><a href="cetnarowicz.html">Cetnarowicz-Bis</a></li>
</ul>
</div>
<div class="dd-b"></div>
</div>
</li>
<! - KONIEC MENU ROZWIJANE - !>

<li><a href="kontakt.html">Kontakt</a></li>

</ul>
</div>
</div>
</div>
</div>

<! - KONIEC NAWIGACJI - !>
<! - LEWY SZARY - !>

<div id="slider">
<div class="shell">
<div class="slider-left">



<h2>Do pobrania</h2>
<p>
Tutaj jakie¶ wprowadzenie, krótki tekst, zapraszamy do...
<br>
itd., itd., itd. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>

</div>

<! - SLAJDY PRAWY PANEL - !>

<div class="slider-right">
<div class="slider-content">
<ul>
<li><img src="css/images/slider-image44.jpg" alt="" /></li>
<li><img src="css/images/slider-image43.jpg" alt="" /></li>
<li><img src="css/images/slider-image42.jpg" alt="" /></li>
<li><img src="css/images/slider-image43.jpg" alt="" /></li>
</ul>
</div>

<! - NAWIGACJA DLA SLAJDOW czyli po kropkach - OPCJONALNA ale nie konieczna - !>

<div class="slider-nav">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#" class="active">3</a></li>
<li><a href="#">4</a></li>
</ul>
</div>
</div>
</div>
</div>

<!- KONIEC SLAJDOW - !>

<! - GLOWNA CZESC - !>

<div id="main">
<div id="content1">
<div class="col">
<div class="post">


<h3>Pierwszy nagłówek na stronie...</h3>
<img src="css/images/sponsor2.gif" alt="tu może być, ale nie musi jaki¶ obrazek czy inny motyw graficzny" class="left" hspace="10" />

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum, neque ut imperdiet pellentesque, nulla tellus tempus magna, sed consectetur orci metus a justo. Aliquam ac congue nunc. Mauris a tortor ut massa egestas tempus. Pellentesque tincidunt fermentum diam sagittis ullamcorper.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum, neque ut imperdiet pellentesque, nulla tellus tempus magna, sed consectetur orci metus a justo. Aliquam ac tellus tempus magna, sed consectetur orci metus a justo. Aliquam ac congue nunc.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum, neque ut imperdiet pellentesque, nulla tellus tempus magna, sed consectetur orci metus a justo. Aliquam ac congue nunc. Mauris a tortor ut massa egestas tempus. Pellentesque tincidunt fermentum diam sagittis ullamcorper.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum, neque ut imperdiet pellentesque, nulla tellus tempus magna, sed consectetur orci metus a justo. Aliquam ac tellus tempus magna, sed consectetur orci metus a justo. Aliquam ac congue nunc.
</p>


<br>

<h3>Drugi nagłówek na stronie...</h3>

<img src="css/images/sponsor2.gif" alt="tu może być, ale nie musi jaki¶ obrazek czy inny motyw graficzny" class="left" hspace="10" />

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum, neque ut imperdiet pellentesque, nulla tellus tempus magna, sed consectetur orci metus a justo. Aliquam ac congue nunc. Mauris a tortor ut massa egestas Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum, neque ut imperdiet pellentesque, nulla tellus tempustincidunt fermentum diam sagittis ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum, neque ut imperdiet pellentesque, nulla tellus tempus magna, sed consectetur orci metus a justo. Aliquam ac congue nunc. Mauris a tortor ut massa egestas tempus.
</p>


<br><br>


<h3>Trzeci nagłówek na stronie...</h3>

<img src="css/images/sponsor2.gif" alt="tu może być, ale nie musi jaki¶ obrazek czy inny motyw graficzny" class="left" hspace="10" />

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum, neque ut imperdiet pellentesque, nulla tellus tempus magna, sed consectetur orci metus a justo. Aliquam ac congue nunc. Mauris a tortor ut massa egestas Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum, neque ut imperdiet pellentesque, nulla tellus tempustincidunt fermentum diam sagittis ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum, neque ut imperdiet pellentesque, nulla tellus tempus magna, sed consectetur orci metus a justo. Aliquam ac congue nunc. Mauris a tortor ut massa egestas tempus.
</p>


<div class="cl">&nbsp;</div>
</div>
</div>
</div>

<div class="cl">&nbsp;</div>
</div>
</div>

<! - KONIEC GLOWNA CZESC - !>

<! - STOPKA - !>

<div id="footer">
<div class="shell">
<p class="left">

<a href="index.html">Start</a>
<span>|</span>
<a href="festschrift.html">Festschrift</a>
<span>|</span>
<a href="bibliografia.html">Bibliografia</a>
<span>|</span>
<a href="pobrania.html">Do pobrania</a>
<span>|</span>
<a href="galeria.html">Fotografie</a>
<span>|</span>
<a href="sponsorzy.html">Sponsorzy</a>
<span>|</span>
<a href="kontakt.html">Kontakt</a>
</p>

<p class="right">
Copyright &copy; 2010 .............................. | Administrator: ............................
</p>
</div>
</div>
<! - KONIEC STOPKA - !>

</body>
</html>
LaY
Posty: 1120
Rejestracja: 28 sty 2009, 15:20:07
Reputacja: 33
Lokalizacja: Silesia
Płeć: Mężczyzna
User Agent: Opera Windows 1920x1080
Kontakt:

Re: jak wycentrować stronę niezależnie od szerokości ekranu?

Postautor: LaY » 04 gru 2010, 15:33:43

U mnie zwykle wystarcza jedna linijka:

CodeColon Select All Code

body{
margin: 0 auto;} 
Nie zaglądełem w Twój CSS(brak czasu) ale powinno zadziałać.
Niě nerwuj hanysa
szpakoo
Posty: 36
Rejestracja: 11 sty 2008, 19:33:28
Reputacja: 1
Płeć: Niewybrana
User Agent: Firefox Windows 1280x800
Kontakt:

Re: jak wycentrować stronę niezależnie od szerokości ekranu?

Postautor: szpakoo » 03 sty 2011, 18:50:55

częściowo jest to poprawne rozwiązanie, ale nie w każdym przypadku ponieważ IE6 tego nie zrozumie. Jemu potrzeba więcej aby wycentrować stronę.
zdaj prawo jazdy Lublin w najlepszym Ośrodku Szkolenia Kierowców
albo znajdź najbardziej odpowiednie domy weselne w Twojej okolicy.
Lukaszszsz
Posty: 573
Rejestracja: 27 lip 2005, 13:01:59
Reputacja: 3
Lokalizacja: Łódź
Płeć: Mężczyzna
User Agent: Chrome Linux 1280x800
Kontakt:

Re: jak wycentrować stronę niezależnie od szerokości ekranu?

Postautor: Lukaszszsz » 09 sty 2011, 12:50:04

CodeColon Select All Code

<style type="text/css">

div {
  border: 1px solid black; /* by widzieć rezultat */
  position: absolute;
  width: 500px;
  height: 300px;
  top: 50%;
  left: 50%;
  margin-top: -150px; /* połowa wysokości */
  margin-left: -250px; /* połowa długości */
}

</
style>

<
div></div> 


centruje w pionie i w poziomie, jak okno przeglądarki jest mniejsze niż element div to się psuję, na to też mam rozwiązanie jak chcesz ;p

to jest do elementu centrowanego na środek ekranu, jak chcesz użyć czegoś takiego w konkretnym elemencie, należy rodzica dodatkowo ustawić na relative, absolute (w zależności od tego co Ci lepiej pasuje) dzięki czemu element jest centrowany nie do okna a do rodzica. Pozycjonowanie działa w każdej przeglądarce, nawet IE6



---


btw witam wszystkich ;) nie było mnie tu od jakiś 5-6 lat, pozdrawiam ekipę która rozkręcała to forum gdy dopiero co powstawało
marbik
Posty: 1
Rejestracja: 13 sty 2012, 14:52:06
Reputacja: 0
Płeć: Niewybrana
User Agent: Firefox Linux 1280x800

Re: jak wycentrować stronę niezależnie od szerokości ekranu?

Postautor: marbik » 13 sty 2012, 14:56:02

centruje w pionie i w poziomie, jak okno przeglądarki jest mniejsze niż element div to się psuję, na to też mam rozwiązanie jak chcesz ;p

Poproszę o to rozwiązanie.
bus
Posty: 43
Rejestracja: 21 gru 2011, 23:53:51
Reputacja: 0
Płeć: Niewybrana
User Agent: Firefox Windows 1280x1024
Kontakt:

Re: jak wycentrować stronę niezależnie od szerokości ekranu?

Postautor: bus » 16 sty 2012, 22:57:07

Po co wrzucać kod html i css całej strony?
Pytanie można było napisać w 2 linijkach.. albo 2ch słowach - wpisz w google: centrowanie diva
Awatar użytkownika
piwo
Posty: 673
Rejestracja: 13 lip 2010, 16:13:44
Reputacja: 50
Płeć: Niewybrana
User Agent: Firefox Windows 1152x864

Re: jak wycentrować stronę niezależnie od szerokości ekranu?

Postautor: piwo » 16 sty 2012, 23:04:23

szpakoo WroteColonczęściowo jest to poprawne rozwiązanie, ale nie w każdym przypadku ponieważ IE6 tego nie zrozumie.
C64 też, tylko kto tego używa... (sorry, ale IE6 to przeżytek z windows 98 na którym już NIC nie działa)


.
{$signature}

Wróć do „HTML, CSS”

Kto jest online

Użytkownicy przeglądający to forum: Obecnie na forum nie ma żadnego zarejestrowanego użytkownika i 2 gości