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"> </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>
nie było mnie tu od jakiś 5-6 lat, pozdrawiam ekipę która rozkręcała to forum gdy dopiero co powstawało