Some CSS questions

[banaax]

So all my knowledge of CSS and tableless formating has come out of the last week so i'm quite the noob at this, i've been building the site www.caniwin.com (critisizm welcome, still working on the empty pages)

Okay so i solved one question while typing this, now I'm just trying to figure out why the site works for some people and not for others, both my friends that it didn't work for use explorer, but other people i've talked to use explorer and it works for them, could it be the version of explorer they are using? if so how do i make my page work for them? thanks

[seo_sensey]

Hi banaax,

It is well known that using CSS ( divs more exactly ) to build your pages instead of tables has some great advantages in terms of SEO, design, usuability and so on, but the problems you have working this way is that not all browsers parse your code correctly or display correctly all code you write.

Check out http://www.devarticles.com/c/a/Web-Style-Sheets/Designing-Web-Pages-without-Tables/ for start and also see www.w3schools.com ( CSS section ).

[Mano70]

If I'm not wrong you have used the three column solution found here:
http://www.positioniseverything.net/ordered-borders-center.html
(which is a very good solution I think since you get your content first, and this may have a good influence on linearization).
However, you haven't followed the solution completely, and that's why you are into trouble with some browsers I guess. You are missing DOCTYPE for example, which is very important when you make layouts with CSS:
http://www.alistapart.com/stories/doctype/

[banaax]

you are quite correct i did use that layout. And yeah I removed a lot of stuff from the css file since I didn't use a lot of stuff that that page used and i wanted my coding to be as minimal as possible. I'll go back in and add some stuff thoug, thanks

Another question. I use php for the links on the left and the banner at the top so I dont have to write the code in each file, and then if i want to change the banner i only have to change it one spot to change them all.

Will this hurt my load time since each page has stuff like <IMG SCR = "http://www.caniwin.com/pics/banner.gif"> instead of if I had the banner pic in each folder where I could just say <IMG SCR = "banner.gif">?

Also working with css and php, When I want to see changes i've made I have to load the files to my ftp then check on the web itself, since windows wont display my php pages for me, is there any way I can see my website without loading it to ftp first?

[Mano70]

I didn't look at your CSS, your DOCTYPE should be placed in your webpage as explained in the article. It may be your problem that you have skipped it.

I have rewrote this layout solution to fit my "thinking" (I'm used to name div's different), so I can't tell exactly what could be wrong.

Using includes for menus and your header is a good thing, and using <IMG SCR = "http://www.caniwin.com/pics/banner.gif"> won't slow the loading time. The image will be cached. However, you should link this image back to http://www.caniwin.com/ and fill out the alt tag with proper anchor text, people are used to could click on the logo/header to come back to the main page. There is another solution for this also using CSS (I reformat a H1-tag) which you can see in action in my signature (the second link), but that's another story.

Regarding your PHP questions, I'm and ASP-dude, so I can't help you out with that.
And, since you now are going the CSS road, you should choose the XHTML doctype, which means all your HTML-code should be lowercase and the code should be closed (ex. <br /> instead of <BR>). And then, go to http://validator.w3.org/ and validate your webpages.

[banaax]

Hey thanks I really apprechiate the help. Can you tell me the advantage of using the XHTML doctype over the set up I have now? and do you mean that I can use xhtml instead of php? is there some includes function with xhtml? I'll be looking into this stuff just trying to figure out why its worth the extra work. Danka

[Mano70]

You aren't using a doctype in your website, which you should. Read the previous link I gave you from A List Apart:
http://www.alistapart.com/stories/doctype/

There you will find explained what a doctype is, and why you should use one. Take also a look at articles from W3Schools about XHTML and CSS:
http://www.w3schools.com/xhtml/default.asp
http://www.w3schools.com/css/default.asp

XHTML is a stricter HTML than regular HTML, and you don't use it instead of php, you are mixing things now. In the article from A List Apart you will find XHTML explained. If you are going the CSS road, you must also understand what a doctype is, and how it can influence the look of your webpages. And to get your pages validated you must also use a doctype.

Your HTML now (the head part):
<html>
<head>
<title>CanIwin - How the Professionals Make Money Gambling</title>
<link rel="stylesheet" type="text/css" href="ex3.css" />
<script type="text/javascript">if (window.self != window.top) window.top.location = window.self.location; </script>
</head>
<body>


How it should be (here using XHTML transitional):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>CanIwin - How the Professionals Make Money Gambling</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" type="text/css" href="ex3.css" />
<script type="text/javascript">if (window.self != window.top) window.top.location = window.self.location; </script>
</head>
<body>

[banaax]

Hey

Thanks a lot for all the time your putting in to help me. I copy pasted in what you said the new head should be an it screwed up my layout a little bit, So i'm going to do some reseach on doctypes and xhtml so I actually have an understanding of this stuff and not just adjusting some template, at which point i'll proabably be back here asking some more questions, hopefully a little more experienced questions though. I really need to start working on content too...

[Paz]

[QUOTE=banaax]Hey

Thanks a lot for all the time your putting in to help me. I copy pasted in what you said the new head should be an it screwed up my layout a little bit, <snip>...[/QUOTE]
Hi,

it may well have messed up your layout, but you need a DOCTYPE for consistency across browsers... so it will look "screwed up" the same in most modern browsers.... 8-|

I would recommend you develop and test the page with a Firefox browser, because IE can "correct" poor CSS/HTML, leading to inconsistencies, whereas Firefox is less flattering, but more useful in diagnosing problems.

If you can post a link to a test page it can help us sort out the problem.

Cheers,
Paz.

[banaax]

Hey

I run firefox and IE so i'm always checking the page with both. So i got the DOCTYPE in and got the site to standards, it passed the http://validator.w3.org/ validation test, i also got my css validated. So everything almost looks the same in the two browsers, however now that I made my top banner a link to the home site, the banner looks different in firefox and IE, also, i'm trying to get rid of the purple/blue (IE,FF) border that gets put around it since its a link, any suggestions?

Also, I had a line in my css file that wasnt inside any { }...
a:hover {color: blue}
which they wouldn't validate so i removed it, i would like to make the text color change on mouseover for my left links, i looked for the correct code to put in my .leftlinks tag in my css file but couldn't find it, anyone know the code?

[Paz]

Hi,

just because the code does validates, doesn't mean that it will behave in the way that you expect it to.

If the validator doesn't like "a:hover {color: blue}", then you can try #0000FF etc. instead of blue, but the best would be if you put a link up to a test page so we can see for ourselves.

If you have an adult site, or you don't want to post the url yet, then send me a PM and I can put the page up samewhere for you with a link.

Cheers,
Paz.

[Mano70]

The webpage is in his first post.

Regarding your banner link problem:

.bannerlink img {
border: 0;
margin: 0;
padding: 0;
}

Should fix it.

However, it is a more elegant method, but beware, if you use it, it will screw your design again since all border, margin and padding will be set to 0. This means that you will have to set the values for each tag (ex. p, hx tags, ul, li etc.). Why do this you perhaps ask? It gives you more control, and will shorten your code in the end.

* /*Set's border, padding and margin to 0 for all values*/
{
border: 0;
padding: 0;
margin: 0;
}

Paz suggestion should work for your a:hover problem, if not, try to add; after blue and see if that helps:
a:hover {color: blue;}

[banaax]

yea the webpage i've been tamporing with is www.caniwin.com, thanks for help with the banner prob Mano, my problem was that i just had
.bannerlink {
and not
.bannerlink img {
the css tuturial on the w3 whatever site didn't really mention that stuff. And i asked my friends that the site wasn't working with before and it now does. So besides getting all the colors and fonts the way I want them I've got my set up. I did notice a small problem, that the spacing between the banner and my 5 top links is slightly different when viewed in firefox and IE, i'll probably tamper with the css a little later to see if i can fix that, cause it was only after I made the recent changes to the css that the spacing was added when viewed in IE.

Quick question, do you think it is good design how i just have the banner linking to the homepage and no where else? do most people know to click the banner to get home or should i keep the "caniwin" link in the upper part of the left column.

Now I can finally finish adding content and working color/font schemes, i'll post the final product for recomendations when i'm done.

[Paz]

Hi,

you can rarely get all the CSS info from a single tutorial page. I lost a few nights sleep because I didn't have a DOCTYPE up - it didn't say that in any of the tutorials I found - so Mano's saved you some time.... ;)

I don't think that most of your users realise that they can click on your banner to take them to your home page, but that's just my opinion. Some markets are quite "web savvy", but my feeling is that yours won't be. You can monitor paths through the site in your server logs to check though.

Cheers,
Paz.