CSS Forum

**Raisdead** · 10-19-2008, 04:07 PM

I have the following relent CSS in an external file with this selected html

Code:

#enter {position:absolute; display:inline; white-space: nowrap; height:19px; z-index:1;}
#cursor {position:absolute; display:inline; top:7px; display:inline; width:18px; height:19px; background-image:url('cursor.gif');z-index:0;}

HTML Code:

<div id="enter">
     TE<div id="cursor">S</div>T
</div>

when i apply this i receive
TET
with the S over second T and about 5px lower how do I make it so that is like

TEST

this using css

Thanks for your help

**chrishirst** · 10-19-2008, 05:21 PM

Actually it will be 7 pixels lower ( top:7px; )

don't use position absolute and use a span for #cursor, which IS an inline element rather than using a block element and telling to to display as inline

**Raisdead** · 10-19-2008, 06:34 PM

I changed it to

Code:
#enter {display:inline; white-space: nowrap; height:19px; z-index:1;}
#cursor {top:7px; display:inline; width:18px; height:19px; z-index:0;}

html
<div id="enter">
TEst<span id="cursor"></span>
</div>

however when i remove the position:absolute on the cursor the background does not appear when i do not have content in the cursor id and i would like for the cursor to always bee there

**chrishirst** · 10-19-2008, 07:43 PM

What EXACTLY are you trying to achieve?

a couple of points;
inline elements cannot have a width and height assigned to them.
A background image will NOT appear in an empty element.

**Raisdead** · 10-19-2008, 08:07 PM

I have a javascript function that takes the key input and write it in the enter id where the cursor id was.
I would like to be able to see the cursor so that I know where the letter will be typed because the arrow keys changes the position of the cursor id

**Sean@WMS** · 10-19-2008, 09:21 PM

Quote:

Originally Posted by Raisdead

I have a javascript function that takes the key input and write it in the enter id where the cursor id was.
I would like to be able to see the cursor so that I know where the letter will be typed because the arrow keys changes the position of the cursor id

How about showing us the JavaScript; I think this will make a lot more sense if we see the functionality there. Sounds to me rather similar to scripts that inform the user how many characters they can still type into a textbox as they are typing, etc.

**Raisdead** · 11:23 PM

Ok ill Try to cut it down as much as possible

index.html

HTML Code:

<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en" lang="en">
    <head>
    <title>Apple IIe</title>
        <script type="text/javascript" src="../Scripts/functions.js"></script>
        <link rel="stylesheet" type="text/css" href="../Style/Style.css" />
    </head>
    <body onkeyup="keywrite(event)" onload="cursor()">
        <div class="w100" style="top:88%;">(1, 2, 3, OR Q)?
            <div id="enter"><span style="" id="cursor"></span></div>
        </div>
    </body>
</html>

Style.css

Code:

.w100 {position:absolute; width:80%;}
#enter {position:absolute; display:inline; white-space: nowrap; height:19px; z-index:1;}
#cursor {position:absolute; top:7px; display:inline; width:18px; height:19px; z-index:0;}

functions.js

Code:

    function keypress(key,exec,happen) {
        if(window.event)   {keynum = happen.keyCode;  } // IE
        else if(happen.which)   {keynum = happen.which;  } // Netscape/Firefox/Opera
        if(key==-99) {keynum=key;}
        if(keynum === key) { clearTimeout ( time ); window[exec](); }
    }
    function keywrite(happen) {
        if(window.event)   { keynum = happen.keyCode;  } // IE
        else if(happen.which)   { keynum = happen.which;  } // Netscape/Firefoxcase Opera
            
            switch (keynum){
                case 65:
                    ltr = "A";
                break;
                case 66:
                    ltr = "B";
                break;
                case 67:
                    ltr = "C";
                break;
                case 68:
                    ltr = "D";
                break;
                case 69:
                    ltr = "E";
                break;
                case 70:
                    ltr = "F";
                break;
                case 71:
                    ltr = "G";
                break;
                case 72:
                    ltr = "H";
                break;
                case 73:
                    ltr = "I";
                break;
                case 74:
                    ltr = "J";
                break;
                case 75:
                    ltr = "K";
                break;
                case 76:
                    ltr = "L";
                break;
                case 77:
                    ltr = "M";
                break;
                case 78:
                    ltr = "N";
                break;
                case 79:
                    ltr = "O";
                break;
                case 80:
                    ltr = "P";
                break;
                case 81:
                    ltr = "Q";
                break;
                case 82:
                    ltr = "R";
                break;
                case 83:
                    ltr = "S";
                break;
                case 84:
                    ltr = "T";
                break;
                case 85:
                    ltr = "U";
                break;
                case 86:
                    ltr = "V";
                break;
                case 87:
                    ltr = "W";
                break;
                case 88:
                    ltr = "X";
                break;
                case 89:
                    ltr = "Y";
                break;
                case 90:
                    ltr = "Z";
                break;
                case 48:
                    ltr = "0";
                break;
                case 49:
                    ltr = "1";
                break;
                case 50:
                    ltr = "2";
                break;
                case 51:
                    ltr = "3";
                break;
                case 52:
                    ltr = "4";
                break;
                case 53:
                    ltr = "5";
                break;
                case 54:
                    ltr = "6";
                break;
                case 55:
                    ltr = "7";
                break;
                case 56:
                    ltr = "8";
                break;
                case 57:
                    ltr = "9";
                break;
                case 37:
                    ltr = "<>l";
                break;
                case 39:
                    ltr = "<>r";
                break;
                
                
                case 13:
                    ltr = "<>e";
                break;
                default : ltr='<img src="../images/error.png" alt="*" />';
            }
            current = document.getElementById('enter').innerHTML ;

            if(ltr == "<>e" || ltr == "<>r" || ltr == "<>l" ){
            
                        
                if(ltr=="<>l") {
            
                    current = current.replace('<img src="../images/error.png" alt="*">',"*");
                    current = current.replace('<img src="http://12.217.118.164/Projects/Vectors/images/error.png" alt="*">',"*");
                                        
                    old=current;
                    place=current.indexOf('<');
                    start=current.charAt(0)

                    current = current.replace('</span>','');
                    if(current.indexOf('<span style="" id="cursor">') != -1) {current = current.replace('<span style="" id="cursor">',"");}
                    else if(current.indexOf('<span style="background-image: url(../images/error.png);" id="cursor">') != -1) {current = current.replace('span style="background-image: url(../images/error.png);" id="cursor">',"");}
                    else if(current.indexOf('<span style="background-image: url(http://12.217.118.164/Projects/Vectors/images/error.png); " id="cursor">') != -1) {current = current.replace('<span style="background-image: url(http://12.217.118.164/Projects/Vectors/images/error.png); " id="cursor">',"");}
                    
                    part1 = current.slice(0,place-1);
                    part2 = current.slice(place-1);
                    part21= part2.slice(0,1);
                    part22= part2.slice(1);
                    
                    if(start != "<") {current= part1+'<span style="" id="cursor">'+part21+'</span>'+part22;} else {current=old;}
                
                    current = current.replace("*",'<img src="../images/error.png" alt="*">');
                }    
                if(ltr=="<>r") {alert('move cursor right');}
                if(ltr=="<>e") {
                switch (current){
                    case "1":
                        alert('one');
                    break;
                    case "2":
                        alert('two');
                    break;
                    case "3":
                        alert('three');
                    break;
                    case "9":
                        alert('filemag');
                    break;
                    case "Q":
                        alert('quit');
                    break;
                    default: current=''; ltr="";
                }
            }
            
            
            
            
            } else {

                if( current.indexOf('<span style="background-image:') == -1 ) {
                    
                    current = current.replace('<span style="" id="cursor">',"");
                    which = 1
                } else {
                    
                    current = current.replace('<span style="background-image: url(../images/error.png);" id="cursor">',"")
                    current = current.replace('<span style="background-image: url(http://12.217.118.164/Projects/Vectors/images/error.png); " id="cursor">',"")
                    which = -1
                }
                
                current = current + ltr +'<span style="" id="cursor"></span>' ;
                
        }    
        document.getElementById('enter').innerHTML = current;
    }
function cursor() {
        if (document.getElementById('cursor').style.backgroundImage=='url(../images/error.png)' || document.getElementById('cursor').style.backgroundImage=='url(http://12.217.118.164/Projects/Vectors/images/error.png)') {document.getElementById('cursor').style.backgroundImage='';} else {document.getElementById('cursor').style.backgroundImage='url("../images/error.png")';}
        setTimeout('cursor()',250);

    }

**Raisdead** · 03:07 PM

I Still think that the best way to solve this problem would be just to concider a way to make the word display on one line no matter how many letters are on either side of the cursor id and not like
for example
ASDFG
not
ASDF with the Gover the F and seven pixles lower.

Code:

#enter {position:absolute; display:inline; white-space: nowrap; height:19px; z-index:1;}
#cursor {position:absolute; display:inline; top:7px; display:inline; width:18px; height:19px; z-index:0;}

HTML Code:

<div id="enter">ANY NUMBER OF LETTERS
     <div style="" id="cursor">O</div>ANY NUMBER OF LETTERS
</div> 
||
<div id="enter">AFDS
     <div style="" id="cursor">E</div>SDFSDF
</div>

if i change the css cursor atturbuite i get it all on one line but the cursor disappears when the cursor contains no character or " " (just a space) so i put a few   (4) Now we have the problem that the cursor div is 7px to high how can i change the cursor id with the position:relitive to be 7px lower???