Issues with Margin-top

[hikaru12]

I’m using bootstrap and the default container sets the div to a fixed width which is what I like. I try to avoid full width pages if I can avoid it for things other than portfolios.

Here’s my code: CodePen
How can I make it so that the image sits on top of the div for content? Thanks.

[Paulie_D]

I guess I’m not sure what it is you want…especially since you haven’t actually provided the actual image in the code.

Could you provide some idea of what this is supposed to look like.

I think I might know (based on your early points) but I’d like to make sure.

[hikaru12]

I’m just looking to move the image in the header down to where the first larger container is without moving the entire page down like so:

So that it looks like this:

[Paulie_D]

Well I’m not seeing anything in Codepen

Can you reproduce the error there?

I would point out that your HTML is a little off. You’re closing a div in the middle of the header.

Also, you have a menu in your Codepen but not in the image you provided…whatsup with that!? :)

You might want to look at that first… Validate

[hikaru12]

Didn’t want to bombard you with the whole code :p but here it is:

CodePen

[Paulie_D]

I’m on a mobile device right now but you still have the same HTML issue. I suspect that a lot of this is due to malformed code,

Validate

[hikaru12]

Have fixed all validation issues and it validates correctly as HTML5. Margin top still brings the whole thing down even though the style is applied only to the image element.

New CodePen

[hikaru12]

We’re getting there. The float right prevents the break to a new line for the header image but now the navigation becomes all messed up and goes to the top of the screen. When I set the width to 100% it messes up the responsiveness.

Example

[Paulie_D]

Flexbox FTW

http://codepen.io/Paulie-D/pen/aOqGxZ

[ElijahFowler]

Hey guys,

I came up with something reflects bootstrap a little more, supplemented with flexbox because flexbox rocks at making things easier.

http://codepen.io/ElijahFowler/pen/jPZxJR

[hikaru12]

@Paulie_D: Looks great! Only issue is by adding the flexbox it disabled my hover animation which create the bounce effect and told the user which button was what. Any ideas?

@ElijahFowler: That looks great! Any way to get the hover effect back though? Or supplement it with something else so users know what they’re clicking on?

[ElijahFowler]

@hikaru12: So the hover effects weren’t showing up because the ul had overflow: hidden; on it. I removed it and added clearfix to it instead in my pen and it seems to be fixed in the desktop breakpoints, but something else will have to be done for mobile.

[hikaru12]

@ElijahFowler: Just adjusted the margins and they look fine.
top: 8px;
right: 320px;

[Author]

Posts