Avaleht
uus teema   vasta Tarkvara »  WWW »  ff3 ja opera9.5 kood segamini? märgi kõik teemad loetuks
märgi mitteloetuks
vaata eelmist teemat :: vaata järgmist teemat
Hinnavaatlus :: Foorum :: Uudised :: Ärifoorumid :: HV F1 ennustusvõistlus :: Pangalink :: Telekavad :: HV toote otsing
autor
sõnum Saada viide sõbrale.  :: Teata moderaatorile teata moderaatorile
otsing:  
geronimo
HV vaatleja

liitunud: 30.10.2003
sõnum 02.08.2008 22:31:25 ff3 ja opera9.5 kood segamini? vasta tsitaadiga
IE7 näitab lehte nii nagu peab kuid FF3 ja Opera peal läheb leht laiali

http://hot.ee/geromari/Untitled.html

äki oskab keegi aidata? ise juba tunde jännanud ja ei saa mitte aru :S
tagasi üles
vaata kasutaja infot saada privaatsõnum
mikk36
HV Guru
mikk36

liitunud: 21.02.2004



Online
sõnum 03.08.2008 04:43:42 vasta tsitaadiga
firebug laiendus Fx'le ja hakka aga uurima
Kommentaarid: 85 loe/lisa Kasutajad arvavad:  :: 0 :: 2 :: 78
tagasi üles
vaata kasutaja infot saada privaatsõnum
karu
HV kasutaja

liitunud: 08.08.2002
sõnum 03.08.2008 08:09:01 Re: ff3 ja opera9.5 kood segamini? vasta tsitaadiga
geronimo kirjutas:
IE7 näitab lehte nii nagu peab kuid FF3 ja Opera peal läheb leht laiali

http://hot.ee/geromari/Untitled.html

äki oskab keegi aidata? ise juba tunde jännanud ja ei saa mitte aru :S

p.menu ja p.text stiili lisada 'display: inline;' ja '>' asendada &gt; ja mõndades kohtades on 'img\nimi' aga peaks olema 'img/nimi', '<!-- menüü lõpp -->'le peaks järgnema </td> mida seal ei paista, tabeli tr elemendi'le lisada 'vertical-align: top;', jne jne

jõudu
Kommentaarid: 1 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 1
tagasi üles
vaata kasutaja infot saada privaatsõnum
mikk36
HV Guru
mikk36

liitunud: 21.02.2004



Online
sõnum 03.08.2008 13:22:50 vasta tsitaadiga
pealegi tabelipõhine kujundus on ka out
Kommentaarid: 85 loe/lisa Kasutajad arvavad:  :: 0 :: 2 :: 78
tagasi üles
vaata kasutaja infot saada privaatsõnum
nene
Kreisi kasutaja
nene

liitunud: 20.03.2004
sõnum 03.08.2008 16:57:18 vasta tsitaadiga
Tõesti, alustada võiksid siiski sellest, et parandad ära vead, mida validaator su leheküljelt leiab.

Kuna sa ilmselgelt oled ametis uue lehekülje loomisega, siis ei näe ma mingit põhjust, miks sa peaksid aastal 2008 kasutama lehekülje paigutuse loomiseks tabeleid. Tõelised mehed kasutavad CSS-i ning on seda teinud juba aastaid - sinagi ei tohiks tahta olla kehvem. Ka su tabelitega lehel olevate probleemide lahendus peitub selles, kuidas töötab CSS, sest moodsates brauserites pole <table>, <tr> ja <td> midagi muud, kui tavalised HTML-i elemendid, millele on CSS-ga määratud tabellik väljanägemine.

Siit jõuame ka kolmanda probleemini, milleks on see, et tõenäoliselt näitab hoopis IE7 su lehekülge valesti, kuna nii Fx kui Opera jätavad CSS-i toe osas IE7 kaugele selja taha. Parem arendada kohe standarditele vastavat koodi mõnes moodsamas brauseris ja võidelda IE vigadega hiljem, kui luua leht, mis püsib koos vaid tänu IE vigadele ja imestada siis hiljem, miks see teistes brauserites "vigane" välja näeb.

Ja kui siis ikkagi veel probleeme tekib, ole lahke taas siit abi küsima.
Kommentaarid: 24 loe/lisa Kasutajad arvavad:  :: 0 :: 1 :: 23
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
geronimo
HV vaatleja

liitunud: 30.10.2003
sõnum 05.08.2008 01:24:08 vasta tsitaadiga
oki tänud teile:D
mul muud küsimust pole kui ainult see, et kuidas oleks võimalik tekst paigutada vasakust äärest 10px eemale ja kasti keskele .
Tegu siis menüüga.
<li> sees pole võimalik kasutada div'i ning ei aita padding ega ka margin

icon_sad.gif

http://www.hot.ee/geromari/t.html
tagasi üles
vaata kasutaja infot saada privaatsõnum
mikk36
HV Guru
mikk36

liitunud: 21.02.2004



Online
sõnum 05.08.2008 09:15:48 vasta tsitaadiga
li element võib küll blokk-elemente sisaldada
Kommentaarid: 85 loe/lisa Kasutajad arvavad:  :: 0 :: 2 :: 78
tagasi üles
vaata kasutaja infot saada privaatsõnum
nene
Kreisi kasutaja
nene

liitunud: 20.03.2004
sõnum 05.08.2008 17:20:53 vasta tsitaadiga
Kui nüüd hetkel su probleemi mitte puutuv kood kõrvale heita, siis jääb hetkel su lehel järgi umbes selline HTML ja CSS:

css:
  1. .navigation {
  2.     width: 174px;
  3.     font-family: Verdana;
  4.     text-align: left;
  5.     font-size: 14px;
  6.     color: #FFFFFF;
  7.     font-weight: bold;
  8.     height:158px;
  9. }
  10. .navigation ul {
  11.     list-style: none;
  12.     margin: 0;
  13.     padding: 0;
  14. }
  15.  
  16. .navigation li {
  17.     font-family: Verdana,Arial;
  18.     font-size: 12px;
  19.     text-indent: 2px;
  20. }
  21. .mpealkiri {
  22.     text-decoration: underline;
  23.     font-weight: bold;
  24.     padding-left:10px;
  25. }
  26. a:link { color: #FFFFFF; text-decoration: none }
  27. a:active { color: #FFFFFF; text-decoration: none }
  28. a:visited { color: #FFFFFF; text-decoration: none }
  29. a:hover { color: #a6a5a4; text-decoration: none }
  30.  
  31. .rollover { background-image:url(img/y_m_2.jpg); height: 32px; width:174px; display:block; }
  32. .rollover:hover { background-image:url(img/y_m_2a.jpg); }
  33.  
  34. .rollover2 { background-image:url(img/y_m_3.jpg); height: 32px; width:174px; display:block; }
  35. .rollover2:hover { background-image:url(img/y_m_3a.jpg); }
  36.  
  37. .rollover3 { background-image:url(img/y_m_4.jpg); height: 32px; width:174px; display:block; }
  38. .rollover3:hover { background-image:url(img/y_m_4a.jpg); }
  39.  
  40. .rollover4 { background-image:url(img/y_m_5.jpg); height: 32px; width:174px; display:block; }
  41. .rollover4:hover { background-image:url(img/y_m_5a.jpg); }


html:
  1. <div class="navigation">
  2. <ul>
  3.   <li style="background-image: url(img/y_m_1.jpg);height:30px;"><span class="mpealkiri">Paketid</span></li>
  4.   <li><a href="" class="rollover" >&gt; Tasuta</a></li>
  5.   <li><a href="" class="rollover2">&gt; Pakett 1</a></li>
  6.   <li><a href="" class="rollover3">&gt; Pakett 2</a></li>
  7.   <li><a href="" class="rollover4">&gt; Pakett 3</a></li>
  8. </ul>
  9. </div>
  10.  
  11. <div style="height:15px; width:174px;"></div>
  12.  
  13. <div class="navigation">
  14. <ul>
  15.   <li style="background-image: url(img/y_m_1.jpg);height:30px; width:174px;"><span class="mpealkiri">Info</span></li>
  16.   <li><a href="" class="rollover">&gt; Online Demo</a></li>
  17.   <li><a href="" class="rollover2">&gt; Küsimuste tüübid</a></li>
  18.   <li><a href="" class="rollover3">&gt; Referentsid</a></li>
  19.   <li><a href="" class="rollover4">&gt; Kontakt</a></li>
  20. </ul>
  21. </div>


Alustuseks näen ma kohe, et kogu see rolloverite kood on hirmsas korduses - ja kõik see üksnes selle pärast, et iga lingi taustapilt on õige tibakese erinev. Minu meelest oleks lihtsam kasutada kõigil linkidel sama taustapilti: visuaalne erinevus oleks vaevumärgatav, kuid koodi saaks kirjutada meeletult lühemalt. HTML-is kaoks täiesti ära vajadus nende rollover1,2,3,4 klasside järele ning CSS-i jääks vaid:

css:
  1. .navigation ul li a {
  2.     background-image: url(img/y_m_2.jpg);
  3.     height: 32px;
  4.     width: 174px;
  5.     display: block;
  6. }
  7. .navigation ul li a:hover {
  8.     background-image: url(img/y_m_2a.jpg);
  9. }


Lisaks poleks sul tarvis enam uute menüü-elementide lisandumisel hakata neile uusi taustapilte tegema.

Lihtsustada saame ka kõigile linkidele määratud stiilid:

css:
  1. a:link, a:active, a:visited {
  2.     color: #FFFFFF;
  3.     text-decoration: none;
  4. }
  5. a:hover {
  6.     color: #a6a5a4;
  7. }


Kummagi menüü esimene element on sul oma olemuselt vastava menüü pealkiri: miks siis mitte märkida see ka HTML-is vastavalt üles, kasutades h1, h2, h3 või mõnda muud pealkirjaelementi:

html:
  1. <div class="navigation">
  2. <h2>Paketid</h2>
  3. <ul>
  4.   <li><a href="">&gt; Tasuta</a></li>
  5.   <li><a href="">&gt; Pakett 1</a></li>
  6.   <li><a href="">&gt; Pakett 2</a></li>
  7.   <li><a href="">&gt; Pakett 3</a></li>
  8. </ul>
  9. </div>


Ja kui me kombineerime .mpealkiri ja .navigation li stiilid, siis saame sellise CSS-i, mida pealkirjale määrata:

css:
  1. .navigation h2 {
  2.     font-size: 12px;
  3.     text-indent: 2px;
  4.     text-decoration: underline;
  5.     height: 30px;
  6.     margin: 0;
  7.     padding-left: 10px;
  8.     background-image: url(img/y_m_1.jpg);
  9. }


Nüüd on su HTML juba kaunis minimaalne, jäänud on vaid see div kahe menüü vahel:

html:
  1. <div style="height:15px; width:174px;"></div>


Selle saab tervenisti asendada CSS-ga, mis lisab menüü alla natuke lisaruumi:

css:
  1. .navigation {
  2.     padding-bottom: 15px;
  3. }


Kui siis lõpuks rääkida veel sinu algsest probleemist, siis padding peaks töötama päris kenasti. Sellega on ainuke asi see, et kui me lisame linkidele 10px paddingut, siis kuna meil on linkidele määratud konkreetne laius (width:174px), siis läheb iga link paddingu võrra laiemaks. Lahenduseks on võtta linkide laiusest 10px maha (saades tulemuseks width:167px). Õigupoolest on see probleemiks vaid vanemate IE-dega. IE7 puhul piisab kui vaid konteinerelemendile (antud juhul .navigation) on laius määratud.

Ühe tekstirea vertikaalselt keskele saamiseks on kõige lihtsam määrata line-height sama kõrgeks kui bloki enda kõrgus (antud juhul 32px).

Peale veel mõningast nudimist ja üleliigsete asjade eemaldamist jõudsin sellise HTML-i ja CSS-ni:

css:
  1. a:link, a:active, a:visited {
  2.     color: #FFFFFF;
  3.     text-decoration: none;
  4. }
  5. a:hover {
  6.     color: #a6a5a4;
  7. }
  8.  
  9. .navigation {
  10.     width: 174px;
  11.     font-family: Verdana, Arial, sans-serif;
  12.     font-size: 12px;
  13.     color: #fff;
  14.     font-weight: bold;
  15.     padding-bottom: 15px;
  16. }
  17.  
  18. .navigation h2 {
  19.     margin: 0;
  20.     font-size: 1em;
  21.     background-image: url(img/y_m_1.jpg);
  22.     padding-left: 10px;
  23.     height: 30px;
  24.     line-height: 30px;
  25.     text-decoration: underline;
  26. }
  27.  
  28. .navigation ul {
  29.     list-style: none;
  30.     margin: 0;
  31.     padding: 0;
  32. }
  33. .navigation ul li a {
  34.     display: block;
  35.     background-image: url(img/y_m_2.jpg);
  36.     padding-left: 10px;
  37.     height: 32px;
  38.     line-height: 32px;
  39. }
  40. .navigation ul li a:hover {
  41.     background-image: url(img/y_m_2a.jpg);
  42. }


html:
  1. <div class="navigation">
  2. <h2>Paketid</h2>
  3. <ul>
  4.   <li><a href="">&gt; Tasuta</a></li>
  5.   <li><a href="">&gt; Pakett 1</a></li>
  6.   <li><a href="">&gt; Pakett 2</a></li>
  7.   <li><a href="">&gt; Pakett 3</a></li>
  8. </ul>
  9. </div>
  10.  
  11. <div class="navigation">
  12. <h2>Info</h2>
  13. <ul>
  14.   <li><a href="">&gt; Online Demo</a></li>
  15.   <li><a href="">&gt; Küsimuste tüübid</a></li>
  16.   <li><a href="">&gt; Referentsid</a></li>
  17.   <li><a href="">&gt; Kontakt</a></li>
  18. </ul>
  19. </div>
Kommentaarid: 24 loe/lisa Kasutajad arvavad:  :: 0 :: 1 :: 23
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
andrusny
Kreisi kasutaja
andrusny

liitunud: 20.03.2006
sõnum 05.08.2008 17:56:25 vasta tsitaadiga
Kas seda oled märganud, et Operas ei paista su alam lingid-menüüd (Paketid all pakett1 pakett2 jne.) Ilmub ainult hover. Arvata, et lingi värv vale. Sama viga ka IE6 es. Operas puuduvad sul Paketid ja inv'fo tagant taust, mis IE paistab.
IE's on nende piltide päised enam vähem korras, kui mitte arvestada, et tekst väheke mööda jookseb, Operas on päised topelt.

FF ei kuva ülemist riba üldse (see ku8s on kiriSURVEY)
_________________
Kommentaarid: 7 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 7
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
näita postitusi alates eelmisest:   
uus teema   vasta Tarkvara »  WWW »  ff3 ja opera9.5 kood segamini?
[vaata eelmist teemat] [vaata järgmist teemat]
 lisa lemmikuks
näita foorumit:  
 ignoreeri teemat 
sa ei või postitada uusi teemasid siia foorumisse
sa ei või vastata selle foorumi teemadele
sa ei või muuta oma postitusi selles foorumis
sa ei või kustutada oma postitusi selles foorumis
sa ei või vastata küsitlustele selles foorumis
sa ei saa lisada manuseid selles foorumis
sa võid manuseid alla laadida selles foorumis



Hinnavaatlus ei vastuta foorumis tehtud postituste eest.