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

Discussion in 'HTML' started by MrBill@ SNL.LV, Jan 3, 2004.

  1. 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
    MrBill@ SNL.LV, Jan 3, 2004
    #1
    1. Advertising

  2. MrBill@ SNL.LV

    brucie Guest

    in post <news:3ff6dd9e$0$66051$>
    MrBill@ SNL.LV said:

    > 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

    --
    brucie
    04/January/2004 01:31:54 am kilo
    brucie, Jan 3, 2004
    #2
    1. Advertising

  3. 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@ SNL.LV, Jan 3, 2004
    #3
  4. 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>
    MrBill@ SNL.LV, Jan 3, 2004
    #4
  5. MrBill@ SNL.LV

    David Graham Guest

    <MrBill@ SNL.LV> wrote in message
    news:3ff700a5$0$66053$...
    > 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
    David Graham, Jan 3, 2004
    #5
  6. 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@ SNL.LV, Jan 4, 2004
    #6
  7. 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
    MrBill@ SNL.LV, Jan 4, 2004
    #7
  8. MrBill@ SNL.LV

    David Graham Guest

    MrBill@ SNL.LV wrote:
    > 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
    David Graham, Jan 4, 2004
    #8
  9. 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
    MrBill@ SNL.LV, Jan 4, 2004
    #9
  10. MrBill@ SNL.LV

    David Graham Guest

    MrBill@ SNL.LV wrote:
    > 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
    David Graham, Jan 6, 2004
    #10
  11. MrBill@ SNL.LV

    Mr. Bill Guest

    On 6-Jan-2004, "David Graham" <> wrote:

    >


    Thanks David.

    Mr. Bill
    Mr. Bill, Jan 24, 2004
    #11
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. David Stockwell
    Replies:
    2
    Views:
    682
    Anna Martelli Ravenscroft
    Sep 20, 2004
  2. Gerrit
    Replies:
    0
    Views:
    375
    Gerrit
    Sep 20, 2004
  3. Terry Reedy
    Replies:
    0
    Views:
    414
    Terry Reedy
    Sep 20, 2004
  4. Neha
    Replies:
    0
    Views:
    294
  5. kirke

    list of days between two days

    kirke, Oct 19, 2006, in forum: Javascript
    Replies:
    7
    Views:
    123
    Julian Turner
    Oct 20, 2006
Loading...

Share This Page