...

View Full Version : positioning an element at -1px



canadianjameson
03-08-2005, 06:03 PM
Hello kind Dukes & Dames.

on todays menu is a question regarding positioning.

Here's the scenario:


<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


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



<a href="someLink.htm" style="text-decoration: none; border-bottom: solid 1px black -1px vertical">a link with a suedo-underline</a>


:D :D :D

evo
03-08-2005, 06:25 PM
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/ashiyana/templates/default/styles/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.


:)

canadianjameson
03-08-2005, 07:14 PM
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:


#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


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?

evo
03-08-2005, 07:15 PM
Just shrink the size of the image vertically. Simple. :)

canadianjameson
03-08-2005, 07:22 PM
ahh, but unfortunantly i'm not using an image. these are the borders underneath links (a suedo underline attribute)

evo
03-08-2005, 07:35 PM
This works fine:

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

canadianjameson
03-08-2005, 08:12 PM
awesome!

question though. This line here:

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?

evo
03-08-2005, 08:16 PM
lmao sorry just was testing cross-browser issues with that. Forgot to remove it.

Ignore it.


:D

canadianjameson
03-08-2005, 08:18 PM
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 :)


<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

evo
03-08-2005, 08:26 PM
<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.

canadianjameson
03-08-2005, 08:30 PM
as the colors ar hardcoded into the CSS, will that nullify the fade effect?

does it cause adverse effects in other browsers?

canadianjameson
03-08-2005, 08:33 PM
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

canadianjameson
03-08-2005, 08:38 PM
This works fine:

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

evo
03-08-2005, 08:41 PM
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...

canadianjameson
03-09-2005, 01:51 AM
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?

evo
03-09-2005, 09:17 AM
Well in IE the underine works fine, that fades in and out. In Opera nothing whatsoever happens.

canadianjameson
03-11-2005, 02:39 PM
Thanks Evo, for all your help :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum