HTML Need Help with css & html spacing

Hi i am making a website and i have some problems with spacing the text. I have attached the files. If you can help with this please do not edit the originals please make copies or add to this thread. If you need any additional information on what i need help with please ask.

 

what is the problem with spacing the text? Can you give some details

 

As i said in the picture i want to move the text in the blue circle's to where the yellow circle's are. I want the numbers to be on the right. Hope this is helpful.

 

I see you could deploy a table with 2 columns so in your locomotives.html you have now this code (just do the same for the rest is straight forward):

Code:

                            <p>Steam &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; 2</p>
<p>Diesel 
&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; 24</p>

Replace it with

Code:

                          <table width="100%" border="0">
                            <tr>
                              <td>Steam</td>
                              <td align="right">2</td>
                            </tr>
                            <tr>
                              <td>Diesel</td>
                              <td align="right">24</td>
                            </tr>
                          </table>

So you replace each paragraph with a pair of table cells. Use a separate table for the different sections. You can also setup a couple of css entries to handle the cases where the left cell requires a left margin and setup the right cell. Eg:


td.lcell {
padding-left: 8px;

}


td.rcell {
text-align: right;

}


Then in the HTML you can have:
<td class="lcell">Diesel</td>
<td class="rcell">24</td>

 

Yea the one just for the html works but i would like more of a css version. The css version you gave me there does not work. Unless you download the files and edit them so it works. Thanks.

 

Here is with CSS earlier I just wrote it without any testing but this should work,

1. HTML section with the table

Code:

                          <table width="100%" border="0">
                            <tr>
                              <td>Steam</td>
                              <td class="ralign">2</td>
                            </tr>
                            <tr>
                              <td>Diesel</td>
                              <td class="ralign">24</td>
                            </tr>
                            <tr>
                              <td class="l8spacer">Canadian National</td>
                              <td class="ralign">8</td>
                            </tr>
                            <tr>
                              <td class="l8spacer">Canadian National</td>
                              <td class="ralign">8</td>
                            </tr>
                            <tr>
                              <td class="l8spacer">All Others</td>
                              <td class="ralign">4</td>
                            </tr>
                          </table>

2. CSS section just put it at the end of the style.css

Code:

.ralign {text-align: right;}
.l8spacer {padding-left: 8px;}

If you need to increase the line height you could add some padding to the table cell.

Also you have some errors with your stylesheet

Line: 86
'text-transform is empty'

Line: 206
'padding is missing px'. Declaration dropped.

Line: 239
'text-transform is empty'

 

Hi gleno747,

If you want to space the text as you describe using CSS rather than a table you should introduce columns.

In your HTML you could have:

<div class="leftCol">
<p>Steam &nbsp;&nbsp;&nbsp;&nbsp;|</p>
<p class="links"><a href="#">Steam</a>&nbsp;&nbsp;&nbsp;&nbsp;|</p>
</div>
<div class="rightCol">
<p>1</p>
<p>2</p>
</div>
<div style="clear:both;">

and to go with this, in your CSS, you'd have something like the following:
.leftCol
{
width:40%;
float: left;
padding: 3px 0px;
}

.rightCol
{
width:40%;
float: right;
padding: 3px 15px;
border-left: 1px solid #000000;
text-align: right;
}

If you need any further clarification don't hesitate to ask.
Geoff Tyrer

 

Yea the numbers moved so what you showed me was good. But now the search bar and the quick links bar has all gone to the bottom of the page and the copyright notice has moved to the top left.

 

Are your referring to the HTML table I posted? Because that shouldn't break the template. If you referring to the floats that may break it, if you don't position them in the right place.

The reason I posted a table and not float elements in this case is because the columns generated by floats will be difficult to manage. You have the locomotives along with numbers which are tabular data. So if you extend the text of a locomotive say so it wraps to the next line it will break subsequent lines with the numbers corresponding to different locomotives. And you will have to introduce fixed heights per entry (difficult to manage).

 

Hi gleno747,

I agree with enigma1. Tabular data should be put in tables and though people scorn them for layout you should still use them where appropriate.

It looks like you're going to have a lot of data - how are you going to maintain/update the web pages?

Geoff Tyrer

 

Yea i guess i'll have to use tables in the html files. And i will edit the pages manually. I will be the only one editing them so i will now what to do when it comes to it.

Thanks For all the help guys.