I've made a menu in css, but i was wondering weather it is possible to make a border around every letter... And if it is not possile, does anyone have a style / css-code for me what makes this possible?
Text-stroke is part of the
Text-stroke is part of the CSS3 recommendations but so far, only Safari has implemented it.
The only way I can think you
The only way I can think you could do this would be to put every letter inside its own span, significantly bloating the html, and styling the span.
Like this:
Your Page Title Here
html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{
margin:0px;
padding:0px;
border:0px;
border-collapse:separate;
border-spacing:0px;
}
input,select{
margin:0;
padding:0;
}
body{
font-family:verdana,arial,sans-serif;
font-size:100.1%;
}
strong,b{
font-weight:bold;
}
p{
font-size:90%;
line-height:1.1em;
}
p.testtext{
margin:5px;
}
p.testtext span{
display:inline-block;
float:left;
margin-right:2px;
border:1px solid black;
line-height:1.1em;
}
He
Trevor
I don't really understand
I am really glad I get some response here, at different forums I've tried to get the answers, but no succces.
^^ I don't really understand your css. This is mine (for the menu, where I want the border around the letters)
a.mainlevel:link, a.mainlevel:visited {
font-weight: bold;
align: right;
text-align: right;
text-shadow: #000000;
}
a.mainlevel:hover {
font-weight: bold;
align: right;
text-align: right;
}
a.mainmenu:hover {
font-weight: bold;
align: right;
text-align: right;
}
a.sublevel:hover {
font-weight: bold;
align: right;
text-align: right;
}
a.sublevel:link, a.sublevel:visited {
font-weight: bold;
align: right;
text-align: right;
}
So... How do I make the border than?
(I'm a beginning user of CSS, sorry )
Could I see the full page
Could I see the full page html and the whole css, or a link to it would do?
complete css:
complete css:
BODY {
margin : 0px 0px 0px 0px;
background-color : #FFFFFF;
color : #000000;
background-color: #F8F8FF;
scrollbar-base-color: #778899;
}
td, tr, p, div {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
color : #333333;
}
ul {
margin : 0px 0px 0px 0px;
}
hr {
background : #CCCCCC;
height : 1px;
width : 100%;
}
.title {
font-family: sans-serif;
font-size: 24px;
font-weight: bold;
color : #7B8DA1;
}
.pathway {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
a.pathway:link, a.pathway:visited {
color : #000000;
font-weight : normal;
}
a.pathway:hover {
color : #000000;
font-weight : normal;
text-decoration : underline;
}
/* --Default Class Settings-- */
a.mainlevel:link, a.mainlevel:visited {
font-weight: bold;
align: right;
text-align: right;
}
a.mainlevel:hover {
font-weight: bold;
align: right;
text-align: right;
}
a.mainmenu:hover,{
font-weight: bold;
align: right;
text-align: right;
}
a.sublevel:hover {
font-weight: bold;
align: right;
text-align: right;
}
a.sublevel:link, a.sublevel:visited {
font-weight: bold;
align: right;
text-align: right;
}
table.moduletable {
margin: 0px 0px 0px 0px;
width: 95%;
margin-left: 2px;
}
table.moduletable th {
font-weight: bold;
background-image: url(/images/stories//kop.gif);
text-align: left;
width: 13%;
height: 10px;
}
table.moduletable td {
font-weight: bold;
background-image: url(/images/stories//kop.gif);
text-align: left;
width: 13%;
height: 10px;
}
.poll {
font-family : Arial, Helvetica, sans-serif;
font-size : 10px;
color : #666666;
line-height : 14px;
}
.sectiontableheader {
background-color : #CCCCCC;
color : #7B8DA1;
font-weight : bold;
}
.small {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #3366C0;
text-decoration : none;
font-weight : medium;
}
.smalldark {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #000000;
text-decoration : none;
font-weight : normal;
}
.contentheading, .componentheading {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
font-weight : bold;
color : #0085C7;
text-align : left;
}
.createdate {
font-family : Arial, Helvetica, sans-serif;
font-size : 10px;
color : #0084C7;
text-align : left;
}
.button {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-style : normal;
font-size : 10px;
font-weight : bold;
background-color : #cccccc;
color : #000000;
border : 1px solid #999999;
}
.inputbox {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #000000;
background-color : #FFFFFF;
border : 1px solid #999999;
}
a:link, a:visited {
font-size : 11px;
color : #000000;
text-decoration : none;
font-family : Verdana, Arial, Helvetica, sans-serif;
}
a:hover {
color : #000000;
text-decoration : underline;
}
/* For content item titles that are hyperlink instead of Read On */
a.contentpagetitle:link, a.contentpagetitle:visited {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #000000;
text-align:left;
}
a.contentpagetitle:hover {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
text-align:left;
color: #7B8DA1;
text-decoration: underline;
font-weight: bold;
}
a.category:link, a.category:visited {
color : #333333;
font-weight : bold;
}
a.category:hover {
color : #7B8DA1;
}
/* Styles for dhtml tabbed-pages */
.ontab {
background-color: #ffae00;
border-left: outset 2px #ff9900;
border-right: outset 2px #808080;
border-top: outset 2px #ff9900;
border-bottom: solid 1px #d5d5d5;
text-align: center;
cursor: hand;
font-weight: bold;
color: #FFFFFF;
}
.offtab {
background-color : #e5e5e5;
border-left: outset 2px #E0E0E0;
border-right: outset 2px #E0E0E0;
border-top: outset 2px #E0E0E0;
border-bottom: solid 1px #d5d5d5;
text-align: center;
cursor: hand;
font-weight: normal;
}
.tabpadding {
}
.tabheading {
background-color: #ffae00;
text-align: left;
}
.pagetext {
visibility: hidden;
display: none;
position: relative;
top: 0;
}
/* for modifying {moscode} output. Dont set the colour! */
.moscode {
background-color: #f0f0f0;
}
/* Text passed with mosmsg url parameter */
.message {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size : 10pt;
color : #ff6600;
text-align: center;
}
/* custom stuff */
.container {
border: solid;
border-width: 1px;
border-color: #efefef;
background-color: White;
}
.boxes {
border: solid;
border-color: #efefef;
border-width: 1px;
}
and HTML:
<?php
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
$iso = split( '=', _ISO );
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
?>
<?php if ( $my->id ) initEditor(); ?>
/>
<?php mosShowHead(); ?>
<?php echo " " ; ?>
<?php echo "" ; ?>
<?php echo "" ; ?>
<?php mosLoadModules ( 'user1' ); ?>
<?php mosPathWay(); ?>
<?php mosLoadModules ( 'left' ); ?>
<?php mosMainBody(); ?>
<?php mosLoadModules ( 'right' ); ?>
It is not a public site, So I can't provide u with an URL
Hi The css has this
Hi
The css has this property:
align: right
which does not exist, so delete these.
You need to view the page in your local browser, and then view the code, and copy and paste THAT html here, not the php stuff!
Trevor
ok i've deleted that
ok i've deleted that (align thing)
this is the html:
<?xml version="1.0" encoding="utf-8"?>
Home / Nieuws - Intranet
Telefoonlijst Personeel PINGO OR
Lotto genomineerd voor 'Dagblad Goud'
Written by Administrator
Feb 13, 2007 at 12:44 PM
Lotto is, samen met 9 andere adverteerders genomineerd voor de publieksprijs 'Dagblad Goud'. De vraag is natuurlijk of wij gaan winnen. Nu hebben we dat deels in eigen hand, omdat het een publieksprijs is. Iedereen kan namelijk zijn stem uitbrengen. Op zaterdag 10 februari verschijnt de overzichts-advertentie met alle 10 de nominaties. Mensen kunnen stemmen via telefoon, sms of internet. Dat laatste kan nu al: ga naar www.dagbladgoud.nl en stem op de advertentie van Lotto. Stemmen kan tot en met 14 februari.
A quick thing, delete the
A quick thing, delete the xml declaration at teh top, it will throw IE6 into quirks mode (it is valid, HTML tidy always puts it in, but I wouldn't use it).
I will take a look at the code.
thnx I'm waiting on a reply
thnx I'm waiting on a reply
Ok Find the first menu item
Ok
Find the first menu item (Home / Niews):
Home / Nieuws
and change this to:
Home
/ Nie
uws
Now you can see the bloat!
Now add margin: 5px as follows:
a.mainlevel:link, a.mainlevel:visited {
font-weight: bold;
text-align: right;
margin:5px;
}
And new css:
a.mainlevel span{
display:inline-block;
float:left;
margin-right:2px;
border:1px solid black;
line-height:1.1em;
}
Some adjustment to menu item widths will be needed!
not possible
Sorry, but that ain't good for me. I work with Mambo. So that in the future, new people do not have to use or edit html. Mambo creates de links without having to edit HTML. In Mambo it is not possible to edit the html itselfs.
Is it possible to make it without editing html with span and /span?
PS SO FAR THANKS
nagaina wrote:Is it possible
Is it possible to make it without editing html with span and /span?
As I said before, without extra HTML the only way to do it is currently unsupported by most browsers.
I know, but I was just
I know, but I was just wondering because clevaTreva had allready come upo with this solution, i was hoping..
Maybe someone of u has a letter which has it allready, than I could include it?
And If that is not possible is it possible to make the decoration (underline) in another color?
There are specilist fonts
There are specilist fonts that do have this border, but they are not commonly found on user's computers.
Back to the drawing board and can your idea I'm afraid.
Do you know if it is
Do you know if it is possible to change the color of the underline?
The text underline inherits
The text underline inherits its color from the font color, doesn't it? Thus, they must be the same.
too bad...
too bad...
You could always
You could always set
text-decoration: none;
border-bottom: 1px solid #your-color;