• From: New Zealand
  • Registered: January 11, 2009
  • Posts: 2

Topic: CSS Template Positioning Problem

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

Vote up Vote down

  • Gender: Female
  • From: San Antonio, TX
  • Registered: December 19, 2008
  • Posts: 3,893
  • Reputation: 5

Re: CSS Template Positioning Problem

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.

Just because my computer is online does not mean that I am.
a&b WebDesign

Vote up Vote down

  • From: Salisbury UK
  • Registered: December 20, 2008
  • Posts: 1,331

Re: CSS Template Positioning Problem

Thelma is right, it was a mess but I've edited quite a lot here:-
http://www.wickham43.com/forumposts/tho … 90112.html
and in the css file
http://www.wickham43.com/forumposts/tho … 090112.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.

Last edited by Wickham (January 12, 2009 8:43 am)

Vote up Vote down

  • From: New Zealand
  • Registered: January 11, 2009
  • Posts: 2

Re: CSS Template Positioning Problem

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

Vote up Vote down