Recent Topics

1 Sep 15, 2006 03:44    

First, I assume I'm looking at the correct section of code for my skin for what I need--this looks to be the CSS for formatting an image in a post.

.bPosts img.imagem {
	padding: 6px;
	border-top: 1px solid #ddd;
	border-left: 1px solid #ddd;
	border-bottom: 1px solid #c0c0c0;
	border-right: 1px solid #c0c0c0;
	/* align: center; */
}

If I am right and have the correct code, why do my pictures not have any padding or borders? (See sample page [url=http://www.hudson2001.com/blogs/index.php]here[/url].) I am inserting the images with the code directly from the Write tab toolbar.

2 Sep 16, 2006 17:43

Hi... the CSS that effects your posted images is as below.
I don't know that skin but imagem doesn't appear anywhere in your source so it must effect something else.

The reason you have no borders is because of the first border:none in the CSS code below.
If you want all your images to have a border and some padding, you can edit the first instance of img and it will cascade and give the same effect to all images, or you can edit them to be all different..
For fun just edit the first img instance in the CSS to and notice the effect.
img{padding: 6px;
border:1px solid #DDD;
background-color: #EEE;
margin:4px;}

/* styles for images */
img {
	border:none;
}

img.top {
	vertical-align: top;
	border: 0px;
}

img.flag {
	vertical-align: middle;
	border: 1px solid #000;
}

img.middle {
	vertical-align: middle;
	border: 0px;
}

img.leftmargin {
	float: left;
	border: 0px;
	margin-right: 1ex;
	margin-top: .2ex;
	margin-bottom: .2ex;
}

img.rightmargin {
	float: right;
	border: 0px;
	margin-left: 1ex;
	margin-top: .2ex;
	margin-bottom: .2ex;
}

3 Sep 16, 2006 17:57

Thanks! I hate only knowing a little about CSS... it's dangerous! Some things I know what they are, but typically I change one color at a time, see what changed colors, and go from there!

I will try this and let you know how it worked!

5 Sep 17, 2006 00:51

Well, I 've visited your site and I've been able to style your EGG SLICER image and your Photos in the side bar.

When you post an image and wish it be a left-aligned or a right aligned, or center-aligned you have to give it the class name in the image.

EG
img{border:1px solid #DDD;
padding: 3px;} puts a grey border on every image on the page.
You maybe don't want that so you leave

img {
	border:none
}


and then edit the others but include their class in the image post..
for the Egg Slicer you have..

<img src="http://www.hudson2001.com/blogs/media/blogs/eggslicer.jpg" alt="awesome egg slicer" title="awesome egg slicer" align="right"/>

If you edited img.rightmargin to give you a border and a background color then when you post the image and you want it on the right, your image tag would be

<img src="http://www.hudson2001.com/blogs/media/blogs/eggslicer.jpg" alt="awesome egg slicer" title="awesome egg slicer" class="rightmargin"/>

and not <img src="http://www.hudson2001.com/blogs/media/blogs/eggslicer.jpg" alt="awesome egg slicer" title="awesome egg slicer" align="right"/>

and your css might be something like..

img.rightmargin {
	float: right;
	border: 1px solid #DDD;
        padding: 3px;
         background-color: #EEE;
	margin: 1ex .2ex;
	
}
 

6 Sep 17, 2006 02:08

Thanks for the detailed response...see what I mean about how I know a little but enough to make me dangerous? :D

I will mess with it tomorrow.

7 Sep 17, 2006 03:19

Try /blog/rsc/css/img.css . If I remember, that is where I modified my image construct.


Form is loading...

powered by b2evolution CMS – This forum is powered by b2evolution CMS, a complete engine for your website.