Two days and still can't get this right HELP!

[MrBill]

I am quite new to all of this and as such I have no ego, so don't be afraid
to stomp on it or talk down to me! In fact it would probably be best if you
treated the question as though I know very little about what I am doing
because that is the case. I have just decided, at 47 years old, to teach
myself page design. I am quite serious and have been at it for about two
weeks, just so you know my level of experience.

This is what I am trying to do:

Large text Image
More large text


This is what it looks like now: (The blocks of x's are the text; the blocks
of X's are the image) all centered on the page.


xxxxxxxxxxxxxxxx XXXXX
xxxxxxxxxxxxxxxx XXXXX
xxxxxxxxxxxxxxxx XXXXX

xxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxx

This is what I am shooting for:

xxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxx XXXXX
xxxxxxxxxxxxxxxx XXXXX
XXXXX
xxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxx

Many thanks for those who wish to help!
Mr. Bill

 

[brucie]

This is what it looks like now: (The blocks of x's are the text; the blocks
of X's are the image) all centered on the page.

xxxxxxxxxxxxxxxx XXXXX
xxxxxxxxxxxxxxxx XXXXX
xxxxxxxxxxxxxxxx XXXXX

xxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxx
http://moreshit.bruciesusenetshit.info/i-dont-know-what-to-call-it-thingy.html

This is what I am shooting for:

xxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxx XXXXX
xxxxxxxxxxxxxxxx XXXXX
XXXXX
xxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxx

i'm not sure what thats supposed to be. i suspect you're not using a
mono font for your ascii art. i'll assume that the XXXX way out by
themselves aren't supposed to be there and what you want is the image to
wrap with the second paragraph.

http://moreshit.bruciesusenetshit.info/i-dont-know-what-to-call-it-thingy-02.html

or you want the image a bit lower than the top of the first paragraph:

http://moreshit.bruciesusenetshit.info/i-dont-know-what-to-call-it-thingy-03.html

 

[MrBill]

I should have been more clear. The first "group of small x's (3 lines)
represent one word of text, as do the second group of small x's. The large
X's represent an image. I have tried a class selector with

img.lowimage {
vertical-align:text-top
}

in the style sheet and:

<span class="logo">Earth &nbsp;<IMG class="lowimage" border="0"
SRC="earthani.gif" alt="" WIDTH="84" HEIGHT="84"></span><br>

<span class="logo">Traditions</span>

in the code, but it does not seem to have any effect on the position of the
image ...

 

[MrBill]

I should have been more clear. The first group of small x's represent a
single word, as do the second group of small x's. The group of large X's
represent a single image.

The style sheet has this:

}
img.lowimage {
vertical-align:text-top
}

And the code has this:

<span class="logo">Word &nbsp;<IMG class="lowimage" border="0"
SRC="animated.gif" alt="" WIDTH="84" HEIGHT="84"></span><br>

<span class="logo">Longerword</span>

 

[David Graham]

I should have been more clear. The first group of small x's represent a
single word, as do the second group of small x's. The group of large X's
represent a single image.

The style sheet has this:

}
img.lowimage {
vertical-align:text-top
}

And the code has this:

<span class="logo">Word &nbsp;<IMG class="lowimage" border="0"
SRC="animated.gif" alt="" WIDTH="84" HEIGHT="84"></span><br>

<span class="logo">Longerword</span>

Hi
I don't have time to understand the detail of your problem but I thought I
would just say that I don't know of any value for the property
vertical-align called 'text-top', your choices are top, middle and bottom. I
also think vertical-align is only applicable to table elements such as td
and th and inline elements such as span (may br wrong on the last point)
HTH
David

 

[MrBill]

Thanks for your reply.

An in-line element can have the vertical-alignment specified as a percent,
baseline, bottom, middle, sub(script), super(script), text-bottom, text-top
or top. The trouble is that I cannot get the danged thing to move
vertically no matter what I do! I specify the style in-line, nothing
happens; I specify a class in the style sheet the document is linked to and
nothing happens, I have not tried embeding the style in the head of the
document, I think I shall go do that now, though I don't expect that to work
either. (I know, think positive!) Okay, I am positive.... just kidding.
Maybe it has something to do with padding or margin or line height or
something else I am not yet familiar with... well, that is why I asked
here....

Thanks again,
Mr. Bill

 

[MrBill]

Thanks for the replys everyone who did. I got it to work this way...

By adding the meta tag to the head (as follows):

<meta http-equiv="Content-Style-Type" content="text/css">

and by coding the line as such:

<span class="logo">Word &nbsp;<img src="animated.gif" height="74" width="74"
alt="" style="vertical-align: text-bottom;"><br>

Longerword</span>

The image moved to where I needed it to be, and the page validated.

If anybody has a better idea as to how to do this, I would welcome hearing
from you. Evidently (though I have not yet seen that this is so), you
cannot put two different class identifiers between one <span> tag and have
them both seen on the external style sheet. Please correct me if I am
wrong, and let me know if I am right.

Thanks again!

Mr. Bill

 

[David Graham]

Thanks for the replys everyone who did. I got it to work this way...

By adding the meta tag to the head (as follows):

<meta http-equiv="Content-Style-Type" content="text/css">

and by coding the line as such:

<span class="logo">Word &nbsp;<img src="animated.gif" height="74"
width="74" alt="" style="vertical-align: text-bottom;"><br>

Longerword</span>

The image moved to where I needed it to be, and the page validated.

If anybody has a better idea as to how to do this, I would welcome hearing
from you. Evidently (though I have not yet seen that this is so), you
cannot put two different class identifiers between one <span> tag and have
them both seen on the external style sheet. Please correct me if I am
wrong, and let me know if I am right.

Thanks again!

Mr. Bill

Hi Mr. Bill
Have you got a URL so that I can see what you are trying to achieve?
You can put 2 different class identifiers between one span element and have
them both seen on the external style sheet. It may 'appear' that one of the
classes is not seen because of the cascade - i.e. if both classes are not
specific, that is they apply to any element - written as '.class {.....' not
as the more specific 'element.class {.......' then, if they both affect the
same property, the last rule block written in the stylesheet will cancel out
the previous one.
The change which you made to your code is the reason it now works - you have
now nested the img element inside a single span.
David

 

[MrBill]

Thanks David,

Uh Oh, I hope you read the first post about being new to all of this. You
asked me if I had a URL so that you could see what I was trying to acheive.
Well, let me try and answer this question... no. Now I have to ask another
one. I know what a URL is (i.e. a Universal Resource Identifier) and I know
what it is for too. I am guessing that I could use my free Netscape web
page space to acheive having one and FTP the files to it, then provide a
link to it when I need to when I ask a question in this forum? Well there
is the question. If the answer to the question is yes, then it will take me
some time to figure out how to DO all of those things I just said!

Interesting that the style sheet will see both of the class IDs, unless one
is a specific class ID (like class= img.imgalgntop) which is similar to what
I was trying to use in this case. I tried it for a few days and couldn't
get it to do anything! I must have been doing something wrong huh?! Then
another question comes to mind. Is it bad form to use the in-line style
like I have done? CSE says to use in-line styles sparingly, but does not
say don't use them at all.

Thanks again,

Mr. Bill

 

[David Graham]

Thanks David,

Uh Oh, I hope you read the first post about being new to all of this. You
asked me if I had a URL so that you could see what I was trying to
acheive. Well, let me try and answer this question... no. Now I have to
ask another one. I know what a URL is (i.e. a Universal Resource
Identifier) and I know what it is for too. I am guessing that I could
use my free Netscape web page space to acheive having one and FTP the
files to it, then provide a link to it when I need to when I ask a
question in this forum? Well there is the question. If the answer to
the question is yes, then it will take me some time to figure out how to
DO all of those things I just said!

Interesting that the style sheet will see both of the class IDs, unless

I think you should be careful with your terminology. A class and an id are
different things used in different ways for different purposes.

example, in your stylesheet:

p.main {border: 2px solid red;} [1]

p#footer {border: 2px solid green;}

Then in the html source:

<p class="main">This is text in a paragraph with the main type of text which
has a red border around it</p>
<p class="main">This is text in a paragraph with the main type of text which
has a red border around it</p>
<p class="main">This is text in a paragraph with the main type of text which
has a red border around it</p>
<p class="main">This is text in a paragraph with the main type of text which
has a red border around it</p>
<p id="footer">This text is in a paragraph in the footer,it has a green
border around it, it can be used only once</p>

Note how a class can be used as many times as you like but an id must be
unique and can therefore be used only once. Note also that an id is
preceeded by a hash symbol in the css and a class is preceeded with a
period.

one is a specific class ID (like class= img.imgalgntop) which is similar
to what I was trying to use in this case.

You would not write it like your example above. It would be like this:

<img class="imgalgntop" blah blah...........>

The more specific selector i.e. img.imgalgntop {properties:values
here;etc........

will always take presedence over less specific selectors like

..imgalgntop {properties:values here;etc........ (this is less specific as
it does not name an element to use the class with)

BTW - A selector with an id has a very high specificity and an inline style
always wins over external stylesheets regardless of specificity. MY point
above applies well all else is equal i.e. the style rules are both in an
external stylesheet

I tried it for a few days and

couldn't get it to do anything! I must have been doing something wrong
huh?! Then another question comes to mind. Is it bad form to use the
in-line style like I have done? CSE says to use in-line styles
sparingly, but does not say don't use them at all.

Thanks again,

Mr. Bill

In-line style is considered to be a bad way to use CSS because it doesn't
take advantage of the benefits that CSS brings. One of the many advantages
of CSS is a single stylesheet can affect many pages but if you use inline
style or put the style in the head of the html page then you obviously lose
this feature. Another bad thing is you end up with a lot of CSS scattered
throughout your pages, its easy to forget where all the CSS is.
I recommend using WS FTP Pro for uploading your files to your hosts server -
very easy to use. Basically there is a 'windows explorer like pane' on the
left of the interface and you just high light the files you want to upload
and hit the upload arrow and away they go!

[1] - if you leave off the element <p> in this case, then you can apply the
class to any element such as <ul> or <ol>

BTW - I am 43 and have been at this now for about 3 years. I am trying to
set up my own web desiqn business because no one will employ you in I.T.
unless you have experience and being over 40 is a big handicap - I note
there is legislation coming out to outlaw ageism - don't know if that will
help but its good in principle.
I wish you luck - it does sink in eventually - but it does require many
hours of study

HTH
Dvaid

 

[Mr. Bill]

Thanks David.

Mr. Bill