I am a novice with CSS, and I tried to add a snippet of code to a new splash page I was making for the holidays. It is a screen size detector that then determines the proper CSS to use. I kinda got it working for IE, but I am not sure how to fix it for the other browsers.
Basically it changes the size of the background image depending on the screen size so that it looks allright. Its kinda basic. Is there a way to use window size instead of screen size- or do you think that it is good the way it is?
Would it be good to also change the size of the text as well? How would I do that?
I tried designing it with only the one size of picture but it didnt really look great.. Maybe you are right - But how do you make a static width page? So you are saying just have a 800x600 splash page open up no matter how big a person's screen size is......
Also, I took the picture myself. It is another one of my growing hobbies that I am meaning to turn into a profession. Do you think that it is unwise for me to post the picture like this? Or unwise?
I am looking at it in both screen sizes and I like it but I am wondering why do you prefer to use the same 800x600 image for both. Is it so that everything fits on the screen or to protect from people grabbing a higher res image? What did you think of the csschanger script?
Also, to add in my font styles into the stylesheet would I use the same syntax? I dont really have a good handle on CSS.
Finally - going back to the old page, what would I do to debug it. It definately isnt so hot in Firefox, but seems to, at least, do what I intended anyway in IE.
Myself, I prefer a single size image. Simple is always better, don't over complicate. I X I rendition is very nice. It seems to work great in all browsers and your old one seems to have a different look in all the different broswers... Besides, updating and changing things is so much easier when you only have 1 stylesheet/page to edit.
Formatting the text in CSS include on the rendition:
I'm not sure if that is what you were asking for but it may be a start. Changing those variables will change the text throught the page using the sheet.
I would also convert the page to XHTML, it is pretty easy to do and makes the site a little more compatible...
Hope I helped, if not atleast I got 10 minutes of the end of the day out of the way... Good luck.
The page looks weird in Netscape. Only half of the image loads and if you have your screen set to 1024x768 then you can see the menu on the right hand side.
sorry I wasn't here earlier to chime in, but I was babysitting my 3-year-old nephew all day. He's awesome
I meant to take the border off the img after I posted, but I had to run off for some reason or another. anyway, you can do the border in the stylesheet or inline, with <img border="0" src="whatever"> or <img src="whatever" style="border:0;" >
the issue of the image only loading "halfway" may be with the height of the image and the height of the content div being 500 in my stylesheet. like I said, I just threw this together, so that could be the problem
quote:Eric001 said:
I am wondering why do you prefer to use the same 800x600 image for both. Is it so that everything fits on the screen or to protect from people grabbing a higher res image? What did you think of the csschanger script?
I like things to be as simple as I can make them. CSS helps in that with one included stylesheet I can modify the way the entire site looks. my personal site, www.ixifx.net , has a width of 640px just so it scales well, and the static (fixed) width makes sure I don't have any scrolling or positioning issues. I don't really worry about anything of mine getting stolen because for one I'm not that good and secondly I'm not making any money off of it, why should it bother me? and, sorry, I didn't bother checking out your script, I wouldn't understand it anyway. I do a little vb and basic css/html nothing fancy
quote:Eric001 said:
Finally - going back to the old page, what would I do to debug it. It definately isnt so hot in Firefox, but seems to, at least, do what I intended anyway in IE.
one thing I didn't like about the old page is that it scrolled for no apparent (<-that doesn't look right...) reason. to debug, I usually just try to get the page to validate with the w3c validator once I get it validating, I just play around until I get the page the way it should look (or as cloes as possible to FF in IE, because I test in FF)
also, a side note I was thinking while re-reading this page before I post again. when you're setting the fonts in your .css file I think if the font is one word, like Arial, you just put it in, but if it's more than one, like Times New Roman, you would have to put it in either single or double quotes, so either 'Times New Roman' or "Times New Roman" not sure which off the top of my head, but give it a whirl anyway.
and, play around. tweek the layout a few px here and there and play with the floats and divs and you could even try setting the image as the background of the content div by adding the line
background: url(images/pic.jpg);
to the div. that would probably be more like you had in your first page
well, that was certainly more than I expected to write when coming in, but at least I can say I was being helpful just keep trying and if you need help don't be afraid to ask more questions (remembers some teacher saying "the only stupid question is the one that wasn't asked" or something like that) anyway, glad to help, as I'm sure most everyone else here is, too
I know the pieces fit, 'cause I watched them fall away (Maynard J. Keenan)
I like how it resizes the picture depending on screen size. That has always been my quest.
I suppose I should do the same for the text?
Are there any guidelines you would suggest for increasing text size if the screen size increases? Double the sizes?
The only other thing - I always have trouble finding the best colors to make the text and links show up behind a background photo. The colors on this page now are soso. Do you have any suggestions for good colors?
mucho thanks - I never learned CSS but I guess Im learning now.
I'm not sure exactly what you're trying to do but I have a feeling it may be something like this? It's not something I'm terribly proud of making but it may be near to what you're after?
Perhaps you should use CSS in order to change the size...
Using a container, give the DIV a background image:
background: url('image.link');
And set the hieght/width all in the stylesheet. Making one for each resolution.
That way you can also control the text colors and such to be different for each resolution as well...
I suck at explaining it, but you can check out my style sheet I use, I don't have most of my images on the actual page I use, just a few, but they are controlled by the stylesheet so later I may do some skinning...
Am I wrong or has the syntax changed for stylesheets/CSS. Some of the web pages on my site were done a year or more ago and I could swear that people were directing me to write something like:
As far as I know using color="#FFFFFF"; is meant more for HTML, but web standards are color:#FFFFFF;.
5 years ago I didn't even know what CSS was and I used code such as <font color="#ffffff">, it is possible that when stylesheets first hit mid stream that it was done that way. Of course that was when IE was pretty much your only option, now with hundreds of browsers out there I guess they decided to do something that was uniform... I'm only guessing though
quote:But if I also want to resize the text and link attributes (size) in the same way, would I have to put all those into subclasses?
Here is what I mean, but I dont know the proper syntax:
As you've said you have the idea but not the syntax. "Subclasses" as you said are actually the "Cascade" in Cascading Style Sheets (CSS). Since you've added a class to the body, you can style any element below it by specifying like so:
code:
body.first h1 {
color : red;
background-color : transparent;
font : bold 24px georgia, courier new, courier, monospace;
}
Are you striving to make valid/compliant pages? If so there's a lot of work to be done in there, as Ensillitis said you've got a lot of things in there that look as if they were put in by a WYSIWYG editor (<p> </p> etc) that are not good stuff. Positioning with CSS would provide you with much cleaner markup and much more flexible measure of control.
posted 12-21-2004 03:17
