Support » Fixing WordPress » specify images using css block elements

Viewing 15 replies - 1 through 15 (of 18 total)
  • You would probably need to assign an id to each image and then use that id in the CSS.

    Use “display: block” to make them block.

    So the CSS would be:

    #myimage img {
    display: block;
    height: XXXpx;
    width: XXXpx;
    }

    I dont know this stuff so where would i find the ids at?
    Could i use #myimage img {
    display: block;
    height: XXXpx;
    width: XXXpx;
    }
    exactly like that in my css? if i have 5 images in the sidebar with the same width and height, how do i specify that?

    Thanks for the help!

    You’d have to assign a unique ID to each image — that’s how CSS works.

    If they are the same size, use a class and then use that class as the CSS selector.

    .myclass img {
    display: block;
    height: XXXpx;
    width: XXXpx;
    }

    Sounds like you should learn a bit more basic CSS 🙂 — there is LOTS of great info and tutorials out there…

    well i know i need alot of work but im just trying to get this done right now.most of the time, firebug does the css for me and i can move things up and down. when i just add
    .featurecontent img {
    display: block;
    height: 250px;
    width: 640px;
    }

    my grade didnt go up and it added more http request

    Well, gtmetrix measures and how-to is really not a WP issue … have you used their site and recommendations for help?

    No but did i do it correctly for the post above?

    The code is okay, but whether or not it is “working” on a page — dunno I could not find any instance of that class on the home page — is it on another page? What images are you assigning it to?

    would you look at my site in the feature content slider and tell me how to assign them correctly?
    http://www.xertionfitness.com

    For something like that I would use images that are all the same dimensions — looks like they are supposed to be 640 x 250 ??
    In that case, the CSS code would be:

    img.sliderImage {
       width: 640px;
       height: 250px;
    }

    But as you probably noticed, right now many of your images are messed up — distorted — because they are being “scaled” (resized automatically). The way to avoid that is to resize and/or crop (meaning you have to CUT the photo to the right size) all the images to the right dimensions BEFORE you upload them. Also make sure that the size (i.e. file size — generally meaning resolution) is not too big — because that makes them load more slowly. You need to use a photoshop like program to do that kind of work — there are various options, including free ones that you can use.

    BTW, be sure that you are not using copyrighted photos without permission.

    thank you so much, i really appreaciate the help , i made those images myself with my phone beside one. far as the images in the sidebar that are 173×125, would i do something like

    img. widgetImage
    width: 173px;
    height: 125px;
    }

    There is no class called “widgetImage” — you have to use Firebug (or some other similar tool) to look at what CSS classes are being used in the HTML code. In this case, there is no common class for those images, but there is a class for each of those widget boxes — so you can use one of those — likely this:

    .dbx-content img {
       styles here
    }

    In this case, the image tag goes AFTER the class because it’s selecting images that are in an element with that class. Yes, I know CSS is confusing and kinda tricky… like I said, you WILL need to learn it if you plan to keep working on WP.

    Thanks so much wpyogi,
    thats all i needed to know, I will work on it figure it out. last question, if i use the dbx content for the widget area, then all the images have to be 175 x125? what about ads?

    I just want to say again thank you so much for the input that you have already given me. tremendous help.

    Your slideshow images don’t have heights and widths.

    <img class="featured-excerpt-bottom" alt="Superfoods that need to be your weight loss diet" src="http://xf5.xertionfitness.netdna-cdn.com/wp-content/uploads/2012/07/Superfoods.jpg">

    The <li> inclosing the images has a height, but no width.

    Try adding a height and width to .featured-excerpt-bottom

    thanks!

    I dont if it work because my specify image score didnt change but i did this

    .featured-excerpt-bottom {
    width: 640px;
    height: 250px;
    {

    Yeah, that is what I had in mind, and it is applied correctly. The gtmetrix instructions implied that a CSS rule would work but maybe they require it to be a style= tag and not in a stylesheet. That may require editing the slideshow plugin source.

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘specify images using css block elements’ is closed to new replies.