|
|
Posted by Jonathan N. Little on 09/25/07 19:55
Jim S wrote:
> On Tue, 25 Sep 2007 14:22:41 -0400, Jonathan N. Little wrote:
>
>> Jim S wrote:
>>> OK I'm nearly there.
>>> Using a different stylesheets for one-line and two-line buttons I have
>>> got to this http://priorysingers.org.uk/testingIndex_1.html
>>> It works fine in IE, but not in Firefox or Opera.
>> Well I would avoid "position: absolute" if I were you, can get you into
>> trouble. Personally your links are in a list so I would use a list!
>> You just set their width and if your want the links centered vertically
>> you can tweak the single line links...
>>
>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
>> "http://www.w3.org/TR/html4/strict.dtd">
>> <html>
>> <head>
>> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
>> <meta http-equiv="content-language" content="en-us">
>> <title>template</title>
>>
>> <style type="text/css">
>>
>> ul.buttonbar {
>> font: .8em/1.4 sans-serif; list-style: none; width: 8em;
>> }
>> ul.buttonbar li {
>> margin: 1px; height: 3em; background-color: #ccc;
>> border: 3px outset #ccc;
>> }
>> ul.buttonbar a {
>> display: block; text-align: center; text-decoration: none;
>> }
>> /* tweak the single lines links */
>> ul.buttonbar a.singles { margin-top: .65em; }
>>
>> </style>
>>
>> </head>
>> <body>
>> <ul class="buttonbar">
>> <li><a class="singles"href="#">Home</a></li>
>> <li><a class="singles" href="#">About Us</a></li>
>> <li><a href="#">Current Programme</a></li>
>> <li><a href="#">Contacts & Information</a></li>
>> <li><a href="#">Become a Patron</a></li>
>> <li><a href="#">Past Performances</a></li>
>> <li><a class="singles" href="#">About our Area</a></li>
>> </ul>
>>
>> </body>
>> </html>
>
> Mm. Tried that here http://priorysingers.org.uk/testingIndex.html
> I reality I'm just back where I started,except the borders seem bevelled in
Don't want the bevel then change
border: 3px outset #ccc; to border: 3px solid #000;
> Firefox when they didn't before.
You missed an important point, in my example the class "singles"
ul.buttonbar a.singles { margin-top: .65em; }
was ONLY applied to the links that were one line of text.
your "style1" (BTW bad name, style1 means nothing) that replaces my
"singles" you have applied to ALL your links including the 2 line
ones... to fix just remove from those...
<ul class="buttonbar">
<li><a href="Index.html" class="style1">Home</a></li>
<li><a href="Page_2.html" class="style1">About Us</a></li>
<li><a href="Page_3.html">Current Programme</a></li>
<li><a href="Page_4.html">Contacts & Information</a></li>
<li><a href="Page_5.html">Become a Patron</a></li>
<li><a href="Page_6.html">Past Performances</a></li>
<li><a href="Page_7.html" class="style1">About our Area</a></li>
</ul>
> I still mean to get to moving buttons.
? Don't know what you mean by this.
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Navigation:
[Reply to this message]
|