Image menu with border - css issue Image menu with border - css issue
 

News:

CPG Release 1.6.26
Correct PHP8.2 issues with user and language managers.
Additional fixes for PHP 8.2
Correct PHP8 error with SMF 2.0 bridge.
Correct IPTC supplimental category parsing.
Download and info HERE

Main Menu

Image menu with border - css issue

Started by Maghanni, September 01, 2013, 03:48:38 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Maghanni

Hello,

I custumized my own theme, everything is working fine but I still have a problem with the menu. I used linked pictures to do it but I have borders around the menu image that I don't want. It can be change with the css of my theme but I can't find the solution... can someone help me with this issue, please?

I want the gallery to look like my website, I'm almost done:

http://carvertwins.com/
http://carvertwinsgallery.com/index.php

Attached: css file of my theme

phill104

Can you attach an image detailing exactly which borders you are struggling with?
It is a mistake to think you can solve any major problems just with potatoes.

Maghanni

Hello :)

Thanks for the reply.

Here are captures of my problem (you could'nt see it on the gallery since I disably the links of my pictures in the nav menu).

As you can see, my menu images (each link = 1 image) have a border like the thumbnails of my gallery, I don't want borders in the menu bar and I don't know where I can change that in the css file.

Thanks in advance for your help.

Αndré

Quote from: Maghanni on September 01, 2013, 07:02:07 PM
you could'nt see it on the gallery since I disably the links of my pictures in the nav menu
Please re-enable them, so we can see the issue live on your gallery.

Maghanni

I reuploaded the version with the menu border like the thumbnails so you can see the problem :)

Thanks in advance.

Αndré

The responsible parts in the style.css file are
Code (line 701) Select
a:link img {
    border-color: #E5E5E5;
    border-style: solid;
    border-width: 0;
    margin: 2px;
    padding: 10px;
}

and
a:hover img {
    border-color: #E5E5E5;
    border-style: solid;
    border-width: 0;
    margin: 2px;
    padding: 10px;
}


If you remove/overwrite the padding, it looks closer to your main page. There's still a border I wasn't able to remove with Firebug.

Maghanni

Hello André :)

That was not the only parts responsible. But thanks to your reply, it helped me to see the other parts.

I had to check these parts:

- a: link img {
- a: hover img {
- a: img {


when I set all the padding to "0px" the borders was gone. Now it looks like my main page :)

Thanks so much for your help because I couldn't figure it out by myself!

This topic is solved.