- This topic is empty.
July 1, 2015 at 9:21 pm #204483
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.July 1, 2015 at 11:36 pm #204484
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.July 2, 2015 at 5:20 am #204490
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:
July 2, 2015 at 6:10 am #204491
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
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… ValidateJuly 2, 2015 at 6:52 am #204494July 2, 2015 at 8:07 am #204498
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,
ValidateJuly 2, 2015 at 8:24 am #204500
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.July 2, 2015 at 11:02 am #204509
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.July 2, 2015 at 11:54 am #204513July 2, 2015 at 12:21 pm #204515ElijahFowlerParticipant
I came up with something reflects bootstrap a little more, supplemented with flexbox because flexbox rocks at making things easier.July 2, 2015 at 12:27 pm #204516
@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?July 2, 2015 at 12:34 pm #204517ElijahFowlerParticipant
@hikaru12: So the hover effects weren’t showing up because the
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.July 2, 2015 at 12:45 pm #204519
- The forum ‘CSS’ is closed to new topics and replies.