Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Mike Hansen
.a{fill-rule:evenodd;}techdegree
Mike Hansen
Python Web Development Techdegree Student 3,419 Points

Force push div next to another div

I am currently trying to make the css course website my own. And i want to make a 'blinker' blinking next to the text like the one you are seeing when you're adding a comment to this and etc | i made it blink and force pushed it next to the text. well kinda did, the problem is that when i'm force pushing it with margin at one point it's just stopping and i can't push it any more.. Here's my code:

html:

    <header class="main-header">
        <div class="container clearfix">
            <div class="name">
            <h1 class="name"><a href="index.php">Miketic company.</a>
                </div>
                <div class="blink">
                <h3 class="blink">|</h3></h1>
            </div>

css:

div.name { float:left;}
    div .blink { float:left; margin-top: 8px; margin-right: 10px;}
    .name,
    .col {
        float: left;
    }

    .blink {
        float: left;
        vertical-align: text-top;
    }

    .blink {
    opacity: 1;
    -webkit-animation: blink 0.9s infinite;
    -moz-animation: blink 0.9s infinite;
    animation: blink 0.9s infinite;
}
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Hi Mike Hansen, just letting you know that I wrapped your code in a code block.

Please refer to the Markdown Cheatsheet (linked below the text box used to add your question/comment/answer) for instructions on how to format code blocks.

2 Answers

Codin - Codesmite
Codin - Codesmite
8,600 Points

First of all your code is invalid, and semantically would get your blacklisted from Google. Never nest another header tag or a div inside a header tag.

These are the only tags you can nest inside a header:

em, strong, br, pre, a, span, img, input, label, code, samp, kbd, var, cite, abbr, acronym, sub, sup, small, mark.

Onto your question:

Is this for a field that will have user input? If so just use a form with a text input field, it has a text blinker by standard.

<form>
  <input type="text"></input>
</form>

Or here is an example of how to achieve the above without user input:

http://codepen.io/anon/pen/MKXgVP

font-size: 0; on the parent container removes the white space between inline objects. The position of the 

<h1>

tags in the html are important too, if you add any whitespace between the text and the tags it will cause white space to appear between your blinker and the text due to the way inline positioned elements behave.

I used a div instead of a H3 header for the blinker because semantically there is no purpose in having the blinker as header content and could cause negative outcomes to your SEO.

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Nothing wrong with div element nested in a header. But you're not meant to nest another header or footer tag within one.

I didn't see a header nested within a header in his code though...

Codin - Codesmite
Codin - Codesmite
8,600 Points

I was reffering to the fact he has a 

and
```h3```
inside his 
```h1```

Header Tags : 
```h1```
```h2```
```h3```
```h4```
```h5```
```h6```

Semantic Header Tag:
```<header>```

Similiar descriptive names but different elements.

Which there is many things wrong with, it is not valid HTML, and because of the semantic value of these tags Google Bot or any other crawler is going to freak out reading it. This will easily get your website blacklisted from Google and Yahoo at the least.
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Ahhh, you mean heading tags. That makes more sense. And yes, headings should only have 'phrasing content' (mostly inline elements). I didn't even notice!

Codin - Codesmite
Codin - Codesmite
8,600 Points

My bad I have always thought they were "header tags" not "heading tags" now I know :D

Steven Parker
Steven Parker
242,796 Points
Steven Parker
Steven Parker
242,796 Points

I don't quite understand what you mean by "i can't push it any more". But I did notice something that might possibly relate to your issue:

Did you mean to select div .blink - that's a descendant selector for an element with class blink that is inside a DIV (in this case the H3)? Or did you intend div.blink (with no space) - that targets the DIV itself.