Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Odstępy między IMG
Forum PHP.pl > Forum > Przedszkole
liMp
29.09.2012, 13:55:44
Witam,

Mam problem z odstępami między obrazkami. Przewaliłem do CSSa już wszystkie opcje display, overflow, float, position i nic mi nie pomaga. Mam problem z kilkoma obrazkami obok siebie na jednym divie. Wygląda to tak:



Zaś kod wygląda w ten sposób:

html

[HTML] pobierz, plaintext 
  1.  
  2. <body>
  3.  
  4. <div id="container">
  5.  
  6. <div id="top">
  7. <img src="images/top_a.jpg" alt="" width="1050" height="67" style="display:block;"/>
  8. <img src="images/top_b.jpg" alt="" width="684" height="97"/><a href="http://www.heelprotectors.eu"><img src="images/top_c.jpg" alt="" width="366" height="97" style="border:0px;"/></a>
  9. </div>
  10.  
  11. <div id="menu">
  12. <img src="images/menu_home_out.jpg" alt="" width="104" height="50" style="border:0px;"/>
  13. <img src="images/menu_offer_out.jpg" alt="" width="76" height="50" style="border:0px;"/>
  14. <img src="images/menu_aboutus_out.jpg" alt="" width="99" height="50" style="border:0px;"/>
  15. <img src="images/menu_cooperation_out.jpg" alt="" width="128" height="50" style="border:0px;"/>
  16. <img src="images/menu_contact_out.jpg" alt="" width="103" height="50" style="border:0px;"/>
  17. <img src="images/menu_rest.jpg" alt="" width="540" height="50"/>
  18. </div>
  19.  
  20. </div>
  21. </body>
[HTML] pobierz, plaintext



i css

[HTML] pobierz, plaintext 
  1. a.klasa1{
  2.     color:#000;
  3.     text-decoration:none;
  4. }
  5. a:hover.klasa1{
  6. 	color:#06C;
  7.     text-decoration:none;
  8. 	font-weight:bold;
  9. }
  10.  
  11. a.klasa2{
  12.     color:#fff;
  13.     text-decoration:none;
  14. }
  15. a:hover.klasa2{
  16. 	color:#06C;
  17.     text-decoration:none;
  18. 	font-weight:bold;
  19. }
  20.  
  21. img.klasa2 {
  22. 	border: 5px solid #f6f3ee;
  23. }
  24.  
  25. body{
  26. 	text-align:center;
  27. 	background-color:#f1e9dc;
  28. }
  29.  
  30. #container{
  31. 	margin-left:auto;
  32. 	margin-right:auto;
  33.  	overflow:hidden;
  34.     width:1050px;
  35. 	position:relative;
  36. 	padding:0px;
  37.  
  38.  
  39. }
  40.  
  41. #top {
  42.      overflow: hidden;
  43. 	 outline: none;
  44. }
  45.  
  46. #menu {
  47. 	display: block; 
  48. 	position:relative; 
  49. 	overflow: hidden;
  50. 	outline: none;
  51. }
[HTML] pobierz, plaintext


Bardzo proszę o pomoc aby jak zrobić żeby menu było w jednej linii dokładnie.
CuteOne
29.09.2012, 14:02:47
<div id="menu">
<img src="images/menu_home_out.jpg" alt="" width="104" height="50" style="border:0px;"/>
<img src="images/menu_offer_out.jpg" alt="" width="76" height="50" style="border:0px;"/>
<img src="images/menu_aboutus_out.jpg" alt="" width="99" height="50" style="border:0px;"/>
<img src="images/menu_cooperation_out.jpg" alt="" width="128" height="50" style="border:0px;"/>
<img src="images/menu_contact_out.jpg" alt="" width="103" height="50" style="border:0px;"/>
<img src="images/menu_rest.jpg" alt="" width="540" height="50"/>
</div>

zamień na

<div id="menu">
<img src="images/menu_home_out.jpg" alt="" width="104" height="50" style="border:0px;"/><img src="images/menu_offer_out.jpg" alt="" width="76" height="50" style="border:0px;"/><img src="images/menu_aboutus_out.jpg" alt="" width="99" height="50" style="border:0px;"/><img src="images/menu_cooperation_out.jpg" alt="" width="128" height="50" style="border:0px;"/><img src="images/menu_contact_out.jpg" alt="" width="103" height="50" style="border:0px;"/><img src="images/menu_rest.jpg" alt="" width="540" height="50"/>
</div>

i napisz czy pomogło
pifarek
29.09.2012, 14:28:58
daj dla img display: block i float wink.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.