Sun, 2004-09-12 19:44
I made a site using css and I made buttons by using the display:block code, I was wondering if there is a way to do that for text links only, and not image links.
//here is my css//
/* Layout Stylesheet */
body {
background:#333333;
color: #c0c0c0;
text-align:center;
padding:0;
}
#bodyblock ul {
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, sanf-serif;
font-size: 12px;
}
#bodyblock li {
margin: 2px 0 0;
}
#bodyblock a {
display:block;
width:110px;
padding: 2px 2px 2px 10px;
border: 1px solid #000000;
background: #333333;
text-decoration: none;
filter:blendTrans(duration=0.5);
}
#bodyblock a:link, #list-menu a:active, #list-menu a:visited {
color: red;
}
#bodyblock a:hover {
border: 1px solid #000000;
background: red;
color: #333333;
}
#outer {
text-align:left;
border:1px solid #000000;
width:650px;
margin:auto;
}
#hdr {
height:60px;
background:#333333;
color: red;
}
#bar {
height:25px;
background:#333333;
color: red;
border:solid #000000;
border-width:1px 0 1px 0;
font-size: 12px
}
#bodyblock {
position:relative;
background: #333333;
color: red;
width:650px;
padding:0;
}
#l-col {
float:left;
background:#333333;
color: red;
width:145px;
}
#cont {
width:495px;
background:#333333;
color: #c0c0c0;
border:solid #000000;
border-width:0 0 0 1px;
text-align:left;
}
#ftr {
height:25px;
background:#333333;
color: red;
border:solid black;
border-width:1px 0 0 0;
margin:0;
padding:0;
}
//and there is an attached pic of what im talking about.
Sun, 2004-09-12 22:12
#1
use display:block for text links and NOT image links.
I am still quite new to CSS myself so this may not be right but I will suggest it anyway.
If you define a new class or ID and call it something like ".button a" or "#button a" then you should be able to set all your style options to this class/ID and span it across your text links. You could then modify the styling to your "#bodyblock a" ID so that it presents your image links how you want them to look.
The CSS for your text links should be something like:
.button a
{
display:block;
width:110px;
padding: 2px 2px 2px 10px;
border: 1px solid #000000;
background: #333333;
text-decoration: none;
filter:blendTrans(duration=0.5);
}
And the HTML around your text link should look like:
<a class="button a" href="/mysite/mypage.htm">My Text</a>
Hope this helps in some strange way, like I say I'm new to this myself but feel free to ask me for more help (or better description) 
Mon, 2004-09-13 00:04
#2
use display:block for text links and NOT image links.
Following up on Guy's response, it would be preferable to use a class rather than an id, the reason being that in this case you would be more likely to use that style more than once.
Standards oppose the use of ids more than once in a page.
Tue, 2004-09-14 05:55
#3
Thanks
Thanks guys, but I figured out a way to get everything the way I wanted it, you see I defined the list group as <ul> because I use ordered lists for all my picture text links. so then I changed the #bodyblock a, to #bodyblock li a, so now it only makes the display:block around anchored elements(i.e. a href, a:link etc.) that are unordered list, list items. Check out the code, it works perfectly.
#bodyblock ul {
margin: 0;
padding: 2px;
list-style-type: none;
font-family: verdana, arial, sanf-serif;
font-size: 12px;
}
#bodyblock li a {
margin: 5px 0 0 3px;
display:block;
width:110px;
height:20px;
padding: 3px 0px 0px 10px;
border: 1px solid #000000;
background: #333333;
text-decoration: none;
filter:blendTrans(duration=0.5);
}
#bodyblock #list-menu a:active, #list-menu a:visited, a:link {
color: red;
}
#bodyblock a:hover {
border: 1px solid #000000;
background: red;
color: #333333;
}
Theres also a pic attached if neone wants to see the final result.