Click to See Complete Forum and Search --> : New website - with css help


DeltaOne
11-24-2005, 09:10 PM
Hi again. I just done my first site using css and all those div id="" things that I saw on many pages.

So, here it is. It is my second website that I ever done, and the first using css. Please help me out a little :)

Here it is - The website :) (http://lucian.goobergunch.net/focology/)

ray326
11-25-2005, 12:31 AM
Looks like you may be having box model problems. Most of your heading graphic is covered up in Firefox.

DeltaOne
11-25-2005, 05:57 AM
It's fixed. I apparently gave the div where the logo is a muuuuuch smaller height :)
Thanks for the help

DeltaOne
11-25-2005, 06:36 AM
I have this problem... while trying to validate my css for the site I get this odd error, and have no ideea how to fix it...

_____________
Errors
(/css.css)
Line: 9 Context : body
Invalid number : color Parse Error - color= black

Line: 30 Context : #left_a
Invalid number : color Parse Error - color= black

Line: 41 Context : #right_a
Invalid number : color Parse Error - color= black

Warnings
URI : http://lucian.goobergunch.net/focology/css.css
Line : 10 (Level : 1) You have no color with your background-color : body
Line : 31 (Level : 1) You have no color with your background-color : #left_a
Line : 42 (Level : 1) You have no color with your background-color : #right_a

___________

How should I fix it? :(

somecallmejosh
11-25-2005, 08:32 AM
Howdy,

I would recommend using an unordered list for your navigation. For example
<ul>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="ourWork.html">Our Work</a></li>
<li><a href="joinNow.html">Join Now!</a></li>
<li><a href="sponsors.html">Sponsors</a></li>
<li><a href="contactUs.html">Contact Us</a></li>
</ul>

You could eliminate the need for an unecessary <div> by applying the same styles to the <ul>.

This will help keep your markup a little more manageable, and will allow you to eliminate the use of the <br> tag, which is being phased out.

Also, in regards to semantic markup...
<br>
<br>We, here at the Center, are trying to find
<br>answers to a multitude of questions, most
<br>of them that you never ever thought of.
<br>
<br>For example, we know that the cat does
<br>"miau, miau" and we call it "a mew",
<br>we know that the dog does "ham, ham"
<br>and we call it "a bark", but did you ever
<br>wonder how should we call the
<br>camel interjection?
<br>
<br>

Consider keeping your header separate from your paragraph in terms of markup. It will help search engines like google index your site, which will help in terms of search engine optimization. Those <h1>, <h2>, etc. tags are great tools...

It looks like you're using the <br> tag to keep things within the right column div... You may consider using a paragraph tag, utilizing the padding and/or margin selectors in your CSS... That way you won't have to worry about box model issues in browsers like IE5.

#right_a h1 {
text-align: center;
padding: 20px;
}

#right_a p {
text-align: center;
padding: 20px;
}

or, to save space in your style sheet, you could combine the following styles in one rule... like such.


#right_a h1, #right_a p {
text-align: center;
padding: 20px;
}

This will require a little tweaking to get it exactly like you want it, but the idea will be the same.

Then you'd rewrite your right column paragraph as such...
<div id="right_a">
<h1>Welcome to the Focology Research Center.</h1>
<p>We, here at the Center, are trying to find
answers to a multitude of questions, most
of them that you never ever thought of. </p>

<p>For example, we know that the cat does
"miau, miau" and we call it "a mew",
we know that the dog does "ham, ham"
and we call it "a bark", but did you ever
wonder how should we call the
camel interjection?</p>

<p>What are you waiting for? Find out Now!</p>
</div>

I hope this helps. Keep up the good work. And by the way, I've often wondered about the giraffe sound.... you never hear the human interpretation of that either.
Josh

DeltaOne
11-25-2005, 09:21 AM
thanks, I've done that, looks alot better without all those <br> tags :)

Green-Beast
11-25-2005, 09:38 AM
I have this problem... while trying to validate my css for the site I get this odd error, and have no ideea how to fix it...

_____________
Errors
URI : http://lucian.goobergunch.net/focology/css.css
Line: 9 Context : body
Invalid number : color Parse Error - color= black

Line: 30 Context : #left_a
Invalid number : color Parse Error - color= black

Line: 41 Context : #right_a
Invalid number : color Parse Error - color= black

Warnings
URI : http://lucian.goobergunch.net/focology/css.css
Line : 10 (Level : 1) You have no color with your background-color : body
Line : 31 (Level : 1) You have no color with your background-color : #left_a
Line : 42 (Level : 1) You have no color with your background-color : #right_a

___________

How should I fix it? :(


It's the equal sign.
color : black; (or color : #000;)
not color = black;

Mike

somecallmejosh
11-25-2005, 10:05 AM
This will not validate...
<h3>Welcome to the Focology Research Center.</h1>

You have an <h3> opening tag with an </h1> closing tag.

Can you help me understand the need for the <span> tag in the nav section. Isn't this generally used to place block level elements inline with other elements? Does the <br> negate the necessity of the <span>?

spufi
11-25-2005, 12:46 PM
The "Contact Us" link is further spaced down than the rest of the menu links. I would change the alignment of your text from center to left. How often do you read a center aligned paragraph of text in a book, or magazine? You pretty much don't. You have seperators between the hit counter number of the text saying what it is. You shouldn't do that because it makes it harder to understand that those bits are actually related when you have seperated them. Of course, there is my rant on using counters in the first place. :D The logo could be better, and the color scheme isn't so great either.

DeltaOne
11-25-2005, 01:23 PM
Ahh yes, the <h3> - <h1>.. Typo edited.

Thanks for the CSS help Green-Beast, I don't know where was I thinking :P

I'll have another banner soon :D

I've aligned the frontpage writing on the left but I'm having real problems aligning the one from the About Us page ... :|

somecallmejosh
11-25-2005, 01:57 PM
Delta One,

Check out Dan Cederholm's book, Bulletproof Web Design. There is a chapter entitled "Indestructable Boxes" (chapter 9). I notice that you are changing the font size on other pages so you can fit all the text in the column. You can avoid doing that, at the same time allowing your visitors the option of increasing the font size --- Accessibility!

Feel free to check out one of the websites I've used this idea on...
http://gceag.org/about_gceag.php


By increasing the text size, the box grows around the text (up to a certain point).