Help in HTML/CSS

I'm not exactly sure what you're after, but maybe this will give you an idea?

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

You can try this: <h1 id="bar"> Some Text </h1> in html, and this: #bar {background:some color} in css. If this doesn't work you can leave another post telling me.

Can you give more details about what you are wanting?

I am wanting a bar kind of like what's at the op of the Treehouse website. It's a straight bar that goes across the page. I wanted to have a picture and a H1, placed inside of it. Hope this helps!

Hey John Faught ,

My video on CSS Positioning covers an example of just that.

Hope this helps John Faught ,

http://cdpn.io/jlcxB

Thank you all very much. I appreciate the help!

John Satterfield, I added what you had, because it was exactly what I was looking for! Only problem is the color on it does not work! Do you know why that may be? Thanks, John

John Faught I used the Hex color value twitter has for their background. To change and edit the background color of the box use the following -

background-color: #(HEX Color Value);

Keep in mind you do not need to use a hex value. You may also use RGBa and HSLa values as well. To help find the color you are looking for go to http://www.colorpicker.com/ which gives you all values for the color you choose. You can also use color names, W3 has a list of web safe color names which you can find here: http://www.w3schools.com/html/html_colornames.asp

If you need additional assistance or explanation please let me know.

Happy coding! :)

I re-read your reply and realized you might be talking about the text color and not the background color. The same rules apply except to edit the text color you would use the following:

color: #(HEX Color Value);

I used #FFF as this is the abbreviated color code for white.

The background color is not there when I put it in my website. But if I put it in a new document it is. I was curios to to why the background doesn't show up. Thanks,

Yes it is, I copied and pasted straight from codepen!

With your CSS code, are you attaching a separate .css file? Or are you including it in your html page?

It's separate. But it is linked.

Is there a way you can show me the exact code you have for both your html and css files? It might help if I see exactly how you have everything set up.

http://cdpn.io/wBpGi

John Faught - Check out this thread from yesterday on the same issue.

John Faught It looks like you calling the div id of topBar as a class. The "#" symbol is used to define an ID, and the "." symbol is used to define a class. So to correct the problem, in your html page you would use :

<div ID="topBar">Content Here</div>

Thank you guys! Issue has been solved!

Another quick question... The bar covers up my other content? Is there a way to stop this? (Sorry I am such a pest.)

Just put a top margin on the next highest element on your page, that should push everything down so the bar wont cover anything until the page is scrolled down.

I am using a Grid layout, when I do that it only moves one thing down, on top of another.

Depending on your grid layout you might have to put everything in a wrapper and give that wrapper a top padding.

Here's a codepen to give you a basic idea:

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

John Faught -

Assuming you markup looks something like this:

<div ID="topBar">
<!-- nav bar goes here -->
</div>
<p>
<!-- content goes here -->
</p>

Use an adjacent selector like this: #topBar + p { margin-top: 75px; }

John Faught In the code I gave you I put a

position: fixed;
z-index: 100;

This is causing your top bar to stay above the other content.. Remove those and you should be fine.

Alright! Thank you very much!

I have one more question and I'm done! How would I align the text in the bar vertically? I tried align-vertical or whatever it is and it didn't seem to work.

I personally would place each section of text/images/etc in its own div element and float them to the left so they are side by side... I believe inline-block would help get the correct design as well..

John Faught - You can use display: inline-block with vertical-align: middle to help with centering the text.

What class would I put that in? I'm using a h1 inside a #topBar

John Faught - Can you create a codepen so we can see the bigger picture of what's going on in your code.

http://codepen.io/Johnfaught/pen/IadBj I'm wanting the White text next to the image to be Centered.