SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Zealot boballoo's Avatar
    Join Date
    Dec 2001
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rollover text anomalies

    Hi everyone,

    I am having a small problem with some text links on a web page which I am doing. You can see a temporary example at <http://www.english-zoo.com/editfast/index.html>

    On the left menu bar there are several links which all use the following:

    <A HREF="../editpops/manuals.htm" TARGET="_blank" onClick="return popup(this, 'manuals')"><FONT FACE="Times New Roman, Times, serif" SIZE="2" COLOR="#FFCC33" onMouseOver="this.style.color='#FF0000'" onMouseOut="this.style.color='#FFCC33'"><B>Manuals</B></FONT></A><BR>

    The problem is, and I know it is minor, when I move the mouse over the link it changes colour like it is suppoosed to but the line underneath which shows up on all the links, changes to a different colour. I figured it had something to do with the page properties but I have deleted them. However I suspect that the default properies for links is affecting this in some way.

    Anybody know how to get around this? Is there a way to set link properties for certain tables?

    Any help would be appreciated.

    Bob

  2. #2
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I think you'd be better off using .css to handle this. You'd reduce your code millions, and it'd also work! (Except in older browsers, but it degrades neatly).

    A link on how to achieve what you are after:

    http://www.w3schools.com/css/tryit.a...me=trycss_link

    good luck

    H
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  3. #3
    SitePoint Zealot boballoo's Avatar
    Join Date
    Dec 2001
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text rollover anomalies

    Thanks "H" for the tip about CSS. I have implemented that on the left Nav bar on my web page which is a dark blue and set the link colour to a gold colour which is exactly what I want with less code. <http://www.english-zoo.com/editfast/index.html>
    However, I have not been able to get the top text links to cooperate since they are on a different background (White) Is there some way to override the CSS for a specific table? If I specifically change the colour of the text in each link to the colour I want then the "hover" colour does not seem to work. Any hints. I looked around the site from the link you sent me but couldn't find anything specific about this problem.

    Thanks again for your help

    Bob

  4. #4
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Not a prob Bob!

    Try this link out for size: http://www.w3schools.com/css/tryit.a...e=trycss_link2

    I would recommend actually putting your css in a seperate .css file, that way you only need to do it once, rather than on every page - and you save code and users bandwidth!

    To discover how, have a looksee here: http://www.w3schools.com/css/css_howto.asp
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  5. #5
    SitePoint Zealot boballoo's Avatar
    Join Date
    Dec 2001
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I GOT IT!!

    Thanks for your help H, I am now convinced that I should finally learn CSS. It is so easy after you showed me that I don't know why I was avoiding it. Thanks again!

  6. #6
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    More than welcome!!

    Another couple of "optomising" tips for ya....

    You could strip out all of the "hover" javascript, and the need to load 2 "buttons" for each of your roll-overs with the same method. Just ensure that you only have the button "outlines" in graphical format, and the "middles" as cells with the matching colour. You can have ordinary "classed" links in those cells, and presto - no need for JS rollovers or preloading, and a reduced number of images to load

    Make sure your css is "external", as said before. To take what you have in your current page:

    Code:
    a:visited {color: #009900}
    a:link {color: #FFCC33}
    a:hover {color: #FF0000}
    You could open "notepad", save the above text as "editstyle.css" (or whatever you like) - ensuring you "save as" ALL, rather than "text". Upload that file to your server, then the only code you need to put in pages that you wanna style is:

    <link rel="stylesheet" type="text/css"
    href="editstyle.css" />

    Doesn't seem like much of a saving at the mo, but add a few more "definitions" (different link colours etc), and it can be a huge saving.


    Have fun playing!

    H
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  7. #7
    SitePoint Zealot boballoo's Avatar
    Join Date
    Dec 2001
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    WOW!

    That's cool! After playing around a bit I figured out that it would be best to use the "bluebar" as a background Gif in the table cell and use the CSS style sheet. This gets rid of a lot of code now and a ton in the future. Now if I can just figure out how to specify the text size using css I will be able to eliminate the problem of people havuing different "Text Size" setting choosen in their browsers.

    I sure appreciate your help. I have learned more these past couple of days than I have in weeks.

    Thanks again!

    Bob

  8. #8
    SitePoint Zealot boballoo's Avatar
    Join Date
    Dec 2001
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Table hell

    I use Dreamweaver 4 and I am having difficulty with tables not showing up in the browser the way they do in Dreamweaver. How can I specify the exact height and width of a cell and get it to actually show up that way? I have been trying for hours and can't get it right. Is there a trick?

    Bob

  9. #9
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    could you post some example code?
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  10. #10
    SitePoint Zealot boballoo's Avatar
    Join Date
    Dec 2001
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is what I have now but this is just part of the whole page so i don't know if it will help you determine the problem since the cells are afected by other cells on the page. I didn't want to post the whole thing since it is so big. Where the text and stuff is I want to be 578 X 29 exactly and unchanging. Is this possible?

    <TR>
    <TD HEIGHT="8" VALIGN="TOP" ALIGN="CENTER" WIDTH="35">&nbsp;</TD>
    <TD HEIGHT="29" VALIGN="MIDDLE" ALIGN="CENTER" WIDTH="585" BACKGROUND="../assets/graphics/blubarpc/cellbg.gif"><!-- #BeginLibraryItem "/Library/etopmenu.lbi" --><A CLASS="one" HREF="../editcont.htm" TARGET="_self"><B><FONT SIZE="1">CONTACT
    US</FONT></B></A><FONT SIZE="1">&nbsp;&nbsp;&nbsp;&nbsp;<A CLASS="one" HREF="../editsub.htm" TARGET="_self"><B>
    SUBMISSIONS </B></A>&nbsp;&nbsp;&nbsp;&nbsp;<A CLASS="one" HREF="../editchat.htm" TARGET="_self"><B>EDITOR'S
    FORUM</B></A>&nbsp;&nbsp;&nbsp;&nbsp;<A CLASS="one" HREF="../editprof.htm" TARGET="_self"><B>
    OUR PROFILE</B></A>&nbsp;&nbsp;&nbsp;&nbsp;<A CLASS="one" HREF="../editend.htm" TARGET="_self"><B>
    ENDORSEMENTS</B></A></FONT><!-- #EndLibraryItem --></TD>
    </TR>
    <TR>
    <TD HEIGHT="7" VALIGN="TOP" ALIGN="CENTER" WIDTH="35">&nbsp;</TD>
    <TD HEIGHT="7" VALIGN="TOP" ALIGN="CENTER" WIDTH="585">&nbsp;</TD>
    </TR>

  11. #11
    SitePoint Zealot boballoo's Avatar
    Join Date
    Dec 2001
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Troubles Part II

    Here's what I have in the HEAD

    <LINK REL="stylesheet" HREF="styles.css" TYPE="text/css">

    And here's a sample link

    <A CLASS="two" HREF="../editsub.htm"><I><B>SUBMIT</B></I></A>

    My styles.css is in the same directory as the document. I have two styles in the same styles.css file

    They are:

    a.one:visited {color: #009900}
    a.one:link {color: #FFCC33}
    a.one:hover {color: #FF0000}

    a.two:visited {color: #009900}
    a.two:link {color: #0000FF}
    a.two:hover {color: #FF0000}

    I think it is a problem with the link to the styles.css file but I can't figure why or where the problem is.

    Bob

  12. #12
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You have a couple of cells there with no content at all, that can cause the table to collapse. I would also suggest that you add a "bold" and "font-size" definition to your css and save yourself even more code! (While keeing w3c compliant )

    H
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  13. #13
    SitePoint Zealot boballoo's Avatar
    Join Date
    Dec 2001
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A couple of minor CSS problems

    After a couple of days of research iwas able to implement your suggetsions and recreate my site using CSS and your other optimizing hints and some of my own. In the end I halved the size of just that one page and probably the same on the others when I get to them. I just want to thank you for your help. Now I have a minor problem (maybe) but I have seen it on other sites as well. after using my style sheet http://www.english-zoo.com/editfast/...les.styles.css for the links CLASS "one" and "two" and "three" I find that after clicking on a link 1) it does not change to the "visited colour until I reload the page 2) it does not dispaly the "hover" colour if I mouse over again. Is there any way to correct this?

    You can see what I mean at:
    http://www.english-zoo.com/editfast/index.htm

    Thanks

    Bob

  14. #14
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Sorry Bob - I'll take a look at this 4 you tomorrow - have been all over 2day. Because of the way the post is heading, I've moved it to a better forum where it may get picked up quicker

    H
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS


Bookmarks

Posting Permissions

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