PDA

View Full Version : Learning CSS

Abronsyth
09-19-2011, 06:11 PM
Hey guys, I've recently started to learn CSS, and I finally have come up with something I'm moderatly proud of, seen here:
Archurub (http://archurub.x10.mx/index.php)

I'd just like some feed back and such :)

Thanks,
Iris
Nemesis
09-19-2011, 09:04 PM
looking really good! I am doing the same thing, in fact I have a 10 page website due in 10 days :ohnoes:

Though you lose some points for not having this at the top of your document.:ti:

<?xml version="1.0" encoding="UTF-8"?>
<!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">
Abronsyth
09-20-2011, 11:45 AM
Wow, well, I'm certainly not taking a class on it! Just trying to learn how on my own...hehe, good luck with your 10 pages :)

Haha, I just got to the chapter about that on w3schools... And yes, I am learning from http://www.w3schools.com I find it to be excellent for teaching CSS to beginners like me :)
ChibiMaestro
09-20-2011, 01:33 PM
Woah,

in your CSS file, you have HTML D: NOOOO D:
CSS does not contain HTML at all, remove plz.

What Nemesis meant was to have that in the HTML template itself, not the CSS file.

I like the art and blue+grey combo though 8D
But, I think the login panel at the bottom is a bit too... stripey, and distracting.

You've got a good CSS start, I'm pretty sure you're way better than when I was starting CSS (which was like 1 and a bit years ago lolol).

If you need any help, feel free to ask!
Inf3rnal
09-20-2011, 03:59 PM
looking really good! I am doing the same thing, in fact I have a 10 page website due in 10 days :ohnoes:

Though you lose some points for not having this at the top of your document.:ti:

<?xml version="1.0" encoding="UTF-8"?>
<!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">

You don't need that horribly ugly doctype declaration. Html5's doctype is 100% supported in all browsers even in quirks mode.

Use:
<!doctype html>

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
Abronsyth
09-20-2011, 05:18 PM
Yay, now I'm all confused :D Thanks people who know way more than I do about CSS...XD Well...it's not like anyone can actually see the coding of the CSS...grr...I'll edit it...I'm trying to fix the annoying striping problem...just need to figure out what to edit...
Inf3rnal
09-20-2011, 09:08 PM
Lets see.

CSS Files do not have headers. So it just looks like this:

id { stuffhere }
id2 { stuffhere }
id3 { stuffhere }

or the way I format

id {
stuffhere
}
id2 {
stuffhere
}
id3 {
stuffhere
}

HTML Files have tags such as <!doctype html>, <head>, <body>, <div>, etc.

Tags do not belong in .css files.
Abronsyth
09-21-2011, 03:55 PM
Okay, I took all of the HTML tags out of the CSS document :D

I have it set in my mind how I want the finished site to look...now I just need to learn how to make it so...

[banner]
-space-
[navigation bar]
-space-
[content]
-space-
[footer]

With it all a set width, so you can see the BG image, and the content, footer, navi bar, and banner are all a set size instead of being the whole page...and having the amount of bits the user has shown some where...guh...I'll figure it all out eventually...
Inf3rnal
09-22-2011, 08:15 AM
You still have this in your style.css:
<?xml version="1.0" encoding="UTF-8"?>
<!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">
<html>
<head>
<style type="text/css">

Remove that and your golden.
Abronsyth
09-22-2011, 03:38 PM
Well, here's the new version of the site with the experimental CSS...now, could someone who's more CSS savy than me please explain how to make it so the content (the white) stretches according to the text and such, as you can see in this screen shot, it's not working. Also, how would I move the whole thing into the center, so it's not all up in the left corner of the screen, and I'm trying to move the side bar over to the left, while still inside the content, and not disrupting the text and such in the content...anyone know how to fix that?

And, finally, does anyone know how to create a drop-down menu?

http://archurub.com

Screen Shot (http://www.iaza.com/work/110923C/iaza12238410446200.png)
Nemesis
09-22-2011, 08:55 PM
I just centered mine (http://spiceandwolf.99webs.info/characters.html) with

#wrapper { width: 900px;
margin: 0 auto;
}
then everything in the <div id="wrapper"> is centered </div> try that. make the px match your area though. and sorry if i caused any confusion i was just messing before.

Also my book says this should be the first thing in your document <?xml version="1.0" encoding="UTF-8"?> however the page never loads with that in there. i take it out and it works fine.
Abronsyth
09-23-2011, 02:38 PM
I tried adding that (adjusted the px), and it didn't work. I might just try to find some one willing to create a theme for me...