PDA

View Full Version : getting a border all around some text

Twelvethman
12-12-2004, 07:01 PM
I thought it would be fun if I tried to replicate the "previous" "next" button look on the following W3schools page through CSS

W3Schools page (http://www.w3schools.com/css/css_border.asp)

So I tried the below:



font-family: Arial, sans-serif;
font-size: 10pt;
font-weight: normal;
color: #D6D3CE;
text-align: center;
text-decoration: none;
border-style: solid;
border-color: #D6D3CE;
background-color: #393939;
padding: 4px;
border: 1px;




If I keep the padding 0 px than I can the top and bottom borders, but then, they are too close to the text, if I keep the padding 4 px, I can only see the left and right borders but not the top and bottom lines...

Any help would be appreciated.
Mr J
12-12-2004, 07:25 PM
Maybe?

font-family: Arial, sans-serif;
font-size: 12px;
color: #000000;
text-align: center;
border:1px solid #000000;
background-color: #FFFFFF;
padding: 2px;
width:120px
Twelvethman
12-12-2004, 07:34 PM
Nope... adding the width did not help. I think it is a height issue as I see the left and right borders - but not the top and bottom versions.
Twelvethman
12-12-2004, 07:38 PM
when i reduced the font size to 6pt I could see the top and bottom borders but not when I have it at the original size of 10 pt
Mr J
12-12-2004, 11:06 PM
What browser are you using?

I see all borders
AaronW
12-13-2004, 12:04 AM
You'll have to tell the links to display: block. As inline, they'll only draw to the top/bottom of the line. After display: block, you'll have to set width and then float them both to the left (float: left).
hemebond
12-13-2004, 01:52 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>48859</title>
<style type="text/css">
*.button {
border:1px solid #000;
background-color:#fff;
padding:0.25em 0.5em;
}
*.prev:before {
content:"< ";
}
*.next:after {
content:" >";
}
</style>
</head>
<body>
<p>
<span class="button prev">Previous</span>
<span class="button next">Next</span>
</p>
</body>
</html>
AaronW
12-13-2004, 11:40 AM
Your example still doesn't work in IE :P


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>48859</title>
<style type="text/css">
*.hNav {
width: 300px;
}
*.button {
border:1px solid #000;
background-color:#fff;
padding:0.25em 0.5em;
display: block;
}
*.next {
float: right;
}
*.prev {
float: left;
}
*.prev:before {
content:"< ";
}
*.next:after {
content:" >";
}
</style>
</head>
<body>
<p class="hNav">
<span class="button prev">Previous</span>
<span class="button next">Next</span>
</p>
</body>
</html>
rajeshsivapalan
12-13-2004, 12:07 PM
I thought it would be fun if I tried to replicate the "previous" "next" button look on the following W3schools page through CSS

W3Schools page (http://www.w3schools.com/css/css_border.asp)

So I tried the below:



font-family: Arial, sans-serif;
font-size: 10pt;
font-weight: normal;
color: #D6D3CE;
text-align: center;
text-decoration: none;
border-style: solid;
border-color: #D6D3CE;
background-color: #393939;
padding: 4px;
border: 1px;




If I keep the padding 0 px than I can the top and bottom borders, but then, they are too close to the text, if I keep the padding 4 px, I can only see the left and right borders but not the top and bottom lines...

Any help would be appreciated.

Hi friend,

I just tried out this for you...


font-family: Arial, sans-serif;
font-size: 10pt;
font-weight: normal;
color: #D6D3CE;
text-align: center;
text-decoration: none;
border: solid #D6D3CE 1px;
background-color: #393939;
padding: 4px;


regards
Rajesh from India.
AaronW
12-13-2004, 12:27 PM
Oh, by the way, if you want the buttons exacltly as they appear on the W3CS page (or at least a little more exactly):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>48859</title>
<style type="text/css">
*.button {
border:1px solid #000;
background-color:#fff;
padding:0.25em 0.5em;
display: block;
}
*.prev, *.next {
float: left;
}
*.next {
margin-left: 10px;
}
*.prev:before {
content:"< ";
}
*.next:after {
content:" >";
}
</style>
</head>
<body>
<p>
<span class="button prev">Previous</span>
<span class="button next">Next</span>
</p>
</body>
</html>
Mr J
12-13-2004, 01:56 PM
See the image attachement for what the following looks like

<style>

.cd{
font-family: Arial, sans-serif;
font-size: 12pt;
color: #000000;
text-align: center;
border:1px solid #000000;
background-color: #FFFFFF;
padding: 2px;
width:120px;
text-decoration:none;
}

</style>

<a href="#null" class="cd">Previous</a>
Mr J
12-13-2004, 01:59 PM
Hmm, image didn't upload .....
Twelvethman
12-14-2004, 12:29 PM
Am sorry I was away yesterday. WIll give the options a shot. Thanks for all your help.