html text on top of the picture noob alert! :(

grudas · 26 Feb 2009 at 15:42

hey

i've been practising html i've done a website design, sliced it saved it as html and graphics done most of the things in microsoft front page now my problem is that i need to add text, pictures links etc on the image i've used

Code:

<div style="position:absolute;top:302;left:195; height:420; width:857">
	<p align="justify"><font face="Comic Sans MS" color="#C0C0C0"><font size="2">
	TEXT</font><br>
	<br>
&nbsp;</font></div>

this code for text on the image the problem is that on my resolution 1280x1024 it looks ok but on my brothers monitor which is 1440x900 text moves to the left and doesn't stay in the middle how do i fix it?
website
http://web.r3dline.net/

go easy on me im just a newbie have worked more with php than html and been out of the website bussines for years.. so i need a bit of help.. thanks

the info about obama is just a test...

Ciphon · 26 Feb 2009 at 16:01

I'd use CSS and set the width to width: 80%;

Edit: Basically change where you have width: (number); use a percentage to use a percentage of the screen width.

grudas · 26 Feb 2009 at 16:10

Ciphon said:
I'd use CSS and set the width to width: 80%;

Edit: Basically change where you have width: (number); use a percentage to use a percentage of the screen width.

ill give it a try

cjmUK · 26 Feb 2009 at 16:30

Grudas, don't take any offense, but your basic design isn't very good. It's not a question of style; the fundamental architecture of your pages are poor, and it will make life harder for you in the short-term and in the longer term.

I'm not meaning to be dismissive. I know you are just learning, but you are using old habits (circa 1998) that will limit what you can achieve and will just make development harder for you. And if you continue developing websites, you will eventually have to go through the pain of unlearning a whole load of stuff.

I'll not say anymore, unless you want some pointers to get you started on the 'right' track. There are differing opinions on best practice, but there is a whole load of stuff that is pretty much in consensus.

Craig R · 26 Feb 2009 at 16:44

COMIC SANS?!?

grudas · 26 Feb 2009 at 16:52

cjmUK said:
Grudas, don't take any offense, but your basic design isn't very good. It's not a question of style; the fundamental architecture of your pages are poor, and it will make life harder for you in the short-term and in the longer term.

I'm not meaning to be dismissive. I know you are just learning, but you are using old habits (circa 1998) that will limit what you can achieve and will just make development harder for you. And if you continue developing websites, you will eventually have to go through the pain of unlearning a whole load of stuff.

I'll not say anymore, unless you want some pointers to get you started on the 'right' track. There are differing opinions on best practice, but there is a whole load of stuff that is pretty much in consensus.

it's my first full website all im done before in html was just an intro pages with single hyperlink i need a lot more practise with full website.... i would appreciate any tips you could give me...

grudas · 26 Feb 2009 at 16:53

Craig R said:
COMIC SANS?!?

just a test... need to be able to edit it at the college and there's no fonts installed on the computers

Knubje · 26 Feb 2009 at 16:53

cjm has some valid points mate, web developing technologies have come a long way. It can't hurt to get some basic HTML under your belt though. He could have actually offered some help instead of just critiqing and then doing one.

Obviously the other half wit doesn't know anything or he would have posted too.

Speak with mrk about web stuff, he's fairly good - just not to be trusted with any flammable objects in bottles of alcohol.

suarve · 26 Feb 2009 at 17:18

grudas said:
just a test... need to be able to edit it at the college and there's no fonts installed on the computers

#

Thye must at least have the basic fonts like Tahoma and similar. Comic Sans is comical, imo.

grudas said:
go easy on me im just a newbie have worked more with php than html and been out of the website bussines for years.. so i need a bit of help.. thanks
the info about obama is just a test...

What stuff did you use php for if you didn't really know html?

cjmUK · 26 Feb 2009 at 17:32

Knubje said:
He could have actually offered some help instead of just critiqing and then doing one.

He did offer help; in fact all he did was offer help. But he had the forethought and consideration not to hijack the thread against the OPs wishes.

grudas said:
i would appreciate any tips you could give me...

OK, first steps...

Much of your work will be trial and error (this doesn't improve much with time

). So how about we get the foundations started:

1 - Decide on HTML 4.01 Strict vs XHTML 1.0 Strict:

You can google for the ongoing debates over which is better, but ultimately it doesn't matter. HTML 5 will be preferred when it is out of draft and more widely supported, but until then, pick either of the strict DOCTYPES:

http://www.alistapart.com/articles/doctype/

The DOCTYPE will be the first line in every page. Specifying a Strict DTD will make almost all browsers work in Standards Mode (as opposed to the wildly varying Quirks Modes).

1a - Use a CSS Reset file:

Eric Meyer is the living God of CSS, so I usually follow his advice. Note: the layout you get from stage 4, may already have hacks in that clash with your CSS Reset, Unlikely but possible.

2 - Learn the basic syntax and principles of your preferred markup language:

Try http://www.w3schools.com/ for a start.

3 - Learn some CSS basics:

http://www.w3schools.com/

4 - Pick an off-the-shelf CSS layout:

Loads available. It's always easier to adapt a layout than to design one from scratch.

5 - With your new-found knowledge and your chosen layout, redesign your site:

Validate your HTML and CSS , and always consider accessibility.

6 - Lap up the plaudits, and make millions.

Needless to say, I'm struggling at stage 6, but I live in hope.

Important mantra: Separate style from content - all of your styling should be in external CSS (apart from the odd exception), and your content should not use any presentational or deprecated tags (<i>, <b>, <font> etc).

There will be many distractions along the way (holy wars about fixed vs liquid layouts, is XHTML served as text/html acceptable) but if you master 1 to 5, you will be producing websites better than 99% of the content of the web. [probably nearer to 99.99% actually]

Stages 1 - 4 won't take very long, 5 might be a testing time, and few people make it to 6.

Good Luck! Post back if you have any specific questions.

Mattus · 26 Feb 2009 at 17:41

The reason your code is outdated is because it mixes presentational elements - for example, fonts, colours, sizes, alignments - with the actual page content. The main problems with this are that it makes the code harder to work with and it's not very flexible. For example, imagine you had ten paragraphs in Comic Sans, and you'd set the font on all of them using <font> tags. If you then decided you wanted to use Tahoma instead of Comic Sans, or size 3 instead of size 2, you'd have to go through your HTML file and update the font for each of those paragraphs separately. Maintaining this kind of code gets very time-consuming, especially if your page gets more complicated. It also makes it harder to see the structure of the page - which elements are the headings, that kind of thing - which will lower your rankings in search engines.

Ideally, your HTML will only contain content, and all the style information will be moved out into a CSS stylesheet. This doesn't seem very natural at first, but it will make developing pages a lot easier in the long run. Take this bit of your code:

Code:

<p align="justify"><font face="Comic Sans MS" color="#C0C0C0"><font size="2">    TEXT</font>

If you assign a class to that paragraph, all of that style information can be provided using CSS. Your HTML would then look like this:

Code:

<p class="obama">TEXT</p>

See how much simpler that is? All you'd need to do then is to write the matching CSS, something like:

Code:

p.obama {
   font-family: 'Comic Sans MS', sans-serif;
   font-size: 1em;
   color: #c0c0c0;
   text-align: justify;
}

Now you can give almost any text on your page those attributes without repeating them, just by giving it the class 'obama'. And if you wanted to change the font, you'd only have to do this once in your CSS to change all of the 'obama' text.

cjmUK · 26 Feb 2009 at 17:41

grudas said:
just a test... need to be able to edit it at the college and there's no fonts installed on the computers

TBH, you probably ought to stick with some pretty standard Sans Serif fonts, like Arial, Helvetica, Verdana and Sans Serif, though personally I would avoid Verdana.

PS. Also, specificy a hierarchy or fonts - if the first is not available on a client PC, it will fallback to the next font in line.

simisker · 26 Feb 2009 at 18:38

cjmUK said:
TBH, you probably ought to stick with some pretty standard Sans Serif fonts, like Arial, Helvetica, Verdana and Sans Serif, though personally I would avoid Verdana.

PS. Also, specificy a hierarchy or fonts - if the first is not available on a client PC, it will fallback to the next font in line.

It's a bit misleading to say "avoid Verdana", though, isn't it? What the linked article is actually saying is "avoid specifying Verdana in the same stack as fonts that have wildly different x-heights and sets". Which is good advice, but not the same as "never use Verdana".

Given Verdana's ubiquity, it's a fairly safe bet that as small a stack as "Verdana,sans-serif" will suffice, in fact. I know from extensive testing that I can get away with it for HTML emails.

I've got a hunch that Dreamweaver was responsible for the "Arial,Helvetica,Verdana,sans-serif" stack becoming the default for many websites, stemming from a more naive time in web design history when making sure there was a named font available was more important than typography.

Web designers have few enough usable fonts available as it is - don't go limiting them further with half-truths!

But I digress

Mattus · 26 Feb 2009 at 19:01

Yeah, I'd say Verdana is a useful addition to the small number of fonts you can get away with. What else do we have? Arial and Helvetica, which are basically the same. Times, which looks like you just stuck with the default font. Courier and Impact, which aren't really useful for copy. Verdana, Georgia, maybe Lucida?

cjmUK · 26 Feb 2009 at 21:36

simisker said:
It's a bit misleading to say "avoid Verdana", though, isn't it? What the linked article is actually saying is "avoid specifying Verdana in the same stack as fonts that have wildly different x-heights and sets". Which is good advice, but not the same as "never use Verdana".

I completely agree. Why is why I said 'personally I would avoid Verdana' (link to an article explaining the issue) and not 'never use Verdana'.

Web designers have few enough usable fonts available as it is - don't go limiting them further with half-truths!

Don't go adding your own erroneous interpretation to a straightforward statement.

But I digress

Yes, you did somewhat.

Mattus said:
Times, which looks like you just stuck with the default font.

As a Serif font, there is a case against Times New Roman, but as this article explains, people like TNR because it is familiar. Personally, I don't use it, and given the high resolution screen most people have, I don't think it's much of an issue... but it's food for thought.

Grudas, I hinted at Holy Wars before. As you can see, you'll rarely get the same answer from two developers

but don't let it put you off.

But just don't use Comic Sans!

Mattus · 26 Feb 2009 at 22:20

cjmUK said:
But just don't use Comic Sans!

I think that's something we can all agree on

simisker · 26 Feb 2009 at 22:20

cjmUK said:
I completely agree. Why is why I said 'personally I would avoid Verdana' (link to an article explaining the issue) and not 'never use Verdana'.

I was drafting a reply involving inference and the role of context, but while doing so I read further up the thread than I had previously and, to be fair, you give some excellent advice to the OP.

There's no point in me digressing even further away from the topic, especially as it seems you and I have very similar viewpoints after all.

Grudas: If there's one piece of cjmUK's advice that I can't stress enough, it's the one about using Eric Meyer's Global Reset in your CSS. It will save you hours of frustrating cross-browser problem-solving, really. Even if you don't understand the whys and wherefores at first, just pop it at the top of your CSS file and the playing field becomes a lot more level.

Incidentally, cjmUK: Developer? Designer? Both?

cjmUK · 26 Feb 2009 at 23:02

simisker said:
...using Eric Meyer's Global Reset in your CSS. It will save you hours of frustrating cross-browser problem-solving, really.

There are plenty of other (Yahoo UI etc) but I'm happy with Eric Meyers...

Even if you don't understand the whys and wherefores at first,

I certainly don't - well, not all. But I guess I don't need to - as long as it levels the playing field.

Incidentally, cjmUK: Developer? Designer? Both?

Oh, developer. Application developer specifically, it just so happens that most are web-based, and many are internet-facing.

Totally hopeless designer, I'm afraid. My creativity extends to code and schema, only.