PDA

Click to See Complete Forum and Search --> : Problems with the texts leading

Rambot
06-28-2009, 06:11 PM
I'm currently building a website, but I just have a minor issue; if I type in some text in a table, how can I change either the kerning, leading or tracking of that text?

Thanks,
CkretAjint
06-28-2009, 06:16 PM
leading = line-height
kerning = letter-spacing
Rambot
06-28-2009, 06:32 PM
Thanks, that worked nicely. Another problem occurs though. If I change the leading etc and preview my site or use Live View, my text is centered in the middle of the table when I want it at the top. Are there any suggestions for that?
CkretAjint
06-28-2009, 07:23 PM
valign=top/middle/bottom
Rambot
06-28-2009, 10:27 PM
Thanks again. Here's another question I'm afraid; I have some links on my site which are a different colour to my body text (so obviously they stick out as links), but what if I want one of my links to be the same colour as the body text and still be a link. And be able to do this and keep my other links intact as a different colour than the body text?
CkretAjint
06-28-2009, 10:37 PM
Set up a new css for this.

.bodyLinks { insert links specs here }


In your a tag add class="bodyLinks"
Rambot
06-29-2009, 09:18 AM
Thanks, but what do you mean by setting up a CSS? Do I add a new CSS rule? And I can't find bodylinks anywhere.
CkretAjint
06-29-2009, 12:19 PM
...I assume you don't know what CSS style sheets are? Google them and learn them if you are doing web coding.

bodyLinks is the class name, you can call it anything you want. You can call the class "snot" or "cookies" or "bananas" if you want too...
Rambot
06-30-2009, 01:34 PM
Okay, I've been scratching my head over this for ages now and I'm getting nowhere, I have my code here and I was wondering if you could give me a hand?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ROBERT BEVERIDGE - ONLINE PORTFOLIO</title>
<style type="text/css">
<!--
body {
background-color: #151616;
margin-left: 0px;
}
h1,h2,h3,h4,h5,h6 {
font-family: Arial, Helvetica, sans-serif;
}
h1 {
font-size: 12px;
color: 605F5F;
}
body,td,th {
color: #605f5f;
font-size: 11px;
line-height: 3px;
text-align: left;
vertical-align: top;
word-spacing: 0px;
letter-spacing: 0px;
font-family: Arial, Helvetica, sans-serif;
}
body p {
font-size: 10px;
}
body p {
font-family: Arial, Helvetica, sans-serif;
}
body p {
font-size: 11px;
vertical-align: top;
}
link {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
background-color: 606060;
color: 606060;
}
a:link {
color: #605f5f;
text-decoration: none;
}
a {
font-family: Arial, Helvetica, sans-serif;
color: #605f5f;
}
a:visited {
text-decoration: none;
color: #605f5f;
}
a:hover {
text-decoration: none;
color: #605f5f;
}
a:active {
text-decoration: none;
color: #605f5f;
}
-->
</style></head>

<body text="#A3A3A3" link="#A3A3A3" vlink="#A3A3A3" alink="#A3A3A3">
<table width="1022" height="608" border="0">
<tr>
<td width="8">&nbsp;</td>
<td width="279" height="132"><img src="graphics/header.png" width="279" height="112" border="0" usemap="#Map2" /></td>
<td width="655"><img src="graphics/line.png" width="700" height="110" /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td width="279" height="462"><p>Print</p>
<p>Motion
</p>
<p>Photography </p>
<p>Information </p>
<p><a href="http://robbox.wordpress.com/">Blog</a></p></td>
<td><p>Info</p>
<p>&nbsp;</p>
<p> I am currently able to work either for freelance or on placement.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Phone: +44 (0)7527863189<br />
</p>
<p>Email: <a href="mailto:mail@robertbeveridge.co.uk">mail@robertbeveridge.co.uk</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="http://www.flickr.com/photos/29586668@N05/">Flickr </a></p>
<p><a href="http://twitter.com/RobertBeveridge">Twitter</a></p>
<p><a href="http://www.vimeo.com/user995377/videos">Vimeo</a></p>
<p>&nbsp;</p></td>
</tr>
</table>
<map name="Map" id="Map">
<area shape="rect" coords="1,7,58,28" href="mailto:mail@robertbeveridge.co.uk" />
<area shape="rect" coords="3,31,59,50" href="http://www.robbox.wordpress.com" />
</map>

<map name="Map2" id="Map2">
<area shape="rect" coords="-1,5,282,109" href="home.html" />
</map>
</body>
</html>

End

What I have in red is what colour I need to change. Which part of the style sheet do I change?
CkretAjint
06-30-2009, 01:51 PM
Whoa.... Why do you have like 6 body and 11 p css classes?? You can only have 1 of each. Fix that first... That is about 90% of your problem, plus more you don't see right now. You are going to have massive issue down the road unless you correct this.


CSS:
p { font-size:10px; font-family:Arial,Helvetica,Verdana,sans-serif; color:#333333; text-decoration:none; }

a.bodyLink:link, a.bodyLink:active, a.bodyLink:visited { font-weight:bold; color:#abcdef; text-decoration:underline; }
a.bodyLink:hover { font-weight:bold; color:#aaaaaa; text-decoration:underline; }


HTML:
<p><a href="http://www.flickr.com/photos/29586668@N05/" target="_blank" class="bodyLink">Flickr</a></p>
<p><a href="http://twitter.com/RobertBeveridge" target="_blank" class="bodyLink">Twitter</a></p>
<p><a href="http://www.vimeo.com/user995377/videos" target="_blank" class="bodyLink">Vimeo</a></p>


That should help... I hope.
Rambot
06-30-2009, 02:35 PM
I think I've fixed it now. I'm not sure if I can understand where I'm meant to put the style and html code you provided though.

This is what I'm managed to get now:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ROBERT BEVERIDGE - ONLINE PORTFOLIO</title>
<style type="text/css">
<!--

body,td,th {
background-color: #151616;
color: #605f5f;
font-size: 11px;
line-height: 3px;
text-align: left;
vertical-align: top;
word-spacing: 0px;
letter-spacing: 0px;
margin-left: 0px;
font-family: Arial, Helvetica, sans-serif;
}
link {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
background-color: 606060;
color: #CCC;
}
a:link {
color: #CCC;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #CCC;
}
a:hover {
text-decoration: none;
color: #605f5f;
}
a:active {
text-decoration: none;
color: #605f5f;
}
-->
</style></head>

<body text="#A3A3A3" link="#A3A3A3" vlink="#A3A3A3" alink="#A3A3A3">
<table width="1022" height="608" border="0">
<tr>
<td width="8">&nbsp;</td>
<td width="279" height="132"><img src="graphics/header.png" width="279" height="112" border="0" usemap="#Map2" /></td>
<td width="655"><img src="graphics/line.png" width="700" height="110" /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td width="279" height="462"><p>Print</p>
<p>Motion
</p>
<p>Photography </p>
<p>Information </p>
<p><a href="http://robbox.wordpress.com/" class="MenuLink">Blog</a></p></td>
<td><p>---.</p>
<p>&nbsp;</p>
<p> I am currently able to work either for freelance or on placement.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Phone: +44 (0)7527863189<br />
</p>
<p>Email: <a href="mailto:mail@robertbeveridge.co.uk">mail@robertbeveridge.co.uk</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="http://www.flickr.com/photos/29586668@N05/">Flickr </a></p>
<p><a href="http://twitter.com/RobertBeveridge">Twitter</a></p>
<p><a href="http://www.vimeo.com/user995377/videos">Vimeo</a></p>
<p>&nbsp;</p></td>
</tr>
</table>
<map name="Map" id="Map">
<area shape="rect" coords="1,7,58,28" href="mailto:mail@robertbeveridge.co.uk" />
<area shape="rect" coords="3,31,59,50" href="http://www.robbox.wordpress.com" />
</map>

<map name="Map2" id="Map2">
<area shape="rect" coords="-1,5,282,109" href="home.html" />
</map>
</body>
</html>



The word 'Blog' is a link, but I want it to be the same colour as the body text (#605f5f) only it changes colour once the cursor has rolled over it.

There must be a way to do this inside Dreamweaver without altering the code surely? Sorry for repeating myself.
CkretAjint
06-30-2009, 02:42 PM
<p><a href="http://robbox.wordpress.com/" class="MenuLink">Blog</a></p>

Where is the css for the "MenuLink" class you are calling out? It's not in the code you posted...

once you find it, where ever it may be, make sure your specific color need is declared in it, then change the color code in your MenuLink:Hover line to the hover color you want.
CkretAjint
06-30-2009, 02:44 PM
There must be a way to do this inside Dreamweaver without altering the code surely?

You're kidding, right? How else do you think your broswer is going to know what to change? By the power of your thought? Magic jumping beans?? Dreamweaver is a code editing program...

I don't mean to be rude, but I REALLY think you should read up on some of the basics of HTML and CSS coding before you proceed any further.
Rambot
06-30-2009, 02:52 PM
You're kidding, right? How else do you think your broswer is going to know what to change? By the power of your thought? Magic jumping beans?? Dreamweaver is a code editing program...

I don't mean to be rude, but I REALLY think you should read up on some of the basics of HTML and CSS coding before you proceed any further.

By that I meant manually :S