PDA

Click to See Complete Forum and Search --> : Changing the thickness of a character

mark200
04-22-2006, 12:35 PM
Hi,
I need a bit more help with a site I am making. I recently posted a topic in the javascript forum about the rubbish DHTML menu I was using, and I took the advice to get a new script. I got a new one and I have it looking close to the old one, i just have two more questions:
1) How do I get the | as wide as it is in the old script.
The new script I am testing out on the home page:
www.webtechdublin.com/pcs

You can see that the | in between all the different links are smaller than on the old script, which is here
www.webtechdublin.com/pcs/news.html

2) On the drop down menu of the old script, there is a white line at the top of it, I am just wondering how I would put that in to the new one??

Any help is greatly appreciated,
Mark

edit-sorry I've also got a third question:
how do I change the width of the drop down menu itself, as if you look in the library one, you can see it is not wide enough for the "teachers recommend.." link.

Thanks,
Mark
mark200
04-23-2006, 09:54 AM
Ok, i sorted out question 3. So could anyone help me with 1 and 2. The first one you need either IE or firefox, the second one you need IE.
johneva
04-23-2006, 09:59 AM
For question 1

If it is just a character make it bold.

If it was done by using border-right: 1px; for the a tag then make it thicker by adjusting the border-right: 2px;

For question 2

Just add border-top: 1px; to the styles used for the hover effect.
mark200
04-23-2006, 10:00 AM
It is a character....and it's already in bold.
johneva
04-23-2006, 10:03 AM
Use bolder then instead of bold.

or font-weight: 900;

I also would not have used the method you have for that method anyways I would have used the suckerfish menu.

http://www.htmldog.com/articles/suckerfish/dropdowns/
mark200
04-23-2006, 10:13 AM
Weird....i set the font weight all the way up to 900 and it didnt make any difference at all. I must be doing something wrong. This is my table


<table id="menu" style="background-color:#01009a;" width="780">
<tr>
<td>&nbsp;<a href="index.html" class="menutext">Home&nbsp;</a>&nbsp;<font style="color:white; font-weight:900;">|</font>&nbsp;&nbsp;

<a href="news.html" class="menutext">News&nbsp;</a>&nbsp;<b><font color="white">|</font></b>

<a href="history.html" onMouseover="dropdownmenu(this, event, menu1, '160px')" onMouseout="delayhidemenu()" class="menutext">&nbsp;About the School&nbsp;</a><b><font color="white">|</font></b>

<a href="sport.html" onMouseover="dropdownmenu(this, event, menu2, '160px')" onMouseout="delayhidemenu()" class="menutext">&nbsp;Sport&nbsp;</a><b><font color="white">|</font></b>

<a href="art.html" onMouseover="dropdownmenu(this, event, menu3, '160px')" onMouseout="delayhidemenu()" class="menutext">&nbsp;Activities&nbsp;</a><b><font color="white">|</font></b>

<a href="libinfoi.html" onMouseover="dropdownmenu(this, event, menu4, '160px')" onMouseout="delayhidemenu()" class="menutext">&nbsp;Library&nbsp;</a><b><font color="white">|</font></b>

<a href="tyintro.html" onMouseover="dropdownmenu(this, event, menu5, '160px')" onMouseout="delayhidemenu()" class="menutext">&nbsp;Transition Year&nbsp;</a><b><font color="white">|</font></b>

<a href="contact.html" onMouseover="dropdownmenu(this, event, menu6, '160px')" onMouseout="delayhidemenu()" class="menutext">&nbsp;Contact Us&nbsp;</a><b><font color="white">|</font></b>
</td>
</tr>
</table

Anything look wrong?
johneva
04-23-2006, 10:21 AM
How did you apply the font weight to the |?

As the example you have show just has the b tags.

You should not use that font tag either really as it is now depricated.
johneva
04-23-2006, 10:22 AM
Try applying it by use of a class.

You should not use that font tag really as it is now depricated.
mark200
04-23-2006, 10:24 AM
How did you apply the font weight to the |?

As the example you have show just has the b tags.

You should not use that font tag either really as it is now depricated.
Yeah, sorry I just tested it on the first line:


<table id="menu" style="background-color:#01009a;" width="780">
<tr>
<td>&nbsp;<a href="index.html" class="menutext">Home&nbsp;</a>&nbsp;<font style="color:white; font-weight:900;">|</font>&nbsp;&nbsp;

What should I use instead of the font tag?

edit-sorry, just saw the class thing now.
johneva
04-23-2006, 10:31 AM
Add this to the bottom of your other styles in the head of your doc.

.bolder {
font-weight: 900;
color: #fff;
}


Then add the class to the td tag.


<td class="bolder">&nbsp;<a href="index.html" class="menutext">Home&nbsp;</a>&nbsp;|&nbsp;&nbsp;


But same again really your menu should be a list not a table.
mark200
04-23-2006, 10:32 AM
ok, i used a class:


padding-top:0;
padding-bottom:1px;
}

.seperator {
color:white;
font-weight:900;
}

#dropmenudiv a{
color: white;
width: 100%;
display: block;
text-indent: 3px;
font-family:verdana;
font-size:8pt;
font-weight:bold;
text-decoration: none;
}



<td>&nbsp;<a href="index.html" class="menutext">Home&nbsp;</a>&nbsp;<span class="seperator">|</span>&nbsp;&nbsp;


I probably messed up here as I'm not great at CSS.

edit(again)-I'll try what you just said.
mark200
04-23-2006, 10:36 AM
Still the same....damn :(
Thanks for all your help anyway.
mark200
04-23-2006, 10:43 AM
by the way, for question number 2), I tried what you said


#dropmenudiv a:hover{
color: #ffa130;
border-top:1px;
border-top-color:#ffffff;
}


and unfortunately made no difference.
johneva
04-23-2006, 10:58 AM
Na you added it to the wrong bit you want to add it to. #dropmenudiv
mark200
04-23-2006, 11:01 AM
oh ok, i put it there because you said for the styles used for the hover effect. Nah it still doesnt work, now the border is just 1px....and blue. I think it's because there is already a border in that style??
johneva
04-23-2006, 11:04 AM
It does work cos I tryed it out.

Just copy and paste this in its place.

#dropmenudiv {
color: white;
position:absolute;
border-top: 1px solid white;
border-bottom-width: 0;
font-family:verdana;
font-size:8pt;
font-weight:bold;
line-height:14px;
z-index:9;
}
mark200
04-23-2006, 11:11 AM
Oh ok, cool. Any chance you know how to get the extra bit of blue under the white line...before the first link? I know I'm asking a lot of questions, sorry haha.
johneva
04-23-2006, 11:15 AM
padding-top: 5px;

add that to the same section of css.

Like this

#dropmenudiv {
color: white;
position:absolute;
padding-top: 5px;
border-top: 1px solid white;
border-bottom-width: 0;
font-family:verdana;
font-size:8pt;
font-weight:bold;
line-height:14px;
z-index:9;
}
mark200
04-23-2006, 11:19 AM
Thanks mate. You've been great help, I owe you. Now just that seperator thing...
johneva
04-23-2006, 11:34 AM
Hate to upset ya but like I say I would do away with the menu your using anyways and use the suckerfish menu.

It uses css instead of javascript well it does need a tiny bit of javascript just cos IE is naf, but much much less anyways.
mark200
04-23-2006, 03:27 PM
Hate to upset ya but like I say I would do away with the menu your using anyways and use the suckerfish menu.

It uses css instead of javascript well it does need a tiny bit of javascript just cos IE is naf, but much much less anyways.
Yeah I understand, just I'm in kind of a rush, because we have set ourselves a approximate deadline of getting the whole site (content included) done by next monday (not the monday tomorrow), because the school year ends in 5 weeks, so we want it up and running without any problems well before that.
Thanks for the advice anyway, its appreciated, and I'll bookmark that suckerfish menu site for future projects.