Jump to content

Align items inside a table


christina_g

Recommended Posts

Hello everyone,

 

I have created a table for my website. Inside one of the cells, I would like to have items aligned much in the way I would align them with tabulations in, say, a word document :

 

Item Second item

Another item Fourth item

and so on.

 

I tried doing this by using the hspace attribute (for example hspace="94px"), varying the number of pixels according to the space needed between the items, but this is obviousely neither a professionnal solution nor does it really work out once I change browers (the items are no longer aligned).

 

I've posted the code below in blue.

 

Is there a more elegant way of doing this ? I thought of inserting other cells inside this cell, but I don't know whether this is possible ?

 

Thank you very much for your help !

Christina

 

 

<table>
<tr>
<td><img src="goodbyemoney.jpg"</td>
<td>Release date : April 2005<br/>
Produced by Highway Corp.<br/>
<b>Tracklist :</b><br/><br/>
1. Goodbye Money <a href="lyrics/goodbyemoney_lyrics.pdf"><img src="txt32.png" hspace="94px"></a><br/>
2. Rock'n'Roll Life <a href="lyrics/rnrlife_lyrics.pdf"><img src="txt32.png" hspace="101px"></a><br/>
3. Clear Out <a href="lyrics/clearout_lyrics.pdf"><img src="txt32.png" hspace="143px"></a><br/>
</td>
</tr>
</table>
Link to comment
Share on other sites

Understood, thank you.

 

Now, how do I get paragraphs to be laid next to each other ? Because I would absolutely need the image to occupy the left part of the page, and have all the texte running down on the right side ?

And how do I get the same for the ordered list items ?

Link to comment
Share on other sites

1 simple basic example

        <div id="wrapper">            <div class="left"><img src="goodbyemoney.jpg" /></div><div class="right"><p>Release date : April 2005<br/>                    Produced by Highway Corp.<br/>                    <strong>Tracklist :</strong></p>                <ol><li>Goodbye Money <a href="lyrics/goodbyemoney_lyrics.pdf"><img src="txt32.png"></a></li>                    <li> Rock'n'Roll Life <a href="lyrics/rnrlife_lyrics.pdf"><img src="txt32.png"></a></li>                    <li>Clear Out <a href="lyrics/clearout_lyrics.pdf"><img src="txt32.png"></a></li>                </ol>            </div>        </div>

OOPS! forgot impotent part

  #wrapper {background-color: #FFFF00; overflow: hidden;}            .left, .right{width: 47.5%; padding: 1%;}            .left{float: left;  background-color: red;}            .right{float: right; background-color: green;}
Edited by dsonesuk
Link to comment
Share on other sites

Thank you very much for the above. I just tried it out and the layout is very similar to what I had in mind :-)

Ideally, and if this is technically possible, I would like to have the items of the list be located one below the other, with the icons vertically aligned - would there be any simple way to do this ?

Link to comment
Share on other sites

The HTML should be ok, all elements have their closing tags and apparently in the right order :

 

<div id="wrapper">

<div class="left"><img src="goodbyemoney.jpg" /></div>

<div class="right"><p>Release date : April 2005<br/>

Produced by Highway Corp.<br/>

<strong>Tracklist :</strong></p>

<ol><li>1. Goodbye Money <a href="lyrics/goodbyemoney_lyrics.pdf"><img src="txt32.png"></a></li>

<li>2. Rock'n'Roll Life <a href="lyrics/rnrlife_lyrics.pdf"><img src="txt32.png"></a></li>

<li>3. Clear Out <a href="lyrics/clearout_lyrics.pdf"><img src="txt32.png"></a></li>

</ol>

</div>

</div>

 

On the other hand, I am not so sure that I've got the CSS part right ? :

 

#wrapper {background-color: #000; overflow: hidden;}

.left, .right{width: 47.5%; padding: 1%;}

.left{float: left; background-color: black; color: #FFFFFF; text-align: left;}

.right{float: right; background-color: black; color: #FFFFFF; text-align: left;}

.right ol a img {float: left; margin: 0.3em;}

.right ol {width: 8em;}

.right ol a {float: right;}

Link to comment
Share on other sites

Try this

            #wrapper {background-color: #000; overflow: hidden;}                         .left, .right{width: 47.5%; padding: 1%;}            .left{float: left;  background-color: black; color: #FFFFFF; text-align: left;}            .right{float: right; background-color: black; color: #FFFFFF; text-align: left;}            .right ol a img {                float: right;                height: 35px;                margin: 0.3em;                width: 30px;            }            .right ol {width: 11em;}            .right ol li {                line-height: 45px;            }            .right ol a {float: right;}
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...