• 0

Help Plz!


Question

Well im working along on my website when i run into a problem...

I'm using CSS to format some text since it comes out cleaner lookign then just normal formatted text, well when i finish typing a line and i press enter it goes down like 2 lines ( it inserts a </p> for the end of a paragraph ) Well i tried to make the text preformatted but then it made it very very small and distorted, i even tried to do Shift +Enter but that would throw all the text to the bottom of the page.

Now my question is how would i do it so that the text goes down 1 line at a time but stays crisp looking like it is?

:no:

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

I'm guessing you're using some kind of GUI based editor like Dreamweaver or Frontpage? If you're finding such a hard time working with it, it's time to get a new editor. I use UltraEdit, though there most likely are other good ones out there. In the meantime, look at the HTML code and see if it's written the way you wanted. It might also help to post the problem HTML code.

Link to comment
Share on other sites

  • 0

&lt;style type="text/css"&gt;
&lt;!--
.newsbox {
	height : 213px;
	width: 347px;
	overflow : auto;
	border-width: 0px;
	border-style: solid;
	border-color: #476297;
	padding: 5px;
	scrollbar-face-color: #F6F7FB;
	scrollbar-highlight-color: #F6F7FB;
	scrollbar-3dlight-color: #F6F7FB;
	scrollbar-darkshadow-color: #F6F7FB;
	scrollbar-shadow-color: #F6F7FB;
	scrollbar-arrow-color: #000000;
	scrollbar-track-color: #F6F7FB;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	line-height: normal;
	font-weight: 100;
	color: #333333;
	text-decoration: none;
	font-variant: normal;

}
--&gt;
&lt;/style&gt;

Theres the CSS and heres the html

&lt;td width="347" bgcolor="#F6F7FB"&gt;&lt;div class="newsbox"&gt; Ethics | 28.12.2002 
          | Can It Be?&lt;/div&gt;&lt;/td&gt;

When i add <pre> it makes the text all small and hard to see, when i leave it at paragraph the spaceing wont work right.

And yes im using Dreamweaver MX.

Any reason why this is happening?

:wacko:

Link to comment
Share on other sites

  • 0

You shouldn't need to add a <pre> tag or a <p> tag. You probably don't even need the <div> tag either if you gave the class name, newsbox, to your <td> tag. The quickest fix would be to play with the line-height property for your text and the padding property for your <div> block. I don't see a margin property for your newsbox class, so you may want to provide one instead of relying on the browser defaults.

If you don't understand what all these properties do, please feel free to use the links in my sig; especially the CSS1 reference.

Link to comment
Share on other sites

  • 0

Ok i fixed the problem above, thanks for the help.

I have another prolem and didnt want to start a new thread so ill just post it here,

Opinion.jpg

Notice in the image how when you scroll the text is right at the edge? it like that ont he top and bottom, what i was wondering is if there is a way i can add maybe a 5 pixel padding or something to that so it looks a little more professional?

:woot:

Link to comment
Share on other sites

  • 0

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;| Ethics Design "Making the web look better." |&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;


&lt;style&gt;&lt;!--A:link { text-decoration: none}
A:active { text-decoration: none}
A:visited { text-decoration: none} 
A:hover {text-decoration: none; color: #000000}--&gt;
  &lt;/style&gt;
&lt;style&gt;
body {
 scrollbar-face-color: #CCCCCC;
 scrollbar-shadow-color: #95A2B1;
 scrollbar-highlight-color: white;
 scrollbar-3dlight-color: #666666;
 scrollbar-darkshadow-color: #666666;
 scrollbar-track-color: #95A2B1;
 scrollbar-arrow-color: #666666}
&lt;/style&gt;
&lt;style type="text/css"&gt;
&lt;!--
.newsbox {
	height : 213px;
	width: 347px;
	overflow : auto;
	border-width: 0px;
	border-style: solid;
	border-color: #476297;
	padding: 5px;
	scrollbar-face-color: #F6F7FB;
	scrollbar-highlight-color: #F6F7FB;
	scrollbar-3dlight-color: #F6F7FB;
	scrollbar-darkshadow-color: #F6F7FB;
	scrollbar-shadow-color: #F6F7FB;
	scrollbar-arrow-color: #000000;
	scrollbar-track-color: #F6F7FB;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	line-height: normal;
	font-weight: 100;
	color: #333333;
	text-decoration: none;
	font-variant: normal;

}
--&gt;
&lt;/style&gt;
&lt;/head&gt;

&lt;body bgcolor="#CDD2DD" link="#666699" vlink="#666699" alink="#666699"&gt;
&lt;center&gt;
  &lt;table border="0" cellpadding="0" cellspacing="0"&gt;
    &lt;tr&gt; 
      &lt;td colspan="7"&gt;&lt;img src="Slices/1.gif" width="739" height="118" border="0" usemap="#Map"&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt; 
      &lt;td width="38" background="Slices/2.gif"&gt; &lt;/td&gt;
      
   &lt;td width="347" valign="top" bgcolor="#F6F7FB"&gt;&lt;div class="newsbox"&gt; 
          &lt;p&gt;&lt;font color="#990000"&gt;&lt;img src="Slices/news%20icon.gif" width="11" height="13"&gt; 
            Ethics&lt;/font&gt; | &lt;font color="#000066"&gt;28.12.2002&lt;/font&gt; | &lt;font color="#003300"&gt;Can 
            It Be?&lt;/font&gt;&lt;img src="Slices/news%20divider.gif" width="301" height="9"&gt;&lt;br&gt;
            &lt;font color="#626A8B"&gt;Over the past 2 months I have been trying to 
            ressurect&lt;br&gt;
            Ethics but failed many times due to laziness. Well now&lt;br&gt;
            that the site is up you can look forward to many updates.&lt;/font&gt;&lt;br&gt;
            &lt;img src="Slices/news%20divider.gif" width="301" height="9"&gt;&lt;br&gt;
            &lt;br&gt;
            &lt;font color="#990000"&gt;&lt;br&gt;
            &lt;img src="Slices/news%20icon.gif" width="11" height="13"&gt; Ethics&lt;/font&gt; 
            | &lt;font color="#000066"&gt;29.12.2002&lt;/font&gt; | &lt;font color="#003300"&gt;Front 
            Page&lt;/font&gt;&lt;br&gt;
            &lt;img src="Slices/news%20divider.gif" width="301" height="9"&gt;&lt;br&gt;
            &lt;font color="#626A8B"&gt;Today I'm going to get the front page done and 
            maybe&lt;br&gt;
            do some more coding to improve the loading speed.&lt;/font&gt;&lt;br&gt;
            &lt;img src="Slices/news%20divider.gif" width="301" height="9"&gt;&lt;br&gt;
            &lt;br&gt;
            &lt;font color="#990000"&gt;&lt;br&gt;
            &lt;img src="Slices/news%20icon.gif" width="11" height="13"&gt; Ethics&lt;/font&gt; 
            | &lt;font color="#000066"&gt;30.12.2002&lt;/font&gt; | &lt;font color="#003300"&gt;News 
            Script&lt;/font&gt;&lt;br&gt;
            &lt;img src="Slices/news%20divider.gif" width="301" height="9"&gt;&lt;br&gt;
            &lt;font color="#626A8B"&gt;I'm currently looking for a newscript that i 
            can intergrate&lt;br&gt;
            into the site, even just something that will upload .txt&lt;br&gt;
            files from a upload location, plz &lt;a href="mailto:Mariusz@Ethics-Design.com"&gt;email 
            me&lt;/a&gt; if you got any&lt;br&gt;
            such thing.&lt;/font&gt;&lt;br&gt;
            &lt;img src="Slices/news%20divider.gif" width="301" height="9"&gt;&lt;br&gt;
          &lt;/p&gt;
        &lt;/div&gt;&lt;/td&gt;
      
   &lt;td width="24" background="Slices/4.gif"&gt; &lt;/td&gt;
      &lt;td width="132" align="center" valign="top" bgcolor="#F6F7FB"&gt;&lt;br&gt;
        &lt;a href="#"&gt;&lt;img src="Slices/spotlight%20image.gif" width="82" height="62" border="0"&gt;&lt;/a&gt;&lt;br&gt; 
        &lt;span style="font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #626A8B; font-weight: 100; padding: 3px"&gt;&lt;br&gt;
        &lt;a href="#"&gt;&lt;img src="Slices/spotlight%20image.gif" width="82" height="62" border="0"&gt;&lt;/a&gt;&lt;br&gt;
        &lt;br&gt;
        &lt;a href="#"&gt;Ethics-Design.com&lt;/a&gt;&lt;br&gt;
        &lt;br&gt;
        &lt;a href="#"&gt;View The Interview&lt;/a&gt;&lt;br&gt;
        &lt;/span&gt;&lt;/td&gt;
      &lt;td width="24" background="Slices/4.gif"&gt; &lt;/td&gt;
      &lt;td width="132" bgcolor="#F6F7FB"&gt; &lt;/td&gt;
      &lt;td width="42" background="Slices/8.gif"&gt; &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;table border="0" cellspacing="0" cellpadding="0"&gt;
    &lt;tr&gt; 
      &lt;td colspan="12"&gt;&lt;img src="Slices/9.gif" width="739" height="30"&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt; 
      &lt;td width="38" rowspan="2"&gt;&lt;img src="Slices/10.gif" width="38" height="179"&gt;&lt;/td&gt;
      &lt;td width="99" height="71" align="center" valign="middle" bgcolor="#F6F7FB"&gt;&lt;img src="Slices/free%20layouts%20image.jpg" width="61" height="61"&gt;&lt;/td&gt;
      &lt;td width="99" align="center" valign="middle" bgcolor="#F6F7FB"&gt;&lt;img src="Slices/free%20layouts%20image.jpg" width="61" height="61"&gt;&lt;/td&gt;
      &lt;td width="99" align="center" valign="middle" bgcolor="#F6F7FB"&gt;&lt;img src="Slices/free%20layouts%20image.jpg" width="61" height="61"&gt;&lt;/td&gt;
      &lt;td width="103" align="center" valign="middle" bgcolor="#F6F7FB"&gt;&lt;img src="Slices/free%20layouts%20image.jpg" width="61" height="61"&gt;&lt;/td&gt;
      &lt;td width="103" align="center" valign="middle" bgcolor="#F6F7FB"&gt;&lt;img src="Slices/free%20layouts%20image.jpg" width="61" height="61"&gt;&lt;/td&gt;
      &lt;td width="24" rowspan="2" background="Slices/4.gif"&gt; &lt;/td&gt;
      &lt;td width="132" rowspan="2" align="center" valign="top" bgcolor="#F6F7FB"&gt;&lt;br&gt;
        &lt;span style="font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #626A8B; font-weight: 100"&gt;&lt;br&gt;
        &lt;a href="#"&gt;Blah.com&lt;/a&gt;&lt;br&gt;
        &lt;br&gt;
        &lt;a href="#"&gt;&lt;img src="Slices/link%20image.gif" width="88" height="31" border="0"&gt;&lt;/a&gt;&lt;br&gt;
        &lt;a href="#"&gt;blah.com&lt;/a&gt;&lt;br&gt;
        &lt;br&gt;
        &lt;a href="#"&gt;&lt;br&gt;
        &lt;br&gt;
        View All Affilates&lt;/a&gt;&lt;/span&gt;&lt;/td&gt;
      &lt;td width="42" colspan="4" rowspan="2"&gt;&lt;img src="Slices/14.gif" width="42" height="179"&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td align="center" valign="middle" bgcolor="#F6F7FB"&gt;&lt;img src="Slices/free%20layouts%20image.jpg" width="61" height="61"&gt;&lt;/td&gt;
      &lt;td align="center" valign="middle" bgcolor="#F6F7FB"&gt;&lt;img src="Slices/free%20layouts%20image.jpg" width="61" height="61"&gt;&lt;/td&gt;
      &lt;td align="center" valign="middle" bgcolor="#F6F7FB"&gt;&lt;img src="Slices/free%20layouts%20image.jpg" width="61" height="61"&gt;&lt;/td&gt;
      &lt;td align="center" valign="middle" bgcolor="#F6F7FB"&gt;&lt;img src="Slices/free%20layouts%20image.jpg" width="61" height="61"&gt;&lt;/td&gt;
      &lt;td align="center" valign="middle" bgcolor="#F6F7FB"&gt;&lt;img src="Slices/free%20layouts%20image.jpg" width="61" height="61"&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt; 
      &lt;td colspan="12"&gt;&lt;img src="Slices/15.gif" width="739" height="27"&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
&lt;/center&gt;
&lt;map name="Map"&gt;
  &lt;area shape="rect" coords="386,73,426,89" href="#"&gt;
  &lt;area shape="rect" coords="425,73,474,89" href="#"&gt;
  &lt;area shape="rect" coords="473,73,541,89" href="#"&gt;
  &lt;area shape="rect" coords="540,73,590,89" href="#"&gt;
  &lt;area shape="rect" coords="589,73,658,89" href="#"&gt;
  &lt;area shape="rect" coords="657,73,722,89" href="#"&gt;
&lt;/map&gt;
&lt;/body&gt;
&lt;/html&gt;

Theres the whole website, help out if you can plz. Thanks :blink:

Link to comment
Share on other sites

  • 0

Try to add padding to the top and bottom of your <td> tags. If you want to apply the padding to a specific <td> tag, qualify that tag with a class attribute. For example,

td
{
padding: 200px 0px;
}

I don't know if that's acceptable, because it also pads your scrollbar.

Also, if you really want to improve your loading speed and "make the web look better", do the following:

  • Stop using <font> tags. It defeats the whole point of CSS.
  • Move as many attributes as you can to your stylesheet. It'll save you a lot headaches in the future and keep your HTML short.
  • Take advantage of CSS shortcuts. (e.g. Use font instead of font-style, font-weight, font-variant, etc. It'll make your CSS a lot shorter.
  • Validate your web page. You have a DOCTYPE specified. Might as well take advantage of it.

Good luck with your page.

P.S. read my sig for good references.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.