Turning images into css

So you want me to add the words “View Now” below the bottom line of Journal and the words “Order Now” below the bottom line of Delivery. Is that correct?

May I recommend that you validate your HTML as much as possible. Duplicate IDs can be “fatal”.
https://validator.w3.org/nu/?doc=http%3A%2F%2Fwilliamandcooper.com%2F
Click the “Message Filtering” button near the top. The error messages are much easier to understand.

The code that I sent is not “mix and match” compatible. It’s more like “take it or leave it”. All of the pieces are required.

I would like to reiterate @RyanReese’s admonition about built-in rendering engines in an IDE. Don’t rely on them. Rely on real browsers only.
I write code with a pure text editor - like a fancy version of NotePad. I send the code to a real browser to see how it is behaving. Nothing beats a plain text editor plus real browsers. IDE’s cannot not emulate real browsers… they just can’t. Even real browsers have differences. DO NOT rely on the rendering engine in an IDE. It was out of date before the product was ever sold. Noone browses the web with an IDE.

Where would you like to go from here?

Yes I’m not doing to well! I am having issues and I should be checking those now and do it more often from now too…

Yes I need to add the words view now underneath but I only need the green square with journal and view now ( I do not need the bow tie )

Once I have that sorted I can duplicate that for the delivery bit, Do you see what I mean?

If you add this CSS to the working page that I sent you in the Dropbox and add the paragraph text (<p> tags) to the HTML as shown here, the image shows what you should see:

p {
    color:#ffd700;
    font-size:.9em;
    font-family:"Palatino Linotype",serif;
    font-style:italic;
    text-transform:none;
    text-align:center;
    letter-spacing:0;
    margin:.25em;
}

<div class="tcell"><span>Journal</span><p>View now</p></div>

<div class="tcell"><span>Delivery</span><p>Order now</p></div>

YES!!! That’s it. I’m having some issues though i think I’m naming them with the parent wrong so that the spans and a’s only effect this rather than across site. I’ve put .tcell infront of them, is that correct?

I always get confused when it comes to this. Say I have a

should I look to the class or id above it and name that before it so like

.tcell p ?

If you have a look on the site can you see where I’ve gone wrong?

btw I really appreciate your help. If there is anyway I can help you in return please let me know.

There still appears to be a combination of Ryan’s code (or is it Paul’s?) and mine on your page. As I said before, you must use all of my code, not a mixture. If you prefer Ryan’s/Paul’s code, I will study his code and see what we can do, or perhaps he will rejoin this topic. But the lesson is that you cannot mix and match parts of a page that work together because when one of those necessary parts goes missing, the “package” no longer works.

I am not sure if you want two or three images in a row/column now. Your page has never displayed three clean images in a row and seems to be displaying only two right now… the right hand image is missing. Please explain what you wish to see on the page - two or three images - in this responsive bundle.

If you use my code, you must replace your images with the photoshopped borders with ones that I sent that are of equal dimensions and have no white borders.

I do not know if how much specificity is needed to use my code on your page, therefore, I cannot tell you if .tcell p is adequate or not. After you decide whose code you wish to use and how you want it to behave, I should be able to help.

Oh no, I want to use your code, i thought I replaced it.

I want to do just the one image on the right first then copy that on the left. ( the middle imge is being pulled in from featured products you see ) I’ve tried to explain but not sure if you know what I mean there

The images in my code are foreground images. As it is designed, you cannot blithely pull the middle image in from somewhere else. Why do you need to pull the image of the bowtie from elsewhere? Does that image change?

Those three images/containers work together. If you MUST import one of those images, the code becomes a bit more complicated as do the dimension requirements of the imported images. Can you assure that the imported images will have the same dimensions?

yes the bow tie is a wordpress featured image from the products section. This is what I’m trying to say. This is why I need only the green image then replicate that on the right

Those three images/containers work together.

Can you assure that the imported images will have the same dimensions aspect ratio? the size and aspect ratio can be different from the two foreground images, but they should be the same between themselves.

You must START by constructing the row with the TWO outer images, THEN consider importing the middle image.

I’m attaching the code for a single instance of the fluid box with the green image and the centered-middled text.

This means that you will be responsible for aligning them horizontally or vertically using the Wordpress grid.

NOTES:

  1. I included what I believe are your relevant parent and ancestor Wordpress elements so you can tell where the outerbox is located. There are no styles associated with the Wordpress elements in this example, so they are just fluff in this example and do not affect the behavior of the box.

  2. I am using the cleaned up images from the Dropbox without Photoshopped borders. Their dimensions are slightly smaller. If you like these borders, then I recommend using those images.

  3. I expect that you will need a method of scaling the imported background image (bowtie, etc) in concert with the greenies.

  4. Reminder, the entire image cell is clickable (notice the anchor tag?)

  5. Someone familiar with Wordpress could probably reduce this HTML by one level, maybe two.

  6. If addressing the <p> is a problem, just give it a classname and target `p.classname’ or more specifically if needed.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>standalone table with image + centered text</title>
    <style type="text/css">
.outerbox {
    border-top:6px solid #2e3d39;
    border-bottom:6px solid #2e3d39;
    padding:5px 0;
    margin:0 auto;
}

/* default anchor styles.  The anchor element is set to display:table-cell so the entire cell is clickable */
a {
    display:table-cell;
    vertical-align:middle;  /* vertically middles the text */
    text-align:center;      /* horizontally centers the text */
    color:#fff;
    font-size:1.25em;
    letter-spacing:3px;
    text-transform:uppercase;
}
.table {
    display:table;
    table-layout:fixed;
    width:100%;
    height:100%;
    border-spacing:0 0;
}
.rel {
    position:relative;
}
.tcell {
    display:table-cell;
    vertical-align:middle;
}
.abs {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

/* a container around the text within which to frame the pale white lines above and below the text */
span {
    display:inline-block;
}
/* the pale white lines */
span:before,
span:after {
    content:"";
    display:block;
    width:70%;
    height:1px;
    background-color:rgba(255,255,255,.5);
    margin:0 auto;
    margin-bottom:.5em;
}
span:after {
    width:auto;
    min-width:100%;
    margin-left:-1em;
    margin-right:-1em;
    margin-top:.5em;
    margin-bottom:0;
}
img {
    display:block;
    width:100%;
    height:auto;
}
.tcell p {
    color:#ffd700;
    font-size:.9em;
    font-family:"Palatino Linotype",serif;
    font-style:italic;
    text-transform:none;
    text-align:center;
    letter-spacing:0;
    margin:.25em;
}
    </style>
</head>
<body>

<div class="vc_col-sm-4 wpb_column vc_column_container">
    <div class="wpb_wrapper">
        <div class="wpb_text_column wpb_content_element">
            <div class="wpb_wrapper">

                <div class="outerbox">
                    <div class="table rel">
                        <a class="tcell" href="#nogo">
                            <img src="images/journal.png" width="609" height="486" alt="">
                            <div class="abs">
                                <div class="table">
                                    <div class="tcell">
                                        <span>Journal</span><p>View now</p>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

</body>
</html>

Looks like this:

How do you know how to write this stuff by hand? How long has it taken you to get to this stage?

Yes I am finding the the <p> things are an issue as <p>'s and <br>'s are just being added and removed willy nilly. Even a </img> tag is being added and the </a> tag is being reordered too. It’s very frustrating and confusing why this is happening.

I just want to say thank you again for helping and being so patient. Most people are not willing to help so again if I can do anything in return please let me know.

A common house cat is not smart enough to master the King-of-the-Jungle Wordpress. I just try to keep up with a little HTML and CSS. It seems to be adequate for my needs.

I have been coding HTML and CSS off and on for several years but my greatest improvements in knowledge have happened while volunteering here at SitePoint. It’s fun being exposed to new questions, ideas and techniques every week.

I would think that these oddities are the result of Wordpress preference settings in need of customizing. That is where I would look first, anyway. Maybe a Google search would turn up something… Or maybe you could post a question in the Wordpress support forum… Or maybe someone in the “CMS & Wordpress” category (http://www.sitepoint.com/community/c/cms-wordpress) would know.

You’re welcome.

A hint about inline tags in message posts:

When you want to show an HTML tag (or any string between < and > symbols), put a backtick before the opening less-than symbol and another after the closing greater-than symbol and the visiblilty will be preserved.

This: `< tag or string >` is rendered like this <tag or string> in a post.

(no space is needed between the lt or gt tag and the text. If one forgets the backticks, the tag disappears )

Cheers

I did wonder why they were turning out like that thank s for the tip.

I had to change themes after because the one I was using had so many issues and bugs and html errors etc. So I’m using this new theme and it does not allow the contr=ent to stretch across the page like I want it to.

Is there a way to get it to stretch across like I want?

http://www.muslimahwebdesign.co.uk/wac

I can give it (Wordpress) a try with the understanding that I might make a mistake or two (easily correctable).

In the HTML there is a line <div class="vc_row wpb_row vc_inner vc_row-fluid">. The green images and bowtie are within that container. Please start by deleting everything within that container so you have a “clean”, full-width row (12 wordpress columns).

I do not believe that you will need the 3 wordpress 4-col containers.

For the sake of experimenting (testing the layout, not the bowtie image fetching requirement), can you insert the HTML code that I posted into that full width empty row and place the CSS on a local stylesheet (it may need to be more specific, but we will see that after it is inserted).

The images are in the foreground so you will have to change the location of the bowtie so it is a foreground image.

Does that make sense? It’s not the wordpress way, but it should work eventually if the bowtie fetch image can be made to work. I have another version of the HTML/CSS for that.

ok I’m going to give it a go. As it’s wordpress I need to create a new template for it and bring it into the child theme so here goes!

Yes, definitely. Best not to mess up your original.

Right finaly got to where I want to be.

I got it all to display full width but the links in the centre of the images are not right and I’m baffles about what to do with the massive bow tie image.

hantaah,

You are still completely within the Wordpress grid and I do not know how to guide you within that grid. While the code that I gave you is quite good outside of a grid, it is far out of place (or more correctly, I am far out of place) within your grid and should probably be removed.

A few messages ago I asked if the images being pulled into that center box were the same dimensions or aspect ratio. You did not respond to that question. If their sizes are consistent, then the task of importing and resizing them for the display is relatively easy. If they are not, then JavaScript must be involved and that too is out of my skillset.

I also asked you to create a single, full width (12 column wide), empty row near where you want the row of images. My “plan” was to make the images work as desired within that row (outside of the Wordpress grid). If successful, then you could probably figure out how to put them inside of the grid. Not a great plan, but it seemed to have potential. Apparently, you are staying within the grid.

I’m sorry, I have done all that I can short of trying to learn Wordpress, which I do not wish to do. I suggest that you seek help from a Wordpress person. Nothing beats first hand experience with the product.

I can move this thread into the Wordpress/CMS category if you wish.

Sure I do appreciate it.

It worked hard on it and sorted it, what do you think?