Czy mógłby ktoś mi pomóc ...... Męczę się już bardzo długo i nie mogę sobie poradzić jak zrobić by zawartość strony zawsze była wyśrodkowana w pionie i poziomieoto kod strony
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><link type="text/css" media="screen" rel="stylesheet" href="style.css" /><title>Uncomplicated
</title></head><body> <div id="container"> <div id="outer"> <div id="inner"> <div id="tt10">text
</div> <div id="tt1">.....
</div> <div id="tt2">.....
</div> <div id="tt3">.....
</div> <div id="tt4">.....
</div> <div id="tt5">.....
</div> <div id="tt6">.....
</div> <div id="tt7">.....
</div> <div id="text10"><a href="#">pl
<span>ťwersja polska
</span></a></div><div id="text11"><a href="#">en
<span>ťenglish version
</span></a></div> </div></div> <ul id="tabnav"> <li><a href="index.html" class="active">home
</a></li> <li><a href="#">a.....
</a></li> <li><a href="#">.....
</a></li> <li><a href="#">.....
</a></li> <li><a href="#">.....
</a></li> </ul> <div id="sidebar"> <h3>.....
</h3> <ul> <li><a href="#">.....
</a></li> <li><a href="#">.....
</a></li> <li><a href="#">M.....
</a></li> <li><a href="#">.....
</a></li> </ul> <h3>Links
</h3> <ul> <li><a href="#">Link 1
</a></li> <li><a href="#">Link 2
</a></li> <li><a href="#">Link 3
</a></li> <li><a href="#">Link 4
</a></li> <li><a href="#">Link 5
</a></li> <li><a href="#">Link 6
</a></li> </ul> <h3>S.....
</h3> <ul> <li><a href="#">.....1
</a></li> <li><a href="#"> 2
</a></li> <li><a href="#">3
</a></li> </ul> </div> <div id="content"> <h2>TEXT
</h2> <p>text
</p> <h2>TEXT
</h2> <p>text
</p> <p>text
</p> </div> <div id="footer"> <p><a href="http://validator.w3.org">Valid XHTML 1.0
</a> | Copyright Š
<a href="#">.......
</a> | Design by
<a href="http://www........">......
</a></p> </div></div></body></html
a oto kod css
/* Main Body */body, html { width: 760px; /* jakas sobie szerokosc */margin-left: auto;margin-right: auto; background:#000; vertical-align:middle; font-family: verdana, sans-serif; font-size: 11px; }#container { width: 760px; padding: 30px; padding-bottom: 1px; vertical-align:middle; position:relative; border: 1px solid #7B7C7C; background: #000; margin: 62px auto; font-family: verdana, sans-serif; font-size: 11px; }#outer {position: absolute; top: 50%; left: 0px; width: 100%; height: 1px;}#inner {margin-left: -250px; position: absolute; top: -150px; left: 50%; width: 700px; height: 300px}.bgtext {font-size: 134px; position:relative; top:73px; left:-84px; right:-80px; cursor:crosshair; }.bgtext, .footertext {color:#222; font-family:"verdana", "helvetica", "sans serif";} .footertext {font-size:12px; position:absolute; top:320px; text-align:center; width:500px;}div#text1, div#text2, div#text3, div#text4, div#text5, div#text6, div#text7, div#text8, div#text9, div#text10, div#text11 {color:#7B7C7C; font-family:"verdana", "helvetica", "sans serif"; position:absolute;}div#text1 {font-size:29px; top:6px; left:0px;} div#text2 {font-size:60px; top:46px; left:20px;} div#text3 {font-size:35px; top:60px; left:300px;} div#text4 {font-size:50px; top:220px; left:45px;} div#text5 {font-size:39px; top:220px; left:260px;} div#text6 {font-size:45px; top:-5px; left:200px;} div#text7 {font-size:28px; top:284px; left:330px;}div#text8 {font-size:15px; top:333px; left:-105px;} div#text9 {font-size:15px; top:333px; left:-135px;}div#text10 {font-size:17px; top:-85px; left:600px;}div#text11 {font-size:17px; top:-85px; left:570px;} div#text1 a:hover span {top: 3px; left: 0px; } div#text2 a:hover span {top: -2px; left: 0px; } div#text3 a:hover span {top: -4px; left: 0px; } div#text4 a:hover span {top: -2px; left: 0px; } div#text5 a:hover span {top: -2px; left: 0px; } div#text6 a:hover span {top: -4px; left: 0px; } div#text7 a:hover span {top: -4px; left: 0px; } div#text8 a:hover span {top: 8px; left: 0px; } div#text9 a:hover span {top: 8px; left: -100px; } div#text10 a:hover span {top: 5px; left: -70px; } div#text11 a:hover span {top: 5px; left: -40px; } div#tt1, div#tt2, div#tt3, div#tt4, div#tt5, div#tt6, div#tt7, div#tt8, div#tt9, div#tt10 { color:#7B7C7C; font-family:"verdana", "helvetica", "sans serif"; opacity: 0.2; position:absolute; -moz-opacity: 0.2; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20) } div#tt1 {font-size:29px; top:6px; left:0px;} div#tt2 {font-size:60px; top:46px; left:20px;} div#tt3 {font-size:35px; top:60px; left:300px;} div#tt4 {font-size:50px; top:220px; left:45px;} div#tt5 {font-size:39px; top:220px; left:260px;} div#tt6 {font-size:45px; top:-5px; left:200px;} div#tt7 {font-size:28px; top:274px; left:330px;}div#tt8 {font-size:15px; top:333px; left:-105px;} div#tt9 {font-size:15px; top:333px; left:-135px;} div#tt10 {font-size:134px; top:69px; left:-84px; } div#tt1 a:hover span {top: -3px; left: 0px; }div#tt2 a:hover span {top: -10px; left: 0px; } div#tt3 a:hover span {top: -4px; left: 0px; }div#tt4 a:hover span {top: -6px; left: 0px; } div#tt5 a:hover span {top: -6px; left: 0px; } div#tt6 a:hover span {top: -4px; left: 0px; } div#tt7 a:hover span {top: -4px; left: 0px; }div#tt8 a:hover span {top: 8px; left: 0px; }div#tt9 a:hover span {top: 8px; left: -100px; } div#tt10 a:hover span {top: 8px; left: -100px; } div#inner a:hover, div#inner2 a:hover {background: none; cursor:crosshair;}div#inner a span {display: none;}div#inner a:visited span {display:none;}div#inner a {text-decoration: none; color:blue;}div#text8 a {text-decoration: none; color:red;}div#text9 a {text-decoration: none; color:red;}div#text10 a {text-decoration: none; color:red;}div#text11 a {text-decoration: none; color:red;}div#inner a:hover span {display: block; position:relative; background:none; font-size:14px}div#text8 a:hover span {display: block; position:relative; background:none; font-size:12px}div#text9 a:hover span {display: block; position:relative; background:none; font-size:12px}div#text10 a:hover span {display: block; position:relative; background:none; font-size:12px}div#text11 a:hover span {display: block; position:relative; background:none; font-size:12px}div#inner a:link, div#inner a:visited {text-decoration:none;}div#inner a:hover {text-decoration:none}div#inner div#content a:hover {text-decoration:underline;} div#close, div#top {width:17px; height:17px; background:none; text-align:center; font-family:"verdana", "helvetica", "sans serif"; font-weight:bold; font-size:12px; border: 1px solid #222} div#top {position:relative; left:573px; top:319px}div#close {position:relative; left:573px; top:-47px;} div#inner div#close a:link, div#inner div#top a:link {color:#fff; cursor:help;}div#inner div#close a:visited, div#inner div#top a:visited {color:#fff; cursor:help;}div#inner div#close a:hover, div#inner div#top a:hover {color:#fff; cursor:help;}div#urltext {font-family:"verdana", "helvetica", "sans serif"; font-size:30px; position:absolute; top:-87px; left:-69px} div#urltext, div#inner div#content a:link, div#inner div#content a:visited, div#inner a:hover {color:red;}div#inner a:hover span {color:#ff7c11}div#text8 a:hover span {color:red}div#text9 a:hover span {color:red}div#text10 a:hover span {color:red}div#text11 a:hover span {color:red}div#text8 a:hover {color:black}div#text9 a:hover {color:black}div#text10 a:hover {color:black}div#text11 a:hover {color:black}div#content div#titlebar {border: 1px solid #7B7C7C; background: #000; font-weight: normal; color: #ff7c11;} div#content {margin-left:0; padding-right:8px;} .titleblock {font-family:"verdana", "helvetica", "sans serif"; font-size:12px; color:#ff7c11; margin-right:6px; margin-top:10px; margin-bottom:10px; margin-left:2px; border:1px solid #222; padding:4px} .titleblock span {color:#ff7c11}#urltext a:link {color:#444}#urltext a:visited {color:#444}#urltext a:hover {color:#444}#urltext a:active {color:#444} /* Header */#header { width: 500px; border-left: 4px solid #7B7C7C; border-right: 4px solid #7B7C7C; margin: 0 auto; margin-bottom: 20px; font-family: verdana, sans-serif; font-size: 36px; letter-spacing: 0.4em; text-align: center; }/* Navigation */#tabnav { height: 20px; margin: 0; position:relative; padding-left: 10px; background: url(images/tab_bottom.gif) repeat-x bottom; cursor:crosshair; }#tabnav li { margin: 0; padding: 0; display: inline; list-style-type: none; cursor:crosshair; } #tabnav a:link, #tabnav a:visited { float: left; background: #f3f3f3; font-size: 10px; line-height: 14px; font-weight: bold; padding: 2px 10px 2px 10px; margin-right: 4px; border: 1px solid #7B7C7C; text-decoration: none; color: #666; cursor:crosshair; }#tabnav a:link.active, #tabnav a:visited.active { border-bottom: 1px solid #fff; background: #fff1ff; color: #000; cursor:crosshair; }#tabnav a:hover { background: #fff1ff; cursor:crosshair; } /* Main Content */#content { width: 550px; margin-top: 15px; color: #ffffff; text-align:justify; position:relative;} #content h2 { font-size: 20px; position:relative;} #content p { font-size: 12px; position:relative;} #content a, a:visited { color: #ffffff; text-decoration: underline; position:relative;} #content a:hover { color: #FF7C11; position:relative;} /* Sidebar */#sidebar { width: 190px; float: right; clear: none; margin-top: 15px; font-family: verdana, sans-serif; position:relative;} #sidebar h3 { border-bottom: 1px solid #7B7C7C; color: #5B5C5C; font-size: 14px; position:relative;} #sidebar ul { font-size: 12px; color: red; position:relative;} #sidebar a, a:visited { color: #5B5C5C; text-decoration: none; position:relative;} #sidebar a:hover { color: #FF7C11; position:relative;} /* footer */#footer { color: #7B7C7C; text-align: center; border-top: 1px solid #7B7C7C; margin-top: 30px; margin-bottom: 0; } #footer a, a:visited { color: #7B7C7C; text-decoration: none; cursor:crosshair; } #footer a:hover { color: red; cursor:crosshair; }
[css] wyśrodkowanie całej strony, wyśrodkowanie strony w pionie i poziomie
10.09.2007, 11:47:22
wszystko gra dzięki bardzo
