Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Keith Greatz
Keith Greatz
4,377 Points

Simple concepts problems

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.

4 Answers

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

Keith Greatz
Keith Greatz
4,377 Points

Hey thanks for pointing out the spaces i had, I did change them back and it didn't affect it either way though.

Cheers, Keiffy 101

Did you reload the page with cleared cache?

Your logo and h1 should be aligned in the same "line" now.

Andreas Anastasiades
Andreas Anastasiades
2,916 Points

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.

Keith Greatz
Keith Greatz
4,377 Points

I can see adding width the the test scenario worked, Ive added that to my notes to be aware of thanks heaps. Do you happen to know how I could raise the h1 text up slightly? or Lower the logo? it is as if the bottom of the image has set the bottom line for content and that's what the text is running on.

I could run it absolute but I guess i want to figure out why its not working in the first place.

Keiffy101

Keith Greatz
Keith Greatz
4,377 Points

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;

I added another edit to my answer.

img is an inline element. Text will float around it. h1 is a block element. You set it to behave like an inine element by assigning inline-block to it. This will still allow you to set height and width properties to the h1. Whilst to an inline text element (like span f.e. or pure text) you could not define any height or width values.

You can read up on inline and block elements here: https://css-tricks.com/almanac/properties/d/display/

Oh and btw, I don't know what your image looks like ;) I only see the file name and the css ruleset you assigned to it :)

Keith Greatz
Keith Greatz
4,377 Points

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

Alright.

You can find very helpful guides about how the box model works here: https://css-tricks.com/the-css-box-model/

Further information on what box-sizing does and why it is very useful: https://css-tricks.com/almanac/properties/b/box-sizing/

What is vertical-align? https://css-tricks.com/what-is-vertical-align/

Hope this will shed some light for you ;)