I use CSS on my site, but I'm having some minor issues.
I put my menu on the right hand side, but the problem is that the main section either causes it to be too far to the left (if main isn't big enough) or too far to the right (if there's something too large).
http://www.imamyth.com/speedruns/index.html
Here's an example of what it should pretty much look like on any resolution (but I state 1024x768 is the prime resolution).
Then go to the outtakes page, then Legend of Mana Outtake #1. The menu floats off to the left.
Is there any way to have that build off of the right and always STAY that way? I don't want to have it float, but just stay positioned on the right wall of the browser.
Joined: 4/25/2004
Posts: 615
Location: The Netherlands
Right is one thing (especially if you don't mind things floating on the left side), but you can put it there absolutely (position: absolute; right: 5px; top: 5px;).
Also, may I strongly suggest you put some hardcoded width in? You can center it by auto margins or even put it on the right or something, but with larger resolutions the texts will become very wide.
Otherwise very cool designs :D
Btw, you know you can switch stylesheets with javascript without reloading the page? (Unless you want no javascript at all of course.)
---
Oh, I just noticed that the head has a black part to the left when you use large resolutions (1600 wide for instance). You can solve this by setting a backgroundcolor to the div that hold the head.
On a side note, the color green of the head of the green stylesheet doesn't match the background color of the body in explorer, that usually means you're not using websafe colors. In other words, the head does not flow into the body, there's a distinct line because of hte color differences. They can be a bitch in explorer (but maybe you don't care about ie, does make life easier ;).
Joined: 2/28/2006
Posts: 2275
Location: Milky Way -> Earth -> Brazil
I can't help, I hate counter strike source. And all the others as well.
"Genuine self-esteem, however, consists not of causeless feelings, but of certain knowledge about yourself.
It rests on the conviction that you — by your choices, effort and actions — have made yourself into the
kind of person able to deal with reality. It is the conviction — based on the evidence of your own volitional
functioning — that you are fundamentally able to succeed in life and, therefore, are deserving of that success."
- Onkar Ghate
Bisqwit wrote:
I'm bumping this again because I'm looking for a little more assistance, since I've been playing around with it on a much higher resolution.
http://www.imamyth.com/
I'm working on the CSS that directly affects this page, though the same general layout is used for all of them (but they're different CSS files).
Surprisingly, Firefox is the problem. IE actually displays it how I want to (save for the lack of PNG transparency in IE6)! I want the footer to sit at the bottom of the page, no matter the resolution. IE 6 does it right, Firefox 3 isn't.
Is this just a Firefox problem, or am I missing something?
Looks fine to me (FF3 / OSX). What are you seeing that looks wrong?
Here's some general feedback, though.
* "Site best viewed in" content is unprofessional. It comes across as telling the user what browser to use, which nobody is going to appreciate. I'm sure many of us would be happier if more people used Firefox (or just something other than IE), but this isn't the way to do it.
* Likewise, stating resolution requirements isn't so great either. You should design your website so it doesn't matter what resolution the viewer is using. That said, you should be safe assuming that everyone has at least a 1024x768 resolution display, since very few people are using smaller these days. Thus, if your minimum requirements are 1024x768, you don't need to say anything; it's like listing a mouse as a requirement for a modern videogame. Just remember that not all of that display is available for your web browser; pixels are chopped off of all sides by menu bars, window edges, docks/taskbars, etc.
* I'd recommend including comments in your HTML noting which opening tag a given close tag corresponds to. This is mostly useful when you have a series of four "</div>" entries or the like.
* Your sidebar (with "IMAMYTH Computers", "IMAMYTH Colosseum", etc.) honestly looks like a section of text advertising, especially with the ringtones on there (I don't think I've ever seen the word "ringtone" on a website outside of an advertising context). It might help if you had some kind of themed icons for each of the different subpages which you could put up with the sections, to make it clear they're legitimate parts of the website. This sidebar is also redundant with the header bar; they aren't both needed.
* For your actual question, you might try putting another clear div after your main div.
Pyrel - an open-source rewrite of the Angband roguelike game in Python.
Looks fine to me (FF3 / OSX). What are you seeing that looks wrong?
Here's some general feedback, though.
* "Site best viewed in" content is unprofessional. It comes across as telling the user what browser to use, which nobody is going to appreciate. I'm sure many of us would be happier if more people used Firefox (or just something other than IE), but this isn't the way to do it.
* Likewise, stating resolution requirements isn't so great either. You should design your website so it doesn't matter what resolution the viewer is using. That said, you should be safe assuming that everyone has at least a 1024x768 resolution display, since very few people are using smaller these days. Thus, if your minimum requirements are 1024x768, you don't need to say anything; it's like listing a mouse as a requirement for a modern videogame. Just remember that not all of that display is available for your web browser; pixels are chopped off of all sides by menu bars, window edges, docks/taskbars, etc.
* I'd recommend including comments in your HTML noting which opening tag a given close tag corresponds to. This is mostly useful when you have a series of four "</div>" entries or the like.
* Your sidebar (with "IMAMYTH Computers", "IMAMYTH Colosseum", etc.) honestly looks like a section of text advertising, especially with the ringtones on there (I don't think I've ever seen the word "ringtone" on a website outside of an advertising context). It might help if you had some kind of themed icons for each of the different subpages which you could put up with the sections, to make it clear they're legitimate parts of the website. This sidebar is also redundant with the header bar; they aren't both needed.
* For your actual question, you might try putting another clear div after your main div.
1. Yeah, I'll remove that later. Though it does look bad in IE due to the logo issue (IE6 doesn't support transparent PNGs) which was the primary reason I stated that.
2. Actually, there's still a lot of people on 800x600 (which is the minimum XP uses, not 1024x768, FYI). And the page gets crunched on that resolution, but looks fine on 1024x768. It got really bad on widescreen monitors (or just high resolutions in general), which I'm finally figuring out how to fix, thanks to another CSS file I ran across.
3. Since I use the same type of style sheet throughout the site, it's used more on the other pages, especially on the Colosseum side (which has very LOOOOONG listing of links, which would never fit on the top menu), it was easier just to modify that.
4. Actually, those are my own made ringtones, which is probably the one reason why I leave the sidebar up - explanation, not doable by a simple link. My opinion though.
5. I'll try that. I put one before it which fixed it in IE6, but didn't in FF3 (XP SP3).
As for what the problem what I was seeing, was that at a high resolution (I don't remember what the monitor was at, but this 22" widescreen monitor can go up to 1680 x 1050), the footer was sitting up off the bottom of the screen, showing the background color underneath it, which looks a bit ugly IMO. IE6 was fixed by the first div clear (man it looked REALLY hideous there before I did). I don't have a screenshot since I'm not at that computer right now. It looks fine on some other resolutions (like 1024x768 though, the screen resolution I'm on now).
Ahh, I see what you mean. I have my font size set large enough that the page content didn't all fit vertically onto the screen (despite having 1050 pixels of vertical resolution), so I didn't see the "floating" footer.
Unfortunately, I don't know of any good way to fix this. Basically you're asking for a way to dynamically set the document height based on the size of the window.
Pyrel - an open-source rewrite of the Angband roguelike game in Python.
It's a really bad idea to load your CSS using JavaScript.
Many people use NoScript in Firefox for safety. They might not want to turn the scripts on for your site just to see if it will start making some sense then. Some people even browse with JavaScripts completely turned off.
CSS is not related in any way to JavaScript. They are completely independent. Loading CSS using JavaScript is nonsensical. Requiring JavaScript for your webpage to look good is nonsensical. Even if JavaScripts are used for something truely useful, your website should still look good even if they are turned off. (You can add one of those notes about javascripts which the browser shows if they are turned off, if you want.)
It's a really bad idea to load your CSS using JavaScript.
I agree fully with the sentiment and the reasons listed.
This is Sir VG's site, as shown on my browser by default.
Howdy pardner!
Seriously though, CSS should be loaded without Javascript (at least a "default" stylesheet for those with scripts turned off), and if you want to fix the IE6 transparency issue look here: http://designoahu.com/ie-png-transparency
Actually, there's suppose to be a default selected if you've never visited the site. Choosing one of the 6 options saves the choice into a cookie, so that particular style is used the next time you visit. I used Javascript there because that was the only way I could find at the time to make it work. Granted I could just use 1 CSS and be done, but I didn't want to do that - I wanted to throw in a few options.
I guess the default doesn't work since it's part of the script code. I think I couldn't put it in the header normally with the script at the same time, because the header one overwrote the script command. I'll have to double check that again.
I think I'm understanding how the PNG transparency fix works, but I'll have to play around with it a bit to see if I can.
Edit: Got the transparency thing to work in IE6. I've only done it on the homepage, but it works. Kinda sucks that it takes a second for it to activate, but whatever it takes, I guess.
So I guess if anybody has any suggestions on how to do the 6 style sheets thing w/o using Javascript, then I'm all ears. I've tried one possibility (the <noscript> code), which should default the standard script if Javascript is disabled. Only on the index page of both IMAMYTH Computers and IMAMYTH Colosseum. I'm gonna try installing Noscript myself and try it out.
Edit 2: With NoScript on in Firefox, the default script loads - mostly. It screws up my PNGs though. Standard for NoScript? (Forget the last part, that was just a stupid error in my CSS file.) Script loads fine. Just need to add that to all of my pages.
Joined: 11/22/2004
Posts: 1468
Location: Rotterdam, The Netherlands
Sir VG wrote:
So I guess if anybody has any suggestions on how to do the 6 style sheets thing w/o using Javascript, then I'm all ears. I've tried one possibility (the <noscript> code), which should default the standard script if Javascript is disabled. Only on the index page of both IMAMYTH Computers and IMAMYTH Colosseum. I'm gonna try installing Noscript myself and try it out.
Make the stylesheet selector post to a PHP script (or some other script) that sets a cookie. Then add a check in the header of the page that prints a different stylesheet depending on the value of the cookie you set before.
EDIT: untested and off the top of my head so it's probably buggy, but it should be something like this:
EDIT 2: and if you're really fancy, you can make sure that people who have JavaScript turned on don't see a refresh.
In all honesty, I don't think the people who have JavaScript turned off are too numerous. It's mostly people who don't want to be bugged by sites that abuse the technology. Though there are no definitive numbers, I think they're far outnumbered by people who either don't know they can even turn it off as well as those who don't want to miss interactive features that so many sites today offer. This is corroborated by the fact many sites, even really large and important ones, sometimes blatantly lack support for people who have it turned off.
Choosing one of the 6 options saves the choice into a cookie, so that particular style is used the next time you visit.
Note that you shouldn't rely on people having cookies enabled, either. You can enhance your site with cookies, but it should still be functional and look good without them.
Choosing one of the 6 options saves the choice into a cookie, so that particular style is used the next time you visit.
Note that you shouldn't rely on people having cookies enabled, either. You can enhance your site with cookies, but it should still be functional and look good without them.
Yeah, but it's only for people that want to have a particular style used every time they visit. There's always a default if cookies are disabled or it doesn't exist.
This is Sir VG's site, as shown on my browser by default.
