18 replies [Last post]
nagaina
nagaina's picture
Offline
newbie
Last seen: 13 years 35 weeks ago
Timezone: GMT+1
Joined: 2007-02-19
Posts: 9
Points: 0

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?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Text-stroke is part of the

Text-stroke is part of the CSS3 recommendations but so far, only Safari has implemented it.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 51 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

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

nagaina
nagaina's picture
Offline
newbie
Last seen: 13 years 35 weeks ago
Timezone: GMT+1
Joined: 2007-02-19
Posts: 9
Points: 0

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 Wink )

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 51 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Could I see the full page

Could I see the full page html and the whole css, or a link to it would do?

nagaina
nagaina's picture
Offline
newbie
Last seen: 13 years 35 weeks ago
Timezone: GMT+1
Joined: 2007-02-19
Posts: 9
Points: 0

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

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 51 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

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

nagaina
nagaina's picture
Offline
newbie
Last seen: 13 years 35 weeks ago
Timezone: GMT+1
Joined: 2007-02-19
Posts: 9
Points: 0

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






















 




Home / Nieuws

Telefoonlijst Personeel PINGO OR






Home / Nieuws


Lotto genomineerd voor 'Dagblad Goud'


Print








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.



 



 


 
 






ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 51 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

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.

nagaina
nagaina's picture
Offline
newbie
Last seen: 13 years 35 weeks ago
Timezone: GMT+1
Joined: 2007-02-19
Posts: 9
Points: 0

thnx I'm waiting on a reply

thnx I'm waiting on a reply Smile

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 51 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

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!

nagaina
nagaina's picture
Offline
newbie
Last seen: 13 years 35 weeks ago
Timezone: GMT+1
Joined: 2007-02-19
Posts: 9
Points: 0

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 Wink

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

nagaina wrote:Is it possible

nagaina wrote:
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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

nagaina
nagaina's picture
Offline
newbie
Last seen: 13 years 35 weeks ago
Timezone: GMT+1
Joined: 2007-02-19
Posts: 9
Points: 0

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?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 51 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

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.

nagaina
nagaina's picture
Offline
newbie
Last seen: 13 years 35 weeks ago
Timezone: GMT+1
Joined: 2007-02-19
Posts: 9
Points: 0

Do you know if it is

Do you know if it is possible to change the color of the underline?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 51 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

The text underline inherits

The text underline inherits its color from the font color, doesn't it? Thus, they must be the same.

nagaina
nagaina's picture
Offline
newbie
Last seen: 13 years 35 weeks ago
Timezone: GMT+1
Joined: 2007-02-19
Posts: 9
Points: 0

too bad...

too bad...

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

You could always

You could always set

text-decoration: none;
border-bottom: 1px solid #your-color;

Verschwindende wrote:
  • CSS doesn't make pies