Struggling to position things where I want them

1

I’ve been working on my portfolio for a few hours now and I’ve hardly gotten anything done. I’ve spent a lot of time reading forums, tutorials and Overstack for advice on positioning. The problem is, this part of my development is supposed to be a beneficial learning curve where I seek out information, implement it and mentally store it for future use, only, I’ve read so many different and conflicting bits of information and chopped and changed my CSS so many times trying to find what I was looking for, that now, I can’t even remember what I’ve done to arrive at this point.

I’m referring to the navbar that I’ve created which I want to stay centrally at the top of the page. I managed to get it central for a while but then when I positioned it fixed with z-index 1000 (so that it follows the page when you scroll down), it aligned left and no matter what I do it won’t go back in the centre.

Also, I’ve begun anchoring the navbar to the (h2) sections and the links work, except the navbar covers up the h2 header when I go there (at the moment this is only illustrated by clicking on ‘me’ in the navbar - it should go to the ‘about me’ section and it does, only the navbar covers up the ‘about me’ h2 header).

Any advice would be most welcome.

3

Many thanks, that does exactly what I needed to do with a simple instruction - you wouldn’t believe all the many varied things I tried in order to achieve that, all of which failed and yet you’ve made it look so simple. You’d have thought that nearly all the information out there would be offering the same advice and it’s this what makes coding difficult to learn - not the actual coding itself but finding the best resources and staying clear of the bad ones, which unfortunately at this stage, I’m unable to detect.

Anyway, that’s brilliant, the only thing is, I’m not sure I understand what you’ve done, left:0; & right: 0; and twice - what is it and why have you done it?

Also, I’m guessing the second left, right command has something to do with the positioning of the anchor when I click in the navbar, if I click on portfolio for example, it takes me there and I can see the portfolio h2 along with the portfolio section, however, if I click on ‘me’ the navbar still covers up the ‘about me’ h2.

4

Until you’ve had more experience with CSS I don’t recommend messing around with the bootstrap classes (especially when z-index is involved). The whole point of using a responsive framework is that it does all the heavy lifting for you.

Firstly get the Bootstrap 3 CDN urls and replace them in your pen (which inserts v4) - it has more examples and more easily searchable knowledge online.

Look at the examples to see the fixed navbar in action.

If you want the navbar padded on the sides you can wrap it in a “container” div.

If you want a different theme, check out http://bootswatch.com/, hit the download button and copy the CSS URL into your pen (be sure to place it below the bootstrap CSS url)

Good luck :thumbsup:

1 Like
5

Hi Wesley,

The only reason I added the z-index was because, I kept implementing one change at a time trying to create the navbar, then style it, then position it and once I’d done all that, I discovered that it stayed at the top of the page, so I read some more and found out that I needed to place the navbar in a fixed position but after I did this, it failed to cover the content, so more research was needed on my part and most of them suggested z-index was required in order to put the navbar on top of the content, specifically z-index: 1000; It just seemed like a straight forward option, was it the wrong thing to do?

I’ve just had a look at a couple of the links you provided and they seem extremely useful, so I will delve into them deeper when I get a chance. The only thing is, I’m undecided whether it’s best to use templates right now whilst learning to code or if it’s better to do it from scratch, completely my own design - despite my mediocre attempts, I’m not too sure.

Anyway, thanks for the advice, it’s much appreciated.

1 Like
6

Let’s clear up the misconception about css.

There are many components to CSS, but a lot of people just clump these components together and call them “styling”. Then present them all in one giant bundle expecting new comers to figure out what they meant. In your case, you went from tutorial to tutorial trying to find that “piece” that will fit everything together, and by the end of it, you forgot what you were researching at first. Happens to me too. LOL

If we go through each component’s category in CSS, we find that it is not all that confusing. For example: Quote from @rmdawson71

.navbar {
    position: fixed;
    top:0px;
    left: 0px;
    right: 0px;
    margin: 0 auto;

    z-index:1000;

    width: 75%;
    
    background-color: orange;
    border-radius: 10px;
}

CSS Positioning
position:fixed, tells the element to stay fixed even if the all the other element is scrolling. The position we have it to stay fix, is describe using top, left, and right.

Top:0px, meant that, start offsetting the element from the top of the viewport at 0px. So it stuck on the top. Left, right, bottom all does the same thing if it is presented by itself.

The confusing part starts when Left:0px and Right:0px are presented at the same time. Because logically, this does not make sense. It is like trying to look left and right at the same time.

What it did was it created an imaginary space between the left and right side of the viewport.
If we change right to right:1000px; The positioning would adjust accordingly between left and right. But we cannot get absolute center by setting fixed value to left and right.

We then use margin:0 auto; Which means to automatically and equally place a margin left and right side. Which gives you the centering.

CSS Layering
The z-index tells the order of element to be display. Were not talking about order as in placing them left and right, but more like layers in photoshop foreground and background. Placing higher value meant you are lifting the element forward while smaller values stay in the background.

Setting z-index to 1000 meant that this element is the most front element in the page.

CSS Element Layout
width:75% which is very straight forward, but it can be confusing depending on the context which it is used. 75% meant 75% of the viewport width.

If this percentage was used in another context, it meant 75% of the parent element. For instance

<div style="width:1000px">
   <div style="width:75%">
      The inner div is 750px wide
   </div>
<div>

CSS Styling
Lastly we got background-color and border-radius. Those are straight forward. They do exactly what they say they do. :smiley:

So now you have 4 different components of CSS working unison in one. Is not as simple as tutorial says it is, but it is at the same time.

Here is a codepen. http://codepen.io/Cowwy/pen/dvBjmZ

2 Likes
7

That’s nicey explained cowwy, thanks. I just have one question regarding the left;0, right:0; (command, function, value, attribute? …not sure what you call it). Is offsetting different to padding? I guess it must be but I can’t think why.

For experimental purposes, to help me understand better, I’m playing around with it a little and I’ve put left: 10; in the container css, then I added a zero and then I added another. What I found was the content, or the container was pushed to the right - actually off the page or viewpoint and a side scroll bar was added. Obviously, right: 10; etc. did the opposite. Interestingly though, when I put left: 10; under the h2 css and increased the zeros - nothing happened

8

They’re call property

Yes. Each element has internally “padding”, “margin”, and “border” each contribute to the size of the element.

Padding is the spacing between the content and the “walls” (bounding box) of the element.
Margin is the spacing between elements.
Border is right on the bounding box.
Offset only exist when a custom position is set. Like fixed, relative, or absolute.
Top, Left, Right, Bottom doesn’t work if position is not set.

You will have to add some codes to see what you’ve done.