It looks better with the bow tie in the middle so I’m using one image only by either side of the bow tie. So I want the borders to look like this:
Are you talking about the lines above and below the text? If so, I’ve already given you a way to make them in my first post (includes notes in the CSS),
I’m a bit lost about how you wish for the images to behave on the page.
hantaah, if you leave this thread with nothing else, please learn this:
When writing a web page, especially a responsive web page, choosing the appropriate code depends on knowing ‘what comes next’.
That’s not true, is it? It is an incomplete question.
What borders are you talking about?
This image has no border.
EDIT:
Hopefully, you know how to download a file from Dropbox.
Please download this file and double-click the HTML file to open it in your browser. It is posted in Dropbox because it includes two of your images that have been cropped slightly so they are the same size. This file is an attempt to see if this is what you are now seeking. The code can probably be improved a bit so don’t take it to the bank. Do resize your browser window to test responsive behavior.
https://www.dropbox.com/sh/fiuqwtwicsbruz1/AAAq89VfN4pOuqMC1O_rKRWga?dl=0
ok, sorry if i have caused any offense. Doing it in different ways though is helping me learn, troubleshoot, see what does what etc.
Oh thanks, the text is just how I want it. But the bow tie will be a seaparate image as it is being pulled in from a featured product slider.
So the code should only include the one image ( as below )
with the text Journal having those lines above and below and then more text underneath that says view now.
I’ll take a look at that code you sent me and figure out how you’ve done the lines.
I appreciate all you’re help, you’re always a great source of knowledge.
Thank you
I’m having a strange experience with that code you gave. It works fine if I open it in the browser but not if I open it in a text editor. https://vimeo.com/135991901
I need to edit it so that I only have the journal section that says Journal with the border then view now underneath. Once I get that right I can do the same with the green delivery section on the otherside. The bow tie is separate you see from the image
So what I want is how it is now here: http://www.williamandcooper.com ( with journal above view now ) but in the way that you have shown it in the code you sent me on drop box with the borders like that
sorry if I am unclear or not explaining it well. This is what I’m trying to achieve:
A text editor isn’t a browser. I would never ever trust a text editor to give proper results since it doesn’t handle code that well when it comes to outputting it. Dreamweaver had these same issues 
.
I see, I’m really strugling now.
I had the code from @RyanReese which worked but I couldn’t figure out how to get the borders how I wanted them above and below the text Journal.
then I had the code that @ronpat sent me which was good for the borders but couldn’t work out how to get it only for the green box and to have journal ontop with the text view now on the bottom, like the image above.
I tried mixing the two and now it’s a bit of a mess 
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:
-
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.
-
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.
-
I expect that you will need a method of scaling the imported background image (bowtie, etc) in concert with the greenies.
-
Reminder, the entire image cell is clickable (notice the anchor tag?)
-
Someone familiar with Wordpress could probably reduce this HTML by one level, maybe two.
-
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.