CSS - Thumbnails Under Picture

I am an art student, and I'm trying to construct my own portfolio site. I am, however, new to CSS, so I dont really know what I'm doing. I'm using Dreamweaver CS3.

I'm using a fixed 2 column template, with header and footer, and the left column as the side bar. Within the right column, I'm trying to make a scrollbar hovering near the top of the div, with clickable thumbnails of my work. Once the thumbnails are clicked on, a larger version of the image takes up the rest of the column.

Does anyone have any idea how to accomplsh this? Even my web design teacher's stumped with this one. I thought about using frames, but thats html...

I have a picture of a city.. then i have transparent pictures of stores and stuff i want to layer ontop of the city.. but i was wondering if someone could go about showing me how to layer them? i found help on layering pictures, but they wont show through to the city.. =/

I am trying to add a border to my pictures. I read a tutorial about it but however in firefox it escapes from the box. In IE it looks fine. Has anyone had this problem before? Any tips on fixing it?

Thank you

here is the link

http://www.conceptofgravity.com/test/pictures_test.html

My site is a .org that I recently created and I am having picture problems. For some reason that i cant under stand the picture wont link up to my menue as a sub menue and adjust the spacing and type like it does with the regular menu. Ideally I would like to modify it so it is random pick from a file on the server but IDk how and advice on how to make it not cut off my text or have my text over lap it. The site is my name IGADA dot org any suggestions. Really what I need to now is if i should be trying to make this happen in the CSS or in the HTML. I can post the relavent CSS if some one wants me too.

Hey all,

I've got a gallery of sorts, where teams register and they show up with a thumbnail and team info.

You can see what I'm talking about here.

In FF, the first team on each page's box drops down to the end of the floated form on the right. I'm sure it's something to do with the floated element, but I can't seem to fix it. It displays the way it's supposed to look in IE7 (note I didn't say 'properly', as i'm sure that's not true).

Here's the CSS:
Code:

.teamBox {
width:400px;
margin:5px auto;
min-height:200px;
background:white url(images/teamBox_tile.gif) repeat-y center;
}

* html .teamBox {
height:200px;
}

.teamBox h3 {
margin:0;
width:390px;
height:27px;
padding:12px 0 0 10px;
background:white url(images/teamBox_top.gif) no-repeat top center;
border-bottom:1px solid white;
color:white;
}

.teamBox p {
color:#333;
margin:5px 15px;
}

.teamBox p a {
color:white;
}

.teamBox .teamBoxBottom {
width:400px;
height:10px;
background:white url(images/teamBox_bottom.gif) no-repeat bottom center;
}

.teamThumb {
float:right;
width:150px;
height:150px;
margin:5px 10px;
overflow:hidden;
}

i have a screenshots page on a website for a peice of software i've written. it has a number of thumbnails on it, when you click a thimnail, the full size image pops up in a new window.

<a href="javascript: void window.open('fullSize.jpg', 'pic1', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=660,height=500');"><img src="thumbnail.jpg" width="120" height="90" border="0"></a>

i want the thumbnail to have an orange (#EE9515) border, bossibly 4px thick, when the user hovers over it. how do i do this?

Dear All,
I have the following issue with the CSS solution (2).
Everytime I move the cursour over the pic it flashes


1.) If I display a picture/link like this .. it doesn't flash:

<a href="www.aaa.com"><img src="pic.gif" alt="" border="0" style="float: left; width: 250px; height: 163px; margin: 0 1.5% 0;" /></a>

works fine!

2.)Now doing it via CSS:

<a href="www.aaa.com" id="mainpic"><span>Test</span></a>

#mainpic {
float: left;
width: 250px;
height: 163px;
margin: 0 1.5% 0;
text-decoration:none;
background:url('pic.gif') no-repeat;
border:medium none;
display:block;
}
#mainpic span {
visibility:hidden;
}


Would be very nice if somebody could tell me what I'm doing wrong.
Thanks a lot in advance
Jack

On my site which im using to practice css, the picture isnt being displayed on the main page. Why is this?

http://www.trowbridge-wiltshire.co.uk/newtrowbridge

Cheers

Hello, please take a look at http://www.inbalancepilates.ca/india.html

I've been trying to figure out why there is a purple border around the images. There's nothing in the CSS that's doing this, and none of the cells have borders.

Any help would be great, thanks!

I have a 3 column layout: 1st -> 350px, 2nd -> 500px, 3rd -> remainder of containing div.

In the 2nd div, I have 15 pictures arranged to form the letter R, each picture is 100x100 px. I am not using absolute positioning.

I want the first and second column to have a background color of black that is 100% the height of the viewport. The middle column should have a white background and be 100% height. The problem is, the margins I am using for the pictures is throwing things off and I'm not sure how to fix it short of not arranging the pictures the way I want. Is there another way to arrange them to achieve the R shape?

Code:

<div id='container'>
     <div id='first'></div>
     <div id='second'>All of the images are loaded here.</div>
     <div id='third'></div>
</div>

Code:

#img1, #img2, #img3, #img4, #img5, #img6, #img7, #img8, #img9, #img10, #img11, #img12, #img13, #img14, #img15, #img16, #img17, #img18, #img19, #img20 {
	display: block;
	border: 3px solid #B8860B;
	width: 100px;
	height: 100px;
}
#img1, #img2, #img3, #img4, #img5 {
	margin-left: 10px;
}
#img1 {
	margin-top: 60px;
}
#img2 {
	margin-top: 10px;
}
#img3 {
	margin-top: 10px;
}
#img4 {
	margin-top: 10px;
}
#img5 {
	margin-top: 10px;
}
#img6 {
	margin-top: -590px;
	margin-left: 125px;
}
#img7 {
	margin-top: -136px;
	margin-left: 240px;
}
#img8 {
	margin-top: -76px;
	margin-left: 355px;
}
#img9 {
	margin-top: 10px;
	margin-left: 380px;
}
#img10 {
	margin-top: 10px;
	margin-left: 355px;
}
#img11 {
	margin-top: -87px;
	margin-left: 240px;
}
#img12 {
	margin-top: -125px;
	margin-left: 125px;
}
#img13 {
	margin-top: 30px;
	margin-left: 305px;
}
#img14 {
	margin-top: 10px;
	margin-left: 365px;
}

How to add a background picture to a table？
Anyone helps? Thanks in advance.

the text on the left of the picture goes "in" a little bit to the image as can be seen he in firefox.
http://www.925-sterling-silver-jewe...ls.php?id=sl211

in IE its ok but its in middle! and yeah i know my css is lacking but i plan to do it all in css once i finish my implementation (php)


PHP Code:
<div style="float:left; position: relative; width: 255px; height: 215px; z-index: 1; left: 5px; top: 5px" id="layer1">
    <img border="0" width="255" height="215" src="images/<?php echo $product; ?>.jpg" > </div>
       <h2><span style="text-indent:0.5in">Detailed Information</span></h2>
       <b>Weight:</b> <?php echo $row['weight']; ?>
       <br/><?
       if($row['category'] == Anklets) { ?>
             <b>Diameter:</b><?php echo $row['diameter'];
       } else if($row['category'] == Bracelets) { ?>
             <b>Diameter:</b><?php echo $row['diameter']; ?>
             <br/>
             <b>Width:</b><?php echo $row['width']; 
       } else if($row['category'] == Necklaces) { ?>
             <b>Width:</b><?php echo $row['width']; ?>
             <br/>
             <b>Length:</b><?php echo $row['length'];
       } else if($row['category'] == Sets) { ?>
              <b><span style="color:red">not sure</span> <?
       } 

When I setup a td and table to include a photo and I want the photo to "hug" all four sides of the td I just specify cellpadding and cellspacing = 0 within the table. then make sure the </td></tr></table> comes right after the img tag with no spaces or breaks. However I cannot seem to duplicate this in css. No matter what I do there's always a 1-2 pixel space between the photo and the border of the td. any thoughts?? I've looked up and tried to use every paramater I can find.

I have the following page.

I need the image and all the ajax to be centered on the page, no matter how the user resizes it. I've tried several different methods, but it always seems to screw up the positioning of the ajax buttons.

okey i m just putting hyperlink on picture and i get blue boarded around it? how can i remove it?