Customizing a Style

#1

The following code snippet shows 2 actions that are processed
identically: "<a href...", but I don't want the style on the menu to act
on the "mailto:" usage. I want to apply a different style to the
"mailto:" usage, but I don't know how to do so. Please advise. TIA

<style type="text/css">
img {float: right; margin: 0px 20px 15px 20px;}
ul.menu {float: left; width: 100%; padding: 0; margin: 0;
list-style-type: none; padding-bottom: 0.5cm;}
ul.menu li {display: inline}
ul.list li {margin-left: 40px}
a {text-decoration: none; color: white; background-color: brown;
padding: 0.2em 0.6em; border-right: 0px solid white;}
a:visited{color:yellow}
a:hover {background-color: maroon}
p.leftmargin {margin-left: 20px}
body {color:White; background-color:MidnightBlue;
font-family:sans-serif;}
h2 {font-face: Georgia; color: White; font-size: 30px}
</style>
</head>

<body>
<div style="text-align: center;">
<ul class="menu">
<li><a href="News.html">News!</a></li>
<li><a href="Calendar.html">Events Calendar</a></li>
<li><a href="BlockWatch.html">BlockWatch</a></li>
<li><a href="businesses5.html">Businesses</a></li>
<li><a href="Meetings.html">Our Meetings</a></li>
<li><a href="History.html">Neighborhood History</a></li>
<li><a href="Contact.html">Contact</a></li>
</ul>
[...]
Association at <a href="mailto:info (AT) midtownmuseumdistrict (DOT) org">e-mail
</a>
</div>

#2

Mike Copeland wrote:

Quote:

The following code snippet shows 2 actions that are processed
identically: "<a href...", but I don't want the style on the menu to
act on the "mailto:" usage. I want to apply a different style to the
"mailto:" usage, but I don't know how to do so. Please advise. TIA

style type="text/css"
img {float: right; margin: 0px 20px 15px 20px;}
ul.menu {float: left; width: 100%; padding: 0; margin: 0;
list-style-type: none; padding-bottom: 0.5cm;}
ul.menu li {display: inline}
ul.list li {margin-left: 40px}
a {text-decoration: none; color: white; background-color: brown;
padding: 0.2em 0.6em; border-right: 0px solid white;}
a:visited{color:yellow}
a:hover {background-color: maroon}
p.leftmargin {margin-left: 20px}
body {color:White; background-color:MidnightBlue;
font-family:sans-serif;}
h2 {font-face: Georgia; color: White; font-size: 30px}
/style
/head

body
div style="text-align: center;"
ul class="menu"
li><a href="News.html">News!</a></li
li><a href="Calendar.html">Events Calendar</a></li
li><a href="BlockWatch.html">BlockWatch</a></li
li><a href="businesses5.html">Businesses</a></li
li><a href="Meetings.html">Our Meetings</a></li
li><a href="History.html">Neighborhood History</a></li
li><a href="Contact.html">Contact</a></li
/ul
[...]
Association at <a href="mailto:info (AT) midtownmuseumdistrict (DOT) org">e-mail
/a
/div

a {stuff for all links}
..menu a {different and possibly overriding stuff for links inside the <ul>
with class menu}

BTW mailto *will* fail for a large percentage of your viewers. Anybody using
an internet cafe or library, no email client. Anybody who uses web based
email like gmail, no email client. Anybody whose browser is not specifically
configured to launch their specific email client. You should put the email
address somewhere on the page as clear text so it can be copy/pasted.

#3

In article <MPG.24c5ba8b533778c198976e (AT) news (DOT) cox.net>,
mrc2323 (AT) cox (DOT) net (Mike Copeland) wrote:

Quote:

The following code snippet shows 2 actions that are processed
identically: "<a href...", but I don't want the style on the menu to act
on the "mailto:" usage. I want to apply a different style to the
"mailto:" usage, but I don't know how to do so. Please advise. TIA

style type="text/css"
....
ul.menu li {display: inline}
ul.list li {margin-left: 40px}
a {text-decoration: none; color: white; background-color: brown;
padding: 0.2em 0.6em; border-right: 0px solid white;}
a:visited{color:yellow}
a:hover {background-color: maroon}
....

Quote:

ul class="menu"
li><a href="News.html">News!</a></li
...
/ul
[...]
Association at <a href="mailto:info (AT) midtownmuseumdistrict (DOT) org">e-mail
/a
/div

a:link.mailto {background: yellow; color: red;}
a:hover.mailto {background: white; color: black;}

and

<a class="mailto" href="mailto:info (AT) midtownmuseumdistrict (DOT) org">e-mail
</a>

might be one way.

--
dorayme

#4

"Mike Copeland" <mrc2323 (AT) cox (DOT) net> wrote

Quote:

The following code snippet shows 2 actions that are processed
identically: "<a href...", but I don't want the style on the menu to act
on the "mailto:" usage. I want to apply a different style to the
"mailto:" usage, but I don't know how to do so. Please advise. TIA

In CSS3 you can do this with attribute selectors:

a[href ^="mailto:"] {
...
}

Unfortunately you will find browser support spotty at best, so you are
probably better off using one of the other strategies suggested in this
thread.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Customizing a Style

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)

Customizing a Style - 07-14-2009 , 12:42 AM

Re: Customizing a Style - 07-14-2009 , 12:57 AM

Re: Customizing a Style - 07-14-2009 , 01:01 AM

Re: Customizing a Style - 07-14-2009 , 01:47 AM