19 replies [Last post]
JVRudnick
JVRudnick's picture
Offline
Enthusiast
Last seen: 9 years 13 weeks ago
Timezone: GMT-4
Joined: 2004-09-22
Posts: 80
Points: 13

My problem is, that a client insisted that I use a template their previous programmer created. In it, on the left hand side, is a

that holds navigation buttons sometimes, news items others etc. The main content of each page varys in length, which should mean that that left hand side-bar should 'stretch' to accompany the varying page length. But it doesn't do it on it's own, and I'm not enuff of a CSS pro to understand what I can do to get it to 'stretch' automatically. Oh, right now, all I do to stretch the background image (a gray gradient bar) is to place a SPACER to be width=1 height=XX where the XX matches the length of the main content page. Stupid, I know...but it works -- tho I must hand code every single page and that's the problem.

Here's the CSS that I inherited --

p {padding:12px}

.img {margin-right:14px}

body {
background-color:#ffffff;
color:#878777;
font-family: tahoma;
font-size:11px;
padding:0;
margin:0;
line-height:14px;
text-align: center;
}
#wrap {
margin:0 auto;
padding:0;
width:776px;
}

#top {margin:0px auto 0px auto;
width:776px;
height:214px;
text-align:left;
display:table;
background-image:url(images/top_bgExample.jpg);
font-family:tahoma;
color:#404040;
background-position:top left;
padding:0px;
}
.top {color:#616161; text-decoration:none}

.select {width:179px;
height:21px;
font-family:tahoma;
font-size:11px}

#content {
width:776px;
margin:0;
padding:0;
background:url(images/px.jpg) repeat-y top;
text-align:left;
display:table;}

#content_left {
width:256px;
text-align:left;
padding:0;
margin:0;
float:left;}

#content_right {
width:520px;
text-align:left;
margin:0;
padding:0;
float:right;}

#footer {
width:776px;
height:88px;
margin:0px auto 0px auto;
padding:18px 0px 10px 60px;
text-align:left;
background:url(images/bottom.jpg) no-repeat;
display:table;
clear:both;
}

#left_bg {
margin:0px 0px 0px 38px;
padding:0;
width:218px;
background:url(images/left_px.jpg) top repeat-x #DFDFDF;
text-align:left;
display:table;}

#left_bg1 {
margin:0px 0px 0px 47px;
padding:0;
width:665px;
text-align:left;
display:table;}

#inner_right {
width:431px;
margin:17px 15px 5px 16px;
display:table;
padding:0;}

#margin_left {
margin-left:17px;
margin-right:10px}

.menu{color: #FFFFFF;
font-size: 12;
font-weight: normal;}

.line {background-color:#CBCBCB;
height:1px;}

#box_left {
margin-left:13px;
margin-top:21px;
width:180px;
color:#434343;
display:table;}

#inner {
padding:0px;
margin:0px;
width:431px}

#inner_left {
margin:0px;
padding:0px;
width:280px;
background:url(images/gray_dot.jpg) right repeat-y;
float:left;
color:#616161;}

#inner_left4 {
margin:0px;
padding:0px;
width:105px;
float:left;
color:#616161;}

#inner_left3 {
margin:0px;
padding:0px;
width:220px;
float:left;
color:#616161;}

#inner_left1 {
margin:0px;
padding:0px;
width:260px;
background:url(images/gray_dot.jpg) right repeat-y;
float:left;
color:#616161;}

#inner_left2 {
margin:0px;
padding:0px;
width:230px;
background:url(images/gray_dot.jpg) right repeat-y;
float:left;
color:#616161;}

#inner_right1 {
margin:0px 0px 0px 14px;
padding:0px;
width:131px;
float:right;
color:#616161;}

#inner_right4 {
margin:0px 0px 0px 10px;
padding:0px;
width:303px;
float:right;
color:#616161;}

#inner_right2 {
margin:0px 0px 0px 14px;
padding:0px;
width:151px;
float:right;
color:#616161;}

#inner_right3 {
margin:0px 0px 0px 0px;
padding:0px;
width:190px;
float:right;
color:#616161;}

.blue{color:#002361; text-decoration:none}
.white{color:white; text-decoration:none}
.big {font-size:12px}
.bigger {font-size:13px}

#box_newsletter {
margin-left:0;
padding:0;
width:218px;
height:149px;
background:url(images/px_newsl.jpg) repeat-x top #EDEDED;
color:#434343;
display:table;}

.form_sub{
width:166px;
height:21px;
font:tahoma 11px;
}

#box_in_news {
width:166px;
margin-left:23px;
margin-top:17px;
margin-bottom:15px}

#line {
width:192px;
height:1px;
background-color:#C2C0B2;}

.copy {
color:#9D9D9D;
font-family:tahoma;
font-size:11px;
text-decoration:none;
}

#serv_left {
width:195px;
margin:0px 0px 0px 10px;
padding:0px;
float:left;}

#serv_right {
width:195px;
margin:0px 0px 0px 10px;
padding:0px;
float:right;}

#clear {
clear:both}
.bot_txt {color:#404040; text-decoration:none}
.green {color:#44920C; text-decoration:none}
.gray {color:#9F9F91; text-decoration:none}
.gray_d {color:#434343; text-decoration:none}
.gray_l {color:#616161; text-decoration:none}
a {
text-decoration: underline;
font-family:tahoma;
color:#616161;
}

.form { width:303px;
height:21px;
font-family:tahoma;
font-size:11px;
border-style:;
border-width:;
border-color:#;
background-color:;
color:#000000;
margin-left:0px;
margin-right:0px}

.textarea{ width:303px;
height:175px;
font-family:tahoma;
font-size:11px;
border-style:;
border-width:;
border-color:;
background-color:;
color:#000000;
overflow:auto;
margin-left:0px;
margin-right:0px}

.u {text-decoration:underline}

a:hover{text-decoration:underline;}
#a:hover{text-decoration:none;}

and here's that template --

Title


/*Current date script
*/
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
document.write(""+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+"")

home

|

email us


XXX

XXX

XXX

XXX

XXX







  Text Links Here


 Text Link #1
Link tag line here... 

 Text Link #2
Link tag line here... 

 Text Link #3
Link tag line here... 

 Text Link #4
Link tag line here... 

 More Links

 

Content Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi.


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi.


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi.


I really hope I've followed the guidelines here to place both the CSS and the HTML files in the code blocks...

Can someone help me here and show me what I need to do to fix this error?

Jim

Jim Rudnick
KKT INTERACTIVE
www.kkti.com

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 22 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

1) You need a doctype. 2)

1) You need a doctype.
2) get rid of all those spacers
3) faux columns.

Verschwindende wrote:
  • CSS doesn't make pies

JVRudnick
JVRudnick's picture
Offline
Enthusiast
Last seen: 9 years 13 weeks ago
Timezone: GMT-4
Joined: 2004-09-22
Posts: 80
Points: 13

sorry, I don't follow?

1]. a doctype? ie up in the line? CSS runs only with a doctype?

2]. spacers are how I "space" items. I've yet to find out how to use CSS to do that.

3]. "faux columns" -- sorry, beyond me.

I take it then that there may be NO way to control this background via CSS without some/all of the above. Do I have that right?

?

Jim

Jim Rudnick
KKT INTERACTIVE
www.kkti.com

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 22 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Not at all. I'm surprised

Not at all. I'm surprised that in the three years you've been here you haven't noticed my "doctypes are important" topic?

JVRudnick wrote:
1]. a doctype? ie up in the <html> line? CSS runs only with a doctype?

it runs properly with a doctype.

Quote:
2]. spacers are how I "space" items. I've yet to find out how to use CSS to do that.

Use margins.

Quote:
3]. "faux columns" -- sorry, beyond me.

Did you even look them up?

Verschwindende wrote:
  • CSS doesn't make pies

JVRudnick
JVRudnick's picture
Offline
Enthusiast
Last seen: 9 years 13 weeks ago
Timezone: GMT-4
Joined: 2004-09-22
Posts: 80
Points: 13

Hmm...okay, I'll try the faux thingy

I suppose a large part of running a forum is that the same questions get asked over and over and must become to MODs a real bore. I'm sorry that my own issue has most likely been dealt with here before, tho a search on my issue got me relatively few, somewhat similar but not on point answers.

It appears after a quick look at the faux columns page on A List Apart, I have my answer (famous last words)...so I'll give that a try.

Concerning doctype - a quick search of Google revealed that there are so many of them out there, and so many are quirky, that there is NO single one to use. Do I have that right? If not, then please just list the URL that can help me learn more.

And concerning spacers - I find NOTHING to indicate what to do instead as the word "margin" is a control for a content box only...it can't position images...right?

Which gets me back to my initial point...sorry to have gone over already-trod-upon territory....

Sad

Jim

Jim Rudnick
KKT INTERACTIVE
www.kkti.com

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 22 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

JVRudnick wrote:I suppose a

JVRudnick wrote:
I suppose a large part of running a forum is that the same questions get asked over and over and must become to MODs a real bore. I'm sorry that my own issue has most likely been dealt with here before, tho a search on my issue got me relatively few, somewhat similar but not on point answers.

Please don't apologise, it's not your fault Laughing out loud Mods don't run the forum, that's the job of the forum administrator. Mods just volunteer to look after it Wink

Quote:
It appears after a quick look at the faux columns page on A List Apart, I have my answer (famous last words)...so I'll give that a try.

Excellent, I was hoping you'd find the ALA article.

Quote:
Concerning doctype - a quick search of Google revealed that there are so many of them out there, and so many are quirky, that there is NO single one to use. Do I have that right? If not, then please just list the URL that can help me learn more.

Have a look at the "Doctypes are important" post at the top of each sub-forum.

I'd suggest Html 4.01 Strict, a complete DTD with the url Wink

Quote:
And concerning spacers - I find NOTHING to indicate what to do instead as the word "margin" is a control for a content box only...it can't position images...right?

Nope, anything can have a margin Wink

Verschwindende wrote:
  • CSS doesn't make pies

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 27 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

We have no problem answering

We have no problem answering the same issues, as long as the asker is willing to do some of their own research.

ALA is a good source for many topics, book mark it.

Use a strict doctype such as HTML 4.01 Strict or XHTML 1.0 Strict.

margin helps define the space around elements, such as div, img, or anything else really.

//EDIT: Damn you TPH, c*ck blocked again!! :mad:

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Jim it's not so much that

Jim it's not so much that questions get repeatedly asked, but it is slightly odd when they get repeated by the same person Wink
http://csscreator.com/node/23061

Clearly the question of DTDs is not a fresh one?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

JVRudnick
JVRudnick's picture
Offline
Enthusiast
Last seen: 9 years 13 weeks ago
Timezone: GMT-4
Joined: 2004-09-22
Posts: 80
Points: 13

Clearly, I'm no CSS guy - at least so far?

Hey lads..

Okay, first the doctype situation and your reference to an older thread by me back in July. I DID change that var in EditPlus2 - and for the past 3 builds, everything has been fine, ie the strict doctype appears on each new page (html or asp) that I build, so so far so good.

However, as this was a legacy template, I was scared of trying to change anything - but I do realize now that the simple addition of a doctype line of code will probably make things "run" better on the html page...so I did add it and the template page shows exactly the same. ie it made no change to the layouts which I think was to be expected.

Next, to the 'faux columns' idea as per your help guys. I read carefully the text on applying that single line of code to the CSS page. I didn't quite follow tho to be honest, as the issue on the ALA page seems to talk ONLY about the addition of that line of code to the BODY area. And that's not my own issue, as I need the stretching to occur in a DIV area only. However, I did try to copy and paste that line inside my DIV area - and it does nothing (yes, I did use my own image to replace the one in the line of code)....

Hmm...okay, then maybe this 'fix' is only going to work in the BODY area CSS wise - which I then tried and yup, it works fine.

So my thinking is now, that this 'fix' only works in a BODY tag?

how'm I doing so far? I'm pretty sure I'm wrong actually, and that there will be an answer, but a google for 'faux columns' returns more'n 800k of hits, and I did wade thru the first 3 pages and ALL are about BODY CSS manipulations. Not a one talks about DIV areas only...

Anyone here care to offer the next place I look? Or, am I totally missing the point here?

Jim

Jim Rudnick
KKT INTERACTIVE
www.kkti.com

JVRudnick
JVRudnick's picture
Offline
Enthusiast
Last seen: 9 years 13 weeks ago
Timezone: GMT-4
Joined: 2004-09-22
Posts: 80
Points: 13

<grin> got it!

the much simpler answer it appears is just to use javascript. I filtered my google and found this site - http://www.killersites.com/blog/2006/matching-div-heigths/ - where I was able to watch a flash tutorial on how to use javascript to do the same thing as the faux column idea - but it works for DIVs.

did that. took 7 minutes to watch, 5 minutes to try it on my template and just changed over all the site pages so now the DIV areas always are the same length.

cool!

course, won't help my CSS knowledge any....

Sad

Jim

Jim Rudnick
KKT INTERACTIVE
www.kkti.com

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 7 years 24 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

Hi, well its good that you

Hi,
well its good that you got a js to do what you want to. put remember that many people have javascript disabled on their browsers, thus there is no use of the javascript and the problem remains...

SO try to stick to faux, if possible.

mihir Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 22 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

nooooooooooooooooo

nooooooooooooooooo nonononono, you don't want or need to use CSS for this.

The ALA article talks about adding the background image to the BODY tag, but you can add it to whatever containing element you're using.

Show us your site and I'll show you where to put it Wink

Verschwindende wrote:
  • CSS doesn't make pies

JVRudnick
JVRudnick's picture
Offline
Enthusiast
Last seen: 9 years 13 weeks ago
Timezone: GMT-4
Joined: 2004-09-22
Posts: 80
Points: 13

Here's the test site for the matching cols problem I face!

Hello pine...

Go to -- http://www.kkt-testserver.com/Lions/index.html

You will see a simple html page, that I am trying to get this javascript to work on - and it's failing twice.

Once, in that the left hand side gold background

is NOT matching the main white backgrounded content column.

Nor, will the black 1px border in the

stretching out to "hold" all the content no matter how big to put that black border around the whole page.

could you help here? I'm beyond my CSS or javascript skillset....

?

Jim

Jim Rudnick
KKT INTERACTIVE
www.kkti.com

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Jim sorry but I don't

Jim sorry but I don't consider you a newbie, and therefore not going to be overly polite here Smile

The code and CSS isn't worth a ......

What on earth are you doing with all those position absolutes?????

The markup itself is close to junk full of font tags :? spacer gifs :mad: inline styling and a number of other horrors.

Please use this simple and very basic revision to your markup and styles it represents simple and straightforward floated two column approach and which is the bedrock of many layouts and very simple to achieve; all the crud and junk has been removed and basic embedded styles added.

You will use a faux column approach, again it's extremely simple to do; make a gif a few pixels high and the width of your sidebar you then place that as a background to the container div and tell it to repeat on the y-axis that will then give you a backdrop that is a s long as the longest element in #container, dead simple Wink



Aldershot Lions Club



/**/








  • what we do


  • member benefits

  • lions club international


  • members



  • Our Objectives


  • Our Meetings


  • Calendar of
    Events


  • Executive Board


  • Contact Us





  • For over 50 years the Aldershot Lions Club has been a proud serving
    member of the world�s largest service club Lions Clubs International.
    With nearly 1.35 million men and women in over 200 countries and
    geographical areas around the world, the Lions Club is making a
    difference in local communities.



    The Aldershot Lions Club is a growing service club that is dynamic,
    social and attracts many members of different backgrounds. We invite
    you to find out more about us, and our official motto We Serve.




    Apologies for the brutality of the remarks! Smile

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    JVRudnick
    JVRudnick's picture
    Offline
    Enthusiast
    Last seen: 9 years 13 weeks ago
    Timezone: GMT-4
    Joined: 2004-09-22
    Posts: 80
    Points: 13

    "brutality" notwithstanding....but...

    thanks. I copied over same and saved as UNICODE...and it shows.

    but there are no images in the code, no background colors nada...

    I am sure that I copied and pasted correctly, but doing that on this forum got me only a single line of text..which I then had to format so I could read it. Dont know why it's not getting the proper images where they should be"

    And I'm learning here, cause I can add a background color to the various items -- BUT -- the sidebar will NOT stretch out to match the content area....

    ???

    did I do something "else" wrong?

    And here's that new page on the test site - http://www.kkt-testserver.com/Lions/templateMaster.html
    Jim

    Jim Rudnick
    KKT INTERACTIVE
    www.kkti.com

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 7 years 2 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    Ah well amongst the many

    Ah well amongst the many errors was omission of a character encoding dec. Paste:

    or a utf-8 if you prefer.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    JVRudnick
    JVRudnick's picture
    Offline
    Enthusiast
    Last seen: 9 years 13 weeks ago
    Timezone: GMT-4
    Joined: 2004-09-22
    Posts: 80
    Points: 13

    Whew...css is tough..but I am learning...

    working on my template, and as you can see, I've got some of the work done.

    thing is, if you look at the source, you'll note that I so far can only use a SPACER to drive over text etc. there is another way, using I think padding or margins or ? my problem area is the

    oh, and as you can also see, my cols STILL do not line up...what am I doing wrong there? I did make a 2px high background image for my

    ?

    Jim

    Jim Rudnick
    KKT INTERACTIVE
    www.kkti.com

    Katie
    Katie's picture
    Offline
    Enthusiast
    Seattle, WA
    Last seen: 6 years 11 weeks ago
    Seattle, WA
    Timezone: GMT-8
    Joined: 2006-08-06
    Posts: 357
    Points: 2

    Yes, both padding and

    Yes, both padding and margins can be used to move text over. Padding is space inside the border of that element that carries over the background color of the element, while margins are transparent and outside the border.

    In your nav2 ul, instead of this:

  • Our Objectives

  •  

  • Our Meetings

  •  

  • Try this:

    ul #nav2 li a
    { padding: 1em;}

  • Our Objectives
  • Our Meetings
  • Also, I think you'll need to pull the h3 out of the ul (and add a doctype) to get http://www.kkt-testserver.com/Lions/templateMaster.html to validate. Just add style declarations to the lis to get them to look like the H3s.

    Regarding the orange box background, I think you want the background-image: url(images/sidebarBackColor.gif); specification on your #container div, not your #sidebar div. That's the 'faux' of the faux columns approach - that the background exists on the element underneath the sidebar.

    Yup. CSS is tough to learn. But it's a vital skill for web professionals to be able to provide quality flexible sites for their clients.

    Blog: Pew Pew Laser Blog
    Online File Storage: DropBox
    Daily Deals on Local Activities: Groupon

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 7 years 2 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    Jim why having given you a

    Jim why having given you a basic cleaned up template have you gone and put spacer gifs in? please get rid of them it's simply not how things are done, period!

    Why also have you started to position things absolute again?

    You have two choices for the main hori nav it must flow in the markup it therefore doesn't need any positioning if it must be part of the blue band at the bottom of the header graphic then you could give the ul#nav1 a negative top margin; better though would be to edit the graphic and remove the blue band altogether , and instead use the ul#nav1 that is spaning the full width below the header to create that blue band via a background color.

    Faux column: if you look back at my earlier post you will notice I said to place the background on the #container! why is it on the #sidebar? Smile

    #container's height is dictated by whatever child element is the longest therefore placing a background on this #container element will mean it's always the length you require, forget the actual sidebar height, this effect is an illusion, even if the sidebar were only 100px high but the #content were 400px the height of the #container would be 400px with the graphic repeating to whatever height(400px) the #container happens to be you will have the illusion that the sidebar is running from top to bottom, it's the graphic that represents the sidebar height, the actual sidebar height is irrelevant . The graphic is used thusly:

    #container { margin: 0 auto; /*This is the proper way to center an element*/ width: 775px; border: 1px solid black; text-align: left; /*corrects for IE hack*/ padding: 0 ; background: url(images/sidebarBackColor.gif) repeat-y; }

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    JVRudnick
    JVRudnick's picture
    Offline
    Enthusiast
    Last seen: 9 years 13 weeks ago
    Timezone: GMT-4
    Joined: 2004-09-22
    Posts: 80
    Points: 13

    Hm...okay, the background I fixed (thanks) but the nav1 ?

    Thanks all...

    Re: spacer gifs -- how else can I put the HOME and EMAIL icon buttons on the far right hand side and on TOP of the image held in the header area? I tried what little else I know of CSS to move them to that exact spot...and all failed? spacer.gifs may be a "fudge" but they work...hence my use of same. No defence I know, but what else is there to position an image EXACTLY where it's needed?

    Re: column backgrounds -- I now understand how these faux cols work, and the background is fine! thanks for that!

    But the nav1 horizontal text buttons I do not seem to be able to move "up" on top of that blue bar.

    And now that I've removed that position: absolute tag from nav1 it's dropped the whole rest of the content in both the left hand side col and the content col down too low...

    I am trying to use margin-top: -50px; or some such variant to "move" that text line but I can't get it to budge. What am I doing wrong - now?

    Jim

    Jim Rudnick
    KKT INTERACTIVE
    www.kkti.com