No replies
m3rcury
Offline
newbie
Last seen: 14 years 18 weeks ago
Timezone: GMT-7
Joined: 2006-10-19
Posts: 8
Points: 0

Hi, I have 2 questions regarding image thumbnail.

1) How do I add caption below each of the thumbnail?

2) How do I change the border color when mouse over on the thumbnail?

I included the screenshot of the page that I created since I don't have any web domain for now.

Thanks

I also included my html codes and CSS

HTML

Packaging projects

  • PACKAGING
  • IDENTITY
  • LAYOUT
  • OTHERS
  • RESUME
  • HOME








© 2006 All rights reserved

CSS

/*Tags redefined */
body {
background-color: #faeed6;
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;

}

p {
padding:0px;
margin:0px;
}

a:link {
text-decoration:none;

}

a:visited {
text-decoration:none;

}

a:hover {
text-decoration:underline;
}

a:active {
text-decoration:none;

}

/*Main body wrapper layout*/

#mainbody{
width: 800px;
margin-top: 50px;
margin-left: 120px;
border: 2px solid #00cc99;
background-color: #FFFFFF;
position: relative;
margin-right: 120px;
overflow: hidden;

}

#resumemainbody{
width: 800px;
margin-top: 50px;
margin-left: 120px;
border: 2px solid #00cc99;
background-color: #FFFFFF;
margin-right: 120px;
}

/*Body copy container */

#bodycopy{
margin-top:90px;
margin-left:150px;
padding-top:10px;
padding-left:30px;
padding-right:30px;
padding-bottom:10px;

}

/*footnote*/

#footnote {
font-size:9px;
margin-left: 120px;
padding: 5px;
width: 800px;
text-align:center;

}

a.footer{
color:#666666;
}

a.footer:link{
color:#666666;
}

a.footer:visited {
color:#666666;
}

a.footer:hover {
color:#666666;
}

a.footer:active {
color:#666666;
}

/*Link indicators "you are here" */

body#sidenav a#sidemenuresume,
body#sidenav a#sidemenupackaging,
body#sidenav a#sidemenuidentity,
body#sidenav a#sidemenulayout,
body#sidenav a#sidemenucontact

{
color:#ffffff;
background-color:#00cc99;
}

/*Vertical menu on subpages*/

#sidemenu {
width: 150px;
margin-top:100px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #b2a1cb;
float:left;

}

ul.verticalmenu{
margin:0px;
padding:0px;
position:relative;
}

ul.verticalmenu li {
list-style-type: none;
display: block;
text-align: right;
padding-right:20px;

}

ul.verticalmenu li a{
font-size:10px;
font-weight:bold;
color: #b2a1cb;
padding: 5px;
line-height:40px;
}

ul.verticalmenu li a:link{
color: #b2a1cb;
}

ul.verticalmenu li a:visited{
color: #b2a1cb;
}

ul.verticalmenu li a:hover{
color:#ffffff;
text-decoration:none;
background-color:#00cc99;
}

ul.verticalmenu li a:active{
color: #b2a1cb;

}

/*Resume page styles */

p.heading {
color:#b2a1cb;
font-weight:bold;
padding-top:10px;
font-size:11px;
letter-spacing:1px;
}

p.subheading {
color:#00cc99;
font-weight:bold;
padding-top:10px;
font-size:11px;
letter-spacing:1px;
}

p.copy {
padding-bottom:10px;

}

ul.qualifications {
margin:0px;
padding:0px;
}

ul.qualifications li {
list-style-type:none;
}

/*Portfolio thumbnail styles*/

img.thumbnail {
border-width:1px;
border-style:solid;
border-color:#cccccc;
padding:4px;
margin-bottom:10px;

}

ul.thumbnail {
margin:0px;
padding-bottom:20px;
position:relative;

}

ul.thumbnail li {
list-style-type:none;
display:inline;
padding-left:20px;
padding-bottom:20px;

}

ul.thumbnail li a:link {
border-color:#cccccc;

}

ul.thumbnail li a:visited {
border-color:#cccccc
}

ul.thumbnail li a:hover {
border-color:#00CF9C;
}

ul.thumbnail li a:active {
border-color:#cccccc
}

AttachmentSize
problems2.jpg47.38 KB