Using a single graphic instead of CSS

Callan S. · Post by **Callan S.** » Sun Jan 20, 2013 3:16 am

I'm thinking that delving into pretty game design is probably on my forward course.

I was thinking, instead of trying to learn CSS to make lots of neato web frames and such, could you just use a graphic, then use CSS code to simply pop the text into special spots on the graphic?

Sure, it wont scale beutifully like CSS does, but most people have largish screens, so just don't have that huge a one and it'll probably fit alot of monitors.

I guess one thing I'd ask you all about is that I'd like the graphic centered - but then I need to know the dimensions of the browsers screen so I can plot the text information. But it is possible to get a browsers screen width, isn't it? Also what do you use to center these days, if <center> is being phased out?

Thanks all (by which I mean thanks Jackolantern, cause he often replies!

But if anyone else does, thanks to you as well!

)

Post by **Jackolantern** » Sun Jan 20, 2013 3:36 am

Actually, this is how a lot of the few graphical websites used to be made in the ancient days (before 1996). Of course, there are a lot of issues today that didn't exist back then, such as the vast differences in screens, which you touched on. Someone could try to access your site on anything between a 3.5" mobile device up to a 35" giant monitor or even a larger Smart TV. Basically by having one imagine you are saying you only support one type of monitor, and everyone else is SOL lol. On a phone, the user will have to constantly be scrolling in all directions to see anything, and on a large monitor the page will seem humorously small. It would also be a nightmare to get those text blocks to line up correctly on any more than 1 screen size.

There is a lot of wisdom in the way HTML and CSS work together to create cross-platform, cross-device webpages, and there isn't a lot of ways around it

Post by **hallsofvallhalla** » Sun Jan 20, 2013 3:46 am

CSS is very simple and worth learning.

For instance to center everyhting on the screen is a simple

html

Code: Select all

<div id='wrapper'>
<body>
your web site stuff here
</body>
</div>

CSS

Code: Select all

 #wrapper
{
margin-right:auto;
margin-left:auto;
text-align:center;
}

or to center anything inside of a div you could make it a class

Code: Select all

 .wrapper
{
margin-right:auto;
margin-left:auto;
text-align:center;
}

then your div

Code: Select all

<div id='whatever' class = 'wrapper'>

<div>

Using a graphics only slows the site down and increases total bandwidth. I would rather you use tables.

Callan S. · Post by **Callan S.** » Sun Jan 20, 2013 7:19 am

Well, I had it in mind for a latter project and on a free host. Can it really be that bad bandwidth wise? Alot of browser games seem to use graphics all over the screen and background, which is pretty much the same as using one big, singular graphic. I'm mostly thinking of just using one or two largish JPG's - that'd still be far smaller than a flash or unity game download, for example.

Perhaps in future I'll do a graphical mock up of the layout I want, then ask for feedback here in how to assemble it in CSS?

Thanks for the CSS code, Halls

spawnfestis · Post by **spawnfestis** » Mon Jan 21, 2013 9:39 am

You should never use images when you don't have to. HTML5 and CSS3 combined gives you a lot of fluidity in your code, and the only reason why you would want to step away from that is because you dont "know" the languages.

I suggest you learn how to go from PSD to HTML/CSS, it's very easy and it needs some time to be invested, but it doesnt matter - if you are a game developer there is a ton of things that takes way more time than writing up a structure with some CSS..

Callan S. · Post by **Callan S.** » Mon Jan 21, 2013 4:28 pm

I think, looking at the CSS templates out there, even someone who knows the language, they don't just whip up a template in five minutes (never mind the graphical assets that such templates use)

In regard to some subjects, I'm more willing to listen to 'should never', but they are more along moral issues. In regards to presentation, I'm not sure 'should never's apply. Instead it seems like an area for weighing up pros and cons. And there just seem to be more cons.

I know it might be more elegant to do so. But I think the pursuit of elegance can have people fetishising the act of learning more and more languages - and more! And more! And...

I think in the end you have to draw a line between spending your time learning more Vs spending time actually completing a project.

That's always going to involve a compromise. Skipping out on learning some language. You can't avoid doing so, unless you never want to make anything (I mean seriously, were not back in the days of when you could master EVERYTHING involved in regard to programming - if those days ever existed)

So what are the pros and cons, here?

Post by **hallsofvallhalla** » Mon Jan 21, 2013 5:19 pm

Though not many coders agree with me I am a STRONG believer in if it works then do it and whatever works best for you. Many people complain how I code or the way I do things but it works in the end. In any kind of software it is not the journey taken but the end result. If you chose your route and it works the same as a conventional way then who cares.

Seems your battle with CSS is the same as my jquery battle. I kept telling myself it would take too much time to learn it and I could just stick with raw JS. Finally I was forced to learn it at work and had it down in about a day. I nearly slapped myself when I figured out how easy it was and how much time it could have saved me.

It will be worth learning. No doubt there. You will save on loading time and eventually production time. Reduces bandwidth, scales to any screen.

Using a single graphic instead of CSS

Using a single graphic instead of CSS

Re: Using a single graphic instead of CSS

Re: Using a single graphic instead of CSS

Re: Using a single graphic instead of CSS

Re: Using a single graphic instead of CSS

Re: Using a single graphic instead of CSS

Re: Using a single graphic instead of CSS