Positioning problems in CSS

[dhawkinson]

As I try to refine my code and employ (what I think are best practices) I find myself playing the “one step forward, two steps back” game. I am a newbie trying to produce a personal website as a portfolio to help me find a job as a developer.

The HTML and CSS you will see is written by me. Behind it is the latest version of the Bootstrap (getbootstrap.com) “normalize.css” (v 3.3.5). I am trying not to touch the normalize.css because I am under the impression (mistaken maybe?) that it will represent best practices, so I didn’t include it. I am assuming I will be able override any variations I need in my main.css.

I welcome any help I can get.

I am not sure why everything renders so large on codepen.io. The screenshot demonstrates the way it renders in teamtreehouse.com workspaces.

The image and tagline should centered vertically/horizontally within their containers. (the containers have borders for testing). I had these positioned using padding etc., but I am trying to actually use positioning CSS to center them (vert and horiz).

The pagequote is roughly where I expect it to be, but it should have a top border. The missing top border is another “two steps back” issue.

As you can see the footer is high and not centered. I had it pinned to the bottom for a while as I want it to be. But this is a “two-steps back” issue.

Thanks for whatever help you will provide.

Link to code:
http://codepen.io/dhawkinson/pen/rOqxdQ

Link to Screenshot of present rendering:
https://s3-us-west-2.amazonaws.com/s.cdpn.io/405383/Screenshot_2015-11-06_16.10.50.jpg

[Paulie_D]

You have way too much going on in there and you have asked several questions all at once.

Try breaking it down into separate questions and making reduced case demos for each with only the code necessary to reproduce the issue.

There’s no need to recreate the whole page in codepen..just the bits you’re having trouble with.

You’ll probably get the same advice on SO (I thought I saw this question there too).

Oh…and for your demos, you can add bootstrap and normalise via the options under CSS in codepen.

[dhawkinson]

Good Idea. I’ll break it down. I’m not sure what SO is. I’ll see if I can figure out what you mean on codepen for the normalize issue. I’m a newbie so I don’t always “get” it.

[Author]

Posts