Dreamweaver Issues - Text spaced out?

mas · Oct 23, 2010

Im trying to create a site at the minute, but - when in dreamweaver my text is as I want it, nicely spaced and tight together. When i preview it, the text seems to be spaced out?

What am I doing wrong!

Sam

JamesBryan · Oct 23, 2010

There should be a panel on the right that has an option for Letter Spacing, could be that

mas · Oct 24, 2010

On preview its fine, all looks great. The letter spacing goes mental on preview. Web design is not my strong point LOL

Andy. · Oct 24, 2010

Are you using CSS? Dreamweaver is a royal pain for editing pages with CSS IMHO, so much so that I am now using Notepad(++) instead.

Can you host the page and let us see the code? Might help identify the problem.

mas · Oct 24, 2010

Yeah, using CSS. I could host the page, any ideas on what may be causing it?

Jon.G · Oct 24, 2010

css conflict?

have you declared your spacing in your body and in a div?

dreamweaver will use the body tag probably then the browser will use the last css line relevant.
Also have you tried other browsers? I find its easier to work with Safari/Chrome then adjust the css with if IE statements to correct it for internet explorer. Uploading your page + css would really help though

mas · Oct 25, 2010

Here is a quick screen shot of the page in construction, ive re-designed it slightly since my last problem. The text below the main image is lower than the text next to it but I cant workout why, ive got my valign = top?

In dreamweaver....

Thanks,
Sam

mas · Oct 25, 2010

Here is the code. Ive just bunged it all in.

<!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>Untitled Document</title>
<style type="text/css">
body {
background-image: url(images/bg_grad.jpg);
background-repeat: repeat-x;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #f8f8f8;
}
.small_top {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
font-weight: normal;
color: #C0C0C0;
letter-spacing: 0px;
text-align: right;
}
.body_bg {
top: 20px;
background-repeat: no-repeat;
background-image: url(images/body_bg.png);
}
.image {
background-image: url(images/body_bg.png);
background-repeat: no-repeat;
}
.bodytext {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
color: #666;
}
.list {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
color: #333;
list-style-position: inside;
list-style-type: disc;
}
.header {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 20px;
font-style: normal;
font-weight: bold;
color: #333;
line-height: 10px;
vertical-align: top;
}
.highlight {
color: #333;
font-weight: bold;
}
.body_bg br {
font-size: 1px;
}
.bodytext1 {font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
color: #666;
}
.header1 {font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 20px;
font-style: normal;
font-weight: bold;
color: #333;
line-height: 10px;
vertical-align: top;
}
</style>
</head>

<body>
<table width="850" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="850" height="26" class="small_top">About Us Contact Us Join Us</td>
</tr>
<tr>
<td height="17"><img src="images/header_logo.png" width="200" height="56" alt="Greenhouse" /></td>
</tr>
</table>
<br />
<table width="849" border="0" align="center" cellpadding="0" cellspacing="0" class="image">
<tr>
<td width="849" height="729" colspan="3" valign="top"><p><img src="images/main_image.png" width="850" height="300" alt="Greenhouse" /><br />
</p>
<table width="850" border="0" cellspacing="5" cellpadding="0">
<tr>
<td width="275" height="366" valign="top"><p class="bodytext1"><span class="header1"><span class="header">Welcome to Greenhouse.</span></span><br />
<br />
We have many long lasting relationships with solicitors, landlords, estate agents and surrounding local authorities with the high quality service we offer mainly in Warrington but with the ability to cover surrounding areas such as Manchester, Liverpool, Wigan, Crewe, St Helens, Widnes and Runcorn.</p>
<p class="bodytext1">By using our services you can be assured of the following benefits.<br />
<span class="header1"></span><br />
<span class="list"><span class="bodytext">- Specially selected and qualified DEA's<br />
- High quality service with a quick turnaround<br />
- Fit the appointments around your availability<br />
- Very competitive rates<br />
- Information secured at the highest cost<br />
- Handle high volumes of EPCs and HIPs<br />
- Registered with UK Accreditors</span></span><br />
<br />
Please see the <span class="highlight">'About Us'</span> page for more information, if you have any questions, please do not hesitate to contact us <span class="highlight">HERE</span>. We will respond to your enquiry within 24hours. </p></td>
<td width="273" valign="top"><span class="header1"><span class="header">A little about EPC's.</span></span><br />
<br />
<span class="bodytext1">The Energy Performance Certificate looks broadly similar to the energy labels now provided with vehicles and many appliances. Its purpose is to indicate how energy efficient a building is. <br />
<br />
The certificate will provide an energy rating of the building from A to G, where A is very efficient and G is the least efficient. The better the rating, the more energy-efficient the building is, and the lower the fuel bills are likely to be. Each energy rating is based on the characteristics of the building itself and its services (such as heating and lighting). Hence this type of rating is known as an asset rating.<br />
<br />
EPCs will help householders work out how to reduce their energy bills and carbon emissions. Fridges and other kitchen appliances already feature energy ratings, and manufacturers and consumers have become familiar with them. However, refrigeration and cooking account for less than 10% of the energy used in a typical house; heating and hot water account for more than 75% of the total.</span></td>
<td width="272"> </td>
</tr>
</table>
<p></p></td>
</tr>
</table>
<table width="1001" border="0" align="center" cellpadding="0" cellspacing="0">
</table>
</body>
</html>

Andy. · Oct 25, 2010

HTML:

<!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>Untitled Document</title>
<style type="text/css">
body {
background-image: url(images/bg_grad.jpg);
background-repeat: repeat-x;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #f8f8f8;
}
.small_top {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
font-weight: normal;
color: #C0C0C0;
letter-spacing: 0px;
text-align: right;
}
.body_bg {
top: 20px;
background-repeat: no-repeat;
background-image: url(images/body_bg.png);
}
.image {
background-image: url(images/body_bg.png);
background-repeat: no-repeat;
}
.bodytext {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
color: #666;
}
.list {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
color: #333;
list-style-position: inside;
list-style-type: disc;
}
.header {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 20px;
font-style: normal;
font-weight: bold;
color: #333;
line-height: 10px;
vertical-align: top;
}
.highlight {
color: #333;
font-weight: bold;
}
.body_bg br {
font-size: 1px;
}
.bodytext1 {font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
color: #666;
}
.header1 {font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 20px;
font-style: normal;
font-weight: bold;
color: #333;
line-height: 10px;
vertical-align: top;
}
</style>
</head>

<body>
<table width="850" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="850" height="26" class="small_top">About Us Contact Us Join Us</td>
</tr>
<tr>
<td height="17"><img src="images/header_logo.png" width="200" height="56" alt="Greenhouse" /></td>
</tr>
</table>
<br />
<table width="849" border="0" align="center" cellpadding="0" cellspacing="0" class="image">
<tr>
<td width="849" height="729" colspan="3" valign="top"><p><img src="images/main_image.png" width="850" height="300" alt="Greenhouse" /><br />
</p>
<table width="850" border="0" cellspacing="5" cellpadding="0">
<tr>
<td width="275" height="366" valign="top"><p class="bodytext1"><span class="header1"><span class="header">Welcome to Greenhouse.</span></span><br />
<br />
We have many long lasting relationships with solicitors, landlords, estate agents and surrounding local authorities with the high quality service we offer mainly in Warrington but with the ability to cover surrounding areas such as Manchester, Liverpool, Wigan, Crewe, St Helens, Widnes and Runcorn.</p>
<p class="bodytext1">By using our services you can be assured of the following benefits.<br />
<span class="header1"></span><br />
<span class="list"><span class="bodytext">- Specially selected and qualified DEA's<br />
- High quality service with a quick turnaround<br />
- Fit the appointments around your availability<br />
- Very competitive rates<br />
- Information secured at the highest cost<br />
- Handle high volumes of EPCs and HIPs<br />
- Registered with UK Accreditors</span></span><br />
<br />
Please see the <span class="highlight">'About Us'</span> page for more information, if you have any questions, please do not hesitate to contact us <span class="highlight">HERE</span>. We will respond to your enquiry within 24hours. </p></td>
<td width="275" height="366" valign="top"><p class="bodytext1"><span class="header1"><span class="header">A little about EPC's.</span></span><br />
<br />
<span class="bodytext1">The Energy Performance Certificate looks broadly similar to the energy labels now provided with vehicles and many appliances. Its purpose is to indicate how energy efficient a building is. <br />
<br />
The certificate will provide an energy rating of the building from A to G, where A is very efficient and G is the least efficient. The better the rating, the more energy-efficient the building is, and the lower the fuel bills are likely to be. Each energy rating is based on the characteristics of the building itself and its services (such as heating and lighting). Hence this type of rating is known as an asset rating.<br />
<br />
EPCs will help householders work out how to reduce their energy bills and carbon emissions. Fridges and other kitchen appliances already feature energy ratings, and manufacturers and consumers have become familiar with them. However, refrigeration and cooking account for less than 10% of the energy used in a typical house; heating and hot water account for more than 75% of the total.</span></td>
<td width="272">&nbsp;</td>
</tr>
</table>
<p></p></td>
</tr>
</table>
<table width="1001" border="0" align="center" cellpadding="0" cellspacing="0">
</table>
</body>
</html>

Fixed it for you. I just copied the same line to both sections:

HTML:

<td width="275" height="366" valign="top"><p class="bodytext1"><span class="header1"><span class="header">

mas · Oct 25, 2010

You hero, I will get that put in when im home! God bless CS!!

Im trying to get in to web design more and more now, it just seems when you hit a problem, it stops progress for so long until you work it out, like trial and error.

Mr Pants · Oct 25, 2010

mas said:
You hero, I will get that put in when im home! God bless CS!!

Im trying to get in to web design more and more now, it just seems when you hit a problem, it stops progress for so long until you work it out, like trial and error.

HTML and CSS are pretty easy IMO. Read through a few guides and try putting up a site from scratch. Looks like you're running a Mac so you could buy Coda. Really cool software and has built in functions to help.

I think you'd be surprised how easy it is to pick up on it...

mas · Oct 25, 2010

Yeah, just after playing around on it last night I learnt loads of new stuff... Just think its a case of using it more and more, learning from mistakes etc... I can do the design aspect, just struggle to put it all together in a website LOL

Andy. · Oct 25, 2010

LOL, I'm the opposite. I can digitise the idea, but coming up with the design does my head in.

mas · Oct 25, 2010

I was half tempted to use a free template, but, I wouldnt really be gaining much experience.... and this is for my own business, so I may aswell put some effort in.

Mr Pants · Oct 25, 2010

You could read a few guides / tutorials etc. Like any language, you learn best when putting it into practice. You can do some reading first though. I'm currently reading PHP For Dummies haha.

HTML is actually piss easy. CSS is a bit harder but you'll be fine.

mas · Oct 25, 2010

Are there any good websites, or sources of information when working with CSS/HTML?

Mr Pants · Oct 25, 2010

mas said:
Are there any good websites, or sources of information when working with CSS/HTML?

Loads of sites out there. This one is quite nice: http://htmldog.com/

I guess everyone will have a preference with different sites and how they present the information. It's worth Googling it and having a look round tbh. Have a read and then have a crack and setting up a website from scratch. You can then use the guides etc as a reference when you get stuck.

mas · Oct 25, 2010

I have done this from scratch, but, using tables.... which may not be the best way? Its certainly seems the easiest.

Mr Pants · Oct 25, 2010

Tables = fail. They still work, but they're pretty dated.

CSS is all about positioning, floating divs etc.

mas · Oct 25, 2010

I guess for what my site needs to do, the basics will be fine, it would be good to start learning more complicated scripts though!

mas · Oct 25, 2010

....especially after watching the social network!! Why couldnt I have locked myself indoors and sat on a computer the whole of my youth :'(

Mr Pants · Oct 25, 2010

Lol yeah that movie had the same effect on me too!

mas · Oct 25, 2010

Is that why bought the book?! LOL

mas · Oct 25, 2010

Thanks btw, that fix worked a treat!

Andy. · Oct 25, 2010

HTH.

mas · Oct 25, 2010

Geting the hang of this!

Screen shot 2010-10-25 at 23.28.20 by Stickars, on Flickr

C&C?

Mr Pants · Oct 26, 2010

mas said:
Is that why bought the book?! LOL

Nah I've wanted to learn it for awhile. The film just had that kinda effect on me, like wanting to be more of a nerd. :star:

Btw your screenshot asks me to login to Yahoo to view it...

Christopher · Oct 26, 2010

Cool illustrations! Yours?

mas · Oct 26, 2010

Kind of, bastardised some free vector stuff off the net. They are quite nice.

Far from a final page yet though, will be doing some more work on it tonight.

Christopher · Oct 26, 2010

LOL. I've done that myself.

"all my own work, honest"

Revels · Oct 26, 2010

Lol. You're a designer, you're supposed to be able to draw!

mas · Oct 26, 2010

Aye, but, if you find something you like, and its uploaded for free use, why waste your time doing your own. God bless the internet.

Search

Search

Dreamweaver Issues - Text spaced out?

mas

JamesBryan

mas

Andy.

mas

Jon.G

mas

mas

Andy.

mas

Mr Pants

mas

Andy.

mas

Mr Pants

mas

Mr Pants

mas

Mr Pants

mas

mas

Mr Pants

mas

mas

Andy.

mas

Mr Pants

Christopher

mas

Christopher

Revels

mas

Similar threads