By davecoventry on

I have tried to produce my page.tpl.php as follows:

	<div><!-- Masthead -->
	</div><!-- /Masthead -->
	<div><!-- Main -->
	- . - <div><!-- Left -->
	- . - </div><!-- /Left -->
	- . - <div><!-- Content -->
	- . - </div><!-- /Content -->
	- . - <div><!-- Right -->
	- . - </div><!-- /Right -->
	</div><!-- /Main -->
	<div><!-- Footer -->
	</div><!-- /Footer -->

But for some reason the Footer appears at the head of the page above everything else.

I'm completely foxed.

⋅ Categories: Drupal 6.x

Comments

dadderley’s picture

dadderley commented

Validate your html then use the Firfox Firebug extension to figure out the css.

davecoventry’s picture

davecoventry commented

My main id section in style.css is as follows.

#main {
	position: absolute;
	width: 100%;
	background: #0;
}

However, the background colour does not render as black.

And Firebug reports: 'No style information'

*scratches head*

Jeff Burnz’s picture

Jeff Burnz commented

1) absolutely positioned elements are out of the normal flow, so if you use them everywhere, you have to use them everywhere, there is no easy way to clear absolute positioned elements, so if the footer position is not specified (see 2) it will appear at the top because everything above it is out of the flow.

2) when you use position: absolute you must specify WHERE the boxes should be positioned using top, bottom, left, right and auto, such as

top: 100px;
left: 150px;

3) no such color as #0, its "#000" or "#000000" or "black"

4) do you have id="main" on the main wrapper div, its no in your markup example.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
davecoventry’s picture

davecoventry commented

> 1) absolutely positioned elements are out of the normal flow, so if you use them everywhere,
> you have to use them everywhere,

That's a bit of a bummer. I need to be quite precise about my graphic and the Masthead, but obviously the footer should lie where it falls.

> 2) when you use position: absolute you must specify WHERE the boxes should be positioned
> using top, bottom, left, right and auto, such as

>top: 100px;
>left: 150px;

Yes, I've used 'top' and 'left'.

> 3) no such color as #0, its "#000" or "#000000" or "black"

Oops.

> 4) do you have id="main" on the main wrapper div, its no in your markup example.

Yes, I should have put it in, but I was trying everything including

and

I have adjusted this by replacing it with

and adjusting the #main style but the container is still not black and Firebug continues to denounce it as having 'No style information'.

TBH this is starting to look like a complete overhaul of the theme and a rewrite of the style.css.

Jeff Burnz’s picture

Jeff Burnz commented

It'll be something simple like a typo in the stylesheet.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
davecoventry’s picture

davecoventry commented

I've gone through the style sheet and changed all references of position: absolute to position: relative. and this has, indeed painted the 'main' container black, as expected.

Oddly enough, now my Masthead is no longer stretching the whole width of the browser display area, and there are now some 12 pixels on each side. And, of course all the graphics are completely out of whack.

I must say I can't see any CSS reference that says you can't mix position: relative and position: absolute tags. In fact I seem to remember doing so with impunity previously.

dadderley’s picture

dadderley commented

This applies to nested elements.

If you give an element position relative. You can give elements in it position absolute. The absolutely positioned element's position is relative to the relatively positioned element that it is in (it's container).

Jeff Burnz’s picture

Jeff Burnz commented

Yeah, you can use them together no problem, its all in how you arrange it, I frequently use floats, relative, absolute and fixed positioning all in the same theme but I am careful how they are applied so everything works.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
davecoventry’s picture

davecoventry commented

I'll try and see if I can't use that to sort my theme out.

Can you tell me about <div class="clear-block"> </div>?

I've seen this used as a blank to (if I understand correctly) to reset the positioning, but I've also seen it used as a container. And I saw mention of it being used twice sequentially, supposedly to reset the Mac IE browser.

Jeff Burnz’s picture

Jeff Burnz commented

Its used to clear floats, more commonly known as the clearfix method. Google it, you'll end up on a site called positioniseverything where thy explain how it works to clear floats.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
davecoventry’s picture

davecoventry commented

In an effort to nail this thing down, I've set up 3 containers: #top-section, #mid-section, #foot-section, which I've set to position: static. Inside these containers I've positioned the different elements using position: absolute.

These three sections are defined thus:

#top-section, #mid-section, #floor-section {
&#09; position: static;
&#09; width: 100%;
&#09; padding: 0px;
}

The top-section is fine; that gets rendered at the top of the page.

The mid-section, however, also gets rendered at the top of the page, obscuring most of the top-section contents.

The foot-section is rendered halfway up the page and obscures much of the mid-section as well.

I would have expected the three sections to flow naturally down the page with the top-section at the top, the mid-section below it and the floor-section below that and I can't see why this is not happening.

:?

Jeff Burnz’s picture

Jeff Burnz commented

if you want them to render as per the flow then dont set any positioning, just let them flow.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
davecoventry’s picture

davecoventry commented

But it makes no difference.

I have been through the style sheet and removed everything I could possibly see which would affect this behaviour.

Something else, which I haven't mentioned, but which is a bit confusing;

The #mid-section container is set to width: 100%, #left-panel is set to width: 20%, #content is set to 58% and #right-panel is set to 22%, yet the page overflows the browser window by some 50%.

Also, the #mid-section container is set to background: #000000; yet the container does not render as black. Furthermore Firebug reports 'No style Information' when I click on the mid-container region.

I'm completely stumped.

cantthinkofanickname’s picture

cantthinkofanickname commented

Why don't you find a good validated strict template, download it, study it's structure and copy that for starters. Check that the template purports to render properly with IE6+, FFox, Opera. Do not use absolute to structure the basic areas. I use it to position bits inside the header when things get a bit complicated and normal ordering or floating don't work. That's my advice anyway. PS get hold of IETester to check all the browser conformances.

Jeff Burnz’s picture

Jeff Burnz commented

Right on dude, thats precisely what I use absolute and relative positioning for, just the tricky placement of elements when the normal flow of margins, paddings, line-heights etc gets too painful.

Stark offers a pretty basic layout method to start with, the same content source order as the OP. Genesis and Zen offer far more advanced layout methods and will probably melt your brain but they are worth studying. Then theres always this knarly resource http://layouts.ironmyers.com/

FYI, this is @ the OP, sorry cantthinkofanickname, I hit reply.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
davecoventry’s picture

davecoventry commented

Yes, I am, of course looking at existing themes and trying to figure how they work.

In the meantime, if I can get useful input here, that will obviously also help. ;)

davecoventry’s picture

davecoventry commented

The CSS is just too flaky.

I'm just going to use tables and nail everything down in it's correct place....

Jeff Burnz’s picture

Jeff Burnz commented

No its not, there are thousands of CSS layouts, you're just bent on reinventing a wheel thats been well honed... download a starter theme and just get on with it, sorry, but I have zero sympathy for you - there are around 20 great starter themes for Drupal that have already solved ALL the layout bugs and issues for you - Zen, Genesis, Framework, Stark, Clean, Basic, Layout Studio, Ninesixty, Blueprint, Bluetrip...

CSS layouts are not flaky, they are rock solid and far easier to work with than tables any day of the week.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.