style image - no border | MODX Community Forums

135 Posts

deminne Reply #1, 13 years, 10 months ago

hallo,

voorbeeld: http://www.maartenbosmans.be/theater.html

volgend probleem:

rechts bovenaan zie je een huisje en een envelopje (dit zijn images) die een link bevatten.
Deze hebben geen border-bottom: 1 px dotted
de images op de pagina zelf hebben wel een border-bottom: 1 px dotted

de gewone links heb ik een border-bottom gegeven van 1 px, maar ik krijg niet geregeld dat de images in de content zelf, geen border-bottom hebben.

kan iemand mij hiermee helpen (heb al verschillende zaken geprobeerd, maar niets lukt)

dank u

697 Posts

Jul Reply #2, 13 years, 10 months ago

In short:

<head>
<style type="text/css">
 .nb {border:none}
</style>
</head>
<body>
<img class="nb" src="[*some_image*]"  alt="" />
</body>

For the style class, this would also be possible:

.nb{border-bottom:none}

or

.nb{border-style:none}

You can also restrict the "nb" ("nb" stands for "no-border") style to pictures, like this:

img.nb {border:none}

If you don’t want to use CSS class, you can use this:

<img style="border:none" src="[*some_image*]"  alt="" />

But for easier maintenance it’s recommended using CSS classes.
You can of course store your styles in an external stylesheet and link it.

Hope this helps.

Julien

135 Posts

deminne Reply #3, 13 years, 10 months ago

en werkt dit ook voor image-links?

(and does this also works for image-links?)

697 Posts

Jul Reply #4, 13 years, 10 months ago

Yes. In common practice, image-links are nothing more that <img> markers put inside a link <a>. You’ll probably have to style both the link and the image.

/* EXAMPLES */
img {border:none}   /* all images do not have any border */
a img {border:none} /* images located in an anchor don't have any border */

/* This would remove the default underlined style of anchors with class="nounderline"
For the fun, we replace it here by a dotted bottom border. */
a.nounderline {text-decoration:none;border-bottom:dotted;} 

/* This would add a pink 2px dashed border to all images 
within links having the class "nounderline" */
a.nounderline img {border:2px dashed #ff00ff;}

I recommend you to test your result with several browsers (MSIE, Firefox, Safari, Opera,...).

To be honest, putting an image within a link is not valid HTML or XHTML code, because images are by default "block" elements whilst links are "inline" elements. And putting blocks within inline elements is not W3C valid.
However, such imbrication is widely spread.

Using Javascript like <img onclick="document.location=’...’" /> is not good practice for this task, as depending on Javascript.

A W3C valid solution is using a link with your picture as background-image.

If you need an example, you can go to my website (www.altipoint.ch) and look at the first stylesheet. Scroll the file until you see the class "a.pdf". I use it to display a "PDF" icon on the right of links towards PDF files.

Hope this helps.

135 Posts

deminne Reply #5, 13 years, 10 months ago

het werkt niet

als ik de style van die desbetreffende image-link op 10 px dotted zette, dan werkt het wel, maar als ik die op 0 zet, dan blijft deze op 1 px staan. volgens mij van een bovenliggende css-code die ’hoger’ is:

#content a:link, #content a:visited, #content a:active{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
border-bottom: 1px dotted;
text-decoration: none;
color: #4E4F47;
}

(in #content staan deze image-links)

697 Posts

Jul Reply #6, 13 years, 10 months ago

het werkt niet

What does not work? Could you please be more explicit?
After some automatic translation, I don’t understand what you exactly want to do.

Do you already use Firefox together with the Firebug plugin?
Its "Inspect element" feature helps a lot when debugging styling issues.

135 Posts

deminne Reply #7, 13 years, 10 months ago

i have a div (#content)

in the css i have a style for links:

#content a:link, #content a:visited, #content a:active{
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   border-bottom: 1px dotted;
   text-decoration: none;
   color: #4E4F47;
}

in general i have also:

img {
   border-style: none;
}

in that div i also have image-links

those image-links get also a border-bottom 1 px dotted

but for those image-links i don’t want to have a border-bottom and the style for ’img’ doesn’t arrange this

i have done several things: for example:

#content a img {
   border-style: none;
}

or

#content img.nb {
   border: none
}

...
but it doesn’t work

when i put for the examples a border style of 10px for example, than it makes a border style of 10px

so it seems that when the border thickness is higher than 1px, it does work, otherwise it does not work

i don’t have tried the firebug plugin

i hope you understand my question?

otherwhise i remove the links and than it is also solved

thanks

697 Posts

Jul Reply #8, 13 years, 10 months ago

Hi,

From the code you posted above, it is normal that your image-links get a dotted border.
I assume you have this structure:

<div id="content">
(...)
<a href="..."><img src="..." /></a>
<a href="..."><img src="..." /></a>
(...)
</div>

So, the dotted border that you see is not attributed to the <img> tag, but to the link <a> tag. This explains why you see the dotted border, even if you put a style="border:none" in the <img /> tab.

To correct this, you must add a class to your links:

<div id="content"><a class="noborder"><img src="..."></a></div>

With

#content a.noborder, #content a.noborder img {border-style:none;text-decoration:none;}

If you want all your image-links being without border, also outside of your <div id="content">, you can omit the "#content" selector in code above.

An efficient technique when you have styling problem like the one you encountered is to give a margin around your inner block element:

<a href="..."><img src="..." style="margin:20px"></a>

Then, you can more easily find the problem and if necessary inspect elements with Firebug. In your case, you would see that the dotted border is attached to the "<a>" element and not to the "<img>" one.

The "<a><img></a>" sequence is not valid XHTML/HTML and you should rather use such code to build W3C valid image-links:

a.imagelink {display:block;background-repeat:none;text-decoration:none;background-position:top left}

<a href="..." href="target-document.html" target="_self" class="imagelink"
style="background-image:url(linked_picture.jpg)" > </a>