Topic: CSS buggy? Pages that link to <a href="https://ozoneasylum.com/backlink?for=24461" title="Pages that link to Topic: CSS buggy?" rel="nofollow" >Topic: CSS buggy?\

 
Author Thread
Eric001
Bipolar (III) Inmate

From: Chicago
Insane since: Jan 2003

IP logged posted posted 12-21-2004 03:17 Edit Quote

Hello all,

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.

the link is

www.secret-beach.com/csschanger.htm

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?

Thanks in advance

Eric001

_______________________
Chill out on a Secret Beach:
www.secretbeach.net

(Edited by Eric001 on 12-21-2004 03:19)

I X I
Paranoid (IV) Inmate

From: beyond the gray sky
Insane since: Apr 2004

IP logged posted posted 12-21-2004 05:42 Edit Quote

have you thought about making a static width page (center or left align), always using the background for 800x600 res?

just a thought. I do like that background image, did you take it yourself or is it a stock photo?



Of all the things I've lost, I miss my mind the most (Ozzy Osbourne)

Eric001
Bipolar (III) Inmate

From: Chicago
Insane since: Jan 2003

IP logged posted posted 12-21-2004 08:35 Edit Quote

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?

_______________________
Chill out on a Secret Beach:
www.secretbeach.net

I X I
Paranoid (IV) Inmate

From: beyond the gray sky
Insane since: Apr 2004

IP logged posted posted 12-21-2004 22:31 Edit Quote

Eric001: head over to my rendition of your page to see what I was talking about.

The CSS

if you like it you are more than welcome to the html and css. took me all-in-all about 10 min.



Some people say I'm a dreamer, but I'm not the only one (John Lennon)

Eric001
Bipolar (III) Inmate

From: Chicago
Insane since: Jan 2003

IP logged posted posted 12-22-2004 02:57 Edit Quote

It looks good - I might try it..

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.

Definately thanks - this is helpful

Eric

_______________________
Chill out on a Secret Beach:
www.secretbeach.net

Ensellitis
Bipolar (III) Inmate

From: New York, USA
Insane since: Feb 2002

IP logged posted posted 12-22-2004 03:12 Edit Quote

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:

html,body {
font-family: arial, helvetica, sans-serif;
font-size: 1em;
text-align: left;
color: #FFFFFF;
}

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.

____________________________________________________

Eric001
Bipolar (III) Inmate

From: Chicago
Insane since: Jan 2003

IP logged posted posted 12-22-2004 04:25 Edit Quote

I put it on my site

http://www.secret-beach.com/Eric001.html

Do you notice the border around the image. Is there a way to get rid of that? or make it always black?
It looks red right now.

_______________________
Chill out on a Secret Beach:
www.secretbeach.net

Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

IP logged posted posted 12-22-2004 04:52 Edit Quote
code:
img {
border: 0px;
}




Justice 4 Pat Richard

Eric001
Bipolar (III) Inmate

From: Chicago
Insane since: Jan 2003

IP logged posted posted 12-22-2004 05:58 Edit Quote

There is something weird...

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.

_______________________
Chill out on a Secret Beach:
www.secretbeach.net

I X I
Paranoid (IV) Inmate

From: beyond the gray sky
Insane since: Apr 2004

IP logged posted posted 12-22-2004 10:26 Edit Quote

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)

Eric001
Bipolar (III) Inmate

From: Chicago
Insane since: Jan 2003

IP logged posted posted 12-22-2004 20:32 Edit Quote

well -

That CSS validator is great. I was able to get rid of a lot of bugs. The page will never perform in Netscape - but I will have to accept that.

I guess that I am going to stick with the design I started with

www.secret-beach.com/csschanger.htm

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.

Eric001

_______________________
Chill out on a Secret Beach:
www.secretbeach.net

JKMabry
Maniac (V) Inmate

From: raht cheah
Insane since: Aug 2000

IP logged posted posted 12-22-2004 20:48 Edit Quote

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?

Ensellitis
Bipolar (III) Inmate

From: New York, USA
Insane since: Feb 2002

IP logged posted posted 12-22-2004 20:50 Edit Quote

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...

http://www.ensellitis.com/styles/default.css Here is a link to mine
http://www.w3schools.com/css/ here is a great site to go to to learn CSS, it is what I started on...

____________________________________________________

Eric001
Bipolar (III) Inmate

From: Chicago
Insane since: Jan 2003

IP logged posted posted 12-22-2004 22:07 Edit Quote

Ensellitis,

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:

color="#FFFFFF";

but now I see that it should be written as

color:#FFFFFF;

funny thing is that both ways work in IE.

_______________________
Chill out on a Secret Beach:
www.secretbeach.net

(Edited by Eric001 on 12-22-2004 22:07)

Ensellitis
Bipolar (III) Inmate

From: New York, USA
Insane since: Feb 2002

IP logged posted posted 12-22-2004 22:45 Edit Quote

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

____________________________________________________

JKMabry
Maniac (V) Inmate

From: raht cheah
Insane since: Aug 2000

IP logged posted posted 12-23-2004 00:18 Edit Quote

CSS syntax has always been color:#FFFFFF; - that it works the other way in IE suprised me, but only for a sec :]

Eric001
Bipolar (III) Inmate

From: Chicago
Insane since: Jan 2003

IP logged posted posted 12-23-2004 04:31 Edit Quote

almost there!


The CSS selector script in the page sniffs out the screen size and then chooses between two classes .first or .second

It works to select the proper sized background image
www.secret-beach.com/csschanger4.htm

that is pretty much what I was looking for all along.. (nevermind that some of the links on that page are below the area of sight for now)

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:

.first

{
a{color:#E3E7EA;text-decoration:underline;font-family: arial, helvetica, sans-serif; font-size: 12px; line-height: 12px}
a:hover{color:#00ee00;text-decoration:underline;font-family: arial, helvetica, sans-serif; font-size: 12px; line-height: 12px}
a:visited {color:#00ee00;text-decoration:underline;font-family: arial, helvetica, sans-serif; font-size: 12px; line-height: 12px}
a:active {color:#FFFF33;text-decoration:underline;font-family: arial, helvetica, sans-serif; font-size: 12px; line-height: 12px}

H1{color:#99FFFF;font-family: arial, helvetica, sans-serif; font-size: 12px; line-height: 12px; font-weight: bold}
opto{color:#99FFFF;font-family: arial, helvetica, sans-serif; font-size: 10px; line-height: 12px; font-weight: bold}
opto2{color:#66CCCC;font-family: arial, helvetica, sans-serif; font-size: 10px; line-height: 12px; font-weight: bold}
background: white url(/images/websitewelcome2.jpg) no-repeat fixed center center;
}


.second

(repeat with different font-sizes)


Finally - to get the page to work, would I need to change the <p class=" "> tags already in the html?

Please forgive me if my code is bloated..

Eric001

_______________________
Chill out on a Secret Beach:
www.secretbeach.net

(Edited by Eric001 on 12-23-2004 05:00)

(Edited by Eric001 on 12-23-2004 05:04)

Ensellitis
Bipolar (III) Inmate

From: New York, USA
Insane since: Feb 2002

IP logged posted posted 12-23-2004 06:12 Edit Quote

Bloated?? My style sheet has 491 lines in it. :P

Some suggestions:

Make your links darker, I can barely see them...

You have alot of this:
<p>&nbsp;</p>
It may just be me, but these are kinda pointless, why not use <br />

Which brings me to another thing, you should change your <br>'s to <br />'s so the can validate in XHTML, if you wish to do so.

If you do wish to make your site XHTML then you also need to end your image tags
(i.e. <img src="imagelink.gif" border"0" alt="image description" /> )

I would also go from using tables to using layers, which would also be controlled via your stylesheet...

But to your questio, I would not even use <p> tags, I see no need for them in there.

____________________________________________________

JKMabry
Maniac (V) Inmate

From: raht cheah
Insane since: Aug 2000

IP logged posted posted 12-23-2004 17:59 Edit Quote
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;
}



I knocked up a quick example of the concept here, check it out (or root around here).

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>&nbsp;</p> etc) that are not good stuff. Positioning with CSS would provide you with much cleaner markup and much more flexible measure of control.



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu