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 17
  1. #1
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts

    positioning an element at -1px

    Hello kind Dukes & Dames.

    on todays menu is a question regarding positioning.

    Here's the scenario:
    Code:
    <a href="someLink.htm" style="text-decoration: none; border-bottom: solid 1px black">a link with a suedo-underline</a>
    <br>
    <br>
    <a href="anotherLink.htm" style="text-decoration:underline">a link with a real underline</a>
    now for reasons too long to explain, i need to use this type of set-up rather than a simple underline
    Code:
    <a href="someLink.htm" style="text-decoration: none; border-bottom: solid 1px black">a link with a suedo-underline</a>
    the only difference between that and a normal underline is the color (the crux of why i need this) and the spacing between the border and the text.

    The Question:
    Can i use some sort of code like this to bring the border up a bit an make it look more like the underline?

    Code:
    <a href="someLink.htm" style="text-decoration: none; border-bottom: solid 1px black -1px vertical">a link with a suedo-underline</a>
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    evo
    evo is offline
    waka Ionsurge
    Join Date
    Feb 2005
    Location
    United Kingdom
    Posts
    895
    Thanks
    5
    Thanked 12 Times in 12 Posts
    You could try using a little CSS hack that I use. Although that is generally used to make sure dotted underlines are actually shown as being dotted underlines.

    I've made it temporarily viewable so that you can see it:

    http://www.mudsplat.com/inprogress/ashiyana/

    CSS: http://www.mudsplat.com/inprogress/a...yles/store.css

    The hacked links that I am talking of are the top three. Study the CSS to see exactly how they were done using the display:block; style and a repeating background image.

    It will be publicly viewable for only 2 days.



  • #3
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    I got it, you can take it down now if you want.

    when looking at your page i see that you have the border out further, not in closer... how would i move it in closer on the vertical axis?

    i tried this:
    Code:
    #descriptions a {
    text-decoration: none;
    color: #0000A0;
    margin: 0px 0px 5px 0px;
    padding: 0px; }
    but that didn't do it.

    Hey, should i do something like
    Code:
    border-bottom {
    position: -1px
    }
    the code isnt right, but if the attribute i wish to bring vertically higher is the actual bottom border, should i not use CSS to change that attribute directly?
    Last edited by canadianjameson; 03-08-2005 at 06:21 PM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #4
    evo
    evo is offline
    waka Ionsurge
    Join Date
    Feb 2005
    Location
    United Kingdom
    Posts
    895
    Thanks
    5
    Thanked 12 Times in 12 Posts
    Just shrink the size of the image vertically. Simple.

  • #5
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    ahh, but unfortunantly i'm not using an image. these are the borders underneath links (a suedo underline attribute)
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #6
    evo
    evo is offline
    waka Ionsurge
    Join Date
    Feb 2005
    Location
    United Kingdom
    Posts
    895
    Thanks
    5
    Thanked 12 Times in 12 Posts
    This works fine:
    Code:
    <html>
      <style type="text/css">
        a { text-decoration: none }
        a:hover { text-decoration: underline }
        a.test { display: block; height: 3px; width: 100px; border-bottom: 1px solid #fff }
        test:hover { border-bottom: 1px solid #333; }
      </style>
    
    <body>
      <p><a class="test" href="test">test text</a></p>
      <p><a href="test">test text</a></p>
      
    </body>
    </html>
    The test class looks identical to a regular underline.

  • #7
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    awesome!

    question though. This line here:
    Code:
    a.test { display: block; height: 3px; width: 100px; border-bottom: 1px solid #fff }
    more specifically this: height: 3px; width: 100px

    what does that refer to?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #8
    evo
    evo is offline
    waka Ionsurge
    Join Date
    Feb 2005
    Location
    United Kingdom
    Posts
    895
    Thanks
    5
    Thanked 12 Times in 12 Posts
    lmao sorry just was testing cross-browser issues with that. Forgot to remove it.

    Ignore it.



  • #9
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    actually here, this might help.

    this is an example of what i'm using it for
    I wrote in red twice in the script, have a look at the comments
    Code:
    <style type="text/css">
    #descriptions a {
    text-decoration: none;
    color: #0000A0;
    HERE'S WHERE I TRIED INSERTING YOUR CODE
    }
    </style> 
    
    <script type="text/javascript"><!--
    startColor = "#FFFFFF"; // MouseOut link color 
    endColor = "#FFB903"; // MouseOver link color 
    
    stepIn = 22; // delay when fading in 
    stepOut = 22; // delay when fading out 
    
    hexa = new makearray(16); 
    for(var i = 0; i < 10; i++) 
    hexa[i] = i; 
    hexa[10]="a"; hexa[11]="b"; hexa[12]="c"; 
    hexa[13]="d"; hexa[14]="e"; hexa[15]="f"; 
    
    
    window.onload = function() {
      if(!document.all || !document.getElementsByTagName) return;
      var links = document.getElementById('descriptions').getElementsByTagName('A');
      for(var i=0;i<links.length;i++){
        links[i].onmouseover = domouseover;
        links[i].onmouseout = domouseout;
      }
    }
    
    startColor = dehexize(startColor.toLowerCase()); 
    endColor = dehexize(endColor.toLowerCase()); 
    
    var fadeId = new Array(); 
    
    function dehexize(Color){ 
    var colorArr = new makearray(3); 
    for (i=1; i<7; i++){ 
    for (j=0; j<16; j++){ 
    if (Color.charAt(i) == hexa[j]){ 
    if (i%2 !=0) 
    colorArr[Math.floor((i-1)/2)]=eval(j)*16; 
    else 
    colorArr[Math.floor((i-1)/2)]+=eval(j); 
    } 
    } 
    } 
    return colorArr; 
    } 
    
    function domouseover() { 
    if(window.event){
      var El = event.srcElement;
    } else return;
    if (El.tagName.toUpperCase() == "A")
      fade(startColor,endColor,El.uniqueID,stepIn);
    } 
    
    function domouseout() { 
    if(window.event){
      var El = event.srcElement;
    } else return;
    if (El.tagName.toUpperCase() == "A")
      fade(endColor,startColor,El.uniqueID,stepOut); 
    } 
    
    function makearray(n) { 
    this.length = n; 
    for(var i = 1; i <= n; i++) 
    this[i] = 0; 
    return this; 
    } 
    
    function hex(i) { 
    if (i < 0) 
    return "00"; 
    else if (i > 255) 
    return "ff"; 
    else 
    return "" + hexa[Math.floor(i/16)] + hexa[i%16];} 
    
    function setColor(r, g, b, element) { 
    var hr = hex(r); var hg = hex(g); var hb = hex(b); 
    //element.style.color = "#"+hr+hg+hb;
    element.style.borderBottom = "1px solid #"+hr+hg+hb;
    // Should i add in more of the CSS here instead??
    } 
    
    
    function fade(s,e, element,step){ 
    var sr = s[0]; var sg = s[1]; var sb = s[2]; 
    var er = e[0]; var eg = e[1]; var eb = e[2]; 
    
    if (fadeId[0] != null && fade[0] != element){ 
    setColor(sr,sg,sb,eval(fadeId[0])); 
    var i = 1; 
    while(i < fadeId.length){ 
    clearTimeout(fadeId[i]); 
    i++; 
    } 
    } 
    
    for(var i = 0; i <= step; i++) { 
    fadeId[i+1] = setTimeout("setColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" + 
    step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+ 
    ")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step); 
    } 
    fadeId[0] = element; 
    }
    // -->
    </script>
    
    
    </head>
    
    <body>
    
    <div id="descriptions"><a href="Liunk.htm">Testing</a><br><a href="Liunk.htm">Testing</a><br><a href="Liunk.htm">Testing</a><br></div>
    
    </body>
    </html>
    i had trouble applying your solution to this. maybe you can offer some insight
    Last edited by canadianjameson; 03-08-2005 at 07:21 PM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #10
    evo
    evo is offline
    waka Ionsurge
    Join Date
    Feb 2005
    Location
    United Kingdom
    Posts
    895
    Thanks
    5
    Thanked 12 Times in 12 Posts
    Code:
    <style type="text/css">
    #descriptions a {
    text-decoration: none;
    display: block;
    border-bottom: 1px solid #fff;
    color: #0000A0;
    margin: 0px 0px 5px 0px;
    padding: 0px;
    width: auto;
    }
    #discriptions a:hover { 
    display: block;
    border-bottom: 1px solid #333;
    }
    </style>
    That works, although only IE, seeing as your fade script seems to be built for IE. Opera shows no underline as a result of it.

  • #11
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    as the colors ar hardcoded into the CSS, will that nullify the fade effect?

    does it cause adverse effects in other browsers?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #12
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Thanks for the fast reply.

    unfortunantly it doesnt seem to have brought the suedo underline up any closer to the bottom of the text... which is odd.

    also, the underline effect seems to span the entire page with that new CSS, and not only to the end of the text.

    any ideas?

    *EDIT* odd, even when i remove the JS script entirely it still doesnt function properly
    Last edited by canadianjameson; 03-08-2005 at 07:37 PM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #13
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by evo
    This works fine:
    Code:
    <html>
      <style type="text/css">
        a { text-decoration: none }
        a:hover { text-decoration: underline }
        a.test { display: block; height: 3px; width: 100px; border-bottom: 1px solid #fff }
        test:hover { border-bottom: 1px solid #333; }
      </style>
    
    <body>
      <p><a class="test" href="test">test text</a></p>
      <p><a href="test">test text</a></p>
      
    </body>
    </html>
    This approach worked perfectly... but off hand i dont see what in this CSS code tells the border to come up higher...
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #14
    evo
    evo is offline
    waka Ionsurge
    Join Date
    Feb 2005
    Location
    United Kingdom
    Posts
    895
    Thanks
    5
    Thanked 12 Times in 12 Posts
    Altering display: block to display: inline corrects the issue.

    As for adverse effects on other browsers. It just doesn't work. The colour being coded into the CSS just means that the text is changed from the default blue to whatever you have chosen. The underline is the only thing that changes, not the text itself.

    In IE6 the underline is the same as how I did it there...

  • #15
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    sweet.

    okay inline fixed the long underline. but oddly enough the line still looks very much lower than on the code you posted that works.

    does the entire script & CSS work for you?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)


  •  
    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
    •