I need some images with borders and others without.

  • My css says this:

    /* Post Content Images*/

.post-content img {
	padding: 5px;
	background: #1A272E;
}

    How do I turn off borders when I need to?

    Like this is the call for centered images (but it comes up with borders). How can I do a centered image without borders?

    img.centered{
	display: block;
	margin-left: auto;
	margin-right: auto;
}
Viewing 3 replies - 1 through 3 (of 3 total)

  • You’d need to add another class for images to style.css such as:

    img.noborder {border:none;}

    You’d then need to add that class manually to the image markup when you did not want borders around the image.

    Thread Starter majordude

    (@majordude)

    How do I make two sets of commands: one with borders, one without?

    alignleft, aligncenter, alignright (with and without borders)?

    Here is the part of the CSS that defines ALL image alignments:

    .aligncenter {
	margin: 5px auto 5px auto;
	display: block;
}

.alignleft {
	margin: 14px 15px 10px 0;
	float: left;
}

.alignright {
	margin: 14px 0px 10px 15px;
	float: right;
}

    Then later, in the content, it defines the default border (see original post).

    You can apply multiple classes to (X)HTML elements. The overall visual display is governed by what is termed the cascade (hence the name Cascading Style Sheet). For example, if you set up a border in a class and apply it to an element, that border will be displayed UNLESS you also add a second class that is defined further down the stylesheet that removes the border.

    So if you add:

    img.noborder {border:none;}

    AFTER any other class that sets up a border on an image, you can then use:

    <img class="alignleft noborder"....
    <img class="alignright noborder"....

    etc.

    You’ll just have to add the “noborder” to the image markup by hand as you only want to remove borders on some images.

    If the border is being applied by a background color, you could use:

    .post-content img.noborder {background:#fff;}

    substituting #fff for your normal post background color.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘I need some images with borders and others without.’ is closed to new replies.