CSS Stylesheet problems

[Xgthug]

EDIT: Okay, I just noticed that I didn't assign the style sheet within the html tags, so that's why the browser completely disregarded it. The problem still remains of IE not loading the background image.

Alright... This is basically my first time creating a site completely from scratch in Notepad, so I am very inexperienced and prone to make mistakes.

I was working on my home page, and everything was working perfectly in my site folder on my PC, but when I uploaded the site, it would not display correctly in Internet Explorer or Firefox.

In Firefox, it disregards the stylesheet completely.
In Internet Explorer, it displays the correct text formatting, but not the background.

Here's the style sheet:

body
{
background-image:url('images/spiderweb1.png'), url('images/spiderweb2.png'), url('images/contentbackground.png');
background-position: top left, top right, top left;
background-repeat: no-repeat, no-repeat, repeat-x;
background-attachment:fixed;
background-color:#000000;
}
h1
{
color:black;
text-align:center;
font-family:"courier new";
font-size:36px;
}
p
{
color:#ff6600;
text-align:center;
font-family:"courier new";
font-size:20px;
}
p2
{
color:#660000;
text-align:left;
font-family:"courier new";
font-size:20px;
}

a:link { 
	color: #FF9900;
	}
a:visited { 
	color: #FF6600;
	}
a:hover { 
	color: #990000;
	text-decoration: underline;
	}
a:active { 
	color: #FF6600;
	}

img
{  border-style: none; }

I have no idea what I'm doing wrong, as everything is laid out exactly the way it was on my computer.

Help appreciated.

[WoodenSword]

You are using CSS 3 syntax ( multiple images for the background-image property).

IE do not support CSS 3 yet. I suggest you use another approach for combining the 3 background images

see here:
http://msdn.microsoft.com/en-us/libr...85).aspx#color

Nothing was wrong in your computer because you either test it locally on a CSS3 capable browser or you test it inside dreamweaver.

[Sang]

WoodenSword: then why would FireFox disregard it completely?

[Xgthug]

Originally Posted by WoodenSword

You are using CSS 3 syntax ( multiple images for the background-image property).

IE do not support CSS 3 yet. I suggest you use another approach for combining the 3 background images

see here:
http://msdn.microsoft.com/en-us/libr...85).aspx#color

Nothing was wrong in your computer because you either test it locally on a CSS3 capable browser or you test it inside dreamweaver.

I don't use Dream Weaver, but thank you for the tip about IE not supporting CSS 3.

<quote=Sang>then why would FireFox disregard it completely? </quote>
As I said above in my edit, I resolved this issue. The CSS wasn't within the HTML tags, so that's why Firefox disregarded it.

By the way, this is my site:
http://www.paramultart.comyr.com
Feel free to give me pointers and constructive criticism, and let me know how it displays in your browser.

[Sang]

Looks fairly crappy, actually. Not gonna go too much into it but some stuff:

- Don't use frames! (tis why you get those horrible scrollbars, it's better to have one HTML document per page, so that includes header, footer,... it's true that you can copy-past that across pages but it looks MUCH nicer)

- Your header image repeats at the end. Cut it off a bit and center it.

- IMO, black colours on a dark background don't really work. See... pretty much all over your site. I also wouldn't use dark red colours. Of course you have the problem that your background image is bright at the top and gets darker. If I were you, I would pick one solid colour, or at least a texture that has a consistent colour scheme.

- Why is there a partial menu at the top ànd at the bottom? Have all links at the top. The bottom is for copyright stuff and whatever and possibly links to Sitemap and all that if necessary.


Resolving that alone will not necessarily make it LOOK nicer per se, but it will be a lot less painful to browse through like it is now. It's not that you should make a professional looking site, but check, for example, MSDN:
http://msdn.duke4.net/index.shtml

It uses frames as well which I'd vote against but that's not the point, see how the main content part doesn't feel claustrophobic (yours does, everything in it is huge, there's not a lot of empty room which IMO should be there) and how everything is clearly readable.

MSDN's design is pretty amateur stuff really, but it looks good.

Maybe if I have some motivation later on I'll design a homepage for your paramultart thing

[peoplessi]

The spacing is about the only good thing about MSDN Otherwise the points Sang said are pretty much valid.

You should really check out few example sites and read on usability. Since this is personal site it's not an big issue, but if you build sites for money you need to be on to of the game.

[Sang]

Originally Posted by peoplessi

The spacing is about the only good thing about MSDN

I dunno, for an amateur Duke site I'd say it looks great. Of course it's not the site you'd want for something big and professional

[Xgthug]

Originally Posted by peoplessi

You should really check out few example sites and read on usability. Since this is personal site it's not an big issue, but if you build sites for money you need to be on to of the game.

You're absolutely right. The real estate site wasn't that big of a deal, since they requested simplicity. I actually used that template I made to redesign my home page, and then just filled it with all my shit. So essentially, that crappy page you're seeing is my first attempt at web design.

Originally Posted by Sang

- Don't use frames! (tis why you get those horrible scrollbars, it's better to have one HTML document per page, so that includes header, footer,... it's true that you can copy-past that across pages but it looks MUCH nicer)

I plan on replacing the scrollbar with a javascript one, so I see no problem using frames. It beats copying and pasting the whole menu per page.

- Your header image repeats at the end. Cut it off a bit and center it.

Ahhh... See, this is why I wanted to know what it looked like in other browsers or resolutions. My monitor is fixed at 1024x768, and will not let me go any higher... I will fix this.

- IMO, black colours on a dark background don't really work. See... pretty much all over your site.

What? If the page loaded correctly, the text should be orange. (Unless you're talking about the headers, like "Home" and all that)

- Why is there a partial menu at the top ànd at the bottom? Have all links at the top. The bottom is for copyright stuff and whatever and possibly links to Sitemap and all that if necessary.

I didn't want the top bar being too crowded, so I put all the unimportant pages at the bottom.

Resolving that alone will not necessarily make it LOOK nicer per se, but it will be a lot less painful to browse through like it is now. It's not that you should make a professional looking site, but check, for example, MSDN:
http://msdn.duke4.net/index.shtml

Hmm... We clearly have opposing opinions on web design. As far as I'm concerned about that site, it's hard to go wrong whenever the entire page consists of a big blue void with links and banners haphazardly scattered about. I take no personal offense to your post, I just think that site is rather bland.

Maybe if I have some motivation later on I'll design a homepage for your paramultart thing

That would be cool. I am curious what you could come up with.

---------- Post added at 07:11 PM ---------- Previous post was at 07:04 PM ----------

This is what it's supposed to look like (minus the scrollbar)... 1024x768 in Firefox...



I thought it looked good, but clearly I was mis-steak-en.... hehehe... (oh wait, wrong thread)

[Sang]

Originally Posted by Xgthug

It beats copying and pasting the whole menu per page.

Yeah you'd think so but trust me, it doesn't.

(Unless you're talking about the headers, like "Home" and all that)

I was.

I didn't want the top bar being too crowded, so I put all the unimportant pages at the bottom.

8 links is not crowded, as long as you don't make the fonts huge like you did.

I just think that site is rather bland.

It is but note that (at least IMO) it looks better than what you have come up with. It's true that MSDN's design doesn't "take risks" but it doesn't have to.

[Xgthug]

Originally Posted by Sang

8 links is not crowded, as long as you don't make the fonts huge like you did.
It is but note that (at least IMO) it looks better than what you have come up with. It's true that MSDN's design doesn't "take risks" but it doesn't have to.

Okay, I took your advice, and now the site looks MUCH better!



As you can see, I've taken a "no-risk" approach to web design! (because I don't have to)

...

[ZuljinRaynor]

TBH, that is much better than what you have right now. Those menus are pretty terrible and this site looks like one of those Y2K Geocities sites people would make.

[Superczar]

Are you designing a website or a resume there, lol...

[eddym4814]

You can also download some free templates and use them as a guide to make your home page look more interesting. I have a couple of crappy looking websites. I was bored one day and decided to make a new homepage for one of my sites using a free template. It's simple looking and easy to navigate. It's really a practice page that I never followed up on. If you want to see it you can find it HERE.

[Xgthug]

Hahahaha... Wow, what an awful response, guys.
This thread was for CSS problems, "how does it display in your browser", and constructive criticism.

I don't mind people calling it ugly or saying it looks like a Geocities site, but "here are some templates... use them" is by far the most insulting thing I have ever heard.

I took what criticism I received and fixed the site a bit, but other than replacing the scrollbar, I think I am pretty much satisfied with my homepage, so check it out one more time... and if you still think it's ugly, well then... oh well.
Just be thankful it's not your webpage.

[Sang]

Originally Posted by Xgthug

Okay, I took your advice, and now the site looks MUCH better!



As you can see, I've taken a "no-risk" approach to web design! (because I don't have to)

...

I realize you're trying to take the piss but actually that can be a basis for further developing your site. In that design, I would get rid of the black lines surrounding your main content and remove the underlining on Paramultart.

From there, you can put some colour into it, insert some shapes et cetera.

edit:
In a few minutes I photoshopped some stuff and came up with the following really basic design that needs to be worked on more but I don't feel like doing that . I'm not too sure about what to do with the main content bit, not enough inspiration here Right now it's just a big black box with some subtle gradients on it.

Note that before earlier this year, I've never designed a site / coded HTML/CSS at all.. so of course you shouldn't expect The Oatmeal-quality stuff. (if you're interested in something better I made (so you won't go "OMG THIS GUY IS FULL OF SHIT" ), here's a screenie from a Flash project I had to do for school: http://www.imagebanana.com/img/b7nqlmw/ninsite.jpg)

[eddym4814]

Originally Posted by Xgthug

Hahahaha... Wow, what an awful response, guys.
This thread was for CSS problems, "how does it display in your browser", and constructive criticism.

I don't mind people calling it ugly or saying it looks like a Geocities site, but "here are some templates... use them" is by far the most insulting thing I have ever heard.

I took what criticism I received and fixed the site a bit, but other than replacing the scrollbar, I think I am pretty much satisfied with my homepage, so check it out one more time... and if you still think it's ugly, well then... oh well.
Just be thankful it's not your webpage.

Sorry, I did not mean to insult you. I was suggesting you could check out the code from different templates and incorporate any you found interesting into you page. Read the first line of my previous post. I said guide.

Honestly, more power to you if you want to make your site from scratch. I don't have the time or the patience to do that.

Also I checked out your page and it looks okay in FireFox. It could use more contrast between the text and background though.

[peoplessi]

There is no reason to use frames. Using PHP would be advisable, you could write 1 line per page to include the menu - which would lower the work you need to do. For such site, are the forums really necessary? It shows that you aren't really experience in this, but I wouldn't dismiss advices to easily.

- No large images that are part of the layout
- Use CSS alignment possibilities (look zengarden)
- Keep it clean CSS & HTML + PHP/JavaScript(preferably jQuery)
- Consider the color scheme you are having, use services like Adobe Kuler to have more balanced set of colors

[Xgthug]

Originally Posted by peoplessi

There is no reason to use frames.

Why? I like frames because they make sense to me. I am able to control certain elements of the site by percentages or exact pixels.
If I wanted the whole site to scroll with the scroll bar, I could easily do that by making one massive frame that contains all the other frames, and then make it scrollable. There are no limitations with frames, and I have them rigged in the exact way I envisioned.
As soon as you can explain to me why frames are a bad idea, I will consider revising.

For such site, are the forums really necessary?

Of course not. Why would a personal home page NEED forums? I'm not expecting to grow some community around this site. I just wanted to know how to install and use PHPBB and MySQL just in case I ever need to.

It shows that you aren't really experience in this,

This is my first site, so I'm trying to do everything I can with it, to GET experience.

but I wouldn't dismiss advices to easily.

I'm not dismissing any advice I'm given. I appreciate it, but there are some things about the design I am not willing to change. I love dark colors, and orange and black. I like rusty and decayed looking shit.

- Consider the color scheme you are having, use services like Adobe Kuler to have more balanced set of colors

Why would I want to change the color scheme if I feel that it's perfect?

Originally Posted by eddym4814

Sorry, I did not mean to insult you. I was suggesting you could check out the code from different templates and incorporate any you found interesting into you page. Read the first line of my previous post. I said guide.

Honestly, more power to you if you want to make your site from scratch. I don't have the time or the patience to do that.

No hard feelings, man. I just took it the wrong way.

Originally Posted by Sang

In a few minutes I photoshopped some stuff and came up with the following really basic design that needs to be worked on more but I don't feel like doing that . I'm not too sure about what to do with the main content bit, not enough inspiration here Right now it's just a big black box with some subtle gradients on it.

See, I think yours looks good, but it doesn't feel appropriate for my site.
I like things dark and gritty, with some Halloween elements thrown in. (Orange and black, and spider webs)




Of course, I am still in the process of refining my site, but I honestly don't see why my site looks so bad.
Perhaps my monitor settings are messed up, as all the color tones on my site appear beautiful to me.

[ZuljinRaynor]

Fix this thing. Reading the text over this is not fun.

[Sang]

Originally Posted by Xgthug

(Orange and black)

You know, now that I look at my design more closely it does look like the colours I used were yellow and green.

Though yes, there is nothing wrong with the colours of your site per se it's just the way you use them. As ZuljinRaynor pointed out, reading text on an image background for example just doesn't work that well with the possible exception of a header.

And dude, no matter your opinion on frames... it's like a webdesign law not to use them anymore (yeah yeah I know MSDN still has them but then again that site has been around for over 10 years, if you're making a site in 2010 though, stay away from that stuff)

Really, rather than using frames you should position your elements using CSS.

[Xgthug]

Alright, you guys were probably right about most of the stuff.
Refresh the page and tell me if this looks any better:
http://www.paramultart.comyr.com

Changes:
-New Banner
-Less eye-straining font colors (I was using a very limited hex-color chart previously)
-New content bars
-Smaller frame borders

I'll try to get the Java scroll bar working tonight (anyone know of any good ones?), and I will try to learn PHP tonight to replace the frames, but I still think that copying and pasting menus from page to page is more retarded and outdated than using frames.

[Sang]

Originally Posted by Xgthug

I will try to learn PHP tonight

In one night?

[Xgthug]

Originally Posted by Sang

In one night?

I learned what I know of HTML and CSS in one night. Is PHP a lot harder?

[peoplessi]

Looks better now, more readable. CSS and HTML are very simple compared to PHP. PHP isn't hard, but encompasses a lot more stuff. Check PHP include and include once.

[Sang]

Originally Posted by Xgthug

I learned what I know of HTML and CSS in one night.

You spend another few nights on that (not necessarily studying but practicing, which I guess is the point of your homepage.. but having wrong ideas about pretty much fundamental webdesign stuff during your practice phase is not a good thing)

[Xgthug]

Originally Posted by Sang

...but having wrong ideas about pretty much fundamental webdesign stuff during your practice phase is not a good thing)

Honestly dude, I don't see why you make such a big deal about my homepage sucking. The old version was thrown together in like... 30 minutes...
And while you were right about some stuff and I appreciate your advice, you're acting like I'm forever cursed or something because I made a few novice mistakes. I usually learn pretty quick, so that's why I usually listen to criticism and have no problem fixing my mistakes.

[Sang]

I don't have a problem with your home page looking shitty, that stuff happens when you're practicing. I do, however, feel like I really should convince you that frames in a new website made in 2010... are just no go

[Xgthug]

Alright. Thanks for the heads up, bro.

I'll try to learn PHP sometime soon.
In the meantime, what Java scroll bar script would you suggest?

[peoplessi]

None, just don't use such things. Let the browser do the scrolling. There is really no need to try and be clever and go around that. It's just irritating for the user.

[Sang]

Again, what peoplessi said is correct. In webdesigning you do need to hit that switch in your brain, right now you're still going "I like the way this and that looks, personal preference ftw".. Actually what's more important is "how easy will the end user find things? will they not be irritated?"