Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML][PHP] Biały pasek u gór strony
Forum PHP.pl > Forum > Przedszkole
matwiej
3.08.2012, 09:54:06
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: 
[HTML] pobierz, plaintext 
  1. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  2. <head></head>
  3. <body>
  4. ""  <--- Dziwi mnie skąd to się tu znalazło i to to robi tą belkę. Jeżeli w podglądzie ją usunę problem znika !!!!
  5. ?<!--?xml version="1.0" encoding="utf-8"?-->
  6.  
  7.  
  8. 	<meta name="Description" content="Tu wpisz opis zawarto?i strony"> 
  9. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">	
  10. 	<meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami">
  11. 	<meta http-equiv="Content-Language" content="pl">
[HTML] pobierz, plaintext


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

index.php :
[PHP] pobierz, plaintext 
  1. <?php include 'head.php'; ?>
  2. ... dalsza nieistotna treść
  3.  
  4. </body> 
[PHP] pobierz, plaintext


head.php: 

[HTML] pobierz, plaintext 
  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. 	<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" />
  10. 	<link rel="stylesheet" type="text/css" href="styl.css" />
  11.  
  12. 	<!-- Slider -->
  13. 	<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
  14. <script type="text/javascript">
  15.  
  16. $(document).ready(function() {		
  17. 	slideShow();
  18. });
  19.  
  20. function slideShow() {
  21. 	$('#gallery a').css({opacity: 0.0});
  22. 	$('#gallery a:first').css({opacity: 1.0});
  23. 	$('#gallery .caption').css({opacity: 0.7});
  24. 	$('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
  25. 	$('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
  26. 	.animate({opacity: 0.7}, 400);
  27. 	setInterval('gallery()',6000);
  28. }
  29.  
  30. function gallery() {
  31. 	var current = ($('#gallery a.show')?  $('#gallery a.show') : $('#gallery a:first'));
  32. 	var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));	
  33. 	var caption = next.find('img').attr('rel');	
  34. 	next.css({opacity: 0.0})
  35. 	.addClass('show')
  36. 	.animate({opacity: 1.0}, 1000);
  37. 	current.animate({opacity: 0.0}, 1000)
  38. 	.removeClass('show');
  39. 	$('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });	
  40. 	$('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '70px'},500 );
  41. 	$('#gallery .content').html(caption);
  42. }
  43. </script>
  44. 	<!-- Slider -->
  45.  
  46. </head>
  47. <body>
  48. <div id="menu_tlo">
  49. 	<div id="menu">
  50. 		<ul>
  51. 		<li><a href="#">Kontakt</a></li>
  52. 		<li><a href="#">Oferta</a></li>
  53. 		<li><a href="#">Realizacje</a></li>
  54. 		<li><a href="#">Dokumenty</a></li>
  55. 		</ul>
  56. 	</div>
  57. ...	i tak się trochę ciągnie 
[HTML] pobierz, plaintext


I css: 
[HTML] pobierz, plaintext 
  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. }
[HTML] pobierz, plaintext


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
[PHP] pobierz, plaintext 
  1. <?php include('head.php');?> 
[PHP] pobierz, plaintext

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 ?
!*!
3.08.2012, 10:04:42
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?
matwiej
3.08.2012, 10:42:30
Cytat
include dajesz w body, więc jest w body.

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

index.php
[PHP] pobierz, plaintext 
  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>
[PHP] pobierz, plaintext

i head.php
[PHP] pobierz, plaintext 
  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.  
[PHP] pobierz, plaintext

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 ?
!*!
3.08.2012, 10:55:24
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.
matwiej
3.08.2012, 11:04:27
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.
!*!
3.08.2012, 11:13:29
Odnośnie budowy i struktury. Teraz jest dobrze, choć wywal jeszcze ten kod od xml.
matwiej
3.08.2012, 11:24:15
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
!*!
3.08.2012, 11:31:27
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ć.
matwiej
3.08.2012, 11:48:25
Ale ja właśnie tak robię.
Zobacz to jest aktualny kod:

Index.php
[PHP] pobierz, plaintext 
  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>
[PHP] pobierz, plaintext


head.php
[PHP] pobierz, plaintext 
  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 -->
[PHP] pobierz, plaintext


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 ?
!*!
3.08.2012, 12:02:51
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.
Evinek
3.08.2012, 12:04:20
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
matwiej
3.08.2012, 12:12:06
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
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.