jak wycentrować pole tekstowe niezależnie od rozdzielczości eranu?

jak wycentrować pole tekstowe niezależnie od rozdzielczości eranu? - Wersja do druku

+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: jak wycentrować pole tekstowe niezależnie od rozdzielczości eranu? (/thread-jak-wycentrowac-pole-tekstowe-niezaleznie-od-rozdzielczo%C5%9Bci-eranu)

jak wycentrować pole tekstowe niezależnie od rozdzielczości eranu? - cew - 04-12-2010

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 dziękuję za zainteresowanie...

Załaczam rysunki (jak zrobić tak jak na obrazku nr2 ??)

Pracuję nad stroną która zasadniczo w głównej części ma 2 pola tekstowe (lewe wąskie, prawe szerokie). Ale na dwóch podstronach chciałabym zamieścić tylko jedno duże pole z tekstem. 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 kolumna 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 załączam właściwą stronę dokumentu html i kod css.

Siedzę nad tym trzeci dzień i sama już chyba nic nie wymyślę.
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>
tytuł tytuł
</title>

<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
<meta name="Description" content="...................................." />
<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" />



<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">link link..........</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"> </div>
</div>
</div>
</div>

<div class="cl"> </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 © 2010 .............................. | Administrator: ............................
</p>
</div>
</div>
<! - KONIEC STOPKA - !>

</body>
</html>

RE: jak wycentrować pole tekstowe niezależnie od rozdzielczości eranu? - Pedro84 - 04-12-2010

Pakujesz w diva (kontener) i jego środkujesz: margin:0 auto;