Arwen-Undomiel.com
http://arwen-undomiel.com/forum/

Layout Issue :\
http://arwen-undomiel.com/forum/viewtopic.php?f=27&t=15487
Page 1 of 1

Author:  Meldarion Aphaderu [ June 8th, 2007, 1:33 am ]
Post subject:  Layout Issue :\

Well, as I said in another thread, I'm completely new to html. So please, don't hold it against me if this a really easy question to answer. :teehee:

I made a new layout today in PS, with a relatively lighter background. I was quite proud of it, until I realized upon looking at my actual site after putting up the new stuff, and new colors (some what), that the font looked all messed up.

Heres a screen cap, just take a look at the text. ;)
http://i194.photobucket.com/albums/z227 ... estion.png

And with black font:
http://i194.photobucket.com/albums/z227 ... creen2.png

The circled area is what I mean. I have a feeling it might be becuase of the lighter color, and it just happens that way, or maybe some advanced problem, that I won't ever be able to figure out. :P Is it just arial on that background? Or maybe.. well I'm not sure!

I'd love help from anyone who can offer it.
Thanks!:teehee:

Author:  Antigone [ June 8th, 2007, 2:12 am ]
Post subject: 

It looks fine in Firefox :/

You can change:
<b>font-family:arial;</b>
to
<b>font-family:arial, sans-serif;</b>
But I don't think it would help much..

Try leaving out <b>filter:opacity</b>, might help.
(I hope)

Author:  Meldarion Aphaderu [ June 8th, 2007, 2:58 am ]
Post subject: 

Tried it all, but unfortunately, it didn't work. :'(

But thanks so much for trying to help! :teehee:

Author:  The Grey Pilgrim [ June 8th, 2007, 8:39 pm ]
Post subject: 

It might be the "letter-spacing:0 pt". Try taking out or changing the number.

Author:  Meldarion Aphaderu [ June 8th, 2007, 9:06 pm ]
Post subject: 

Well, I tried it, and here were the results.

"letter-spacing:1 pt"
http://i194.photobucket.com/albums/z227 ... ptcopy.png

"letter-spacing:2 pt"
http://i194.photobucket.com/albums/z227 ... ptcopy.png

Without the letter-spacing
http://i194.photobucket.com/albums/z227 ... pacing.png

They still seem "compact" and stuff to me. :confused:

Author:  Gilraen Ringeril [ June 9th, 2007, 7:40 pm ]
Post subject: 

I have had that problem before, and I actually know the cause (or at least, I think I do :P)

If you are using an iframe with a transparent background or using a div layer with a transparent background, that will happen to your text ;) You will need to define a background color for your text/page.

Add this to a stylesheet or style tag:

Code:
background: #000000;


^ that would make your background black ;)

Author:  Meldarion Aphaderu [ June 10th, 2007, 1:49 pm ]
Post subject: 

Blerghh.. well, I tried, but knowing me, it failed.

But, I'm sure the idea isn't whats wrong, It's probably where I added the "background: #000000;" thing. I tried several places, but it didn't seem to work.

*runs off to try it again*.

Author:  Meldarion Aphaderu [ June 10th, 2007, 5:38 pm ]
Post subject: 

I'm terribly sorry for the double post, but..

I just got onto edit my site with my laptop, and checked out the layout, to see how things were running. Well, it turns out, the font looks fine.

However, I checked back on my desktop (the usual comp i use) and its still messed up. So, I am assuming its because my desktop monitor is 19 inches wide? :blink:

^ Are these ways attempting to fix it for both wider and smaller screens?
I hope so. :\

Sorry for my lack of knowledge. :P

Author:  Celebwen [ June 11th, 2007, 2:52 am ]
Post subject: 

There usually is a way to get things viewable on all resolutions.
I'm not sure exactly what the problem is, but it may be easier to spot it should your CSS be a bit, erm, cleaner.

There's no need for all the <style> and </style> tags, as you can just enclose your css within one of those tags. I would also try and have all the CSS in the one place, because if you have some inside the 'head' tags, and some within the 'body' tags, the stuff within the 'body' tags will override the stuff withing the 'head' tags.

Also, the 'background: #000000;' will not be doing much where it is.

The idea of CSS is that you have a parameter (i.e a restriction on where those bits of css will apply to) and then all the things saying what styles apply.
The thing just before the { } is the parameter. So, in one bit you have
Code:
body,tr,td {font-size:8pt;
font-family:arial, sans-serif; cursor:none;
align:justify;
line-height:14px;
color:#c9a88e;}


The parameters for this is the 'body' tag, the 'tr' tags and 'td' tags. All the instructions within the { } apply to any content within the <body> and </body> tags.
So, if you wish the 'background: #000000;' to apply to the body, I would put it within the { } that has 'body' as a parameter.

The other thing is that you have a lot of '#someword' as a parameter. the # means that it will apply to any things ( usually things like div or table tags) which have 'id="someword" ' in the opening tag.
e.g.
Code:
<div id="someword">
</div>

 

I can't see any things with 'id' in the tag, so it looks like those bits of CSS aren't really doing anything.


The only real use for cleaning up your CSS and getting rid of useless bits is that it then becomes easier to fiddle with just one thing to see if it fixes your problem, without so many things that could be interfering.


I hope that didn't sound too much like a lecture, because it really wasn't meant to be. I know what I've said wont fix your problem in itself, but it may help you find it, or understand what to do with the bits of coding that people give you to add. ;)
And sorry for all the 'coding language'. I hope it doesn't confuse things too much.

Nice site, by the way. Very pro looking for someone who's just started with HTML!

Author:  Meldarion Aphaderu [ June 11th, 2007, 3:10 am ]
Post subject: 

*dies* :swoon: Thank you very much, Lady Celebwen. :teehee: It already looks a lot cleaner. ;)

And to answer things such as:

Quote:
Also, the 'background: #000000;' will not be doing much where it is.


All of those little "background: #000000;" things are in random areas because of me being very.. "newbish".. haha, I tried a bunch of places to use gilraen's idea into affect, all of which I forgot to delete. :P

You did kind of lose my when you started talking about the "id" things and the "#someword", but I will definitely read through several more times, and really absorb what you're saying.

Thanks for cleaning it up! You're amazing help, Celebwen. I really appreciate it. :teehee:

And, thanks also for that little comment at the bottom. But, it couldn't have been done without some helpful little tutorials I happened to come across. ;)

Author:  Celebwen [ June 11th, 2007, 7:45 am ]
Post subject: 

Glad it was helpful! :)

Page 1 of 1 All times are UTC - 5 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/