Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 27
  1. #1
    Regular Coder Partizan's Avatar
    Join Date
    Dec 2008
    Location
    Legoland and Ireland
    Posts
    139
    Thanks
    74
    Thanked 0 Times in 0 Posts

    Translating some obsolete styling to CSS

    Hi there.

    Any Idea how I can make a CSS class to replicate the following attributes in this SPAN and any idea how I call the class on my HTML page?

    <span id="mtxt" style="position:relative;top:1px;padding:5px 5px 5px 5px;font-family:arial;font-size:10pt;width:100%;overflow:auto;height:75px">
    </span>

    Thanks
    David

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    That's a pretty basic question, so I may be misunderstanding it.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>untitled</title>
    <style type="text/css">
    
    span.special {
    width: 100%;
    height: 75px;
    position: relative;
    top: 1px;
    padding: 5px 5px 5px 5px;
    font: normal 10pt arial;
    overflow: auto;
    
    }
    </style>
    </head>
    <body>
    <span id="mtxt" class="special">special span</span>
    </body>
    </html>
    'style' is actually the attribute; the rest is rules. Inline CSS isn't really 'obsolete' - it's just a mess, and difficult to maintain.

  • Users who have thanked adios for this post:

    Partizan (05-13-2009)

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    The height on that span will never work unless display:block; is specified in which case just use a div instead.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    Regular Coder Partizan's Avatar
    Join Date
    Dec 2008
    Location
    Legoland and Ireland
    Posts
    139
    Thanks
    74
    Thanked 0 Times in 0 Posts
    Thanks adios,

    One think I want to do is stop underlines of hyperlinks that are contained within the span tags. I added text-decoration: none; but it didn;t work.

    Also I wanted to make text a certain colour, I added color: blue; but it didn't work too.

    I am using a script and it outputs hyperlinks in between these SPAN tags.

    Ideally I wanted to use my own CSS hyperlink settings:
    PHP Code:
    .link-news font-family"calibri"font-size100% ; color#CC0000; display:inline;}
    .link-news:link {text-decorationnonedisplay:inline;}
    .
    link-news:visited {text-decorationnonecolor#CC0000; display:inline;}
    .link-news:active {text-decorationnonedisplay:inline;}
    .
    link-news:hover {text-decorationunderlinecolorgreydisplay:inline;} 
    and call it like maybe

    PHP Code:
    <span id="mtxt" class="link-news"></span
    but this doesn't work and I am not sure why

  • #5
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by Partizan View Post
    Thanks adios,

    One think I want to do is stop underlines of hyperlinks that are contained within the span tags. I added text-decoration: none; but it didn;t work.

    Also I wanted to make text a certain colour, I added color: blue; but it didn't work too.

    I am using a script and it outputs hyperlinks in between these SPAN tags.

    Ideally I wanted to use my own CSS hyperlink settings:
    PHP Code:
    .link-news font-family"calibri"font-size100% ; color#CC0000; display:inline;}
    .link-news:link {text-decorationnonedisplay:inline;}
    .
    link-news:visited {text-decorationnonecolor#CC0000; display:inline;}
    .link-news:active {text-decorationnonedisplay:inline;}
    .
    link-news:hover {text-decorationunderlinecolorgreydisplay:inline;} 
    and call it like maybe

    PHP Code:
    <span id="mtxt" class="link-news"></span
    but this doesn't work and I am not sure why
    I think you need to add the text-decoration:none; to the .link-news class (and then really you could remove it from the :link, :visited, and :active ones.

    Really there is a lot of unneeded CSS in there. Try this to optimize:
    Code:
    .link-news { font-family: "calibri"; font-size: 100% ; color: #CC0000; display:inline;text-decoration:none;}
    .link-news:hover {text-decoration: underline; color: grey;}
    This should have exactly the same effect. Let me know if this doesn't work for any reason. Also, depending on what style exists in "mtxt" you may have a conflict of styles causing the problem.

    Last but not least, the javascript might be creating it's own style on these links. That would be the next place to check if the above doesn't work.

    Do you have a link to the page in question?
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    Partizan (05-13-2009)

  • #6
    Regular Coder Partizan's Avatar
    Join Date
    Dec 2008
    Location
    Legoland and Ireland
    Posts
    139
    Thanks
    74
    Thanked 0 Times in 0 Posts
    Hi Rowsdower,

    This is the page I am testing on:

    http://www.minifigtimes.com/index6.shtml

    However I am using Adios' inline CSS at the moment because calling
    <span id="mtxt" class="link-news"></span>
    does not seem to work

    The mtxt, I do not know what this is.. this was just part of the script I found..

    Should I replace it? I suspect this could be causing the problem.

    EDIT: I will make a test page http://www.minifigtimes.com/index7.shtml with your approach and a test class called .link-test
    Last edited by Partizan; 05-13-2009 at 01:29 PM.

  • #7
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    It looks like you can just remove that id attribute completely -- it has no styles attached to it.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #8
    Regular Coder Partizan's Avatar
    Join Date
    Dec 2008
    Location
    Legoland and Ireland
    Posts
    139
    Thanks
    74
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Rowsdower! View Post
    It looks like you can just remove that id attribute completely -- it has no styles attached to it.
    If i do delete it no scrolling text appears at all.

    mtxt is referred to in the script
    mtxt.innerHTML = "<a href='"+temp2+"'>"+curr+" _</a>";

    here:




    PHP Code:
    <SCRIPT LANGUAGE="JavaScript">

    var 
    newslist=new Array();
    var 
    cnt=0;            // current news item
    var curr "";
    var 
    i=-1;            // current letter being typed

    newslist[0]=new Array("LFC preparing 'mega bid' for Marino star Wook-Jin You","http://www.minifigtimes.com")
    newslist[1]=new Array("Celebs ready for crunch showdown with Legoland United claims manager Giovanni Trapattoni","http://www.minifigtimes.com")

    function 
    newsticker()
    {
      
    // next character of current item
      
    if (newslist[cnt][0].length 1)
      {
        
    i++;
        
    temp1 newslist[cnt][0];
        
    temp1 temp1.split('');
        
    curr curr+temp1[i];
        
    temp2 newslist[cnt][1];
        
    mtxt.innerHTML "<a href='"+temp2+"'>"+curr+" _</a>";
        
    setTimeout('newsticker()',40)
        return;
      }
      
    // new item
      
    = -1curr "";
      if (
    cnt<newslist.length-1)
        
    cnt++;
      else
        
    cnt=0;
      
    setTimeout('newsticker()',6500)
    }
    </script> 

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Better keep that id if you want the script to work. ids are used for other things than CSS - in this case, the script needs that element object. Is this an IE-only thing? Only IE exposes ids as global variables ...

  • #10
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by Partizan View Post
    If i do delete it no scrolling text appears at all.

    mtxt is referred to in the script
    mtxt.innerHTML = "<a href='"+temp2+"'>"+curr+" _</a>";

    here:




    PHP Code:
    <SCRIPT LANGUAGE="JavaScript">

    var 
    newslist=new Array();
    var 
    cnt=0;            // current news item
    var curr "";
    var 
    i=-1;            // current letter being typed

    newslist[0]=new Array("LFC preparing 'mega bid' for Marino star Wook-Jin You","http://www.minifigtimes.com")
    newslist[1]=new Array("Celebs ready for crunch showdown with Legoland United claims manager Giovanni Trapattoni","http://www.minifigtimes.com")

    function 
    newsticker()
    {
      
    // next character of current item
      
    if (newslist[cnt][0].length 1)
      {
        
    i++;
        
    temp1 newslist[cnt][0];
        
    temp1 temp1.split('');
        
    curr curr+temp1[i];
        
    temp2 newslist[cnt][1];
        
    mtxt.innerHTML "<a href='"+temp2+"'>"+curr+" _</a>";
        
    setTimeout('newsticker()',40)
        return;
      }
      
    // new item
      
    = -1curr "";
      if (
    cnt<newslist.length-1)
        
    cnt++;
      else
        
    cnt=0;
      
    setTimeout('newsticker()',6500)
    }
    </script> 
    D'oh! You're absolutely right. I completely ignored that and was only thinking in CSS mode. In that case, why bother with the class? just make an ID css rule with all of the same stuff and kick out the class. Also, this might be part of the problem (you are missing the red parts):
    Code:
    .link-news a { font-family: "calibri"; font-size: 100% ; color: #CC0000; display:inline;text-decoration:none;}
    .link-news a:hover {text-decoration: underline; color: grey;}
    Your ID and class are attached to the span when what you really want to style is the <a> element within. See if this makes a difference. Or if you want to use just the ID as suggested use this:
    Code:
    #mtxt a { font-family: "calibri"; font-size: 100% ; color: #CC0000; display:inline;text-decoration:none;}
    #mtxt a:hover {text-decoration: underline; color: grey;}
    Last edited by Rowsdower!; 05-13-2009 at 01:44 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    Partizan (05-13-2009)

  • #11
    Regular Coder Partizan's Avatar
    Join Date
    Dec 2008
    Location
    Legoland and Ireland
    Posts
    139
    Thanks
    74
    Thanked 0 Times in 0 Posts
    WOOOHOOO! that worked! I used the ID only approach and dropped the class, thanks a million, and thanks adios!

    There is 2 things I would like to tweak ..

    1. Upon loading the page the first few characters are not displayed. Can I insert a delay to call script upon pageload?


    2. Is it possible to stop some of the strings being hyperlinked or is this a fundamental part of this script..

    Eg:

    PHP Code:
    newslist[0]=new Array("LFC preparing 'mega bid' for Marino star Wook-Jin You")
    newslist[1]=new Array("Celebs ready for crunch showdown with Legoland United claims manager Giovanni Trapattoni","http://www.minifigtimes.com/story1.shtml"
    Of the above I would like the first string not to be a hyperlink as it is just some snippet of info but the second string I want to remain hyperlinked as it goes to a story..

    Possible?

    I guess if I didn't want any hyperlinks at all I would remove the <a> tags from <a href='"+temp2+"'>"+curr+" _</a> so maybe my options are just either all hyperlinks or none hyperlinks?

    In any case thanks a million for the help so far, the main part is done
    Last edited by Partizan; 05-13-2009 at 01:57 PM.

  • #12
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by Partizan View Post
    WOOOHOOO! that worked! I used the ID only approach and dropped the class, thanks a million, and thanks adios!

    There is 2 things I would like to tweak ..

    1. Upon loading the page the first few characters are not displayed. Can I insert a delay to call script upon pageload?


    2. Is it possible to stop some of the strings being hyperlinked or is this a fundamental part of this script..

    Eg:

    PHP Code:
    newslist[0]=new Array("LFC preparing 'mega bid' for Marino star Wook-Jin You")
    newslist[1]=new Array("Celebs ready for crunch showdown with Legoland United claims manager Giovanni Trapattoni","http://www.minifigtimes.com/story1.shtml"
    Of the above I would like the first string not to be a hyperlink as it is just some snippet of info but the second string I want to remain hyperlinked as it goes to a story..

    Possible?

    I guess if I didn't want any hyperlinks at all I would remove the <a> tags from <a href='"+temp2+"'>"+curr+" _</a> so maybe my options are just either all hyperlinks or none hyperlinks?

    In any case thanks a million for the help so far, the main part is done
    1. Yes, you need to use setTimeout(blah blah blah). I'm not great with the syntax off of the top of my head so you're best off to google this part.

    2. Yes, you can make alternating array items into headings and links and then print them both at the same time using another "temp" variable (say, temp2). Then you print the temp 2 outside of the <a> tag. I don't have time to go into detail on this at the moment either, but play around a bit and see what you come up with.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    Partizan (05-13-2009)

  • #13
    Regular Coder Partizan's Avatar
    Join Date
    Dec 2008
    Location
    Legoland and Ireland
    Posts
    139
    Thanks
    74
    Thanked 0 Times in 0 Posts
    Thanks! I will

  • #14
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Try changing this:

    Code:
    temp2 = newslist[cnt][1];
    mtxt.innerHTML = "<a href='"+temp2+"'>"+curr+" _</a>"
    ... to this:

    Code:
    temp2 = newslist[cnt][1];
    mtxt.innerHTML = (temp2) ? "<a href='"+temp2+"'>"+curr+" _</a>" : curr + " _";
    And: remove the url from that array, and leave the empty string.

    You'll probably lose the styling, but that's easy to remedy.

  • Users who have thanked adios for this post:

    Partizan (05-13-2009)

  • #15
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Thought that script looked familiar, it's from the JS Source. Late 1960's, I'd guess. An oldie. IE only.

    Do yourself a favor and modify this:

    Code:
    function newsticker()
    {
       var mtxt = document.getElementById('mtxt');
      // next character of current item
    ... so it'll run elsewhere. Here's your delay:

    Code:
    <body onload="setTimeout('newsticker()', 3000)">
    1000 = 1 sec (they're ms).

  • Users who have thanked adios for this post:

    Partizan (05-13-2009)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •