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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="thumbnail_kocka">
	<div class="thumbnail_keret">
    	<a href="#"><img src="1.jpg" alt=""></a>
    </div>
</div>
</body>
</html>
A CSS:

@charset "iso-8859-2";
/* CSS Document */

body{
margin: 0 auto 0 auto;
}


.thumbnail_kocka{
margin:auto;
margin-top:30px;
width:210px;
height:210px;
border:1px solid #CCCCCC;
}

.thumbnail_keret{
width:120px;
height:160px;
margin:25px 45px 25px 45px;
}


.thumbnail_keret IMG{
border:none;
}

.thumbnail_keret a:hover IMG{
border:3px solid #AFCC2D;
}
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:

.thumbnail_keret a img {
  border: none;
  /* Hogy ne mozduljon el, ezért itt hozzá kell adni a jövőbeli keret vastagságát. */
  padding: 13px;
}

.thumbnail_keret a:hover img {
  border: 3px solid #AFCC2D;
  /* Levonva a keret vastagsága */
  padding: 10px;
}
2

thx

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