Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Układ strony
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
LucKy_skiLL
4.08.2012, 12:19:07
Mam kilka problemów .css mojej strony, pierwszy to kolorowanie linków, mam wszędzie "text-decoration: none;" ale nie pomaga. Drugi problem to różne ustawienia divów w zależoności od rozdzielczości monitora, u Mnie jest dobrze, ale jak na stronie wejdzie kolega z inną rozdzielczością to divy nachodzą na niekótre rzeczy.


Cały kod


[PHP] pobierz, plaintext 
  1. body{background:#0a0a0a url(img/tlo.png) repeat 0 0;color:#fff;margin:0;overflow-y:scroll; font-family: Tahoma,Arial,Verdana,sans-serif; font-size:12px; color:#FFFFFF; text-decoration: none; }
  2.  
  3. a { text-decoration: none; }
  4.  
  5. #tresc{font-family:tahoma;font-size:13px;margin-left:200px;margin-top:3px; text-decoration: none; }
  6. #header{background:url(img/logo.png) no-repeat center top;height:198;margin-left:auto;margin-right:auto;width:100%; text-decoration: none; }
  7. #pole{background:#414141;border:1px #1A1A1A solid;color:#FFF;font-size:14px;height:17px;margin-right:0px;margin-top:0px;width:135px; text-decoration: none; }
  8. #subpages  { width:228px; background:#017EA2; border:1px solid #68C5D9; border-width:0px 1px; text-decoration: none; }
  9. #subpages a { color:#FFF; text-decoration: none; }
  10. #uslugi { float:center; width:240px; margin-left: 10px; text-decoration: none; }
  11. #panel { float:right; width:240px; margin-top:-244px; text-decoration: none; }
  12. #content  { float:left; padding-left:15px; width:710px; text-decoration: none; }
  13. #menu { background:#252525 url(img/menu.png) repeat-x; height:49px; color:#D4D4D4; font-weight:bold; text-decoration: none; }
  14. #menu a { color:#FFF; text-decoration: none }
  15. #menu div.menu-item { float:left; text-align: center; padding:17px 14px 0px; height:32px; background:none; border:0; cursor:pointer; text-decoration: none }
  16. #menu div.tooltip { position:absolute; overflow:visible; margin-top:5px; padding:8px; border:1px solid #585858; background-color:#3F3F3F; color:#FFF; filter:alpha(opacity=80); opacity:0.80; z-index:1000; font-size:10px; display:none; text-align:center; width:90px; height:15px; text-transform:uppercase; text-decoration: none }
  17. #tlo{ border:1px solid #474747; background:#343434; padding:20px; margin-top:15px; text-decoration: none;}
  18. #srodek { width: 635px; float:left; overflow: hidden; margin-top:-250px; margin-left: 250px; }
  19. #stopka{ border:1px solid #474747; width:1092px; background:#343434; padding:20px; margin-top:200px; position: absolute; }
  20.  
  21. #kodsmsgg{ margin-left:270px; margin-top:-120px; }
  22. #serwery{ padding-left:400px;}
  23.  
  24. #welcome{ margin-top:-482px; padding-left:30px; position: absolute; text-decoration: none;}
  25. #data { margin-top:-482px; padding-left:832px; position: absolute; text-decoration: none;}
  26.  
  27. #sendsrodek{ margin-top:40px; padding-left:150px; text-decoration: none;}
  28. #prawo{ width:500px; margin-top:-120px; padding-left:250px; text-decoration: none;}
  29. #zmianadanych{ width:200px; margin-top:38px; padding-left:330px; text-decoration: none;}
  30.  
  31. .smsy { width:600px; margin-left: auto; margin-right: auto; border: 2px solid #13badb; -moz-border-radius: 5px; border-radius: 5px; font-weight: normal; font-size:12px; }
  32. .smsy td { padding: 5px; text-align: center; border:1px dotted #13badb; }
  33. .smsyt { padding: 5px; text-align: center; font-weight: bold; font-size:11px; background-color:#D4ECFA; background-image:url(img/smsyt.gif); }
  34.  
  35.  
  36. .portfel_menu div { width:200px; border-bottom:1px dashed #cecece; }
  37. .portfel_menu a { display:inline; width:200px; padding:6px; text-align:left; text-decoration:none; color:#0091D4; border-bottom:1px solid #0091D4; }
  38. .portfel_menu a:hover { text-decoration:none; border-bottom:3px solid #0091D4; }
  39. .portfel_menu .wplata { font-weight:bold; text-decoration:none; }
  40. .portfel_portfel .portfel { font-weight:bold; font-size:140%; color:#0091D4; text-decoration:none; padding:10px; }
  41.  
  42.  
  43. .subpages-content { padding:10px 15px; background:url(img/subpages-top.gif) repeat-x; min-height:90px; text-decoration: none; }
  44. .subpage  { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/blue-dot.png) no-repeat; background-position:0 6px; text-decoration: none; }
  45. .subpages-bottom  { width:230px; height:14px; background:url(img/subpages-bottom.gif) no-repeat; text-decoration: none; }
  46. .subpage-content  { line-height:18px; padding-top:10px; text-decoration: none }
  47. .home  { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/home.png) no-repeat; background-position:0 6px; text-decoration: none }
  48. .kontakt  { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/kontakt.png) no-repeat; background-position:0 6px; text-decoration: none }
  49. .zaloguj  { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/zaloguj.png) no-repeat; background-position:0 6px; text-decoration: none }
  50. .rejestracja { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/rejestracja.png) no-repeat; background-position:0 6px; text-decoration: none }
  51. .vip  { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/vip.png) no-repeat; background-position:0 6px; text-decoration: none }
  52. .premium  { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/premium.png) no-repeat; background-position:0 6px; text-decoration: none }
  53. .panel  { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/panel.png) no-repeat; background-position:0 6px; text-decoration: none }
  54. .ogloszenia  { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/ogloszenia.png) no-repeat; background-position:0 6px; text-decoration: none }
  55. .regulamin  { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/regulamin.png) no-repeat; background-position:0 6px; text-decoration: none }
  56. .slot { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/slot.png) no-repeat; background-position:0 6px; text-decoration: none }
  57. .edytuj { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/edytuj.png) no-repeat; background-position:0 6px; text-decoration: none }
  58. .wiadomosc { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/wiadomosc.png) no-repeat; background-position:0 6px; text-decoration: none }
  59. .ustawienia { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/ustawienia.png) no-repeat; background-position:0 6px; text-decoration: none }
  60. .portfel { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/portfel.png) no-repeat; background-position:0 6px; text-decoration: none }
  61. .wyloguj { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/wyloguj.png) no-repeat; background-position:0 6px; text-decoration: none }
  62.  
  63.  
  64. #content  { float:left; padding-left:287px; width:600px; margin-top:0px; }
  65. .path  { float:left; margin-left:-25px; height:23px; width:577px; padding:10px 10px 10px 25px; background:url(img/path-bg.gif) repeat-x; font-size:11px; color:#737373; text-decoration: none }
  66. .path-right { float:left; height:33px; width:11px; background:url(img/path-right.gif) no-repeat; text-decoration: none }
  67.  
  68. div.demo {
  69. 	font-size: 80%;
  70. 	padding:12px;
  71. 	font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
  72. }
  73.  
  74. div.demo h3.docs { clear:left; font-size:12px; font-weight:normal; padding:0 0 1em; margin:0; }
[PHP] pobierz, plaintext
ShadowD
4.08.2012, 12:41:28
Daj to live...
LucKy_skiLL
5.08.2012, 09:52:15
http://amxhelp.pl

Odświeżam
Shido
5.08.2012, 11:44:56
Wszystkie stony, nie będące strona główną.
Kod
Warning: include(style/js/scritps.js) [function.include]: failed to open stream: No such file or directory in /home/luckyskill/domains/amxhelp.pl/public_html/id/gora.php on line 33

Warning: include(style/js/scritps.js) [function.include]: failed to open stream: No such file or directory in /home/luckyskill/domains/amxhelp.pl/public_html/id/gora.php on line 33

Warning: include() [function.include]: Failed opening 'style/js/scritps.js' for inclusion (include_path='.:/usr/local/lib/php') in /home/luckyskill/domains/amxhelp.pl/public_html/id/gora.php on line 33


Co do kolorwania linków, u mnie tez sie tak czasami dzieje - musisz nazucić mu jakis kolor na link to się uspokoi.

Co do nachodzenia divów.
Pomijaąc że napis na stronie głównej jest obrazkiem ( gdzie dokładnie to samo można zrobić w formie tekstowej ). To divy masz o stałej szerokości dlatego jak wejdzie ktoś z mniejszą rozdzielczością to mu nachodzą.
Albo nażyć stałą szerokość strony (zamknij całość w divie i ten wyśrodkuj) albo poustawiaj szerokości w %. Wtedy cała strona (poza rozmiarami tekstów) skalowałaby się automatycznie.
LucKy_skiLL
8.08.2012, 15:36:03
Czyli np. tak ?

[HTML] pobierz, plaintext 
  1. #test {
  2.   width:1000px;
  3.   margin: 0px auto; 
  4. }
[HTML] pobierz, plaintext


Odświeżam

Odświeżam

Odświeżam
erix
9.08.2012, 11:01:30
Jak dla mnie, to jest tu trochę sieka, w tym kodzie.

Przydałby się jeszcze jakiś kontener na to wszystko.
LucKy_skiLL
9.08.2012, 20:41:36
Ogarnałem trochę kod, ale dalej jest problem.



[HTML] pobierz, plaintext 
  1. /* ----------========== Ogólne ustawienia ==========---------- */
  2. body { background:#0a0a0a url(img/tlo.png) repeat 0 0;color:#fff;margin:0;overflow-y:scroll; font-family: Tahoma,Arial,Verdana,sans-serif; font-size:12px; color:#FFFFFF; }
  3. a { text-decoration: none; }
  4.  
  5. /* ----------========== Logo ==========---------- */
  6.  
  7. #header { background:url(img/logo.png) no-repeat center top;height:198;margin-left:auto;margin-right:auto;width:100%; }
  8. #pole { background:#414141;border:1px #1A1A1A solid;color:#FFF;font-size:14px;height:17px;margin-right:0px;margin-top:0px;width:135px; }
  9.  
  10. /* ----------========== Menu ==========---------- */
  11.  
  12. #menu { background:#252525 url(img/menu.png) repeat-x; height:49px; color:#D4D4D4; font-weight:bold; }
  13. #menu a { color:#FFF; }
  14. #menu div.menu-item { float:left; text-align: center; padding:17px 14px 0px; height:32px; background:none; border:0; cursor:pointer; }
  15. #menu div.tooltip { position:absolute; overflow:visible; margin-top:5px; padding:8px; border:1px solid #585858; background-color:#3F3F3F; color:#FFF; filter:alpha(opacity=80); opacity:0.80; z-index:1000; font-size:10px; display:none; text-align:center; width:90px; height:15px; text-transform:uppercase; }
  16.  
  17. /* ----------========== Środek strony ==========---------- */
  18.  
  19. #tlo{ border:1px solid #474747; background:#343434; padding:20px; margin-top:15px;}
  20. #srodek { width: 635px; float:left; overflow: hidden; margin-top:-250px; margin-left: 250px; }
  21.  
  22. /* ----------========== Stopka ==========---------- */
  23.  
  24. #footer { height:138px; background:#04A5C8 url(img/footer.png) repeat-x; position:absolute; }
  25. #footer a,a:hover,a:visited { color:#EEEEEE; }
  26. .footer { width:1135px; margin:auto; padding-top:27px; color:#EEEEEE;; }
  27. .footer-right { padding-top:7px; padding-right:8px; line-height:18px; text-align:right; font-size:11px; }
  28.  
  29. /* ----------========== Przywitanie / Data ==========---------- */
  30.  
  31. #welcome { margin-top:-482px; padding-left:30px; position: absolute;}
  32. #data { margin-top:-482px; padding-left:828px; position: absolute;}
  33.  
  34. /* ----------========== Tabelka kodów SMS ==========---------- */
  35.  
  36. .smsy { width:600px; margin-left: auto; margin-right: auto; border: 2px solid #13badb; -moz-border-radius: 5px; border-radius: 5px; font-weight: normal; font-size:12px; }
  37. .smsy td { padding: 5px; text-align: center; border:1px dotted #13badb; }
  38. .smsyt { padding: 5px; text-align: center; font-weight: bold; font-size:11px; background-color:#D4ECFA; background-image:url(img/smsyt.gif); }
  39.  
  40. /* ----------========== Logowanie / Panel admina / Panel użytkownika ==========---------- */
  41.  
  42. #panel { float:right; width:240px; margin-top:-244px; }
  43. .panel  { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/panel.png) no-repeat; background-position:0 6px; }
  44. .edytuj { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/edytuj.png) no-repeat; background-position:0 6px; }
  45. .wiadomosc { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/wiadomosc.png) no-repeat; background-position:0 6px; }
  46. .ustawienia { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/ustawienia.png) no-repeat; background-position:0 6px; }
  47. .portfel { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/portfel.png) no-repeat; background-position:0 6px; }
  48. .wyloguj { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/wyloguj.png) no-repeat; background-position:0 6px; }
  49.  
  50. .konto  { float:left; background:url(img/button_1.png) no-repeat; width:100px; height:27px; border: 0px; cursor: pointer; }
  51. .zaloguj  { background:url(img/button_2.png) no-repeat; width:98px; height:27px; border: 0px; cursor: pointer; }
  52.  
  53. /* ----------========== Portfel / Wiadomości ==========---------- */
  54.  
  55. .portfel_menu div { width:200px; border-bottom:1px dashed #cecece; }
  56. .portfel_menu a { display:inline; width:200px; padding:6px; text-align:left; text-decoration:none; color:#0091D4; border-bottom:1px solid #0091D4; }
  57. .portfel_menu a:hover { text-decoration:none; border-bottom:3px solid #0091D4; }
  58. .portfel_menu .wplata { font-weight:bold; text-decoration:none; }
  59. .portfel_portfel .portfel { font-weight:bold; font-size:140%; color:#0091D4; text-decoration:none; padding:10px; }
  60.  
  61. /* ----------========== Boczne menu ==========---------- */
  62.  
  63. #uslugi { float:center; width:240px; margin-left: 10px; }
  64. #subpages  { width:228px; background:#017EA2; border:1px solid #68C5D9; border-width:0px 1px; }
  65. #subpages a { color:#FFFFF; }
  66. .subpages-content { padding:10px 15px; background:url(img/subpages-top.gif) repeat-x; min-height:90px; }
  67. .subpage  { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/blue-dot.png) no-repeat; background-position:0 6px; }
  68. .subpages-bottom  { width:230px; height:14px; background:url(img/subpages-bottom.gif) no-repeat; }
  69. .subpage-content  { line-height:18px; padding-top:10px; }
  70.  
  71. .home  { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/home.png) no-repeat; background-position:0 6px; }
  72. .kontakt  { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/kontakt.png) no-repeat; background-position:0 6px; }
  73. .vip  { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/vip.png) no-repeat; background-position:0 6px; }
  74. .premium  { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/premium.png) no-repeat; background-position:0 6px; }
  75. .ogloszenia  { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/ogloszenia.png) no-repeat; background-position:0 6px; }
  76. .regulamin  { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/regulamin.png) no-repeat; background-position:0 6px; }
  77. .slot { padding:6px 10px 7px 22px; border-bottom:1px solid #048DAC; background:url(img/slot.png) no-repeat; background-position:0 6px; }
  78.  
  79. /* ----------========== Pasek "Gdzie jestes" ==========---------- */
  80.  
  81. #content  { float:left; padding-left:287px; width:600px; margin-top:0px; }
  82. .path  { float:left; margin-left:-25px; height:23px; width:577px; padding:10px 10px 10px 25px; background:url(img/path-bg.gif) repeat-x; font-size:11px; color:#737373; }
  83. .path-right { float:left; height:33px; width:11px; background:url(img/path-right.gif) no-repeat; }
  84.  
  85. /* ----------========== Tło pod przyciski ==========---------- */
  86.  
  87. div.demo { font-size: 80%; padding:12px; font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"; }
  88. div.demo h3.docs { clear:left; font-size:12px; font-weight:normal; padding:0 0 1em; margin:0; }
[HTML] pobierz, plaintext
erix
10.08.2012, 08:44:13
A może byś to wystawił działające? Nie mamy markupa, sam wstawiony CSS niewiele pomoże.
LucKy_skiLL
10.08.2012, 11:29:46
Kilka postów wyżej masz link do strony: http://amxhelp.pl
erix
10.08.2012, 13:17:31
http://forum.php.pl/index.php?s=&showt...st&p=984238
LucKy_skiLL
11.08.2012, 12:47:17
Jaki kontener, proszę trochę jaśniej.

Odświeżam
erix
11.08.2012, 16:06:39
http://pl.lmgtfy.com/?q=css+kontener
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.