42 replies [Last post]
Fonz_k
Offline
Regular
Netherlands
Last seen: 10 years 20 weeks ago
Netherlands
Joined: 2005-10-22
Posts: 34
Points: 0

http://members.home.nl/kusters/main.html

http://members.home.nl/kusters/mohaapartycss.css

Since i am quite new to CSS, this is my first experiment with CSS.

The site is still not what i want, but it's a start.

Please give your comments (I know some problems with HTML exist, don't know what, but since i am rebuilding the site it is no problem.)

The site is not very flashing, it's just to inform people. Now it's time to get it interesting!! Any ideas? (besides http://www.dontmeetyourheroes.com/)

Resurrection is for those who did not get it right the first time

Anonymous
Anonymous's picture
Guru

My site for a review!!

Get a doctype, include character encoding, dump the frames and validate your code.

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 10 years 42 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

My site for a review!!

Design for Firefox, your left and right columns are not even viewable.

This is my big chance . . . yep, I blew it . . .

Fonz_k
Offline
Regular
Netherlands
Last seen: 10 years 20 weeks ago
Netherlands
Joined: 2005-10-22
Posts: 34
Points: 0

My site for a review!!

Got a doctype and got character encoding, and now my layout is all messed up! :?

Should i put everything in one DIV container?

I did a validation for CSS, only an error on the scrollbar..........

Frames?? I did not use frames did I? Just the DIV-tags

Resurrection is for those who did not get it right the first time

Anonymous
Anonymous's picture
Guru

My site for a review!!

Fonz_k wrote:
Got a doctype and got character encoding, and now my layout is all messed up!
Then let's get working on fixing your bad code. Smile

Fonz_k wrote:
Frames?? I did not use frames did I? Just the DIV-tags
Here is the code on funske.tk (which was the only url you listed before you edited your post):
<html>

  <head>
    <title>funske.tk</title>
    <meta name="description" content="Anything">
    <meta name="keywords" content="Anything">
  </head>

  <frameset rows="*,1" framespacing="0" border="0" frameborder="NO">
    <frame src="http://members.home.nl/kusters/main.html" name="dot_tk_frame_content" scrolling="auto" noresize>
  </frameset>

  <noframes>
    <body>
    </body>
  </noframes>

</html>

Fonz_k
Offline
Regular
Netherlands
Last seen: 10 years 20 weeks ago
Netherlands
Joined: 2005-10-22
Posts: 34
Points: 0

My site for a review!!

LOL, that's what the dot.tk domain does...................

Just use the other link ( http://members.home.nl/kusters/main.html )

It is directly to my site....

The big TEXT part should, as you probably figured out, be in the center!!

Resurrection is for those who did not get it right the first time

Anonymous
Anonymous's picture
Guru

My site for a review!!

Fonz_k wrote:
LOL, that's what the dot.tk domain does...
The domain name adds frames? I would dump it then. Your code still needs validation and your left and right columns are still hidden underneath the center.

Fonz_k wrote:
Should i put everything in one DIV container?
Why?

Fonz_k wrote:
I did a validation for CSS, only an error on the scrollbar...
How about validating the markup?

Fonz_k
Offline
Regular
Netherlands
Last seen: 10 years 20 weeks ago
Netherlands
Joined: 2005-10-22
Posts: 34
Points: 0

My site for a review!!

Triumph wrote:
Fonz_k wrote:
LOL, that's what the dot.tk domain does...
The domain name adds frames? I would dump it then. Your code still needs validation and your left and right columns are still hidden underneath the center.

Fonz_k wrote:
Should i put everything in one DIV container?
Why?

Fonz_k wrote:
I did a validation for CSS, only an error on the scrollbar...
How about validating the markup?

Everything in a DIV container to get it centered.

Like i said: the validation for css is ok, only the scrollbar has errors...

The HTML Markup gives some close-tag errors, but can't put my finger on the errors!

I made a small change to the css, all left/right is now visible?? For me it is.....

Why not firefox?? Well just because 90% of the users of internet use IE5 or higher. So if i can see it, 90% of my visitors should see practically the same. Or am I shortsighted??

And i thought i was on the right track........ LOL, yup i'm a newbie... Wink

Resurrection is for those who did not get it right the first time

Anonymous
Anonymous's picture
Guru

My site for a review!!

Fonz_k wrote:
Or am I shortsighted??
To say the least. Smile

You just have some reading to do. Start with the How To section and look around for some html and css tutorials.

Attached is a screen shot of your page.

Fonz_k
Offline
Regular
Netherlands
Last seen: 10 years 20 weeks ago
Netherlands
Joined: 2005-10-22
Posts: 34
Points: 0

My site for a review!!

LOL, does not look good does it?

HTML should be fine.....just some re-editing to be done. Apparently i use too many <P></P> tags Shock
Css is the problem here. Everything in the DIV tags is viewable the way it is intended.

The main problem now is:

HOW on earth do i get the different DIV aligned the way i want, without using tables?????

I will sort the rest out later.................. Just help me out with this issue.........please? The site has to keep running..........

Resurrection is for those who did not get it right the first time

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 10 years 42 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

My site for a review!!

Fonz_k wrote:

HTML should be fine.....just some re-editing to be done. Apparently i use too many <P></P> tags Shocked
Css is the problem here. Everything in the DIV tags is viewable the way it is intended.

The main problem now is:

HOW on earth do i get the different DIV aligned the way i want, without using tables?????

Good symantic html markup comes first, then positioning.

Have a look at this layout.

http://css.maxdesign.com.au/floatutorial/tutorial0916.html

This is my big chance . . . yep, I blew it . . .

Fonz_k
Offline
Regular
Netherlands
Last seen: 10 years 20 weeks ago
Netherlands
Joined: 2005-10-22
Posts: 34
Points: 0

My site for a review!!

OK, you're right. First things first. I WILL take care of a good markup tonight.

The page you refer to however is created with absolute positioning. That was my first design too. But i did not like the space that was left on the right side of the screen, so i thought i'd make a page with relative positioning, so people with other resolutions could do resizing. The left and right DIV's are still intact while the center DIV can be resized. (Hope you understand what i say here Laughing out loud )

Keep in mind: i am not a professional, it's just for hobby purposes. (as if you had not noticed yet Cool )

Anyway, i am goinmg to work on the site in a bit and will keep you posted.

Resurrection is for those who did not get it right the first time

Fonz_k
Offline
Regular
Netherlands
Last seen: 10 years 20 weeks ago
Netherlands
Joined: 2005-10-22
Posts: 34
Points: 0

My site for a review!!

I downloaded and installed Firefox, now i see what you mean!!! Laughing out loud

Resurrection is for those who did not get it right the first time

Anonymous
Anonymous's picture
Guru

My site for a review!!

Fonz_k wrote:
I downloaded and installed Firefox, now i see what you mean!!! Laughing out loud
Ah, a convert! Laughing out loud

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 10 years 42 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

My site for a review!!

Fonz_k wrote:
I downloaded and installed Firefox, now i see what you mean!!!


Great, now that you have firefox up and running, make sure you have a look at TPH's review on firefox's VERY useful extensions.

http://www.csscreator.com/css-forum/ftopic11990.html

You won't be disappointed.

This is my big chance . . . yep, I blew it . . .

Fonz_k
Offline
Regular
Netherlands
Last seen: 10 years 20 weeks ago
Netherlands
Joined: 2005-10-22
Posts: 34
Points: 0

My site for a review!!

Triumph wrote:
Fonz_k wrote:
I downloaded and installed Firefox, now i see what you mean!!! Laughing out loud
Ah, a convert! Laughing out loud

:oops:

Resurrection is for those who did not get it right the first time

Fonz_k
Offline
Regular
Netherlands
Last seen: 10 years 20 weeks ago
Netherlands
Joined: 2005-10-22
Posts: 34
Points: 0

My site for a review!!

Ok, now i got validation for both HTML AND CSS!!! (Thanks to the Firefox extensions Laughing out loud )

Unfortunately i got to work on the background colors and colors.......If I use the same color for "background" and "color" i will not get validated!!

mmmmmm :roll:

http://members.home.nl/kusters/main.html

Resurrection is for those who did not get it right the first time

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 10 years 42 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

My site for a review!!

I would not worry about your background color 'warnings' so much, those are not really errors. Which elements have a background color or not should not affect the layout of your site or the way your elements are positioned.

You might want to consider switching your HTML Doctype to an XHTML one. After validating with a stricter Doctype, this should tighten up your markup even more, which in the long-run propagates code that is cleaner and easier to troubleshoot.

By the way, nice work. You have made some "giant steps" in the right direction.

This is my big chance . . . yep, I blew it . . .

Fonz_k
Offline
Regular
Netherlands
Last seen: 10 years 20 weeks ago
Netherlands
Joined: 2005-10-22
Posts: 34
Points: 0

My site for a review!!

Solved the backgroundcolor problem by setting it to transparent..........

mmmmm, got to read more info about this doctype-stuff, never thought this was so important.............


Thanks for your nice words: it's a giant leap for a man, but a small step for mankind!
Laughing out loud

Gonna dig a little deeper...................Should work with a little KoRn as background music....


(This is written a lot later)

I switched the entire site to the XHTML-doctype. Apparently this is going to be the new way to write HTML......

Restyled all with absolute positions for the DIV-tags.


Now anyone got an opinion on how i should change the css? ( I suppose i made several beginner's mistakes Laughing out loud )

Resurrection is for those who did not get it right the first time

Fonz_k
Offline
Regular
Netherlands
Last seen: 10 years 20 weeks ago
Netherlands
Joined: 2005-10-22
Posts: 34
Points: 0

My site for a review!!

Triumph wrote:
Get a doctype, include character encoding, dump the frames and validate your code.

Been there, done that...........LOL

Thanks, it should be in order right now!

Resurrection is for those who did not get it right the first time

Anonymous
Anonymous's picture
Guru

My site for a review!!

Looks much better now.

You should change your charset to

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Fonz_k
Offline
Regular
Netherlands
Last seen: 10 years 20 weeks ago
Netherlands
Joined: 2005-10-22
Posts: 34
Points: 0

My site for a review!!

Well, i am back and changed the Char-set. Apparently the XHTML converter changed the initial Charset to ascii. That may explain the strange codes i got in the XHTML-source.

So any more comments on my page?

Maybe rearrange the contents of the CSS?
Is there a css-code missing or is there a code that is not necessary or even double?

Resurrection is for those who did not get it right the first time

Anonymous
Anonymous's picture
Guru

My site for a review!!

Looks like this is causing some trouble with the css validator:

<link rel="stylesheet" title="Default" href="mohaapartycss.css"type="text/css" />

Put a space before the type= and it should work fine. Then I can validate the css as well.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 13 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

My site for a review!!

I'm not a big fan of the absolute positioning, but here's a tweaked css:

body {
	color: #CC0;
	text-decoration: none;
	font-family:  Verdana, Arial, Helvetica, sans-serif;
	background: #000;
}

body * {
	background: transparent;
}

p { 
	font-size: 11px;
}
	 
a:active {
	text-decoration: underline;
}
  
a:hover {
	text-decoration:underline;
	background: #666;
}
  
em{
	color: #fff;
}
  
ul {
	list-style-type: circle;
}

	   
#top { 
	width: 993px;
	height: 260px;
	position: absolute;
	top: 2px;
	left: 4px;
}

#left, #left2, #center {
	width: 152px;
	background-color: #292929;
	color: #000;
	border: 1px solid #cc0;
	position:absolute;
	left:4px;
	padding: 3px;
}

#left {
	height: 200px;
	top:265px;
}
		   
#left2 {
	height: 95px;
	top: 474px;
}
	   
#center { 
	width: 626px; /* overrides the above width */
	height: 1200px;
	top: 265px;
	left:165px;
}
		   

#shoutbox { 
	width: 200px;
	height: 1200px;
	position: absolute;
	top: 265px;
	left: 800px;
}

Verschwindende wrote:
  • CSS doesn't make pies

Fonz_k
Offline
Regular
Netherlands
Last seen: 10 years 20 weeks ago
Netherlands
Joined: 2005-10-22
Posts: 34
Points: 0

My site for a review!!

Triumph wrote:
Looks like this is causing some trouble with the css validator:
<link rel="stylesheet" title="Default" href="mohaapartycss.css"type="text/css" />

Put a space before the type= and it should work fine. Then I can validate the css as well.

Done

Resurrection is for those who did not get it right the first time

Fonz_k
Offline
Regular
Netherlands
Last seen: 10 years 20 weeks ago
Netherlands
Joined: 2005-10-22
Posts: 34
Points: 0

My site for a review!!

thepineapplehead wrote:
I'm not a big fan of the absolute positioning, but here's a tweaked css:

As a matter of fact: i did not want to use absolute positioning!

I used it to have the site up and running. I tried relative postitioning but then i could not line up the seperate div's the way i wanted.

I could use a table to get what i want, but i am learning how to use CSS. sooooooooo.........

The tweaked css you made turned most of my text black and some blue (so maybe i made a mess of the XHTML code?) larger fonts etc. But i did some work on it and it works fine now.

Just one question what does the :

body * {
background: transparent;
}

mean? Could it not be set in the previous body tag?
And I don't have to specify the H1 etc? only when i want other color etc??

So i guess i need to take a look at the XHTML code....

Resurrection is for those who did not get it right the first time

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 13 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

My site for a review!!

There's no point specifying attributes for all the headings etc if they're all the same.

Either group them together (like I did with #left1, #left2) or specify in the body section.

Sorry, I made a bit of a mess with your CSS, I wasn't looking at the site so I didn;t know what to work with Tongue

Verschwindende wrote:
  • CSS doesn't make pies

Fonz_k
Offline
Regular
Netherlands
Last seen: 10 years 20 weeks ago
Netherlands
Joined: 2005-10-22
Posts: 34
Points: 0

My site for a review!!

thepineapplehead wrote:

Sorry, I made a bit of a mess with your CSS, I wasn't looking at the site so I didn;t know what to work with Tongue

Shame on you Wink

No problem at all, it gave me something to work with and learn!

Thanks you guys for your comments!

Resurrection is for those who did not get it right the first time

Fonz_k
Offline
Regular
Netherlands
Last seen: 10 years 20 weeks ago
Netherlands
Joined: 2005-10-22
Posts: 34
Points: 0

My site for a review!!

thepineapplehead wrote:

Sorry, I made a bit of a mess with your CSS, I wasn't looking at the site so I didn;t know what to work with Tongue

Shame on you Wink

No problem at all, it gave me something to work with and learn!

Thanks you guys for your comments!

Resurrection is for those who did not get it right the first time

Fonz_k
Offline
Regular
Netherlands
Last seen: 10 years 20 weeks ago
Netherlands
Joined: 2005-10-22
Posts: 34
Points: 0

My site for a review!!

@TPH

why is the asterisk in the next line?

body * {
background: transparent;
}

You already set the background in the previous body-line to #000.

I can't figure out what the asterisk means....... :roll:

Resurrection is for those who did not get it right the first time

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 13 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

My site for a review!!

the * means any element that's a descendant of body, eg:

body {
background: black
}

body *
background: blue;
}

<body>

<p>hello</p>

<div>hello</div>

</body>

the body background will be black, the background of everything on the page (contained by body) will be blue.

It's a neat little hack I though of the other day Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

Fonz_k
Offline
Regular
Netherlands
Last seen: 10 years 20 weeks ago
Netherlands
Joined: 2005-10-22
Posts: 34
Points: 0

Changed layout....

Gonna try that one one day on a next site!

For now i changed the layout of the page again.... Shock

Used all absolute positioning so i can have absolute control of the site...... for what it's worth............... (And because i can't figure out how to keep the layout but with a rezize-possibility of the center DIV.. must be very simple and i think my way of thinking is too complicated.)

So anyway, what ya think so far..... (again)

Resurrection is for those who did not get it right the first time

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 13 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Re: Changed layout....

Fonz_k wrote:
Used all absolute positioning so i can have absolute control of the site...... for what it's worth............... (And because i can't figure out how to keep the layout but with a rezize-possibility of the center DIV.. must be very simple and i think my way of thinking is too complicated.)

So anyway, what ya think so far..... (again)

fail fail fail fail fail fail FAIL!!!!! Evil

Absolute positioing is the tool of the devil. WHY would you use it?

Horribly small text.

Text goes all over the place when your esize it.

<br> is a presentational element.

Quote:

Best viewed in IE and FF: 1024*768

Fail. Any time you write "best viewed in..." you fail.

Verschwindende wrote:
  • CSS doesn't make pies

Fonz_k
Offline
Regular
Netherlands
Last seen: 10 years 20 weeks ago
Netherlands
Joined: 2005-10-22
Posts: 34
Points: 0

My site for a review!!

Easy easy easy.......................man, didn't think you'd get mad....

First of all: i do not want to use tables for this, but i can't get this stuff centered on the page. So i used absolute. I'd prefer relative, but everything i try, messes up the entire site.......... Sad

OK, horribly small text. what would you suggest then? (Edit: Changed it to 12 px, looks better indeed..... Smile )

So, no resizing........

<br> is a presentional element?? ( what does that mean? English is not my native language )

"Fail. Any time you write "best viewed in..." you fail." POINT TAKEN. ( Edit: Removed "best viewed...." Now i only need it to get it "best viewed in any resolution and any browser" Laughing out loud .....)

Like i said before: I'm a newbie, just trying to get a grip on css. I did not kill you, i did not hurt you ( maybe just your css-feelings ) but it does not mean you have to use Evil and "Fail fail fail" to make your point. I really learned a lot from you guys, don't spoil it... :?

Practice makes perfect, still practice for me! Cool

Resurrection is for those who did not get it right the first time

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 5 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

My site for a review!!

The thing about using absolute positioning is that your site might look fine at your screen res, window size & text size, but any variations on any of those variables and it's likely to break.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Fonz_k
Offline
Regular
Netherlands
Last seen: 10 years 20 weeks ago
Netherlands
Joined: 2005-10-22
Posts: 34
Points: 0

My site for a review!!

Tyssen wrote:
The thing about using absolute positioning is that your site might look fine at your screen res, window size & text size, but any variations on any of those variables and it's likely to break.

So, what would you suggest i'd do? You don't have to write a complete css-file. Just give me an online example. I could use a dreamweaver template, but then it's not mine anymore. Sad

I like this kinda layout, and want to keep the layout...in a way.. :?

Resurrection is for those who did not get it right the first time

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 5 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

My site for a review!!

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Fonz_k
Offline
Regular
Netherlands
Last seen: 10 years 20 weeks ago
Netherlands
Joined: 2005-10-22
Posts: 34
Points: 0

My site for a review!!

Thanks a lot, i'll take a peek.

Goodnight to Aussie.

(Edit: The first link looks good, however the right column floats over the center column when resizing..... I tried something similar before and this is what happens to me constantly.... Also like thepineapple said resizing the center col does strange things to your text....)

Resurrection is for those who did not get it right the first time

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 13 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

My site for a review!!

A thousand apologies good sir, I have been spending too much time on the Counter-Strike forums (CDG fyi) and I have come to yelling at noobs in a destructive manner. How uncouth of me Laughing out loud

You shouldn't use AP unless you know what you are doing. It messes the page right up Laughing out loud

As for <br> being a presentational element - what are you using it for? To create space below paragraphs? That's what the CSS command margin-bottom is for Laughing out loud

Any more help needed, stick around and give us a shout, and forgive me - I often have bad days :twisted:

(thats the smiley devil, not the evil one Laughing out loud )

Verschwindende wrote:
  • CSS doesn't make pies

Fonz_k
Offline
Regular
Netherlands
Last seen: 10 years 20 weeks ago
Netherlands
Joined: 2005-10-22
Posts: 34
Points: 0

My site for a review!!

Ok, all's forgotten.

So in a nutshell:

1. I need to create a max width of 800px for the entire site.
2. I need to create a site with a resizable part to fit any res.

I used the css-editor of this site:

http://members.home.nl/kusters/main1.html

http://members.home.nl/kusters/Fonz_k110507.css

but now i need some extra div's beneath the menu!!

Resurrection is for those who did not get it right the first time

Fonz_k
Offline
Regular
Netherlands
Last seen: 10 years 20 weeks ago
Netherlands
Joined: 2005-10-22
Posts: 34
Points: 0

My site for a review!!

Ok i kicked the Absolute position-layout and used the CSS-layout generator to get things done..... :?

Added an extra column and spiced it up a bit......

Any more comments (Also about the spicing?)

http://members.home.nl/kusters/main.html

Resurrection is for those who did not get it right the first time

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 5 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

My site for a review!!

I would put your shoutbox in the same div as your menu cos at the moment, the menu goes underneath the shoutbox when you resize the text.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Fonz_k
Offline
Regular
Netherlands
Last seen: 10 years 20 weeks ago
Netherlands
Joined: 2005-10-22
Posts: 34
Points: 0

My site for a review!!

Ok i changed it, like you said. ( You mean by resizing in the css-sheet? or browser?)

Man, you really have to take EVERYTHING into consideration...... :roll:

Oh well, learn learn learn........ Making progress....

Resurrection is for those who did not get it right the first time