Easyish – can anyone help find the CSS that makes these 2 validation errors?

Sorry you’re using the HTML validator and so it’ll be HTML and not CSS you need to resolve. Probably through PHP.

The CSS validator is here: https://jigsaw.w3.org/css-validator/

Joy, what theme are you using? The fact that it uses <hgroup> makes me wonder if it hasn’t been updated in a while – like maybe YEARS. As in, I’ve never used it, and I’ve been writing html/css since 2007.

I generally add logos with this rule:

.site-header .site-title a {
 background: #c0102 url(images/logofile.png);
background-position: left top;
background-repeat: no-repeat;
background-size: contain;
text-indent: -9999px;
width: xx%;
}

Note: I just used #c0102 to spell ‘color’ in hex. And I generally upload the logo to the wp-content/themes/mytheme/images/ folder so I can use the relative file path to the image. It’s a bit more flexible.

Assuming you don’t want your site title rendered in text, the indent of -9999px throws that text so far off the page you shouldn’t have to worry about anyone seeing it. (Except maybe on a Jumbotron.)

If you do want to use text, add padding to wherever you want your logo to show, and make sure all its containers are big enough that they don’t crop it off.

I don’t recommend setting dimensions in pixels, especially in responsive design. Instead, use percentages or ems for widths, rems or ems for heights. Most themes will calibrate the html and body rules to make a rem equal 10px – which is starting to feel a bit too locked-in for me now.

Pixels are still a thing, though – I use them in text-indent. Also, shadows, because they’re supposed to be subtle and other measures could get un-subtle in a hurry.

Your markup should look a little like this:

<header>
  <div class="site-header">
    <div class="site-title">
        <a href="https://myhomepage.com"></a>
     </div>
  </div>
</header>

There’s no real need for an h1 here unless you want to render your site name in text.

Likewise, you don’t 100% need the site-title class unless you’re also using the site-description class. And the site-header class is what keeps everything together, doing the job of your old pal <hgroup>.

If you want a widget to the right of your logo – for navigation maybe? – add a title-area class and a widget-area class inside the <header> element.

OH! Almost forgot: the markup should all live in your header.php file.

And in the CSS, the background position can be whatever you like. I just find that if I set the dimensions horizontal-first then nothing will bite me in the butt later on.

Thank you Andrew and Marybaum for your replies, I really appreciate it.

I made a functions php file today but it has nothing on it except:

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
function enqueue_child_theme_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('parent-style')  );
}

Marybaum, I’ll try out your logo code, once I finished this reply,I am hoping to have the name of my typed site next to it. My logo doesn’t include the name of my site. Ideally I’d write it in the font ‘Avenir’ but accessing that (I don’t alredy have it) it not high on my priorities just yet compared to functionality. Like you say, my site title doesn’t need to be H1 – I agree because then I think all my other titles which contain more diverse info would be secondary!

I could just delete it if it is causing the problem, though I copied that code from an answer someone gave.

I am using TwentyTwelve.

To add an image like you suggested I will just just use Filezilla and then when it is in the childtheme make a folder called ‘images’?

I don’t know how to code for padding or to size the containers yet so I will have to reseach that (I feel awkward looking for too much help here, as I know it is something I have to invest time in myself! – I am have reserved som library books on CSS but not got them yet).

Thanks for your sdvice on pixels, I will watch out for that.

I would LOVE a widget area to the right of my logo! I spent all day today trying to get one, but my efforts didn’t work. If it is simple would you be able to write down the code that could make that?

I am aiming to have middle-right a changing quote thing (I will try to make this based on hello Dolly plugin) and along the top of the menu bar a “Call my-mobile-no.” and a search box for the whole site (not just posts)

Thanks for your advice, it is so helpful, pointing me the right direction.