Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS][HTML][PHP] Biały pasek u gór strony
matwiej
post 3.08.2012, 09:54:06
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
!*!
post 3.08.2012, 10:04:42
Post #2





Grupa: Zarejestrowani
Postów: 4 298
Pomógł: 447
Dołączył: 16.11.2006

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


include dajesz w body, więc jest w body. Co to znaczy "biała belka"?
Poza tym po co Ci
Cytat
<?php echo '<?xml version="1.0" encoding="utf-8"?>'; ?>

w html?

Ten post edytował !*! 3.08.2012, 10:06:04


--------------------
Nie udzielam pomocy poprzez PW i nie mam GG.
Niektóre języki programowania, na przykład C# są znane z niezwykłej przenośności (kompatybilność ze wszystkimi wersjami Visty jest wiele warta).
Go to the top of the page
+Quote Post
matwiej
post 3.08.2012, 10:42:30
Post #3





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

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


Cytat
include dajesz w body, więc jest w body.

A no faktycznie, tutaj rozumiem tylko że jak zrobiłem teraz.

index.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. <head>
  6. <?php include('head.php');?>
  7. </head>

i 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 -->
  41.  
  42.  

Dalej maxton pokazuje że wszystko jest w body.
Cytat
Co to znaczy "biała belka"?

Wrzuciłem stronę na serwer. Sam zobacz. Problem występuje na przeglądarce maxton i chrom. W FF jest wszystko ok.
Cytat
Poza tym po co Ci
Cytat
Cytat
<?php echo '<?xml version="1.0" encoding="utf-8"?>'; ?>

Hm ... wyczytałem że powinno tak być. Jest to błąd ?

Ten post edytował matwiej 3.08.2012, 12:42:49
Go to the top of the page
+Quote Post
!*!
post 3.08.2012, 10:55:24
Post #4





Grupa: Zarejestrowani
Postów: 4 298
Pomógł: 447
Dołączył: 16.11.2006

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


Poczytaj jakiś kurs HTML bo brakuje Ci podstaw. NIe używaj xml w html, bo nie jest Ci to potrzebne. Nie ma przeglądarki FF, jest FX(firefox). Biały pasek jest również na operze. Poza tym, znaczniki head, nadal masz w body.


--------------------
Nie udzielam pomocy poprzez PW i nie mam GG.
Niektóre języki programowania, na przykład C# są znane z niezwykłej przenośności (kompatybilność ze wszystkimi wersjami Visty jest wiele warta).
Go to the top of the page
+Quote Post
matwiej
post 3.08.2012, 11:04:27
Post #5





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

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


To teraz mnie zdziwiłeś. Jakich podstaw mi brakuje ? Przeczytałem dwa kursy dodatkowo strona zrobiona xhtml była sprawdzana walidatorem i 0 błędów.
Go to the top of the page
+Quote Post
!*!
post 3.08.2012, 11:13:29
Post #6





Grupa: Zarejestrowani
Postów: 4 298
Pomógł: 447
Dołączył: 16.11.2006

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


Odnośnie budowy i struktury. Teraz jest dobrze, choć wywal jeszcze ten kod od xml.


--------------------
Nie udzielam pomocy poprzez PW i nie mam GG.
Niektóre języki programowania, na przykład C# są znane z niezwykłej przenośności (kompatybilność ze wszystkimi wersjami Visty jest wiele warta).
Go to the top of the page
+Quote Post
matwiej
post 3.08.2012, 11:24:15
Post #7





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

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


Cytat(!*! @ 3.08.2012, 12:13:29 ) *
Odnośnie budowy i struktury. Teraz jest dobrze, choć wywal jeszcze ten kod od xml.

Widzisz bo teraz wszystko dałem do index.php bez includów.
Pasek znikł ale potrzebne jest mi zewnętrzne czytanie z pliku. A to powoduje ten pasek.

A co do deklaracji xml'a, brałem właśnie z kursu.
http://www.kurshtml.edu.pl/html/wymagania_...html,xhtml.html
Go to the top of the page
+Quote Post
!*!
post 3.08.2012, 11:31:27
Post #8





Grupa: Zarejestrowani
Postów: 4 298
Pomógł: 447
Dołączył: 16.11.2006

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


Wypisują w nim bzdury.
http://pl.wikibooks.org/wiki/HTML

Stwórz poprawny dokument HTML, a nie żadne XML, bo to nie jest do niczego potrzebne. Wstaw include w header, a w pliku header.php zapisz to co powinno być w header. I wszytko będzie działać.


--------------------
Nie udzielam pomocy poprzez PW i nie mam GG.
Niektóre języki programowania, na przykład C# są znane z niezwykłej przenośności (kompatybilność ze wszystkimi wersjami Visty jest wiele warta).
Go to the top of the page
+Quote Post
matwiej
post 3.08.2012, 11:48:25
Post #9





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
!*!
post 3.08.2012, 12:02:51
Post #10





Grupa: Zarejestrowani
Postów: 4 298
Pomógł: 447
Dołączył: 16.11.2006

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


Nie mam pomysłu, zresztą w narzędziach developera, widnieje nadal iż header masz w body o0
Jak zapisujesz pliki? Kodowanie itd.

Cytat
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head><?php include ('head.php'); ?></head>


Popraw to tak, to jedyne co mi przychodzi do głowy.


--------------------
Nie udzielam pomocy poprzez PW i nie mam GG.
Niektóre języki programowania, na przykład C# są znane z niezwykłej przenośności (kompatybilność ze wszystkimi wersjami Visty jest wiele warta).
Go to the top of the page
+Quote Post
Evinek
post 3.08.2012, 12:04:20
Post #11





Grupa: Zarejestrowani
Postów: 280
Pomógł: 46
Dołączył: 23.03.2010

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


U mnie jest okej.
[CIACH] - choć jest reklama, to pod nią nie ma żadnej białej lini.
Może spróbuj zmienić format pliku na UTF-8 bez BOM?
Kod skopiowany prosto z forum. Jak nie zadziała UTF-8 bez BOM to spróbuj skopiować kod z forum i wkleić do nowych plików.

@EDIT:
Usunąłem link bo już nie potrzebny

Ten post edytował Evinek 3.08.2012, 12:15:50
Go to the top of the page
+Quote Post
matwiej
post 3.08.2012, 12:12:06
Post #12





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

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


Faktycznie problem był w kodowaniu.
Miałem UTF-8
Po zmianie na UTF-8 bez BOM wszystko jest już ok.
Dziękuje bardzo za zainteresowanie i pomoc smile.gif
Go to the top of the page
+Quote Post

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

 



RSS Wersja Lo-Fi Aktualny czas: 21.07.2025 - 09:06