Can someone look over my Div padding, and margins please

1

I’ve been messing around with the padding and margins of my About Me, and Portfolio Div’s all morning, and still not sure that I coded it correctly. I just want to make sure I write clean code.

2
  1. Left margin is smaller then right (your sections are not exactly centered on the page).
  2. I don’t understand why you are using position: absolute and z-index on stuff like header, or bear’s image. No need for that. Check out this guide if you want to learn about proper positioning.
  3. Use proper html elements. For example, there is a <header> element in html5. Use it instead of <div class="header">. Also check out such html tags as <main>, <section> and <footer>
  4. If you are setting background color, there is no point in using background-repeat and background-size CSS properties.
  5. Don’t use inline styles (i.e. don’t use style attribute in your html!) All styles should be placed in CSS file(s).
3

Thanks for the input! I fixed the header! So use float to align my divs?

4

Nope. Main purpose of floats is to allow you to wrap text around images. It was used for positioning for the lack of better alternatives, but in CSS3 we have much better tools for positioning (flexbox).

That being said, you don’t really need anything special to positions your sections. Just set your sections width, and them give them margin: auto property. Setting margins to auto basically centers an element horizontally. If you want to add some vertical margins also, you can do something like margin: 100px auto.

5

Okay that’s right I’ve used float a long time ago and now I’m trying to refresh my skills. Awesome! I made a bunch of changes already. I probably don’t need the id + div’s right? I just created id’s to be able to move the text within the div’s, but that’s because my divs were screwed up.

6

I can’t move my name up or down now. http://codepen.io/ameuzela/pen/PWpPEe

7
8

I’ve cleaned it up quite a bit. Do you mind checking it for me again? http://codepen.io/ameuzela/pen/PWpPEe

9

Ok, that’s quite an improvement. We can still work on some things tho.

  1. Yeah, change those <div id="..."> tags to <sections>. It’s important not only because of readability - browsers actually render those elements a bit differently. And btw. you actually should give your sections id attribute, since you will need it for navigation.

  2. Remove <head> tag. Codepen actually puts that for you behind the covers. If you want to add <link> tags, you need to open settings > html > stuff for head.

  3. You use <h2> and <h3> tags, but you give them the same styling. Just use <h2> for each section’s title (i.e. “portfolio”, “about me” etc.)

  4. Check out your bear image. You shouldn’t use margins in such a way. Even if it works on your screen, it might look completely different on others and it will be just impossible to make your website responsive. The simplest way of achieving what you want there is to do the following steps:
    a) Remove margins from bearimage class
    b) Remove paddings from h1
    c) Add the following properties to your header element style:
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;

The above snippet sets your header element as a flex container, which makes positioning content incredibly easy. You can read more on flex in the Complete Guide to Flexbox. I strongly recommend you that one. Will make your life much easier.

Have fun coding :slight_smile:

1 Like
10

Wow thank you!! That works other than I can’t move my bear picture without moving my name to the right? I tried padding, but that doesn’t really work. I also read a bunch of articles about flexbox, but not sure how to do that?

11

Ok I changed the justify-content to “space-between”, and added some padding and that worked! http://codepen.io/ameuzela/pen/PWpPEe

12

Can I move the bearpaws exactly where I want them by using “first-child”?

13

You can also move your name and bear image horizontally by giving them right or left margins.

I don’t know about first child for positioning bearpaws. I’d say the simplest way to do it is by putting bearpaws image directly into body (so it’s direct parent is the body element) and setting it’s position to absolute.