Announcement

Collapse
No announcement yet.

Problems with the texts leading

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Problems with the texts leading

    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,
    Online Portfolio
    robertbeveridge.co.uk
    --
    Graphic Design is the new Rock 'n' Roll

  • #2
    leading = line-height
    kerning = letter-spacing
    Professional Pixel Pusher Designing the world around you. | Working daily to reach 10,000 hours of practice.

    Comment


    • #3
      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?
      Online Portfolio
      robertbeveridge.co.uk
      --
      Graphic Design is the new Rock 'n' Roll

      Comment


      • #4
        valign=top/middle/bottom
        Professional Pixel Pusher Designing the world around you. | Working daily to reach 10,000 hours of practice.

        Comment


        • #5
          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?
          Online Portfolio
          robertbeveridge.co.uk
          --
          Graphic Design is the new Rock 'n' Roll

          Comment


          • #6
            Set up a new css for this.

            .bodyLinks { insert links specs here }


            In your a tag add class="bodyLinks"
            Professional Pixel Pusher Designing the world around you. | Working daily to reach 10,000 hours of practice.

            Comment


            • #7
              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.
              Online Portfolio
              robertbeveridge.co.uk
              --
              Graphic Design is the new Rock 'n' Roll

              Comment


              • #8
                ...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...
                Professional Pixel Pusher Designing the world around you. | Working daily to reach 10,000 hours of practice.

                Comment


                • #9
                  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?
                  Last edited by Rambot; 06-30-2009, 08:46 AM.
                  Online Portfolio
                  robertbeveridge.co.uk
                  --
                  Graphic Design is the new Rock 'n' Roll

                  Comment


                  • #10
                    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&#37; 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.

                    Code:
                    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.
                    Professional Pixel Pusher Designing the world around you. | Working daily to reach 10,000 hours of practice.

                    Comment


                    • #11
                      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@robe rtbeveridge.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.
                      Online Portfolio
                      robertbeveridge.co.uk
                      --
                      Graphic Design is the new Rock 'n' Roll

                      Comment


                      • #12
                        Originally posted by Rambot View Post
                        <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.
                        Last edited by CkretAjint; 06-30-2009, 09:46 AM.
                        Professional Pixel Pusher Designing the world around you. | Working daily to reach 10,000 hours of practice.

                        Comment


                        • #13
                          Originally posted by Rambot View Post
                          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.
                          Last edited by CkretAjint; 06-30-2009, 09:47 AM.
                          Professional Pixel Pusher Designing the world around you. | Working daily to reach 10,000 hours of practice.

                          Comment


                          • #14
                            Originally posted by CkretAjint View Post
                            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
                            Online Portfolio
                            robertbeveridge.co.uk
                            --
                            Graphic Design is the new Rock 'n' Roll

                            Comment

                            Search

                            Collapse

                            Sponsor

                            Collapse

                            Incredible Stock

                            Latest Topics

                            Collapse

                            • B
                              Reply to 100% cotton t-shirt printing INK HELP
                              B
                              Are you referring to inkjet heat transfer printers and paper?...
                              Today, 12:48 AM
                            • B
                              Reply to IT book cover redesign. Giving it a try
                              B
                              As someone who sometimes designs book covers, a realistic design needs to consider the sales brought on by shelf appeal. And shelf appeal doesn't just depend on aesthetics; it also depends on grabbing...
                              Today, 12:34 AM
                            • Kdigennaro
                              Reply to Feedback for a poster design
                              Kdigennaro
                              I like that you are answering the 'why' questions. Why is the text background red, why are you using the crumbled paper texture etc.

                              This shows that you are thinking threw what you are doing...
                              Yesterday, 08:38 PM
                            • Kdigennaro
                              What - If any - Certifications are taken seriously these days?
                              Kdigennaro
                              Hey guys,

                              I have been designing for about 10 years now as a freelancer and am entertaining the idea of trying to find a job at a creative firm. Right now I'm building my resume and portfolio...
                              Yesterday, 07:30 PM
                            • Kdigennaro
                              Reply to Business card logo feedback
                              Kdigennaro
                              Hey @someguy,

                              Thanks for sharing your designs! I would encourage and challenge you to try to narrow your design focus. Right now none of the designs are 'bad' but none are 'good'. Design,...
                              Yesterday, 07:10 PM
                            GDF A division of Mediabistro Holdings Adweek | Mediabistro | Clio | Film Expo Group Contact Us | Terms of Use | Privacy Policy Copyright 2016 Mediabistro Holdings
                            Working...
                            X