Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Odwieczny problem FF ok, IE beee
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Fallout
2.05.2006, 18:45:29
Witam,

CSS jest ok wg. walidatora w3, natomiast efekty nie są ok smile.gif
dodatkowo w IE boksy zjeżdzają spory kawał w dół co nie występuje w FF..

efekty zobaczyć można na: http://praca.warm-maz.pl


ZAZNACZAM ŻE WKLEJAM SPORĄ ILOŚĆ KODU
ALE INACZEJ SIE CHYBA NIE DA ZAPREZENTOWAĆ TEGO

[HTML] pobierz, plaintext 
  1. body{
  2.       font-family: Verdana, Arial, Helvetica, sans-serif;
  3.       color: #333333;
  4.       line-height: 1.166;      
  5.       margin: 0px;
  6.       padding: 0px;
  7. }
  8.  
  9. a:link, a:visited, a:hover {
  10.       color: #000000;
  11.       text-decoration: none;
  12. }
  13.  
  14. a:hover {
  15.       text-decoration: underline;
  16. }
  17.  
  18. h1, h2, h3, h4, h5, h6 {
  19.       font-family: Arial,sans-serif;
  20.       margin: 0px;
  21.       padding: 0px;
  22. }
  23.  
  24. #top{
  25.       margin: 0;
  26.       padding: 10px 0px;
  27.       border-bottom: 1px solid #cccccc;
  28.       width: 100%;
  29. }
  30.  
  31. #menu{
  32.       margin: 0 77% 0 0;
  33.       padding: 0px;
  34.       background-color: #FFFFFF;
  35. }
  36.  
  37. #zawartosc{
  38.     float:right;
  39.       width: 75%;
  40.       margin: 0;
  41.       padding: 0 1% 0 0;
  42. }
  43.  
  44. #top_text{
  45.       margin: 0px;
  46.       padding: 0px 0px 10px 10px;
  47. }
  48.  
  49. #nazwa_strony{
  50.       padding: 0px 0px 10px 10px;
  51. }
  52.  
  53. #naglowek{
  54.       font-size: 80%;
  55.       padding: 5px 0px 5px 10px;
  56. }
  57.  
  58. .tresc{
  59.       clear: both;
  60.       padding: 10px 0px 0px 10px;
  61.       font-size: 80%;
  62. }
  63.  
  64. .tresc p{
  65.       padding: 0px 0px 10px 0px;
  66. }
  67.  
  68. #stopka{
  69.       clear: both;
  70.       border: 1px solid #cccccc;
  71.       font-size: 75%;
  72.       color: #666666;
  73.       padding: 10px 10px 10px 10px;
  74.       margin-top: 0px;
  75. }
  76.  
  77. .w_menu{
  78.       margin: 0px;
  79.       padding: 0px 0px 10px 10px;
  80.       font-size: 90%;
  81. }
  82.  
  83. .box_header{
  84.       background:#000000;
  85.       color:#FFFFFF;
  86.       width:100%;
  87.       font-weight:bold;
  88. }
  89.  
  90. .box_content{
  91.       background:#FCF98D;
  92.       color:#000000;
  93.       width:100%;
  94. }
[HTML] pobierz, plaintext


a tutaj tego uzywam:

[HTML] pobierz, plaintext 
  1. <body>
  2.  
  3. <div id="top">
  4.   <h1 id="top_text">{$tytul}</h1>
  5. </div>
  6.  
  7. <div id="zawartosc">
  8.  
  9.       <h2 id="nazwa_strony">{$tytul}</h2>
  10.       
  11.       <div class="tresc">
  12.             <p>                  
  13.                   {section name=r loop=$user_data}
  14.                   <br/>{$user_data[r].u_imie}
  15.                   <br/>{$user_data[r].u_nazwisko}
  16.                   <br/>{$user_data[r].u_email}
  17.                   <br/>{$user_data[r].u_miasto}
  18.                   <br/>{$user_data[r].u_telefon}
  19.                   <br/>{$user_data[r].u_komorka}
  20.                   <br/>
  21.                   {sectionelse}
  22.                    bleee;
  23.                   {/section}
  24.             </p>
  25.       </div>
  26.   
  27.  
  28. </div>
  29. <script language="JavaScript" type="text/javascript" src="skrypty.js"></script>
  30.  
  31. <div id="menu">
  32.  
  33.       <div class="w_menu">
  34.             <p>{include file="box_login.tpl"}</p>
  35.             <p>{include file="box_search.tpl"}</p>
  36.       </div>
  37.       
  38.  
  39. </div>
  40.  
  41. <div id="stopka">"System Ofert Pracy" | &copy;2006 Marcin Bancerz</div>
  42. <br/>
  43. </body>
[HTML] pobierz, plaintext


a tu daje jeden z boksów:

[HTML] pobierz, plaintext 
  1. <div class="box_header" style="cursor: pointer" onclick="expandit('box_search')">
  2.       <p>Szukaj ofert</p>
  3. </div>
  4. <form action="{$SCRIPT_NAME}?act=search" method="post" name="frm_szukaj">
  5. <div class="box_content" id="box_search">
  6.             <p>
  7.                   <input type="text" name="search_text" />
  8.                   <input type="submit" value="Szukaj" />
  9.             </p>
  10. </div>
  11. </form>
[HTML] pobierz, plaintext


**********************************
Efekt jaki chciałbym uzyskać to to, żeby nagłowek bosku
był połączony z zawartością boksu (czarne tło nad żółym)
bez białej przestrzeni między nimi, oraz żeby boksy przylegały do siebie

Kombinowałem mieszałem, z tabel przeszłem na divy ale nadal nie moge tego rozgryść :/
*************************************************
A tak przy okazji wrzucenie linijki:
Kod
<script language="JavaScript" type="text/javascript" src="skrypty.js"></script>

w innym miejscu niz gdzieś pomiędzy divami powoduje, że strona nie wyświetla się w IE (ale źródło można zobaczyć...) a w FF wszystko ok...3 godziny siedziałem nad tym.. n/c..
^bmb
2.05.2006, 19:33:25
Witam!

Ja obstawiam dwie rzeczy.
1) Wrzuć <form> wewnatrz diva
2) zamiast <p> użyj <span>

pozdrawiam
Fallout
2.05.2006, 19:56:34
Cytat(^bmb @ 2006-05-02 19:33:25)
Witam!

Ja obstawiam dwie rzeczy.
1) Wrzuć <form> wewnatrz diva
2) zamiast <p> użyj <span> 

pozdrawiam

Ad 1. Gdzieś wyczytałem, że właśnie divy itp. powinny być w form, ale zmieniłem dla testu, bez żadnego efektu
Ad 2. ok udało się, ale boxy nadal są od siebie odsunięte

oto zmieniony box:

[HTML] pobierz, plaintext 
  1. <div class="box_header" style="cursor: pointer" onclick="expandit('box_search')">
  2.       <span>Szukaj ofert</span>
  3. </div>
  4. <form action="{$SCRIPT_NAME}?act=search" method="post" name="frm_szukaj">
  5. <div class="box_content" id="box_search">
  6.             <span>
  7.                   <br/>
  8.                   <input type="text" name="search_text" />
  9.                   <input type="submit" value="Szukaj" />
  10.                   <br/><br/>
  11.             </span>
  12. </div>
  13. </form>
[HTML] pobierz, plaintext
^bmb
3.05.2006, 17:02:46
Własnie sprawdzilem i na operze i badzIEwiu źle wyświetlało przez domyślny margines dla <form>

dodaj form{margin: 0px;}

--
Pozdrawiam
^bmb
Fallout
3.05.2006, 23:05:15
Cytat(^bmb @ 2006-05-03 17:02:46)
Własnie sprawdzilem i na operze i badzIEwiu źle wyświetlało przez domyślny margines dla <form>

dodaj form{margin: 0px;}

--
Pozdrawiam
^bmb

Dziękuje! Działa idealnie guitar.gif
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.