ugrás a tartalomhoz

CSS segitség

designer90 · 2008. Aug. 23. (Szo), 11.22
Jó napot kívánok.
Nem régiben kezdtem foglalkozni a HTML-el és a CSS-el.Egy dizajn tervet keszitek egy fotó portálhoz.
Tudna nekem valaki segiteni?
A kép az egy hivatkozás lenne,amire ralepkedve egy keret jelenne meg a kép körül.
Most ezt igy oldottam meg:

A HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.   
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />  
  6. <title>Untitled Document</title>  
  7. <link href="css.css" rel="stylesheet" type="text/css" />  
  8. </head>  
  9.   
  10. <body>  
  11. <div class="thumbnail_kocka">  
  12.     <div class="thumbnail_keret">  
  13.         <a href="#"><img src="1.jpg" alt=""></a>  
  14.     </div>  
  15. </div>  
  16. </body>  
  17. </html>  
A CSS:
  1. @charset "iso-8859-2";  
  2. /* CSS Document */  
  3.   
  4. body{  
  5. margin: 0 auto 0 auto;  
  6. }  
  7.   
  8.   
  9. .thumbnail_kocka{  
  10. margin:auto;  
  11. margin-top:30px;  
  12. width:210px;  
  13. height:210px;  
  14. border:1px solid #CCCCCC;  
  15. }  
  16.   
  17. .thumbnail_keret{  
  18. width:120px;  
  19. height:160px;  
  20. margin:25px 45px 25px 45px;  
  21. }  
  22.   
  23.   
  24. .thumbnail_keret IMG{  
  25. border:none;  
  26. }  
  27.   
  28. .thumbnail_keret a:hover IMG{  
  29. border:3px solid #AFCC2D;  
  30. }  
Ha ra lepek a kepre,akkor megjelenik a keret és a kép odébb megy egy kicsit.Hogy lehet ezt kiküszöbölni.
Es azt,hogy lehetne megcsinalni,hogy a keret kb 10px-el tavolabb jelenjen meg a kép széleitől?
‹ Letölthető weblap sablonokat hol találok? CSS: a tartalomhoz dinamikusan igazodó magasságú menü ›
 ■
1

margin, border, padding...

fchris82 · 2008. Aug. 23. (Szo), 12.25
Ezek kellenek neked. Érdemes ezt olvasgatni: http://www.w3.org/TR/CSS21/box.html , http://htmldog.com/guides/cssbeginner/margins/ .

A megoldás pedig:
  1. .thumbnail_keret a img {  
  2.   border: none;  
  3.   /* Hogy ne mozduljon el, ezért itt hozzá kell adni a jövőbeli keret vastagságát. */  
  4.   padding: 13px;  
  5. }  
  6.   
  7. .thumbnail_keret a:hover img {  
  8.   border: 3px solid #AFCC2D;  
  9.   /* Levonva a keret vastagsága */  
  10.   padding: 10px;  
  11. }  
2

thx

designer90 · 2008. Aug. 23. (Szo), 21.26
Kösz a segitseget