Web Hosting Talk







View Full Version : font size 12 is WAY larger than I thought - Have I been using DREAMWAVER to long??


lokodezine
05-17-2004, 10:21 PM
I opened up Dreamweaver and took off stlyes and just made it normal html font tags for each text.

I made a template in Fireworks with text sizes for links for size 14 and then went into Dreamwaver and used text size 14 and its HUGE and the closest text size for the 14 size used in Fireworks was 2 and that was to big and 1 was to small??

Is there anyway I can use size 14? please help

Charlottezweb
05-18-2004, 09:14 AM
The font sizes in Fireworks aren't necessarily directly corresponding to what your browser will render with code. I'm assuming you're using the same font in both dreamweaver and fireworks?

Also, instead of using sizes "1" or "2" in the code, try 9 or 11 pixels and see how that works. That might allow you to use an intermediate size that will fit better.

Good luck,
Jason

Ashed
05-18-2004, 09:39 AM
11px is used quite often.

Marque
05-18-2004, 01:47 PM
Hehe,

There is a difference in font sizes between the two. One uses Points (pt) and the other uses Pixels (px).

There is a slight difference between the two, but not much. Try fooling around in CSS with it a bit.

lokodezine
05-18-2004, 10:12 PM
I need my text in html (using DW) to be 12 px and when I try and edit it puttin font size "12px" it does not change.

Here is the code I am wanting to change

<div align="center">
<p><font color="#FFFFFF" font size="2" face="Times New Roman, Times, serif"><strong><font face="Lucida Calligraphy">&quot;No event in American history is more misunderstood than the Vietnam War. It was misreported then, and it is misremembered now.&quot;
</font></strong></font></p>
<p><font size="2" face="Lucida Calligraphy"><strong><font color="#FFFF00">Richard M. Nixon 198</font></strong><text size="14px" face="Times New Roman, Times, serif"></font><strong><font color="#FFFF00">5</font></strong></font></p>
</div>

Please help asp if u can

Marble
05-18-2004, 10:49 PM
First off, get it out of your head to not use font tags. Any modern browser renders fonts very well using style sheets, which is one of the reasons they were created in the first place.

also you've got an invalid tag in there <text ....

create one style for your paragraph (or even a class of paragraphs)

p {
font-family: Times New Roman, Serif;
font-size: 11px;
color: #FFFFFF
}

p.bold {
font-family: Times New Roman, Serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF
}
and get rid of those font tags.

If you need to format specific lines, you can use a span tag with a class.

for example:

span.name {
font-family: Lucida Calligraphy, serif; // this I am not sure about.
font-size: 11px;
color: #FFFF00;
}

span.num {
font-family: Lucida Calligraphy, serif; // this I am not sure about.
font-size: 14px;
color: #FFFF00;
}


and use:
<p class="bold">"No event in American history is more misunderstood than the Vietnam War. It was misreported then, and it is misremembered now."</p>

<span class="name">Richard M. Nixon</span><span class="num">5</span>

That should give you an idea. One thing to remember is if you are picking Lucida Calligraphy as your font, make sure its a font that is common to most systems otherwise if they don't have the font you will get varied results. But if you put in a global font choice, like Serif after the font name it will default to something serif, like Times more than likely.

If you are coding in design view, depending on the version of DW, the style sheet may not display properly. Check your source in a browser.

Marque
05-18-2004, 11:01 PM
Just to add on to marble's post:

if you set your style like marble did:

p {
font-family: Times New Roman, Serif;
font-size: 11px;
color: #FFFFFF
}

You dont need to set a class in the <p> tag. It will apply that style to all <p> tags unless you put a period infront of the style "p" like this:

.p {
font-family: Times New Roman, Serif;
font-size: 11px;
color: #FFFFFF
}

If done with a period in front, then you will have to set the style like this:

<p class="p"> OR <div class="p"> OR <td class="p"> OR
whatever other tag that supports class attributes.

Of course, if you just want to set it for just one tag only, you can do it like this:

<p style="font-family: Times New Roman, Serif;font-size: 11px;color: #FFFFFF;">

Hope this helps.

lokodezine
05-18-2004, 11:25 PM
So Im guessing Dreamweaver cannot code that way??

Also how would I create those into CSS Stlye Sheets?

Marble
05-18-2004, 11:54 PM
Dreamweaver is a great IDE. Yes you can build anything web related in it, but if you are using design view to code your sites, the css does not always render correctly.

Creating a style sheet, just open a new file any old file and save it with a .css . Clear out any text. Just format your definitions like this:

p {
font-family: Times New Romans, Serif;
}

etc...

lokodezine
05-19-2004, 11:51 AM
YOu say open any document old or new and save it .css ??

YOu mean save it.css in replace of.html??

I want to make a style sheet so every page I create in the website uses the same styles and I dont have to code for each text by itself...

Just put like font family; whatver or what the coding is for it.

Id appreciate anyhelp.

And how can I make dreamweaver code it like you guys showed me how and to make it use font - size; Pixels instead of the other way?

Marble
05-19-2004, 01:28 PM
http://www.w3schools.com/css/ <-- you have a nice online reference there. CSS1 is well supported. CSS2 will have issues with older browsers.

Just open a "Blank" document, if there is anything in it, delete all content. Save it with a .css extension and you have an external stylesheet.

On each page you want the style sheet to be on, just use this tag to link it:

<link href="stylesheet.css" rel="stylesheet" type="text/css">

put that under your title tag in the header.

All you do in the stylesheet is define styles in the above format. ie:

tagName {
what-you-want-to-style: style;
}

JayC
05-19-2004, 03:19 PM
Originally posted by lokodezine
And how can I make dreamweaver code it like you guys showed me how and to make it use font - size; Pixels instead of the other way? You just want it to use the stylesheet. The precise way you do that in Dreamweaver probably varies with different versions, but look under Text on the top menu, then "CSS Styles." You can use "Attach Style Sheet" if you've created one externally, or you can create it in Dreamweaver by using "New CSS Style," and be sure you create it in a style sheet file, not in "this document only." But Dreamweaver's usability for creating a style sheet is pretty weak, that's why a lot of people prefer to create the stylesheet outside of Dreamweaver.

lokodezine
05-19-2004, 09:00 PM
/* CSS Document */
<style type="text/css">
<!--
a {text-decoration: none }
.style1 {
color: #FFFFFF;
font-weight: bold;
font-family: "Verdana";
font-size: 12px;
}
-->
</style>


Is that what the coding on my stylesheet should look like and then if I want more than 1 style I just put .style2 ??

Also does it have to be .style or can it be anything you want?

lokodezine
05-19-2004, 09:16 PM
Everytime I code in Dreamweaver it still puts the </font tags> so I have to go in and manually change it all, is there anyway yo change that??? TO code it like yours??

Anwways here is the coding for my stlyesheet.css
/* CSS Document */
<style type="text/css">
<!--
a {text-decoration: none }
.style1 {
color: #FFFFFF;
font-weight: bold;
font-family: "Verdana";
font-size: 12px;
a:link { cOLOR: #FFFFFF;
a:active { color: #FFFFFF;
a:visited { color: #FFFFFF;
a:hover { color: ##FFFF00;
}
-->
</style>


Then here is my coding for the html document I want this tyle to be in:

<html>
<head>
<title>Vietnam War Media</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html;">
<!--Fireworks MX 2004 Dreamweaver MX 2004 target. Created Wed May 19 19:55:09 GMT-0500 (Central Daylight Time) 2004-->
</head>
<bunch of stuff>
<then....>
<p align="left" class="style1" face="Verdana, Arial, Helvetica, sans-serif"><a href="index.htm">VIDEO</a></p>


Please tell me what I am doing wrong

lokodezine
05-19-2004, 10:16 PM
The problem is it doesnt work and Im not sure if Im doing any of this right and this website i am making is for EC and due tommorow...

I have all the pages ready just need to go in and edit the bad dreamweaver text and make it the right way.

JayC
05-20-2004, 03:20 AM
Originally posted by lokodezine
Everytime I code in Dreamweaver it still puts the </font tags> so I have to go in and manually change it all, is there anyway yo change that??? TO code it like yours?? First, set up your style sheet and link the page you're working on to it. Then, to set the fonts within the document, dont use the text > font menu options; instead use text > css styles > whatever_you_named_your_font_style.

lokodezine
05-20-2004, 09:17 AM
So what am I doing wrong in my coding that I posted?

It is not displaying the style on the text/link I want it to be on.

If anyone can examine my code and please help me out Id appreciate it.

Marble
05-20-2004, 11:10 AM
What version of Dreamweaver are you using?

lokodezine
05-20-2004, 08:55 PM
MX PRO

I want to know what I am doing wrong though in the coding also .

Please help

ktwilight
05-21-2004, 08:11 AM
few problems i see...
in your stlyesheet.css, you shouldn't put
<style type="text/css">
<!--
a {text-decoration: none }
.style1 {
color: #FFFFFF;
font-weight: bold;
font-family: "Verdana";
font-size: 12px;
a:link { cOLOR: #FFFFFF;
a:active { color: #FFFFFF;
a:visited { color: #FFFFFF;
a:hover { color: ##FFFF00;
}
-->
</style>
instead, it should be ONLY, with some fixes

.style1 {
color: #FFFFFF;
font-weight: bold;
font-family: Verdana;
font-size: 12px;
}
a {text-decoration: none }
a:link { color: #FFFFFF; }
a:active { color: #FFFFFF; }
a:visited { color: #FFFFFF; }
a:hover { color: ##FFFF00; }

1) <style> tags must not be used in external css stylesheets
2) you don't need to put "" anywhere in css
3) always close your tags

a good place to validate your css, is jigsaw.w3.org/css-validator (http://jigsaw.w3.org/css-validator/)

lastly...
<p align="left" class="style1" face="Verdana, Arial, Helvetica, sans-serif"><a href="index.htm">VIDEO</a></p>
there's no such thing as "face", in fact, remove face="Verdana, Arial, Helvetica, sans-serif" since in your css stylesheet, you already have that

HTH