Problem with outlines vs. margin CSS tags...

Hello everyone!

I'm trying to create an online portfolio and want some outlines on the picture thumbnails on mouseover, which I got working nicely...

But here's the problem. When I'm try to line up the thumbnails using:

img {
margin-bottom:4px;
}

the outline effect...

.pic a:link { text-decoration: none; color: #000000;}
.pic a:visited { text-decoration: none; color: #000000;}
.pic a:active { text-decoration: none; color: #000000;}
.pic a:hover { outline-style:solid; outline-color:#CC0000; outline-width:3px;}

is affected and is no longer fitted to the picture's size. Instead it's fitted around both the picture and the margin space...

Is there a way around this?
I already uploaded my site, so you can see the problem "in action"
www.tomii.se

 

img {
margin-bottom:4px;
}

.pic a:link { text-decoration: none; color: #000000;}
.pic a:visited { text-decoration: none; color: #000000;}
.pic a:active { text-decoration: none; color: #000000;}
.pic a:hover { text-decoration: none; border: 3px solid #000000;}

You can try that

 

Thanks, but it didn't work. Made it worse
If everything else fails I could probably solve it using small transparent images to make it look like I want, but I'd rather use stylesheets of course...

 

You have to understand how CSS elements are nested. The border goes around the entire object including its margin.

So, what you need to do is a bit more complicated.

There are likely several ways to skin this cat, but the first thing that comes to mind for me is to put each image inside a div and give your div the margin-bottom: 4px (and to get them to layout, you'll have to float them a right and then clear the floats before the next "row" -- hmm. or maybe you could put each row of images in a div and margin-bottom that whole div/"row"). Then give each image a 3px margin. Then give a:hover the 3px border, but take away the 3px margin to "swap out" the space.

If that doens't work for you, reply back and I'll set up a test on it and nail it down for you.

 

Thank you Sean! I'll try it tomorrow and post my result here!

 

You'll get it. I try to encourage folks to learn by doing.

Just keep in mind that nesting in CSS is like this:

1. border
2. margin
3. padding

So, you need padding for your "rows", and you need the a:hover border for the hover event -- but that means you need to also subtract from the margins when you swap that out.

That's the theory aspect. Practice is alway way more "fun", LOL.

I just want to jam out some more posts tonight -- and I'd like you to try to solve this yourself with a bit more info in your understanding of it; else, I'd pop this up in a test environment and dial it in for you. Meet me half way, young Jedi, LOL!

 

A div? That's a bit overkill. Why not use an unordered list?

 

Good idea; I was just thinking on my feet. ( and a little TOO inside the "box", as it were )

Use one UL per row: is that what you're thinking?

 

Not sure how it's going to be set out, but if it were me, I'd just use one UL and float each LI left

 

Ok, @ tomil , you've got some good advice here. Show us what you can do with it and get back to us.

 

Hello again. I solved the outline problem! The outline now runs around the pictures as I wanted. It was quite simple, I removed the...

img {
margin-bottom:4px;
}

part, and added...


.float {
float:left;
margin-right:4px;
}

I added the .float class to every thumbnail link, and now they line up nicely and I've got that outline effect working.

But! Now there's a new problem! Oh no!
In an attempt to clean up the code, I removed a lot of the cells that made up the upper part of the site (logo and thumbnails), and made it two cells instead of like 4 or 5... this is when the new problem came up.

Now the text "pics-in-progress" text plus the thumbnails under it seem to be affected by the .float class or something and it just cannot be separated from the upper part.
I've tried with <p> <div> <br>, but nothing can move it from it's current position.

Oh, and one more thing, two of the thumbnails no longer get the outline effect on mouseover. It's the two last ones, I marked them with red circles.

Any ideas??

 

Good work.

For the "Pics in progress" use <div class="clear:both">

Don't have time to look at the images that aren't getting :hover border, though.

 

I fixed the not-getting-outline problem. I had put </dl> instead of </dt> on the third pic from the right (the girl with white hair and blue eyes).

Will try your code now Sean, thanks!

 

I made a new CSS class containing that "clear:both;" and applied it to the DIV tag, and it WORKED! Thank you Sean! I had never even heard of that class before, but now I know what it is for
So there, all my problems are solved and my website is now 100% complete. I'm glad I joined this forum.
Thank you all for your help, if I ever run into more problems I know where to go

Thank you and good night!

 

First of all, you should have just added the float:left property to the "img" element, then you don't have to add the class to every single picture. And also, just remember to use the clear class at the end whenever you're floating and you'll be fine.