fluid css with set images 1

[tiamat2012]

Hey all,

I've got a few set images, two columns with widths of 200px, a top banner which has the height of 200 px, and then in each corner two more that are 200x200, I'm trying to find to keep the top banner and the main content in between the other columns

to see what I mean go to

http://kerryj.awardspace.com/index.html

that is how I would like it, but I am using javascript and I've been recommended to do it with pure CSS. I'm using absolute positioning.

does anyone know how I would go about this?

-Kerry

 

[BillyRayPreachersSon]

Layout aside, there are some things you need to do...

You should do is replace all "é" characters with the correct HTML character entity: "é". The hard-coded "é" characters do not display correctly in Firefox v1.5.0.1/Win on the default "unicode" character encoding. This change will fix the issue, and make the code a whole lot more portable.

Of course, you could just call it a "CV" instead ;-)

Replacing the font tags and bgcolor attributes with CSS would also be a good idea.

You might also want to run all of your content through a spell-checker - there are quite a few minor typos.

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[tiamat2012]

Ok, will do (when I get home), couple questions though.

Did you see minor typos in the code or the writing, because I haven't proofread the writing but I thought the code was good (I'll run it through a spellchecker tonight.)

I know how to replace the bgcolor with CSS, but not sure about font. Is there some default tag that I can use classes in if I want text? I mean I've mainly been using anchors, blockquote, h1, h2 but if I decide not to - is there anything else?

Or did you mean replace the font as in don't have any properties there and just assign it a class/id?

Thank you very much,
Kerry

 

[Vragabond]

Your best bet would be to have text in paragraphs (<p>) and style those. That's where regular text should be.

 

[tiamat2012]

ok I fixed all of those on the main page, but I couldn't do the spell checker because it caught every tag.

Could you give me a few specifics of the spelling errors and I'll pick up the rest?

-Kerry

 

[johnwm]

Most of us will use a spellcheck that has all the standard tags added to out personal dictionary, but if you haven't got round to that yet you can just cut and paste from the displayed page to a wordprocessor to check your text without the tags.
You still haven't fixed the &eacute; so your page still won't validate.
As a general guide you should ensure that your code validates before looking for other problems by using the validators at :

http://validator.w3.org

or

http://www.htmlhelp.com/tools/validator/

for your HTML, and at:

http://jigsaw.w3.org/css-validator/

for your CSS. Use the Verbose option where available

________________________________________________________________
If you want to get the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

 

[BillyRayPreachersSon]

I couldn't do the spell checker because it caught every tag.

Then copy/paste the text from the website.

Here's one to get you started: On the "Objectives" page, you say "woul prefer" instead of "would prefer".

Some non-spelling points:

- You occasionally refer to "MySQL" as "mySQL" (with a lower-case "M"). It should always have an upper-case "M".

- You refer several times to a "View Source" button, when it is not a button at all, but a link. You should also be aware that some browsers and/or operating system combinations do not support the "view-source:" "protocol".

- You say that "When I first started learning ASP I was doing it with Javascript, which is possible but not the best idea." Really? Why isn't it the best idea? When programming ASP, I [!]only[/!] use JavaScript. It's no better, and no worse. To say it's "not the best idea" without backing it up in any way shows a clear lack of understanding on the subject.

- You call ADO a language, when I'd be inclined to say it's more an interface that a language.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[tiamat2012]

Oh, got it, I actually did fix the &eacute; I'll check to make sure it uploaded correctly (I only did index.html).

Thank you for those, as I said, I hadn't proofread yet but will do.

-Kerry

 

[tiamat2012]

Ok, my entire site should validate besides my css file (which I'll get to) and I did some proof reading.

I'm using an alpha transparency loader (to load png files into IE explorer), but if you validate my page you get a bunch of errors.

I've changed my site to kerryj.atspace.com (awardspace had some weird regulations that didn't allow my alpha transparency to fully work, and some other strange options).

My main question is, do you know how I could do a browser check without using Javascript? Or would you recommend using Javascript to do it, and if so, how would I enable alternate images to load depending on the value? (I can do it with php or asp, but I don't know how to simply enter a javasript if statement in the middle of other code, which I think would be sloppy anyway.)

-Kerry

 

[Vragabond]

The real question is, why do you want to do that?

 

[tiamat2012]

Because I would like nice, high-quality buttons, which require transparency and .png, and since IE doesn't support alpha transparency, I need to do it manually. The only problem is, the filter used to do it in IE only works in IE, which means that I need to do a different line of code for Firefox and other browsers.

Other browsers are much easier, but I need to make the distinction.

-Kerry

 

[Vragabond]

Have you looked at techniques such as this one to deliver PNG transparency to IE while not disrupting other browsers (which fully support PNG transparency as is).

 

[tiamat2012]

Indeed, I have. That's how I learned to do the transparency, and I know I can get the part right for both browsers, but the technique they use is slightly different and based on divs.

I was just looking for something else out there, if there isn't anything I'll go with that, I just don't like putting in a bunch of code that I don't fully understand.

-Kerry

 

[BillyRayPreachersSon]

To do this without using JavaScript, you could use IE-only conditional comments to "detect" IE.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[ChrisHunt]

If understand the situation correctly, you have a transparent gif in your HTML which gets replaced by that IE filter: thingy into the PNG you actually want.

To get it to work cross-browser, you just need to add a background image for modern browsers that handle PNGs just fine, like this:

a img.menu {
   border-style:none;
   background: url(images/UNhome.png no-repeat;
}

* html a img.menu {
  background: none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/UNhome.png');
}

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[tiamat2012]

Wow, that looks perfect, but what does the

* html

do? haven't seen it before

Thank you very much,
Kerry

 

[Vragabond]

Check here:

http://www.dithered.com/css_filters/css_only/star_html.html

 

[tiamat2012]

Awesome! It fully works!

I ended up with the following code:

a img.menu
{
 	width: 130px;
	height: 55px;
	background: url(images/allthree2.png) no-repeat 0 0;
	border-style:none;
}

a:hover img.menu
{
 	background-position: -130px 0;
}

a:active img.menu
{
 	background-position: -260px 0;
}

* html a img.menu 
{
  background: url(images/blank.gif) no-repeat 0 0;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/UNhome.png');
	border-style:none;
}

* html a:hover img.menu
{
 				filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/HOVhome.png');
}

and in the actual page

<a href="index.html">
<img src="images/blank.gif" alt="Home" class="menu">
</a>

Thank you all for your time!

-Kerry