Help with divs?

[erikadesigns]

I am having… so much trouble.

http://erikagibson.com/secares/

1) I want the border on .projectlabel to auto fit the content.
2) I want .projectlabel’s vertical placement to be decided by the bottom of .projectheader
3) When I add new the rest of the content to the page (keep in mind, all of this is through WordPress), how to I place it vertically (not z-index) below the header?
ETA: 4) Why is the footer doing that? :(

Thanks in advance :)

(edited to fix link)

[wahhabb]

Hi, Erika,

Great design on your website!

Your theme’s stylesheet has

.footer {
/* ... */
    height: 200px;
}

Which cuts off the middle text.

I don’t find anything in the source with class projectlabel or projectheader. Is this on the home page? Can you point me to it?

[erikadesigns]

Agh, so sorry. I’ll edit the link above, too.

http://erikagibson.com/secares/

[wahhabb]

Hmm. I’m not quite sure what you’re trying to do here. Depending on the width to height ration chosen, the image does things that seem unhelpful. But I’ll start by speaking to your questions.

1) Your border does autofit the content. You are using padding, which is the right way to go.
2) To do this, use the following on .projectlabel:

position:absolute;
left:0;
bottom:50%;

Of course, the bottom of projectheader is hidden (because of overflow:hidden) but anyway, that will tie .projectlabel to its parent wherever you specify.
3) When you specify height:85%; for .projectheader, that refers to 85% of the width of its container. That’s why it isn’t fitting. Also, because it is positioned absolutely, it is removed from normal flow. If you want the rest of the content to flow normally below it, use position:relative; (you need that so that .projectlabel can be positioned absolutely within it). You’ll need to fiddle with the various margins and padding, but that should give you what you need.

Hope that helps!

[erikadesigns]

.projectheader has to be absolute to overrule the div that it’s within, thanks to WordPress. .project header is, for the most part, fine. I’m annoyed that things are going on top of it instead of below it (that <hr> in the middle of the page signals the end of the content, which I want to be below the header, but I may just have to fiddle with divs for content, so, fine.

I don’t understand why, even with no content, the footer isn’t at the bottom of the page.

The “SECARES” box. Hah.
– I don’t understand what exactly the “bottom: 50%” is doing. I was fiddling and it happened to work for my desktop, However, when I play with browser widths, it seems to go places I don’t want it to go and I can’t figure out why.
– I want the border to be the same padding on all four sides. Right now I’m getting what I call for on the left and right, but the top and bottom are way different.
– I want the box to be in the middle of the browser.

Thanks again :) I’ve bitten off a bit more than I can chew, but I suppose that’s how you learn.

[wahhabb]

OK. You have lots of issues, and I can only help with a couple right now. Hopefully someone else will jump in. But here’s a bit.

The footer isn’t at the bottom of the page because the terms and conditions (which appear white on white) are too tall to fit in the 200 px high footer. Either drop that height on footer or else make that center column shorter.

the SECARES box: The top and bottom seem unequal because the text takes up the whole lineheight, which is 81px. Try setting line-height: 3vx; and then just adjust the top and bottom padding so it looks right.

When you say you want it in the middle of the browser, I’m not sure what you mean: centered both vertically and horizontally? Centered vertically in the viewport? Anyway, you can begin by looking here: https://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/ That’s probably not what you mean, but I won’t be available to follow up for a couple of days, and it might be a starting point.

[erikadesigns]

Honestly, this week is the busiest week of the year for me, so no worries. I’m about to go to bed, I probably won’t get to try this until tomorrow night after work.

Centered horizontally, then I want to be able to control where it is vertically in comparison to the .projectheader (ie I want to bottom of the .project label to be 3vh above the bottom of the .project header. Just an example). Basically, no matter the browser size, I want the .project label to be vertically centered and a bit above the bottom of the .projectlabel

Thanks so much for the help – hopefully I can work on it tomorrow, and I’ll report back then :)

[erikadesigns]

Ugh. I gave up on using text and decided to go with an image.

http://erikagibson.com/secares/

Like earlier, I want the top div (.projectlabel) to be towards the very bottom of .projectheader. I want this to work even at smaller screen sizes, etc. I also want the content (there’s a repeating line of “content starts here” to begin below the end of .projectheader

I am very stuck :(

Any help would be greatly appreciated!

[Mikko Laine]

I have a flu or something and my brain doesn’t really work at the moment…

div that has the image (position relative) and header (absolute, bottom something like 100px)
then another div which contains the content and negative margintop 100px so it should start right where that header thing ends? (on top of the image)

is that what you want?

[wahhabb]

Continuing to deal with things one by one: the reason your content doesn’t show up under the image is that .projectheader has position:absolute; That removes it from normal flow. You either need to return it to normal flow by using a different type of positioning, OR insert a dummy element in normal flow with the same height as .projectheader and no visible content (an ugly solution), OR have the entire rest of the page enclosed in a div with position:relative and top: equal to the height of .projectheader. Any of these will make the rest of the page appear below .projectheader, which is what yo want.

Make that fix, and I’ll come back to deal with the SECARES label.

[erikadesigns]

@wahhabb – I think I did that correctly, but nothing changed? Let me know if I did something dumb. I had to pick option two – unless there’s something I don’t know about, position: absolute was the only way to get the width to 100% of the browser. Since it’s WP, it’s already encased in other divs, etc that were dictating size.

Mikko, I hope you feel better :) Also, I kinda completely missed what you were going for. *hands cup of tea

[wahhabb]

Hi, Erika,
position:absolute has nothing to do with getting the width to 100% of the browser, unless you are trying to make it go outside of margins that the rest of the page is obeying (is that what you are doing?) Please try using position:relative along with top:0 and left:0. That will allow you to do absolute positioning on the .projectlabel.

To set the width of the image, use the following:

.projectheader img {
  width:100%;
  height:auto;
}

I’ll create a pen if I can find time, but if you make these two simple changes, you should be moving towards a workable page.

You’ll find a chunk of blank space below the image. We can deal with that next, and start fixing .projectlabel.

Good luck!

[erikadesigns]

That is what I’m doing. If I set it to relative and 100%, it will go to 1200 px at most.

Do you want me to change it anyways so you can see it?

[wahhabb]

No, let’s try to fix it by option two, as you started to. Here’s what you need to do:

First, change the height on div.projectheader. As I mentioned, using percentages there refers to percentages of the WIDTH of the container, which is not useful.

For the moment, you can use a fixed height: say, 400px. then change the following:

div.projectcontent {
    margin-top: 200px;
}

That won’t work at all widths, but it gives us a starting point for conversation.

What are you trying to do with the height of the image? Do you want the entire image to show, filling the width of the screen, with content immediately following?

Meanwhile, I’ll work on my pen (and really, you should do that) so we have a simpler set of code that we both can work on.

[wahhabb]

OK–I have built a pen. It has lots of problems, but we can work together and sort them out. It’s at http://codepen.io/anon/pen/kuIBG. To make it easier to see the issues, I have set max-width down to 800px.

I don’t have your image full width. That’s the first thing to talk about. What you really want to do here is to have the image not be part of the page, but be part of the header. Then all the problems with it would go away. The challenge you have is to do this in WordPress, right?

The right way to do this is to create a local version of header.php and have it check for your page and display the file in that case. I’ve lost my Internet connection, but if you google things like “wordpress different header specific page” you can find instructions on how to do this.

Let me know how you’d like to move forward.

[Author]

Posts