Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css][html] Problem z przyleganiem div'a
Forum PHP.pl > Forum > Przedszkole
qba10
26.11.2008, 19:46:51
Witam.
Mam problem z przyleganiem div'ow
Na IE (o dziwo) wszystko ok. Tym razem FF (tylko nie mowcie ze porawnym skrotem jest Fx haha.gif) zawiodło.
Ie:
http://fotoo.pl/hosting-zdjec/links/tag9/
FF:
http://fotoo.pl/hosting-zdjec/links/tag8/

Oto html i css:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
  2. <html>
  3. <head>
  4. <link rel="Stylesheet" type="text/css" href="style.css" />
  5.  
  6. </head>
  7. <body>
  8. <div id="top">
  9.     <div id="NAGLOWEK"><img src="grafika/top_.PNG" alt="twoj-slajd.pl" ></div>
  10.     <div id="border">
  11.  
  12.     <div id="MENU"><div class="button">Menu</div><div class="button">Menu</div></div>
  13.     <div id="TRESC">Treść strony</div>
  14.  
  15.     </div>
  16. </div>
  17. </body>
  18. </html>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1. html, body {
  2.     background-color: #fff;
  3.     color: #000;
  4.     margin: 0;
  5.  
  6. }
  7.  
  8. #top {
  9.     width: 894px;
  10.     background-color: #fafafa;
  11.  
  12.  
  13.  
  14.  margin: 0 auto 0 auto;
  15. }
  16.  
  17. #NAGLOWEK {
  18.     width: 894px;
  19.  
  20. }
  21.  
  22.  
  23. #border {
  24.  
  25. background-image:  url(grafika/page_left.PNG) ;
  26. background-repeat:   no-repeat;
  27. background-position:  top left;
  28. overflow: hidden;
  29. }
  30. #MENU {
  31. background:  url(grafika/menu.PNG) no-repeat;
  32. margin-top:15px;
  33. margin-left: 12px;
  34. height: 581px;
  35. width: 146px;
  36.     float: left;
  37.     overflow: hidden;
  38.  
  39. }
  40.  
  41. #TRESC {
  42. background:  url(grafika/page.PNG) no-repeat;
  43.     height: 581px;
  44. width: 724px;
  45.     float: left;
  46.     overflow: hidden;
  47.     margin-left: 12px;
  48.     margin-top:15px;
  49. }
  50.  div.button
  51.  {
  52.  margin-left: 4px;
  53.  background:  url(grafika/button.png) no-repeat;
  54.  width: 137;
  55.  height: 35;
  56.  margin-top: 15px;
  57.  }
[HTML] pobierz, plaintext
JoShiMa
27.11.2008, 10:56:58
1. Nie tak:
[HTML] pobierz, plaintext 
  1. <div id="NAGLOWEK"><img src="grafika/top_.PNG" alt="twoj-slajd.pl" ></div>
[HTML] pobierz, plaintext

tylko tak:
[HTML] pobierz, plaintext 
  1. <img src="grafika/top_.PNG" alt="twoj-slajd.pl" >
[HTML] pobierz, plaintext

Nie ma żadnego powodu dla którego trzeba by wstawiać img do div jeśli to ma być jedyny element.

2. Spróbuj dla tego img ustawić border: none;
qba10
27.11.2008, 22:05:15
Że nie pomogło, to na dodatek w IE po usunięciu tego div'a jest tak samo jak w FF ;/

Czym taki odstęp może być spowodowany?
Pilsener
28.11.2008, 08:25:08
Z img-ami jest zawsze problem, dlatego stałe elementy lay'a wrzucamy jako background w css, imgi służą do wstawiania unikalnych obrazków do treści, a nie budowania lay'a. Spróbuj nadać imgom: position:relative lub float lub display:block - na forum już gdzieś był taki temat.
pikasso
28.11.2008, 10:39:07 
[HTML] pobierz, plaintext 
  1. <div id="top">
  2.           <div id="NAGLOWEK"><img src="grafika/top_.PNG" alt="twoj-slajd.pl" ></div>
  3.           <div id="border">
  4.  
  5.                 <div id="MENU">
  6.                      <div class="button">Menu</div>           //   nie przejdzie walidacji poczytaj o menu na listach
  7.                      <div class="button">Menu</div>           //   
  8.              </div>
  9.              <div id="TRESC">Treść strony</div>
  10.  
  11.           </div>
  12. </div>
[HTML] pobierz, plaintext 


[CSS] pobierz, plaintext 
  1. body {
  2.     background-color: #fff;
  3.     color: #000;
  4.     margin: 0px;   //Po co to jest dane?? nie potrzebne to jest.
  5.  
  6. }
  7.  
  8. #top {
  9.     width: 894px;
  10. height: auto;
  11.     background-color: #fafafa;
  12. margin: auto;
  13. }
  14.  
  15. #NAGLOWEK {
  16.     width: 894px;
  17.     height:  35px;  podaj wartość wysokości ale taką jaką ma obrazek
  18. position: absolute;
  19. }
  20.  
  21.  
  22. #border {
  23.  
  24. background-image:  url(grafika/page_left.PNG) ;
  25. width: // szerokość
  26. height: // wysokość
  27. margin-left: 0px;
  28. margin-top: //podajesz wysokość od samej góry czyli od top (jest to wysokość poprzedniego obrazka)
  29. background-repeat:   no-repeat;
  30. overflow: hidden;
  31. position: absolute;
  32. }
  33. #MENU {
  34. background:  url(grafika/menu.PNG) no-repeat;
  35. margin-left: 12px;  // odstęp od lewej strony      
  36. margin-top:15px;  // tu masz wysokość co cię denerwuje 
  37. width: 146px;
  38. height: 581px;
  39. float: left;
  40.     overflow: hidden;
  41.     position: absolute;
  42. }
  43.  
  44. #TRESC {
  45. background:  url(grafika/page.PNG) no-repeat;
  46.     height: 581px;
  47. width: 724px;
  48.     float: left;
  49.     overflow: hidden;
  50.     margin-left: 146px;
  51.     margin-top:15px;
  52. position absolute;
  53. }
  54.  div.button                   // zrób to na listach!!
  55.  {
  56.  margin-left: 4px;
  57.  background:  url(grafika/button.png) no-repeat;
  58.  width: 137;
  59.  height: 35;
  60.  margin-top: 15px;
  61.  }
[CSS] pobierz, plaintext


powinno działać winksmiley.jpg
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.