Jak zrobić, aby równie dobrze wyglądało w przeglądarce...

[OzdobaForum]

Byłeś już na stronie www.ReklamaStron.pl ? Pracując nad wyglądem tej strony podglądałam ją na IE... i zaskoczyłam się, gdy obejrzałam rezulat mojej pracy na Mozilli - kilka ważnych dla mnie rzeczy wyglądało inaczej (choć powinnam użyć słów: gorzej, źle, beznadziejnie...):
1. Menu pod logiem ReklamaStron.pl - w IE wszystkie obrazki menu wyświetalją się całe i bez odstępów - w Mozilli wświetlają się tylko fragmnety obrazków menu i są przerwy od góry oraz dołu.
2. "Pajacyk" pod menu - w IE jest po lewej stronie, a w Mozilli po prawej.

Zapraszam do zajrzenia na strone www.ReklamaStron.pl z wykorzystaniem przeglądarki IE i Mozilli.
Może Ty wiesz co należy zrobić, żeby strona w Mozilli wyświetlała się tak samo jak w IE?!

Z góry dziękuję za wszystkie rady i opienie!

OzdobaForum :)

[yarek]

niestety, ale muszę powiedzieć, że zrobiłaś z tego jakąś zupe CSS w Firefox'ie obrazki z menu są troche odsunięte od loga u góry, spróbuj tym linkom, które tam są dać margin:0; i powiedz czy działa


btw: spróbuj pomyśleć o czytelniejszym kodzie

[dexter]

No nie wiem. Nie wiem, skąd tam się wziął znaczek "Valid XHTML"? Przecież to coś się nie waliduje.

Poza tym to menu po lewej stronie :/ . Tragedia. Do takich rzeczy używaj listy nieuporządkowanej.

[Gość]

Dziękuję za uwagi

niestety, ale muszę powiedzieć, że zrobiłaś z tego jakąś zupe CSS w Firefox'ie obrazki z menu są troche odsunięte od loga u góry, spróbuj tym linkom, które tam są dać margin:0; i powiedz czy działa


btw: spróbuj pomyśleć o czytelniejszym kodzie

1. Moj przyszły maz bedzie uradowany, ze juz umiem zrobic zupe
2. linki do menu znajduja sie w klasie, ktora w css ma ustawiony margin:0 -czy chodziło Ci o inny sposób ustawienia marginu?! Bo jesli nie, to nie działa
3. Co dla Ciebie oznacza czytelniejszy kod?

[quote="dexter]No nie wiem. Nie wiem, skąd tam się wziął znaczek "Valid XHTML"? Przecież to coś się nie waliduje.

Poza tym to menu po lewej stronie :/ . Tragedia. Do takich rzeczy używaj listy nieuporządkowanej. [/quote]
1. Założenie jest, że ma się walidować...i będzie jak tylko poprawię
2. Co to jest lista nieuporzadkowana? Czy ona jest zgodna ze standardem XHTML?

Pozdrawiam i czekam na inne pomysły
Ozdoba Forum[/b][/i]

[yarek]

3. Co dla Ciebie oznacza czytelniejszy kod?

ogólnie to chodzi o wcięcia w kodzie, np:

Kod: Zaznacz cały

<div>
  <ul>
   <li>Element 1</li>
   <li>Element 2</li>
  </ul>
</div>

2. linki do menu znajduja sie w klasie, ktora w css ma ustawiony margin:0 -czy chodziło Ci o inny sposób ustawienia marginu?! Bo jesli nie, to nie działa

spróbuj:

Kod: Zaznacz cały

a#start {
display:inline;
background-image:url(/images/menu/s1.png);
margin:0;
}

i daj tak dla pozostałych linków w tym menu, natomiast zaraz spróbuje to przebudować, ale trzeba mi czasu

[yarek]

CSS:

Kod: Zaznacz cały

 .center { margin:0; }
 .center>ul { list-style-type:none; }
 .center ul li { float:left; }
 
 a#start { width:100px; height:25px; background-color:green; display:block; }
 a#tworzysz { width:120px; height:25px; background-color:green; display:block; }
 a#reklamujesz { width:160px; height:25px; background-color:green; display:block; }
 a#zarabiasz { width:130px; height:25px; background-color:green; display:block; }
 a#dyskutujesz { width:150px; height:25px; background-color:green; display:block; }
 a#download { width:140px; height:25px; background-color:green; display:block; }
 
 a:hover#start { width:100px; height:25px; background-color:red; display:block; }
 a:hover#tworzysz { width:120px; height:25px; background-color:yellow; display:block; }
 a:hover#reklamujesz { width:160px; height:25px; background-color:black; display:block; }
 a:hover#zarabiasz { width:130px; height:25px; background-color:gray; display:block; }
 a:hover#dyskutujesz { width:150px; height:25px; background-color:blue; display:block; }
 a:hover#download { width:140px; height:25px; background-color:orange; display:block; }

HTML:

Kod: Zaznacz cały

<div class="center">
 <ul>
  <li><a href="/" id="start"></a></li>
  <li><a href="/" id="tworzysz"></a></li>
  <li><a href="/" id="reklamujesz"></a></li>
  <li><a href="/" id="zarabiasz"></a></li>
  <li><a href="/" id="dyskutujesz"></a></li>
  <li><a href="/" id="download"></a></li>
 </ul>
</div>

moim zdaniem tak to powinno wyglądać, tylko zamiast kolorów tła powstawiaj sobie obrazki przycisków do background-image:, ostatnio miałem podobny problem mi wyszło coś takiego: www.jedination.neostrada.pl/test/index.htm


btw: czyż nie prościej?

[OzdobaForum]

Dziękuję yarku

1. Wcięcia TABem mogę porobić... ale potrzebuję troszkę czasu, aby poprawić każdy cm nieczytelnego kodu

2. Jeśli chodzi o Twoje przebudowanie, to je wypróbuję jak tylko wyjaśnisz mi do czego potrzebne jest:

.center { margin:0; }
.center>ul { list-style-type:none; }
.center ul li { float:left; }

Wcześniej, gdy korzystalam z display:block; to rysunki zamiast w jednej linii wyświetlały się jeden pod drugim.
Tylko wtedy nie używalam <ul> i <li> .
Pozdrawiam

[yarek]

Kod: Zaznacz cały

1. Wcięcia TABem mogę porobić... ale potrzebuję troszkę czasu, aby poprawić każdy cm nieczytelnego kodu

.. wcięcia są już tylko dla ciebie, aby lepiej ci się pracowało

Kod: Zaznacz cały

 .center { margin:0; }

tak na wszelki wypadek ...

Kod: Zaznacz cały

 .center>ul { list-style-type:none; }

domyślnie przed elementami listy ( <li> ) są kropki (kwadraty itp), to spowoduje usunięcie ich

Kod: Zaznacz cały

 .center ul li { float:left; }

elementy listy ułożone są jeden-pod-drugim, ta linijka spowoduje, że będą ułożone w poziomie

[OzdobaForum]

YARKU!
Jeśli teraz jesteś na necie, to możesz zobaczyć efekty wprowadzenia zmian w kodzie podanych przez Ciebie. www.ReklamaStron.pl
Wszystko byłoby dobrze, gdyby nie 2 rzeczy:
1. robi się z lewej strony margines ok 20px (oczywiście w .center mam margin:0px;)
2. pojawił się odstęp górny i donly - na Mozilli wynosi znośne 2px, na IE ma on 10px
...więc tak pozostać nie może.

Co należy zmienić, aby było dobrze?

Pozdrawiam, OF

[riddle]

1. Wcięcia TABem mogę porobić... ale potrzebuję troszkę czasu, aby poprawić każdy cm nieczytelnego kodu

Załatw sobie edytor, który po zaznaczeniu bloku tekstu i wciśnięciu [Tab] wcina ten cały blok. A [Shift] + [Tab] zmniejsza wcięcie. Notepad++ ma to, na pewno.

[OzdobaForum]

Załatw sobie edytor, który po zaznaczeniu bloku tekstu i wciśnięciu [Tab] wcina ten cały blok. A [Shift] + [Tab] zmniejsza wcięcie. Notepad++ ma to, na pewno.

Są dostępne na niecie jakieś darmowe programy tego typu?

OF

[Tomek]

jejku... a google?????????
Poczytaj też: jak wykonać stronę internetową

[dexter]

Poczytaj sobie np. te artykuły:

http://kurs.browsehappy.pl/Krok/Menu

http://mimas.ceti.pl/dia/day_22.html

http://www.alistapart.com/articles/taminglists/

http://www.alistapart.com/articles/slidingdoors/

http://www.maxdesign.com.au/presentation/listutorial/

http://css.maxdesign.com.au/listamatic/

http://tagsoup.com/-dev/null-/css/list/indent/

[OzdobaForum]

YARKU!

moim zdaniem tak to powinno wyglądać, tylko zamiast kolorów tła powstawiaj sobie obrazki przycisków do background-image:, ostatnio miałem podobny problem mi wyszło coś takiego: www.jedination.neostrada.pl/test/index.htm

To co Tobie wyszło również ma margines z lewej stron

Pozdrawiam
OF

[radek.kaba]

YARKU!

moim zdaniem tak to powinno wyglądać, tylko zamiast kolorów tła powstawiaj sobie obrazki przycisków do background-image:, ostatnio miałem podobny problem mi wyszło coś takiego: www.jedination.neostrada.pl/test/index.htm

To co Tobie wyszło również ma margines z lewej stron

Pozdrawiam
OF

Kod: Zaznacz cały

ul {margin-left:0;padding-left:0;}

padding dla Gecko, margin dla IE

[OzdobaForum]

Zastosowałam kod:
CSS:

Kod: Zaznacz cały

a#start { width:100px; height:25px; background-image:url(/images/menu/s1.png); display:block; float:left; }
 a#tworzysz { width:120px; height:25px; background-image:url(/images/menu/t1.png); display:block; float:left; }
 a#reklamujesz { width:160px; height:25px; background-image:url(/images/menu/r1.png); display:block; float:left; }
 a#zarabiasz { width:130px; height:25px; background-image:url(/images/menu/z1.png); display:block; float:left; }
 a#dyskutujesz { width:150px; height:25px; background-image:url(/images/menu/d1.png); display:block; float:left; }
 a#download { width:140px; height:25px; background-image:url(/images/menu/p1.png); display:block; float:left; }
 
 a:hover#start { width:100px; height:25px; background-image:url(/images/menu/s2.png); display:block; float:left; }
 a:hover#tworzysz { width:120px; height:25px; background-image:url(/images/menu/t2.png); display:block; float:left; }
 a:hover#reklamujesz { width:160px; height:25px; background-image:url(/images/menu/r2.png); display:block; float:left; }
 a:hover#zarabiasz { width:130px; height:25px; background-image:url(/images/menu/z2.png); display:block; float:left; }
 a:hover#dyskutujesz { width:150px; height:25px; background-image:url(/images/menu/d2.png); display:block; float:left; }
 a:hover#download { width:140px; height:25px; background-image:url(/images/menu/p2.png); display:block; float:left; }

PHP

Kod: Zaznacz cały

<div class="center">
 <a href="/" id="start"></a>
 <a href="/" id="tworzysz"></a>
 <a href="/" id="reklamujesz"></a>
 <a href="/" id="zarabiasz"></a>
 <a href="/" id="dyskutujesz"></a>
 <a href="/" id="download"></a>
</div>

W Mozilli wygląda i dziala OK, w IE jest nieco gorzej, bo na początku wyczytywania strony w miejscach rysunków pojawia sie treść strony, ktora znika po całkowitym wczytaniu... jednakże najgorze jest jeśli chodzi o przeglądarkę Konqueror na której pojawia się tylko część rysunków, które układają się w kolumnie, zamias w poziomie obok siebie.
Moża to jeszcze jakoś ulepszyć??
Pozdrawiam, OF

[OzdobaForum]

Dziękuję za pomoc... po wielu godzinach zmian i testów udało mi się osiągnąć wymarzony efekt - teraz to jest chyba wszędzie dobrze
Dzięki!!

[Tomek]

Da się ulepszyć - jak wyłączysz style to to menu nie będzie w ogóle działać - pomiędzy a daj tekst, a żeby był niewidoczny przy włączonych stylach daj text-indent: -9999px dla a

[:P]

Ej!
Mam pewną proźbę czy ktoś z Was mógłby mi pociąć layouta i po ustawiać go jak należy w programie frontpage lub inne?

[Tomek]

1. zadań domowych nie odrabiamy
2. A nie możesz sam pociąć w dowolnym programie graficznym
3. frontpage? a fe
4. Jak wykonać stronę internetową