SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2000
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Bacward Problem: CSS without Stylesheets or <HEAD> commands

    There is a co-branded affiliate program I'd like to work with. They allow co-branding by allowing you to submit HTML code for your webpage header, but they require that what you give them goes below the <BODY> tag.

    That means no access to CSS or external stylesheets. I find this annoying but my options are limited.

    My website's page header makes use of font styles, styles for table rows and cells, and styles for links, hovered links, active links, etc.

    How would I go about implementing a style for these and other items in plain base HTML?

    I know the basics for text manipulation using the FONT tags such COLOR and SIZE and FAMILY.

    Even within tables, I can manually assign a row a background color or image, etc. within HTML.

    But how does one go and set the base, hover, visited and active states for links within an A HREF statement within HTML when you can't use a styles in the HEAD or an external stylesheet? I've never see such a thing before. Is it possible?

    Any help would be greatly appreciated.

    Thanks much.

    Sean
    Scarsdale Technologies, Inc.
    http://www.scarsdaletech.com

  2. #2
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Given that the amount of html you'll be inserting into the page will be fairly nominal, why not style it with the 'inline' style attribute?

    The inline style attribute allows you to add style attributes directly to the element tag which means the styling can be contained within the markup you give to the affiliate people.

    It's not the absolute ideal way to add css to elements, but if you're still using <font> tags then I guess it's safe to assume that modern styling techniques aren't a burning issue for you- so go for it.

    Read me about css (including inline styles).
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2000
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Bill Posters
    Given that the amount of html you'll be inserting into the page will be fairly nominal, why not style it with the 'inline' style attribute? ....

    Read me about css (including inline styles).
    Well, that's exactly what I am asking, even if I didn't know what to call it.

    But I don't know how to use inline styles for A HREF tags.

    For instance, from the article you mention, it shows the following example of an H3 tag.

    <code>
    <h3 style="font-weight: bold">this will be bold Embedded </h3>
    </code>

    Now how does one do that for links?

    How do I get the equivalent of

    <code>
    <style type="text/css">

    a.button:link
    {
    font-size:14px;
    font-weight:bold;
    text-decoration:none;
    border-style[img]images/smilies/redface.gif[/img]utset;
    border-color:red;
    border-width:5px;
    background-color:#FFFFCE;
    width:125px;
    color:navy;
    }


    a.button:visited
    {
    font-size:14px;
    font-weight:bold;
    text-decoration:none;
    border-style[img]images/smilies/redface.gif[/img]utset;
    border-color:red;
    border-width:5px;
    background-color:#FFFFCE;
    width:125px;
    color:navy;
    }

    a.button:active
    {
    font-size:14px;
    font-weight:bold;
    text-decoration:none;
    border-style:inset;
    border-color:red;
    border-width:5px;
    background-color:#FFFFCE;
    width:125px;
    color:maroon;
    }

    a.button:hover
    {
    font-size:14px;
    font-weight:bold;
    text-decoration:none;
    border-style:inset;
    border-color:red;
    border-width:5px;
    background-color:#FFFFCE;
    width:125px;
    color:maroon;
    }

    </style>

    </code>

    into an inline style for an A HREF command?

    Any ideas?

    Sean
    Scarsdale Technologies, Inc.
    http://www.scarsdaletech.com

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Location
    Toronto, ON, Canada
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's a good one - never come across it. You could write a set of classes like:

    <body>
    <style>
    a.myLinks:link { color: green }
    a.myLinks:visited { color: yellow }
    a.myLinks:hover { color: red }
    </style>

    <a href=# class="myLinks">TestME</a>

    </body>


    Don't know how 'proper' it is but works in IE. Also, you could use onMouseOver="this.style..."

    Rob.

  5. #5
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    <style> in the <body> of a document works, but isn't valid. If you don't care about validating your code (I doubt the affiliate does either), then by all means use it. It works in IE and Netscape/Mozilla at the very least.

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2000
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Vinnie - is there any HTML valid way of accomplishing what I'd like to do?

    Sean
    Scarsdale Technologies, Inc.
    http://www.scarsdaletech.com

  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by spcover
    Vinnie - is there any HTML valid way of accomplishing what I'd like to do?

    Sean
    Not if you want to use pseudo-classes like :hover and :visited. You can fake the effect with Javascript if it's allowed.
    HTML Code:
    <a href="mypage.html" style="color: red;" 
    onmouseover="this.style.textDecoration='none';" 
    onmouseout="this.style.textDecoration='underline';">My Link</a>
    This would create a red link that toggles the underline on and off when the user mouses over it, much like the :hover pseudo-class does. It's an ugly hack, and your affiliate may not allow you to put script in your HTML, but it will work.

  8. #8
    SitePoint Zealot willoworks's Avatar
    Join Date
    May 2003
    Location
    Trappe, MD
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use a Yacht Listing service where they only give you body access. I wrap all my content in one division and add the code to the division. Seems to work alright despite the fact that it is being loaded from a database.


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
  •