27 replies [Last post]
Kehfera
Offline
Regular
Virginia
Last seen: 13 years 14 weeks ago
Virginia
Timezone: GMT-5
Joined: 2007-02-28
Posts: 27
Points: 0

I have a header that I want to remove from tables. I just can't seem to get it to work. Here is the html code (css below).


 


 

The table will not pass 508A compliance. I want it to look like it does at this location:

http://new.biav.net/index.html

This header is composed of three graphics. This is the CSS code for the html code above.

#topleft{ margin:auto; background: url(../images/titlebar1.png) top repeat-x; height:152px; }

#topcenter{
margin:auto;
background: url(../images/titlebar2.png) top center no-repeat;
height:152px;
}

#topright{
margin:auto;
background: url(../images/titlebar3.png) top repeat-x;
height:152px;
}

ANY IDEAS?!

Cheers,
Kehf

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 33 weeks 1 day ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

There's absolutely no reason

There's absolutely no reason for a table there. A single H1 element will do the job nicely. Style the text to look as you want it and put the graphic background in via CSS, positioning it where you like. A table for that is just massive overkill, especially as you've avoided tables for layout on the rest of the page.

However you must get your html valid. CSS doesn't work properly without valid html and you have 13 errors there.

Also, you should be using a strict DTD for a new page, not transitional.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Kehfera
Offline
Regular
Virginia
Last seen: 13 years 14 weeks ago
Virginia
Timezone: GMT-5
Joined: 2007-02-28
Posts: 27
Points: 0

Fixed html errors but Image placement still an issue.

I understood my errors but needed to get the header corrected before moving to my corrections - it was just to show what was intended. I have fixed the errors but now I am not sure that what I want to do is possible.

There are three images in the header (you can see them now). The one on the left needs to meet the centered image then it finishes with the third image. The left and right need to expand with the page. I used floating images but they will not lign up. I also attempted unordered lists for this and neither worked. I am at an empass...

Here is the image that I would like to see...

Any clues yet? Is this possible?

Cheers,
Kehf

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 33 weeks 1 day ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Kehfera wrote:I understood

Kehfera wrote:
I understood my errors but needed to get the header corrected before moving to my corrections - it was just to show what was intended.

No, that's entirely backward. You must get your html and CSS syntactically correct before you try to debug any problem. CSS is designed to work with valid html or xhtml, and if you don't give a browser that you have no cause for complaint about any browser rendering it any way.

Quote:
I have fixed the errors but now I am not sure that what I want to do is possible.

It's perfectly possible, even easy, and much preferred to tables.

Simply use the H1 element as I suggested above. You should always have one and only one H1 eement on your page, and it should announce the title of your page and so it is perfectly suited for a page header. Put the text of your title in there. The H1 is a block element and may be easily styled for colors, font face, text positioning with padding, and so on. It will naturally expand to full page width unless you give it an explicit width rule with CSS.

Then in your CSS rules for H1, import the image with something like

h1 { background: #fff url(http://new.biav.net/images/banner.gif) no-repeat top right; }

Look up the syntax for the "background" rule at http://www.htmlhelp.com/reference/css/color-background/background.html
if you like.

If you want more than one image in your background you'll have to combine them in an image editor.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Kehfera
Offline
Regular
Virginia
Last seen: 13 years 14 weeks ago
Virginia
Timezone: GMT-5
Joined: 2007-02-28
Posts: 27
Points: 0

Not understanding what I need...

I don't think I have been clear as to what I am trying to do. There are 3 graphics not one. The banner I pointed you to was the example of how the end header should look. I wanted the left and right graphics to be fillers so it will stretch with the size of the browser. The banner will be the middle with is a static size of the page at 755px. It is almost like a sandwiched tab.

My problem is I can't get this to work. The left and right graphics need to stretch with the size of the browser but the middle will remain the same size and centered.

Any ideas?

Kehf

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

As a guess, this might

As a guess, this might do:

Your Page Title Here

html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{
margin:0px;
padding:0px;
border:0px;
border-collapse:separate;
border-spacing:0px;
}
input,select{
margin:0;
padding:0;
}
body{
font-family:verdana,arial,sans-serif;
font-size:100.1%;
}
strong,b{
font-weight:bold;
}
p{
font-size:90%;
line-height:1.1em;
}
.floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px}
.floatcontainer{display: inline-block;}
/* Hides from IE Mac \*/
* html .floatcontainer {height:1%}
.floatcontainer{display:block}
/* End Hack */
#header{
min-width:850px; /* or whatever the overall minimum width of the two side bits plus the banner is */
margin:0px;
background:url(left.gif) left top no-repeat;
}
#header div{background:url(right.gif) right top no-repeat}
#header div div{
width:755px;
margin:0px auto;
background:url(middle.gif) left top no-repeat;
height:18px; /* whatever the height of the image is */
overflow:hidden;
}

Trevor

Kehfera
Offline
Regular
Virginia
Last seen: 13 years 14 weeks ago
Virginia
Timezone: GMT-5
Joined: 2007-02-28
Posts: 27
Points: 0

This is OH so close... and where I have come to my issue

I was not sure that I could have a background center background...where both backgrounds have a repeat-x. They need the repeat-x in order to fill in the space that expands or contracts.

I change both left and right to repeat-x but of course without a limiting size they over write each other. Is there a way to set a size of say 50% of the entire expandable size?

AND could you take some time to teach me what you did and why or where I can go to find out what you did? I had not used the float feature and don't understand it. I understand the rest of the code.

OH and thanks for the insite and a near fix!!!!

Cheers,
Kehf

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

You need to better describe

You need to better describe what you want, maybe with an image of what it now looks like and what is wrong (annotate with image).

You might use more than one image to illustrate.

Send them as attachments to your post.

Kehfera
Offline
Regular
Virginia
Last seen: 13 years 14 weeks ago
Virginia
Timezone: GMT-5
Joined: 2007-02-28
Posts: 27
Points: 0

Better Detail... Thanks for the heads up.

Everyone here is so helpful. Thanks for the heads up on how to present my issue.

There are three top images...all in a row. (images are attached)
img1.png (left image) img2.png (center image) and img3.png (right image)

The left and right images are 10px wide. They are the filler pictures that should repeat-x to fill the space before and after the center image of a static size of 755px.

Included is a picture of what it is meant to do. It is the examplebanner.gif.

I hope this helps to explain the issue. Thanks to everyone so far who has assisted. I am anxious to learn more as this is my first attempt at a complete 508a complient page.

Cheers,
Kehf

AttachmentSize
img1.png 256 bytes
img2.png 28.99 KB
img3.png 325 bytes
examplebanner.gif 36.49 KB
wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 23 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Have you considered

Have you considered combining all three and using a single background image? It could be centered with the 'extra' cut off on either side, which would be revealed as the browser viewport size grew. Here's an example png - take note that it's actually similar in file size to that of your three images combined.

#header {
    height: 152px;
    background: url(headerbg.png) top center no-repeat;
    }

AttachmentSize
headerbg.png 29.8 KB
ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Now I see the images, of

Now I see the images, of course you should do what wolfie suggests. BUT... be careful with png's. Even if you don't have a transparency layer, IE6 will ONLY render the image properly if it is saved with a 16.7m color palette. If you use a lesser palette, IE renders the colors wrong (ususally a few shades out, often quite noticeable if you have other elements on the page supposedly the same color.

Kehfera
Offline
Regular
Virginia
Last seen: 13 years 14 weeks ago
Virginia
Timezone: GMT-5
Joined: 2007-02-28
Posts: 27
Points: 0

IE6-I did come across that issue but do realize the problem...

But... once I got what is desired then I can make them some other format.

I understand the single graphic idea. It would be great but this is a branded logo - the person I am working with wants the two ends to stretch. I did explain it might not be possible but they wanted me to try. The idea was to have a header that stretched the full length of any browser (they had seen this elsewhere) and then keep the body to a size that would 'look' good no matter the browers size. I have made the min-size to equal the actual branded logo... img2.png. Now they want the ends to stretch and match the each end of the logos. Someone had done this in tables for them and now they must go to the 508a compliance for non-profits and the tables are rough when it comes to this.

Again, appreciating this site and all who give of their time and knowledge!

Kehf.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

But what wolfie did does

But what wolfie did does exactly what you describe. The logo bit it the middle stays in the middle and as the browser widens, the padding bits fill the margins.

I just tried it as wolfie coded it. It works.

Kehfera
Offline
Regular
Virginia
Last seen: 13 years 14 weeks ago
Virginia
Timezone: GMT-5
Joined: 2007-02-28
Posts: 27
Points: 0

I will try... being a newbie...

I looked at the code and it didn't look right to me. An of course since I am the pro here - not (grin) I figured it would not work. My appologies for not REALLY checking. I will try and get back with everyone and let you know how it worked.

Cheers,
Kehf

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 23 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Perhaps I didn't explain it

Perhaps I didn't explain it well enough (which is usually the case Wink )

The image I created is 2000px wide. The chance of someone opening a browser window wider than that is pretty slim, but if you were concerned about that .5% (not a real statistic) then you could make the image even wider - it will not significantly increase the file size.

The image is centered in the viewport and the parts that extend beyond that are simply not displayed. As the window is stretched wider more and more of the left and right sides of said image are exposed.

Kehfera
Offline
Regular
Virginia
Last seen: 13 years 14 weeks ago
Virginia
Timezone: GMT-5
Joined: 2007-02-28
Posts: 27
Points: 0

Back to the same problem...

Sorry, but this does not work. It will expand or contract only on one side.
I have included the page of a test html.
http://new.biav.net/test2.html
This is the way it should work.

This link is the other two items suggested in the thread.
http://new.biav.net/test.html

The top is the item that is the newest attempt. You can see that the line up does not work in some cases.

The second header is the one that C. Trever gave to me. Which is closest. I just have to figure out how to stop the right side from overwriting the left of vise versa.

Any Clues?
Kehf.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 23 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

It does work, can you show

It does work, can you show us your attempt and we can troubleshoot.

Kehfera
Offline
Regular
Virginia
Last seen: 13 years 14 weeks ago
Virginia
Timezone: GMT-5
Joined: 2007-02-28
Posts: 27
Points: 0

Ok, here are my attempts.

The first link in my message above it the way I wanted it to act.

The second link is the two items that were given to me here on this site.
The first line header on the second link is the attempt that you sent me...(wolfcry911) I of course may not have attempted it correctly. The second line header is the attempt given to me from C. Treva. I changed both the left and right on his to repeat-x but this is what I had initially done before comeing to this site. I just did it a different way - not the best way however.

So check out the links in the last message I sent. See if that helps you see what I see.

Cheers,
Kehf

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 23 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

your second link isn't

your second link isn't working (I assume because of the local file requests).

Kehfera
Offline
Regular
Virginia
Last seen: 13 years 14 weeks ago
Virginia
Timezone: GMT-5
Joined: 2007-02-28
Posts: 27
Points: 0

opps - on the link...

I thought I checked that. Sorry...
http://new.biav.net/test.html
Try again and see if this works. Sorry about the wordy code. Dreamweaver does that. I just wanted to fix it quickly for you to see.

Cheers,
Kehf

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Kehfera wrote:I thought I

Kehfera wrote:
I thought I checked that. Sorry...
http://new.biav.net/test.html
Try again and see if this works. Sorry about the wordy code. Dreamweaver does that. I just wanted to fix it quickly for you to see.

Cheers,
Kehf

Dreamweaver? Dreamweaver? Satan's son? The Weaver of Lies?

Have we got a sticky that says 'over my dead dog?'

IMHO DW is a POS. Period. Nuff said. Get dirty, code it by hand and get it right.

Kehfera
Offline
Regular
Virginia
Last seen: 13 years 14 weeks ago
Virginia
Timezone: GMT-5
Joined: 2007-02-28
Posts: 27
Points: 0

It was FREE... to me anyway.

I have been a beta of DW since it was created. I know it does some really nasty things. Now that Adobe owns it - it won't get any better.

Maybe I will ask what others use. But for now I just code by hand and view in IE and other browsers. I use DW for quickie attachments to locations... I clean up later when all works.

Cheers,
Kehf
--------------> agrees that DW is a POS.

On to css solutions....giddyup! (BTW - Did I tell you I love this forum and I am so new to it.)

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 23 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

I don't have IE here at the

I don't have IE here at the moment, is that where it's failing (it should work however)? It works fine in Firefox and Safari.

Kehfera
Offline
Regular
Virginia
Last seen: 13 years 14 weeks ago
Virginia
Timezone: GMT-5
Joined: 2007-02-28
Posts: 27
Points: 0

Unfortunately...

Not in IE. and of course that is what my client uses and most of their users... 98% of the hits to the website use 5.5 or above. 1% use IE 5.0 or below and 1% use 'Other'. Other is my FAV!!! (Firefox is my friend).

OK so what do I do to fix this. I am going nuts trying to figure this out. Once I fix it I can finish their antiquated site and play (learn) more of CSS and its finer points.

Cheers All!
Kehf.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

OP might be committing the

OP might be committing the ultimate sin, using the DW preview pane. No, come on Trev, no-one's THAT daft? Tried the code in IE6 wolfie, still works.

TroubZ
TroubZ's picture
Offline
Enthusiast
Last seen: 11 years 15 weeks ago
Timezone: GMT+10
Joined: 2007-03-07
Posts: 52
Points: 0

How about Eclipse

I actually use DW a fair bit - but i do HAND CODE everything. I just like the tag completion and it's what I am used to using.

Although I have heard,
Eclipse is a more than capable IDE.
It has plug-ins for Coldfusion / Java etc. - I jst haven't gotten around to trying it out - too comfortable with what I know.

(then again I use VI for a quick edits too).

Smith & Wesson
The original point and click device.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

There is an off topic thread

There is an off topic thread about editors. I use WebCoder which autocompletes for you (if you want, it is massively configurable). It can parse a ton of things. It has a view window that IE shows in, and you can get FF working in it too (I have both enabled). It will support any server mappings (I have my php server mapped). It has personal codelibs that let you add your own tags etc (and I know someone out there has a coldfusion one made).

Kehfera
Offline
Regular
Virginia
Last seen: 13 years 14 weeks ago
Virginia
Timezone: GMT-5
Joined: 2007-02-28
Posts: 27
Points: 0

Solved.

Solved... thanks a bunch. I used your advise. Of course. The issue with lining up was nothing more than repositioning the graphics.

Cheers,
Kehf