Hi Folks, I am building my daughter's website. She's in school for advertizing and has several collections of pictures that I need to display. I built the css (below) and have a gallery box in the middle that scrolls (using a scroll bar which I'd love to not have to use, but not sure I can have it auto scroll with curser). But now how do I get the buttons, that I have put on the left of the page to link to another set of pictures in this box? I've seen websites do this.
dt.btn {
margin-bottom:5px; text-align:center
}
dt.btn a {
display:block;
text-decoration:none;
color:#663300;
font-weight:bold
}
dt.btn a {
background:#ffff99;
border:5px outset #ffff99;
}
dt.btn a:hover {
background:red;
border:5px outset red
}
dt.btn a:active {
background:#ffff99;
border:5px inset #ffff99
}
div.img
{
margin:2px;
border:1px solid brown;
height:250px;
width:550px;
margin-left:200px;
float:center;
text-align:center;
overflow:scroll
}
div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}
</style>
</head>
<body>
<div>
<dl id="menu" style=":position:absolute;
top:250px;
left:25px;
width:150px">
<dt class="btn"><a href="fine.html">Fine Arts</a></dt>
<dt class="btn"><a href="photo.html">Photo</a></dt>
<dt class="btn"><a href="mixed.html">Mixed</a></dt>
<dt class="btn"><a href="graphics.html">Graphics</a></dt>
</dl></div>
HERE'S SOME OF THE CODE FOR THE PICTURES
<div style="text-align:center" class="img">
<a target="_blank" href="1 ARR.jpg">
<img src="1 ARR.jpg" alt="Charcoal Nude" width="75" height="85"
style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"/></a>
3 Votes
Answers