Help with creating a border around text and image for button

HTML & CSS
1

Hey guys, Is it possible to help me out with some code I am trying to complete for a section of a website I am creating. I am trying to replicate this

but it seems to not be working for me as the border is going around the text.

I started making this using tables but I don’t believe this is the best method.

Thanks

EDIT: Here is my current code:

<table frame="box">
<tbody>
<tr>
<th><img src="https://xvj.564.godaddywp.com/wp-content/uploads/2018/06/image17878.png" width="" height="50px" /><a style="float: center;" href="#">Single-Use Manufacturing</a></th>
</tr>
</tbody>
</table>
2

Perhaps you could show us your code that is not doing quite what you want, @joey13? Tables would almost certainly be the way to go.

Edit: Sorry that should be “Tables would almost certainly NOT be the way to go.”
"

3

Hey, Thanks for the advice I have provided in the edit above. Thank you

4

Did you mean CSS display:table, @Gandalf? It doesn’t look like tabular data to me.

5

My updated code is this which seems to work but the single is at the bottom of the image?

<table frame="box">
<tbody>
<tr>
<th><img src="https://xvj.564.godaddywp.com/wp-content/uploads/2018/06/image17878.png" width="" height="50px" /><a style="float: center; text-decoration-line: none !important;" href="#">Single-Use Manufacturing</a></th>
</tr>
</tbody>
</table>
6

Hi there joey13,

and a warm welcome to these forums. :sunglasses:

Does this help…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f9f9f9;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }
 
#single-link {
    display: inline-block;
    padding: 1em 0.75em 1em 4em;
    border: 1px solid #999;
    background-color: #fff;
    background-image: url( https://xvj.564.godaddywp.com/wp-content/uploads/2018/06/image17878.png );
    background-repeat: no-repeat;
    background-size: 3.25em auto;
    background-position: 0 center;
    color: #285dca;
    text-decoration: none;
 }
</style>

</head>
<body> 

 <a id="single-link" href="#">Single-Use Manufacturing</a>

</body>
</html>

coothead

2 Likes
7

You could do something like this for modern browsers:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Template</title>
    <style>
        .box {
            display: inline-flex;
            align-items: center;
            border: 1px solid #000;
            padding: 10px;
        }
        
        .box a {
            text-decoration: none;
            color: #000;
            margin-left: 20px;
        }
    </style>

</head>

<body>

    <div class="box">
        <img src="https://xvj.564.godaddywp.com/wp-content/uploads/2018/06/image17878.png" width="78" height="78">
        <a href="#">Single-Use Manufacturing</a>
    </div>

</body>
</html>

Edit: beaten by @coothead :slight_smile:

2 Likes
8

Hey Paul, Thank you for this. I actually finished what I was asking for and it worked but was crammed with loads of unnecessary inline styling but this works so much better and is more optimised. Thank you for this!

1 Like
9

Oops! There was a NOT missing there! :unhappy:

2 Likes
10

For future reference, there are a lot of errors and invalid code in your earlier code snippets.

The frame attribute is obsolete, you should use css instead (in cases where a table is actually appropriate).

When you add height and width attributes to an img don’t declare units, the attributes only work in pixels, so pixels are always assumed.

The float property has no such value as center, valid values are left, right or none.
Always Validate your code.

As you may have gathered, the use of tables for non-tabular data and in-line styling is not encouraged.

3 Likes
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.