Dobrze, pora odświeżyć ten temat...
kz2 pisze:Całą naukę HTML (a w zasadzie teraz XHTML) i CSS muszę zacząć od nowa (bo zatrzymałem się na 2000 roku). Trudno, takie życie
Jestem w fazie nauki XHTML i CSS (w zasadzie nie umiem aby jeszcze "warstw", ale to kwestia czasu).
Dlaczego jednak odświeżam temat?
Bo stworzyłem coś takiego:
[url]http://koza_aukcje.w.interia.pl/wyznacznik/index.html[/url]
(programowane w XHTML 1.0 i CSS 2.0)
Na razie staram się osiągnąć zamierzony efekt za pomocą tabeli (zagnieżdżonych tabel nie stosuję). Staram się, ale jakoś nie wychodzi. Innymi słowy: w dalszym ciągu mam ten sam problem (nie idzie "wydłużyć" tego tła). Dlatego zwracam się z nim do Was...
Oto aktualny kod źródłowy strony:
Kod: Zaznacz cały
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<!-- Opracowanie: koza -->
<head>
<title>Wyznacznik</title>
<meta name="robots" content="all" />
<meta name="description" content="Wyznacznik - www.wyznacznik.prv.pl - od kibiców, o kibicach, nie tylko dla kibiców..." />
<meta name="author" content="Wyznacznik" />
<meta name="keywords" content="słowa kluczowe" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<link rel="stylesheet" href="pliki/styl.css" type="text/css" />
</head>
<body>
<table cellspacing="0">
<tr>
<td> </td>
<td id="logo">
<a href="adres"><img src="pliki/grafika/logo.gif" alt="Wyznacznik - www.wyznacznik.prv.pl - od kibiców, o kibicach, nie tylko dla kibiców..." /></a>
</td>
<td> </td>
</tr>
<tr>
<td id="glowna" colspan="2" rowspan="2">
<div id="glowny">
<h1>O Wyznaczniku:</h1>
<p>Witaj na Wyznaczniku! Na stronie, jak to kiedyś ktoś ładnie powiedział, "od kibiców, o kibicach, ale nie tylko dla kibiców...".</p>
<p>W zasadzie słowem wstępu powinienem napisać coś więcej o tym "całym" Wyznaczniku. Powinienem, ale tego na razie nie zrobię. Postanowiłem bowiem, że najpierw zajmę się najważniejszą sprawą, a za takową uważam przedstawienie naszego stanowiska wobec problemów jakkolwiek związanych z kibicowaniem (dopiero nieco później, szerzej opiszę działalność Wyznacznika). Zależy mi na tym, by już na samym początku jasno i konkretnie przedstawić główne stanowisko strony, ażeby potem uniknąć wszelkich zbędnych niejasności.</p>
<p class="gornyodstep">Niech już od samego początku będzie jasno sprecyzowane, co entuzjastycznie popieramy, co akceptujemy, czego nie tolerujemy, a co stanowczo potępiamy...</p>
<h2>Główne stanowisko Wyznacznika:</h2>
<ul class="rzedy1">
<li>kibicowanie uważamy za rzecz zdumiewającą, i za nieodzowny element piłki nożnej <a href="" class="maly" onclick="this.target='_blank'">[szczegóły]</a></li>
</ul>
<ul class="rzedy2">
<li>... dlatego, w miarę możliwości, bronimy idei kibicowania <a href="" class="maly" onclick="this.target='_blank'">[szczegóły]</a></li>
<li>... i staramy się obiektywnie podejmować wszelkie sprawy związane z tą tematyką <a href="" class="maly" onclick="this.target='_blank'">[szczegóły]</a></li>
</ul>
<ul class="rzedy1">
<li>tolerujemy poszczególne zasady ruchu Hooligans... <a href="" class="maly" onclick="this.target='_blank'">[szczegóły]</a></li>
</ul>
<ul class="rzedy2">
<li>... ale nie popieramy stadionowej przemocy <a href="" class="maly" onclick="this.target='_blank'">[szczegóły]</a></li>
<li>... oraz przemocy użytej wobec osób postronnych (tudzież ich mienia) <a href="" class="maly" onclick="this.target='_blank'">[szczegóły]</a></li>
<li>... zainteresowanych "chuliganką", zachęcamy do walk umawianych, tzw. ustawek <a href="" class="maly" onclick="this.target='_blank'">[szczegóły]</a></li>
</ul>
<ul class="rzedy1">
<li>w miarę możliwości staramy się zwalczać przemoc w obrębie stadionu i przemoc wobec osób postronnych... <a href="" class="maly" onclick="this.target='_blank'">[szczegóły]</a></li>
</ul>
<ul class="rzedy2">
<li>... ale nie interesuje nas donoszenie na policję <a href="" class="maly" onclick="this.target='_blank'">[szczegóły]</a></li>
<li>... każdą stadionową przemoc, oraz przemoc wobec osób postronnych będziemy się starać wyeliminować za pomocą akcji <a href="">"Nie dla osób postronnych!"</a> <a href="" class="maly" onclick="this.target='_blank'">[szczegóły]</a></li>
<li>... staramy się zrozumieć niektórych pseudokibiców i dotrzeć do Nich w sposób pokojowy (środki "zaradcze" podjętę przez policję, PZPN, czy inne instytucje, uważamy za niepokojowe i nieskuteczne) <a href="" class="maly" onclick="this.target='_blank'">[szczegóły]</a></li>
<li> ... staramy się również zrozumieć drugą ze stron - policję, i staramy się udowodnić, że ich podejście do problemu stadionowej przemocy jest nietrafione <a href="" class="maly" onclick="this.target='_blank'">[szczegóły]</a></li>
</ul>
<ul class="rzedy1">
<li>tolerujemy każdy radykalizm kibiców (nawet polityczny, czy patriotyczny), ale do czasu, aż nie rani poglądów innego człowieka... <a href="" class="maly" onclick="this.target='_blank'">[szczegóły]</a></li>
</ul>
<ul class="rzedy2">
<li>... dlatego, już głęboko potępiamy wszelkie przejawy szowinizmu, faszyzmu, rasizmu, oraz innych ideologii skrajnie dyskryminacyjnych <a href="" class="maly" onclick="this.target='_blank'">[szczegóły]</a></li>
<li>... wyśmiewanie się (w sposób żartobliwy!) z innych ekip, nie uważamy za przejaw dyskryminacji czy nietolerancji, dlatego wszelkie tego typu "zabiegi", akceptujemy <a href="" class="maly" onclick="this.target='_blank'">[szczegóły]</a></li>
</ul>
</div>
</td>
<td id="menu">
<img src="pliki/grafika/poczytaj.gif" alt="" />
<ul>
<li><a href="adres"><strong>O co chodzi?</strong></a> <span class="maly">(jeśli nie wiesz)</span></li>
<li><a href="adres"><strong>Ekipy</strong></a> <span class="maly">(polskie i zagraniczne grupy kibiców)</span></li>
<li><a href="adres"><strong>Takietam</strong></a> <span class="maly">(takatam wszelka publicystyka)</span></li>
</ul>
<img src="pliki/grafika/wesprzyj.gif" alt="" />
<ul>
<li><a href="adres"><strong>"Nie dla osób postronnych!"</strong></a> <span class="maly">(akcja przeciwko pseudochuliganom atakującym osoby postronne)</span></li>
<li><a href="adres"><strong>Zbiórka pieniędzy dla chorego Sebastiana</strong></a> <span class="maly">(zrealizujmy marzenie Sebastiana)</span></li>
</ul>
<img src="pliki/grafika/porozmawiaj.gif" alt="" />
<ul>
<li><a href="adres"><strong>Forum</strong></a> <span class="maly">(zapraszamy do dyskusji...)</span></li>
<li><a href="adres"><strong>Chat</strong></a> <span class="maly">(..., no chyba, że wolisz porozmawiać na czacie)</span></li>
</ul>
<img src="pliki/grafika/naciesz_wzrok.gif" alt="" />
<ul>
<li><a href="adres"><strong>Najpiękniejsze oprawy wg. Wyznacznika</strong></a></li>
<li><a href="adres"><strong>Wszystkie zdjęcia</strong></a></li>
</ul>
<img src="pliki/grafika/zobacz_liczby.gif" alt="" />
<ul>
<li>Łączna ilość opisanych ekip: <strong>35</strong></li>
<li>Ilość zdjęć: <strong>2</strong></li>
<li>Statystyki odwiedzin:
<div id="stat"><img alt="" src="http://adstat.4u.pl/s4u.gif" /></div></li>
</ul>
</td>
</tr>
<tr>
<td id="reklama">
<img src="pliki/grafika/zareklamuj_sie.gif" alt="" />
<ul>
<li> <a href="adres"><strong>Oferta reklamy</strong></a></li>
</ul>
<div id="linki"><p>(pamiętaj, że Wyznacznik utrzymuje się z reklam!)</p><a class="maly" href="http://www.webinside.pl/">WebInside.Pl - strona webmasterów i webdeveloperów</a> <strong>|</strong> <a class="maly" href="adres">drugi link pozycjonujący</a> <strong>|</strong> <a class="maly" href="adres">trzeci link pozycjonujący</a> <strong>|</strong> <a class="maly" href="adres">czwarty link pozycjonujący</a> <strong>|</strong> <a class="maly" href="adres">piąty link pozycjonujący</a> <strong>|</strong> <a class="maly" href="adres">szósty link pozycjonujący</a> <strong>|</strong> <a class="maly" href="adres">siódmy link pozycjonujący</a> <strong>|</strong> <a class="maly" href="adres">ósmy link pozycjonujący</a> <strong>|</strong> <a class="maly" href="adres">dziewiąty link pozycjonujący</a> <strong>|</strong> <a class="maly" href="adres">dziesiąty link pozycjonujący</a></div>
</td>
</tr>
<tr>
<td> </td>
<td id="stopka">
<a href="adres">O stronie</a> | <a href="adres">Redakcja</a> | <a href="adres">Prawa autorskie</a> | <a href="adres">Reklama</a> | <a href="adres">FAQ</a><br /><br />
<span class="maly"><a href="http://validator.w3.org/check?uri=http://koza_aukcje.w.interia.pl/TS_2_02/index.html" onclick="this.target='_blank'"><img src="pliki/grafika/valid-xhtml10.gif" alt="Valid XHTML 1.0!" /></a> <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://koza_aukcje.w.interia.pl/TS_2_02/" onclick="this.target='_blank'"><img src="pliki/grafika/valid-css20.gif" alt="Valid CSS 2.0!" /></a> © copyright 2oo6 by <a class="maly" href="adres">Wyznacznik</a></span>
</td>
<td> </td>
</tr>
</table>
</body>
</html>
A to już style CSS:
Kod: Zaznacz cały
body {
color: black; background: #FFFFFD; margin-top: 33px; margin-bottom: 33px;
}
table {
margin: auto; font: 11px Verdana, sans-serif; border-color: #5D637F;
}
td {
width: 178px; padding: 0;
}
img {
border: none;
}
h1 {
text-align: center; font: bold 13px Verdana, sans-serif; margin: 0px auto 15px auto;
}
h2 {
text-align: left; font: bold 12px Verdana, sans-serif; margin: 15px auto 2px auto;
}
span.maly {
font: 10px Verdana, sans-serif;
}
p {
margin: 0px auto 2px auto;
}
p.gornyodstep {
margin: 15px auto 2px auto;
}
a:link {
font-size: 11px; color: #4D536F; font-family: Verdana, sans-serif; text-decoration: underline;
}
a:active {
font-size: 11px; color: #4D536F; font-family: Verdana, sans-serif; text-decoration: underline;
}
a:visited {
font-size: 11px; color: #4D536F; font-family: Verdana, sans-serif; text-decoration: underline;
}
a:hover {
font-size: 11px; color: #FFA500; font-family: Verdana, sans-serif; text-decoration: underline;
}
a.maly:link {
font-size: 10px; color: #4D536F; font-family: Verdana, sans-serif; text-decoration: underline;
}
a.maly:active {
font-size: 10px; color: #4D536F; font-family: Verdana, sans-serif; text-decoration: underline;
}
a.maly:visited {
font-size: 10px; color: #4D536F; font-family: Verdana, sans-serif; text-decoration: underline;
}
a.maly:hover {
font-size: 10px; color: #FFA500; font-family: Verdana, sans-serif; text-decoration: underline;
}
td#logo {
width: 525px; border-bottom-style: solid; border-bottom-width: 2px; border-left-style: solid; border-left-width: 2px;
}
td#glowna {
padding: 12px; width: 703px; vertical-align: top; border-right-style: solid; border-right-width: 2px;
}
td#menu {
vertical-align: top;
}
td#reklama {
vertical-align: bottom;
}
td#stopka {
padding: 3px; width: 525px; border-top-style: solid; border-top-width: 2px; border-left-style: solid; border-left-width: 2px;
}
ul {
margin-left: 2em; margin-top: 2px; padding: 2px;
}
ul li {
list-style-type: disc; margin-bottom: 1px;
}
ul.rzedy1 {
margin-left: 2em; margin-top: 0; margin-bottom: 0; padding: 0;
}
ul.rzedy1 li {
list-style-type: disc; margin-bottom: 1px;
}
ul.rzedy2 {
margin-left: 4em; margin-top: 0; margin-bottom: 0; padding: 0;
}
ul.rzedy2 li {
list-style-type: disc; margin-top: 0; margin-bottom: 1px;
}
div#stat {
text-align: center; margin-top: 5px;
}
div#glowny {
background: #EDF0F3; text-align: left; padding: 3px;
}
div#linki {
text-align: center; margin-left: 3px; font: 10px Verdana, sans-serif;
}
W jaki sposób mam osiągnąć zamierzony cel?
A może w chwili obecnej (tj. układ na tabelce) nie zrobię takiego efektu?
A jeśli na warstwach też się nie da? (a padły już takie przypuszczenia :/
)
Proszę o pomoc (i wyrozumiałość
).
Pozdr.
Ewentualnie zrobię nowy projekt strony...