Simple concepts problems

Question

Hey All, thanks in advance for any insight offered. I guess i'm having issues with the simple concepts of positioning. the code that follows has a simple logo followed by a heading, because the image has a black space at the bottom my heading is not aligned with it. Im looking to simply make the heading move up inline with the image. each time i change the logo the text also moves with it, I try adding padding to the text but nothing happens ( i kinda understand why) I feel i'm missing some core concepts to how the box works and how inline objects affect each other. any insight appreciated,

here's my HTML code.

<!DOCTYPE html>
    <head>
        <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Keith Greatz | Creationist</title>
        <link href="css/normalize.css" rel="stylesheet" type="text/css">
        <link href="css/site.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <header>
        <div>
            <img class = 'mainlogo'src="img/brandlogomotif.png">
            <h1>Greatzstuff</h1>
        </div>

    </header>
    <footer>
    </footer>
    </body>
</html>

Heres My CSS,

header {
    max-width: 100%;
    height: 200px;
    background-color: black;
}

.mainlogo {
    display: inline-block;
    width:100px;
    height: 99px;
    padding: 10px 10px 0 10px;

}

h1 {
    display: inline-block;
    color: white;
}

Again any help appreciated.

part of the core concepts i think i fail on is also the

<div class= "test">
    <img src="img/brandlogomotif.png">
</div>

This Css doesn't seem to center my Image.. totally lost why.

.test {
    margin: 0 auto;
}

ps - in the process of going over the basics again but they don't seem to be working for me.

Keiffy101.

Answer 1 · 2015-06-21T12:00:57Z

June 21, 2015 12:00pm

Hey Keith!

First of all: make sure to avoid any white spaces when assigning attribute values to any html atttributes.

<div class= "test">
    <img src="img/brandlogomotif.png">
</div>

This code won't work, because of the white space after the class equal sign. Remove it like so:

<div class="test">
    <img src="img/brandlogomotif.png">
</div>

Give me a few moments to check the rest of your code. I will update my answer then.

Ok Edit:

Also here in your code you added a white space after the class attribute as well as after its equal sign. Thus the css rulesets you set to that classname won't work for this html element:

    <header>
        <div>
            <img class = 'mainlogo'src="img/brandlogomotif.png">
            <h1>Greatzstuff</h1>
        </div>

    </header>

correct it like this:

    <header>
        <div>
            <img class="mainlogo" src="img/brandlogomotif.png">
            <h1>Greatzstuff</h1>
        </div>

    </header>

To get the image and the h1 nocer aligned change your css like so:

* {
    box-sizing: border-box;
}

header {
    max-width: 100%;
    height: 200px;
    background-color: black;
}

.mainlogo {
    width: 100px;
    height: 99px;
    padding: 0;
    margin: 49px 1em;
    vertical-align: middle;

}

h1 {
    display: inline-block;
    color: white;
    margin: 0;
    vertical-align: middle;
}

Also remove the unnecessary div that wrapped around the img and h1 in your html:

    <header>
            <img class="mainlogo" src="img/brandlogomotif.png">
            <h1>Greatzstuff</h1>
    </header>

Cheers

Answer 2 · 2015-06-21T11:59:00Z

June 21, 2015 11:59am

your .test div isn't getting centered because it doesn't have a width on it.

Try adding width: 320px; to it and you'll see it will be centered.

Width needs to be specified, not a %, otherwise your auto margin won't work.

Answer 3 · 2015-06-21T12:37:22Z

June 21, 2015 12:37pm

Yea all is refreshed i see the changes each time I run the refresh as it's the environment is local. The bottom of the picture has a black border (within the png image itself not css) that is causing it to be raised slightly, so it is on the same line as the first header, I am just unable to adjust the picture up or down, I could simply change the picture which i may just do, I also like the idea of figuring out how to move it where i need to. The Image is the first object and it feels its setting the "line" for the rest. Ive tried selecting the img on its own but it also moves the line with it, don't stress there are other options i have.

.mainlogo img {
        margin: -10px;

Answer 4 · 2015-06-21T13:03:34Z

June 21, 2015 1:03pm

Thanks Saskia, I have a number of things to think over, Im definitely still missing the basics.

Welcome to the Treehouse Community

Looking to learn something new?

Keith Greatz

Keith Greatz

Simple concepts problems

4 Answers

Saskia Lund

Saskia Lund

Keith Greatz

Keith Greatz

Saskia Lund

Saskia Lund

Andreas Anastasiades

Andreas Anastasiades

Keith Greatz

Keith Greatz

Keith Greatz

Keith Greatz

Saskia Lund

Saskia Lund

Keith Greatz

Keith Greatz

Saskia Lund

Saskia Lund