Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS][HTML][PHP] Biały pasek u gór strony
matwiej
post
Post #1





Grupa: Zarejestrowani
Postów: 110
Pomógł: 0
Dołączył: 1.02.2010

Ostrzeżenie: (0%)
-----


Maxton i chrom pokazują mi nad górnym menu białą belkę.
Na FF tej belki nie ma wszystko jest ok.

Najpierw chciałbym pokazać jak dziwnie interpretuje kod maxton.

Fragment:
  1. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  2. "" <--- Dziwi mnie skąd to się tu znalazło i to to robi tą belkę. Jeżeli w podglądzie ją usunę problem znika !!!!
  3. ?<!--?xml version="1.0" encoding="utf-8"?-->
  4.  
  5.  
  6. <meta name="Description" content="Tu wpisz opis zawarto?i strony">
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  8. <meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami">
  9. <meta http-equiv="Content-Language" content="pl">


Jak widzicie czyta że meta tagi są w body pomimo że są w head.
Teraz jak wyglądają pliki naprawdę:

index.php :
  1. <?php include 'head.php'; ?>
  2. ... dalsza nieistotna treść
  3.  
  4. </body>


head.php:

  1. <?php echo '<?xml version="1.0" encoding="utf-8"?>'; ?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  5. <meta name="Description" content="Tu wpisz opis zawarto?i strony" />
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" />
  8. <meta http-equiv="Content-Language" content="pl" />
  9. <link rel="stylesheet" type="text/css" href="styl.css" />
  10.  
  11. <!-- Slider -->
  12. <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
  13. <script type="text/javascript">
  14.  
  15. $(document).ready(function() {
  16. slideShow();
  17. });
  18.  
  19. function slideShow() {
  20. $('#gallery a').css({opacity: 0.0});
  21. $('#gallery a:first').css({opacity: 1.0});
  22. $('#gallery .caption').css({opacity: 0.7});
  23. $('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
  24. $('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
  25. .animate({opacity: 0.7}, 400);
  26. setInterval('gallery()',6000);
  27. }
  28.  
  29. function gallery() {
  30. var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first'));
  31. var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));
  32. var caption = next.find('img').attr('rel');
  33. next.css({opacity: 0.0})
  34. .addClass('show')
  35. .animate({opacity: 1.0}, 1000);
  36. current.animate({opacity: 0.0}, 1000)
  37. .removeClass('show');
  38. $('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });
  39. $('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '70px'},500 );
  40. $('#gallery .content').html(caption);
  41. }
  42. <!-- Slider -->
  43.  
  44. </head>
  45. <div id="menu_tlo">
  46. <div id="menu">
  47. <ul>
  48. <li><a href="#">Kontakt</a></li>
  49. <li><a href="#">Oferta</a></li>
  50. <li><a href="#">Realizacje</a></li>
  51. <li><a href="#">Dokumenty</a></li>
  52. </ul>
  53. </div>
  54. ... i tak się trochę ciągnie


I css:
  1. body{
  2. margin: 0;
  3. padding: 0;
  4. font-size: 16px;
  5. font-family: verdana, arial;
  6. }
  7. @font-face {
  8. font-family: TCMI;
  9. src: url(TCCM.TTF);
  10. }
  11. @font-face {
  12. font-family: FRAHV;
  13. src: url(FRAHV.TTF);
  14. }
  15.  
  16. @font-face {
  17. font-family: seg;
  18. src: url(seg.TTF);
  19. }
  20.  
  21. #menu_tlo{
  22.  
  23. background-image: url("images/tlo-cien.png");
  24. background-repeat:repeat-x;
  25. width: 100%;
  26. height: 50px;
  27. margin: 0;
  28. padding: 0;
  29. }
  30.  
  31. #menu{
  32. padding: 5px 0px 0px 0px;
  33. width: 960px;
  34. margin: 0 auto;
  35. height: 25px;
  36. }


Wstawiałem tylko fragmenty kodu. Mam nadzieję że to wystarczy. Niestety nie mam jak pokazać strony ponieważ aktualnie jest na lokalnym serwerze. Problem pojawił się jak przeszedłem ze zwykłego pliku html na php i użyłem include. Może ktoś jest mi w stanie pomóc ?

Przepraszam że post pod postem ale chciałbym podnieść wyżej temat i pokazać do czego doszedłem.
Zauważyłem że właśnie include
  1. <?php include('head.php');?>

Generuje tą białą belkę na samej górze strony.
Jeżeli zawartość includa wrzucę do indexu wszystko działa ładnie.
Istnieje jakieś inne rozwiązanie (proste) załadowania elementu strony z innego pliku ?

Ten post edytował matwiej 2.08.2012, 20:29:45
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
matwiej
post
Post #2





Grupa: Zarejestrowani
Postów: 110
Pomógł: 0
Dołączył: 1.02.2010

Ostrzeżenie: (0%)
-----


Ale ja właśnie tak robię.
Zobacz to jest aktualny kod:

Index.php
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  4. <head>
  5. <?php include ('head.php'); ?>
  6. </head>
  7. <body>
  8. <div id="menu_tlo">
  9. <div id="menu">
  10. <ul>
  11. <li><a href="#">Kontakt</a></li>
  12. <li><a href="#">Oferta</a></li>
  13. <li><a href="#">Realizacje</a></li>
  14. <li><a href="#">Dokumenty</a></li>
  15. </ul>
  16. </div>
  17. <div id="zielona">
  18. Zielona Energia <img src="images/ikona_menu.png" alt="Obrazek Menu" id="obrazek_menu" />
  19. </div>
  20. </div>
  21. <div id="belka_tlo">
  22. <div class="center">
  23. <div id="belka">
  24. <img src="images/logo.png" alt="Ekoinwest" id="logo" />
  25. <div id="dane">
  26. <img src="images/wiatraki.png" alt="Wiatraki" />
  27.  
  28.  
  29. </div>
  30. <div id="cytat">
  31. "Mamy tylko jedną Ziemię a jej przyszłość zależy od każdego na pozór niewielkiego ludzkiego działania, zależy od każdego z nas"
  32. <br/><span id="autor">~Florian Plit</span>
  33. </div>
  34.  
  35. </div>
  36. </div>
  37. </div>
  38. <div id="glowna_tlo">
  39. <div class="center">
  40. <img src="images/liscie.png" alt=" " id="liscie" />
  41. <div id="glowna">
  42.  
  43. <div class="box">
  44. <img src="images/slonce.png" alt=" " class="png" />
  45. <p class="naglowek">Energia Słoneczna</p>
  46. <p class="tekst">W naszej ofercie posiadamy wykonanie kompletnej instalacji solarnej. Zapewniamy
  47. najwyższą jakość oraz niskie ceny. (Zobacz więcej) </p>
  48. </div>
  49. <img src="images/linia.png" alt=" " class="linia" />
  50.  
  51. <div class="box">
  52. <img src="images/ziemia.png" alt=" " class="png2" />
  53. <p class="naglowek">Energia Odnawialna</p>
  54. <p class="tekst2">Stale poszerzamy naszą ofertę, by w jak najwyższym stopniu wykorzystać energię oferowaną przez naszą planetę (Zobacz więcej) </p>
  55. </div>
  56. <img src="images/linia.png" alt=" " class="linia2" />
  57.  
  58. <div class="box">
  59. <img src="images/wiatr.png" alt=" " class="png3" />
  60. <p class="naglowek">Energia Wiatrowa</p>
  61. <p class="tekst">Elektrownie wiatrowe zapewniają energie elektryczną pochdzącą z czystej energi wiatru. (Zobacz więcej) </p>
  62. </div>
  63. </div>
  64.  
  65. <div id="slider">
  66. <img src="images/przykladowe.png" alt=" " id="przykladowe" />
  67. <div id="gallery">
  68.  
  69. <a href="#" class="show">
  70. <img src="images/1.jpg" alt="Solat na dachu" width="465" height="221" title="" rel="<h3>Montaż na dachu</h3>Kolektory słoneczne najczęściej montowane są na dachu. "/>
  71. </a>
  72.  
  73. <a href="#">
  74. <img src="images/2.jpg" alt="Solar na ziemi" width="465" height="221" title="" rel="<h3>Montaż na ziemi</h3>W razie braku południowej strony dachu, kolektor słoneczny montowany jest na ziemi. "/>
  75. </a>
  76.  
  77. <a href="#">
  78. <img src="images/3.jpg" alt="Solar na ziemi zły dach" width="465" height="221" title="" rel="<h3>Brak pozwolenia umieszczenia na dachu</h3>Gdy konserwator nie pozwala umieścić kolektor słoneczny na dachu, umieszczamy go na ziemi. "/>
  79. </a>
  80.  
  81. <div class="caption"><div class="content"></div></div>
  82. </div>
  83. <div class="clear"></div>
  84. </div>
  85.  
  86. <img src="images/linia.png" alt=" " class="linia3" />
  87. <img src="images/kontakt.png" alt=" " id="kontakt-png" />
  88. <!-- Kod formularza !!! -->
  89. <div id="kontakt-form">
  90. <input type="text" name="nazwa" id="nazwa" value="Imię Nazwisko: / Nazwa firmy: "/>
  91. <br/><input type="text" name="kont" id="kont" value="Tel / Adres pocztowy: "/>
  92. <br/><textarea name="tresc" id="tresc" >Treść: </textarea>
  93. <br/><button type="submit" id="wyslij" >Wyślij</button>
  94. <div id="adresm"> adres@domena.pl </div>
  95. </div>
  96. <!-- Kod formularza !!! -->
  97. </div>
  98. </div>
  99.  
  100.  
  101. </body>
  102. </html>


head.php
  1. <meta name="Description" content="Tu wpisz opis zawarto?i strony" />
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3. <meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" />
  4. <meta http-equiv="Content-Language" content="pl" />
  5. <title>Ekoinwest - energia odnawialna</title>
  6. <link rel="stylesheet" type="text/css" href="styl.css" />
  7.  
  8. <!-- Slider -->
  9. <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
  10. <script type="text/javascript">
  11.  
  12. $(document).ready(function() {
  13. slideShow();
  14. });
  15.  
  16. function slideShow() {
  17. $('#gallery a').css({opacity: 0.0});
  18. $('#gallery a:first').css({opacity: 1.0});
  19. $('#gallery .caption').css({opacity: 0.7});
  20. $('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
  21. $('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
  22. .animate({opacity: 0.7}, 400);
  23. setInterval('gallery()',6000);
  24. }
  25.  
  26. function gallery() {
  27. var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first'));
  28. var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));
  29. var caption = next.find('img').attr('rel');
  30. next.css({opacity: 0.0})
  31. .addClass('show')
  32. .animate({opacity: 1.0}, 1000);
  33. current.animate({opacity: 0.0}, 1000)
  34. .removeClass('show');
  35. $('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });
  36. $('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '70px'},500 );
  37. $('#gallery .content').html(caption);
  38. }
  39. </script>
  40. <!-- Slider -->


Ten kod jest aktualnie w plikach które są wgrane.
Przeglądarki zupełnie inaczej go przedstawiają i pasek dalej jest.
O to Ci chodziło tak ?
Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 27.09.2025 - 16:59