pomocy :/

zaraz mnie coś trafi , nie jestem zbyt dobrym webmasterem i nie mogę sobie poradzić z czymś takim

http://wielkiblekit.net.pl/index_new.html - tylko i wyłącznie w IE rozjeżdżają mi się obrazki na samej górze...
opera -ok, firefox -ok,safari -ok. Nawet chyba na starszym IE jest poprawnie.
ręce mi opadają już...

pomocy

Originally posted by waceq:

tylko i wyłącznie w IE rozjeżdżają mi się obrazki na samej górze...

ale na starej stronie http://wielkiblekit.net.pl/ którą przerabiam, jest colspan i wszystko gra

pomogło, dziękuję za pomoc, chyba nigdy bym na to nie wpadł sam... stosowny infobar umieszcze jeszcze na stronie dla odwiedzających z IE :>

Originally posted by quiris:

Originally posted by waceq:

tylko i wyłącznie w IE rozjeżdżają mi się obrazki na samej górze...

MSIE jest jakieś wrażliwe na colspany w komórkach td. Po usunięciu colspanów przerwy znikają. Jeszcze jeden argument, aby MSIE zakopać do piachu

Originally posted by zielski:

IE swoją droga ale kto w dzisiejszych czasach jest zmuszony do tabel jako sposobu budowania stron?

Originally posted by quiris:

Byle tylko strona nie osiołkowała, a będzie ok.

Originally posted by zielski:

BTW. strona to chyba zbyt wiele powiedziane bo to jest jedena wielka grafika

Originally posted by waceq:

http://wielkiblekit.net.pl/index_new.html

Originally posted by waceq:

ale na starej stronie http://wielkiblekit.net.pl/ którą przerabiam

waceq - a nie byłbyś może zainteresowany przerobieniem strony na XHTML? :-) Chodzi o konstrukcję strony o elementy blokowe, a nie tabelki z setką komórek. Znacznie zmniejsza to objętość kodu, sprawia że strona się szybciej ładuje, można łatwiej wpływać na jej wygląd no i będzie bardziej dostępna dla wszystkich przeglądarek.

Byłbym w stanie pomóc przy tym od początku do końca, pytanie tylko czy Cię to interesuje :-) W sumie każdy zarażony ładnym robieniem stron, to krok do przodu ;-)

interesuje
Jest tak jak pisał nowotny - dostałem w "spadku" tą stronkę, bo poprzedni autor zarządał takiej kwoty, że klub spadł z krzesła.
Nie wiem ile dali za to "coś" gdzie nie ma nic, poza grafiką, ale wolę nie pytać.
W dłubaniu jestem taki sobie, ale chętnie się poduczę, więc jestem otwarty na propozycje )

OK, na początek coś prostego, żebyś ocenił czy chcesz się w to pobawić i w razie zmiany zdania uprzedził mnie, aby więcej nie tłumaczył ;-)


Po pierwsze: wyrzuć z kodu fragment

<tr>
<td><img src="gfx/Odstęp.gif" width="x" height="1" alt=""></td>
<td><img src="gfx/Odstęp.gif" width="x" height="1" alt=""></td>
[tu kilkanaście takich samych lini]
<td><img src="gfx/Odstęp.gif" width="x" height="1" alt=""></td>
<td><img src="gfx/Odstęp.gif" width="x" height="1" alt=""></td>
</tr>

body { margin-bottom: 1px; }

        <tr>
          <td><img src="gfx/index_70.gif" width="15" height="27" alt=""></td>
          <td colspan="2"><img name="index_71" src="gfx/index_71.gif" width="91" height="27" alt=""></td>
          <td colspan="3"><img name="index_72" src="gfx/index_72.gif" width="91" height="27" alt=""></td>
          <td colspan="2"><img name="index_73" src="gfx/index_73.gif" width="91" height="27" alt=""></td>
          <td><img src="gfx/index_74.gif" width="91" height="27" border="0" alt=""></td>
          <td colspan="3"><img name="index_75" src="gfx/index_75.gif" width="91" height="27" border="0" alt=""></td>
          <td colspan="3"><img name="index_76" src="gfx/index_76.gif" width="91" height="27" alt=""></td>
          <td colspan="2"><img name="index_77" src="gfx/index_77.gif" width="91" height="27" alt=""></td>
          <td><img src="gfx/index_78.gif" width="63" height="27" alt=""></td>
          <td><img src="gfx/index_79.gif" width="15" height="27" alt=""></td>
        </tr>
        <tr>
          <td><img src="gfx/index_80.gif" width="15" height="15" alt=""></td>
          <td colspan="2"><img src="gfx/index_81.gif" width="91" height="15" alt=""></td>
          <td colspan="3"><img src="gfx/index_82.gif" width="91" height="15" alt=""></td>
          <td colspan="2"><img src="gfx/index_83.gif" width="91" height="15" alt=""></td>
          <td><img src="gfx/index_84.gif" width="91" height="15" alt=""></td>
          <td colspan="3"><img src="gfx/index_85.gif" width="91" height="15" alt=""></td>
          <td colspan="3"><img src="gfx/index_86.gif" width="91" height="15" alt=""></td>
          <td colspan="2"><img src="gfx/index_87.gif" width="91" height="15" alt=""></td>
          <td><img src="gfx/index_88.gif" width="63" height="15" alt=""></td>
          <td><img src="gfx/index_89.gif" width="15" height="15" alt=""></td>
        </tr>

<div id="stopka"></div>

#stopka {
margin: 0 auto;
width: 730px;
height: 42px;
background-image: url(stopka.gif);
}

spodobało mi się - chce więcej

Zrób sobie plik graifczny o wysokości 1px i szerokości 730px.

Z jego lewej strony wstaw kawałek pliku http://wielkiblekit.net.pl/gfx/galeria_31.gif a z prawej http://wielkiblekit.net.pl/gfx/kontakt_35.gif

środek możesz zrobić niebieski, albo transparent - wedle upodobania. Można pomyśleć, że to marnotrastwo miejsca, ale przy kompresji oraz tak małej wysokości obrazka, te kilkaset pikseli identycznych nie zajmie dużo miejsca. Takie gotowe tło ustawiasz jako background body lub html.

Jak już to wszystko wykonasz daj namiary na jakąś stronkę, na którrej pochwalisz się obecnymi osiągnięciami ;-)

hmm
zrobilem jak poradziles, tylko nie wiem czego mialem sie spodziewac.
rozumiem, ze to tlo mialo byc w tabelce, czy dla calego dokumentu? bo jak dla calego, to czesc obrazka zaczyna sie z lewej strony (calkiem z lewej) a prawa czesc wypada gdzies w 7/8 tabelki z zawartoscia strony..
jezeli wstawiam jako tlo do glownej tabeli to wyglada ok, tylko raczej tak samo jakbym zdefiniowal kolor tla przez background-color.
W chwili obecnej strona jest przenoszona, jezeli niejasno sie wyrazam to pokaze o co chodzi.

Lepiej pokaż, jak będzie gdzieś w necie to co spłodziłeś ;-)

http://wielkiblekit.net.pl/ - wprowadziłem sugerowane poprawki, ale dalej nie wiem co mam z tym tłem zrobić , dlatego go nie umieściłem jeszcze.

Wyciągnij stopkę z tabeli i umieść ją sobie przed zamknięciem body.

Przed div'em stopki umieść div'a o jakimś id, np <div id="tresc"> i właduj w niego treść działu. Potem za pomocą CSS

#tresc {
margin: 0 auto;
width: 600px;
padding: 0 80px 0 50px;
background: #0076ba url(gfx/tlo.gif);
}

<img src="/gfx/galeria_34.gif" alt="" style="float: right;" />

http://wielkiblekit.net.pl/index_new.html - coś skopałem ? wyszła lekka kaszanka

OK, potrzebuję małej pomocy:

Czy ktoś potrafi wyjaśnić, dlaczego marginesy i paddingi bloków zagnieżdżonych mają jakikolwiek wpływ na rodzica?

---

Dobrze jest, cały dół już prawie przerobiony :-)

1) Ustaw doctype na strict (http://www.w3.org/QA/2002/04/valid-dtd-list.html) - lada chwila strona będzie XHTML, więc możesz właściwie XHTML 1.0 strict już użyć

2) Z #tresc usuń padding, a width zmień na 730px.

3) Dodaj

#linia {
width: 730px;
padding: 0 80px 0 50px;
background: url(gfx/galeria_34.gif) no-repeat 636px bottom;
}

</div></div>
<div id="stopka"></div>

<img src="gfx/galeria_34.gif" alt="" style="float: right;" />

tera je http://wielkiblekit.net.pl/index_new.html. lepiej, ale wciąż to chyba nie to
wrzuciłem strict xhtml i teraz to tylko się pociąć jak zobaczyłem walidacje . wiem, wiem, to jeszcze nie koniec .
co do tego obrazka, obrazek ma 730 px, z lewej jest kawałek tego co podałeś i z prawej tego drugiego, po środku jest nic. jest jeszcze tlo2.gif gdzie jest alpha.

1) Obrazek ma faktycznie 730px, ale z lewej strony zostawiłeś mu 1px wolny. Stąd na niebieska krecha (niebiekie tło nie jest przykrywane w tym miejscu obrazkiem)

2) Przed CSS'ową deklaracją dla body dodaj

* {
margin: 0;
padding: 0;
}

h1 {
color: #FFFFFF;
font-weight: bold;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 0.9em;
}

h2 {
color: #FFFFFF;
font-weight: normal;
text-decoration: underline;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 0.9em;
}

<h1>Świnoujski Klub Nurkowy WIELKI BŁĘKIT powstał w roku 2005, jest stowarzyszeniem posiadającym osobowość prawną zreszającym osoby fizyczne i prawne.</h1>
<h2>Cele i zadania Klubu:</h2>

<ul>
<li>pierwszy punkt</li>
<li>drugi</li>
<li>3rd</li>
<li>itd.</li>
</ul>

poprawiłem

A mam takie pytanko, przeglądam sobie style dla listy i tam mi przyszło do głowy, czy zamiast kwadracików, kółeczek i innych takich, można zdefiniować własny styl wypunktowania będący np grafiką?

i jeszcze jedno, przewalidowałem troche kodu, pozamykałem troche tagów i mi zostało coś takiego:

Line 201 column 25: there is no attribute "name".
 <td> <img name="index_12" src="gfx/index_12.gif" width="91" height="15

Line 221 column 149: there is no attribute "border".

...2.gif" width="91" height="69" border="0" alt=""/></a>

Line 180 column 14: there is no attribute "onLoad".

<body  onLoad="preloadImages();">

można zdefiniować własny styl wypunktowania będący np grafiką?

Ad.1 - Dla img nie nadaje się name. Po prostu nie ma tego w specyfikacji. Możesz dać mu id, ale wtedy skrypt nie działa

Ad.2 - Nie wiem czemu przyczepił się do border dla img... Ale i tak weź wszystkie border="0" przy obrazkach wywal i daj zamiast tego zmień trochę *:

* {
margin: 0;
padding: 0;
border: 0;
}

#top {
width: 730px;
height: x px;
background: url(top.gif);
}
#top a {
display: block;
margin-top: y px;
float: left;
border: 1px solid red;
}

<div id="top">
<a href="/"></a>
<a href="/galeria.html"></a>
<a href="/kontakt.html"></a>
</div>

hmm , zrobiłem tak jak napisałeś, chyba cos napaćkałem. wywaliłem wszystkie tabelki z dokumentu przy okazji.

aha, co mam wstawic jako x i y w tych parametrach?

Plik http://wielkiblekit.net.pl/top.gif nie istnieje. To miałbyć obrazek całej góry, jeden sklejony z tych kilkunastu/kilkudziesięciu co wcześniej były tam.

Pod x podstaw wysokość obrazka top.gif, który stworzysz

Pod y doświadczalnie, coś pewnie o 100px mniejszego niż wartość x.

coś jest nie tak, w operze mi nie pokazuje obrazka, ale w IE już jest. BTW jak zmusić w IE żeby strona była na środku?

i druga sprawa, zmieniając cały top stracę bąbelki nad obrazkami

edit

juz wiem co skaszaniłem

Bo dałeś

height: 242 px;

height: 242px;

#top {
width: 715px;
height: 242px;
background: url(top.gif);
margin: 0 auto;
padding-left: 15px;
}

#top a {
display: block;
margin: 170px 0 0 4px;
width: 85px;
height: 65px;
float: left;
border: 1px solid red;
}

zrobiłem

zastanawiam się jeszcze nad lewą krawędzią. brak tam białego paska, dla dopełnienia estetyki :>, czy zdałoby się z lewej strony tego diva z treścią wpakować obrazek ?

aha, no i czy da się przesunąć treść strony na środek w IE (poza oczywiście tabelką).

zabieram się za wycinanie bąbli )))

Originally posted by waceq:

zastanawiam się jeszcze nad lewą krawędzią. brak tam białego paska, dla dopełnienia estetyki :>, czy zdałoby się z lewej strony tego diva z treścią wpakować obrazek ?

Originally posted by waceq:

aha, no i czy da się przesunąć treść strony na środek w IE (poza oczywiście tabelką).

poprawiłem, dziękuję bardzo za porady i pomoc. jestem pod wrażeniem , jeszcze tylko przestudiuję te wszystkie style dokładnie, zeby poznać co i jak.

a co do bąbelek, to czy trzeba je wycinać? może cały obrazek nakładać?

Można, ale trzeba dopasowywać co do piksela, a obrazek nakładany będzie poza tym dużo zajmował. Poza tym, zawsze możesz te 5 okręgów zrobić od nowa ;-)

to co z tymi bąblami uczynić?

Zobacz sobie jak były mniejwięcej porozmieszczane wcześniej, zrób nowy obrazek z transparent tłem i stwórz na nim kilka białych okręgów. I takie obrazki jeśli dobrze pamiętam będą potrzebne 3. Chyba, że chcesz, aby każdy wyglądał tak samo.

to jak moge "ubąblić" te menu ? mając pliki z grafiką?

Najładniej kodowo było załatwić to w ten sposób, że po najechaniu na link zmienia się jego wysokość i dodajesz mu tło.

Minus rozwiązania: po zjechaniu z np. "O NAS" do góry, na bombelki link nadal będzie aktywny. Oceń już sam czy takie coś Ci przeskadza.

Jeśli nie, to wystarczy prosta konstrukcja:

#top a:hover {
margin: 70px 0 0 4px;
width: 85px;
height: 165px;
background: url(bomble.gif) no-repeat top center;
}

jeszcze raz dziekuję za pomoc

OK, ale wybacz - jeszcze z Tobą nie skończyłem ;-)

Wszystko wygląda ładnie, jeśli używamy przeglądarki obsługującej CSS. Linki nie mają nic w "treści" więc w takiej Operze mini, Lynksie itp. ludzie nie będą wiedzieli do czego taki odnośnik prowadzi. Umieść więc jeszcze dodatkowo w tych 3 odnośnikach teksty:
<span>O NAS</span>
<span>GALERIA</span>
<span>KONTAKT</span>

A potem zrób eleganckie

#top span { display: none; }

Hm, a czy nie lepiej dodać do takich odnośników atrybutów TITLE o odpowiedniej treści?

Nie wydawaje mi się, aby OMini wyświetlała zawartość title.

Ale Lynks jak najbardziej. Zresztą Opera Mini też powinna:

The Opera Mini server uses the same engine as desktop installs of Opera, so it has the same capabilities as Opera for desktop.

Nie znalazłem tam nic o traktowaniu title.

Ja nie znalazłem nic o traktowaniu poszczególnych znaczników / atrybutów. Gdzie jest taka informacja?

zmieniłem , czy jest jeszcze coś ?

Jasne, moje wymogi ciężko zaspokoić ;p

1) Możesz spokojnie wyrzucić cały ten skrypt JS, który wcześniej nieudolnie preloadował grafikę.

2) Warto wyeksportować CSS do zewnętrznego pliku oraz trochę uporządkować w nim te dziwnie/losowo występujące entery

3) Validator wyrzuca Ci jeden warning związany z &.
Zamień sobie ten znacznek na &amp;

teraz to sie zdziwiłem

w galerii w firefoxie, nie pokazują się obrazki po kliknęciu na jakikolwiek, wyskakuje popup, tak jak trzeba ale obrazka nie ma :/, zauwazylem ze zmienna n nie ma parametru

problem nie występuje w operze ani w IE.

no to już wiem

&am p; nie został strawiony przez firefoxa, dlatego musiałem wrócić do zwykłego '&' w skrypcie otwierającym obrazki...