CSS Template Positioning Problem

[Thornapple]

Boo

 

Hi I'm building a new site in php & css. Im new to php yet seems fine so far. CSS I have had a little experience with due to my other site yet I would still class myself as a eager learner.

You can view the test site as it currently is at -

ww w.dark asylum.org/site/template.php

 

Im just making up the template for the site. Its spilt into a few separate php files-

*Header/Top Nav

*Content

*Right Nav

*Footer

 

All is going fine yet I have came across a wee stumbling block.

There is a grungy flame bar that runs under the top nav and then again above the footer - framing the content. Im wanting to move these two bars- top one down say 18px and bottom up say 18px so it overlaps/layers over the content box and rightnav.

 

Can't seem to figure it out after much time trying a few things and a bunch of choice words spoken.... the computer hasn't had flying lessons(yet) but im a little frustrated knowing it's something simple and seeing I have positioned things over the top of others in the past.

Once done the image will be converted to black but this shouldnt really matter I guess...

 

As you can tell by looking at the site im still in the first building stages - getting the template set before we start to move on from there.

 

Sooo I have been looking around for a forum to ask on that's supportive and helpful. This forum seems a great place with many queries answered.

 

You can check out my style sheet here - w ww.darkasylum .org/site/style.css

 

Here is a quick pic of what im aiming at. Ok the flame bars have been changed to black from white but you should get the idea.

 

ww w.darka sylum.org/img/darkasylum.jpg

 

Notice how the two flame bars are layered ontop of the main contents box & right nav.

 

Im sure its just some basic postioning problem...

 

Oh any pink along with all font colours etc will be changed - just there as I potter away on the template.

 

Is it a z-index thing I have to do? I did try that yet I havent used it before and may of did it wrong

 

Please ANY questions or if you need any part of my code just let me know.

I desperately need to get this project rolling as I'm now way behind and have articles etc coming in.

 

 

Help me Obi-Won kenobi your our only hope! (let's put your name there not Obi-Wons!)

 

 

Thanks so much.

 

Warmest Wishes

Alex

[Andrea]

Before you worry about positioning flame bars, you need to fix your code - you have a mess in your header sections - duplicate doctypes, titles, etc. Use HTML 4.01 strict doctype and make sure everything validates.

 

I'm guessing some of your includes also have header info in them, so of course things show up repeatedly.

[Wickham]

Thelma is right, it was a mess but I've edited quite a lot here:-

http://www.wickham43.com/forumposts/thornappletemplate090112.html

and in the css file

http://www.wickham43.com/forumposts/thornapplestyle090112.css

 

I added to the stylesheet style.css negative top or bottom sizes and position:

relative to move the navbars closer to the content.

 

Your doctype is incomplete and you have duplicated several bits of the

head section.

 

Some tags like param and meta do not have /> closing tags in HTML,

just > without /

 

I moved the #topnav closing tag, added alt="" to images, saved the file as html but encoding as ANSI not utf-8 as this raises a Byte-Order Mark warning.

 

It now validates.

 

Edit: I created new border images nav-bg-black.png and nav-bottom-border-black.png by changing the originals to negative and saving them as png again with transparency as they had white backgrounds before.

Edited January 12, 2009 by Wickham

[Thornapple]

Boo

 

You rock! \m/(._.)\m/

 

Will go and have a wee tinker now.

 

Will also go over the Html & css tutorials on your site to.

As you can tell I still have a ways to go.

 

Out of the four or so places I have came for advice this is by far the best and most supportive of any place.

 

Thank you again!

 

Warmest Wishes

Alex