christina_g Posted November 9, 2014 Share Posted November 9, 2014 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 More sharing options...
dsonesuk Posted November 9, 2014 Share Posted November 9, 2014 IF this is not data from a database, you should not be using a table for a design layout, you would use paragraphs, line breaks ordered list for such a layout. Link to comment Share on other sites More sharing options...
christina_g Posted November 9, 2014 Author Share Posted November 9, 2014 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 More sharing options...
dsonesuk Posted November 9, 2014 Share Posted November 9, 2014 (edited) 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 November 10, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
christina_g Posted November 10, 2014 Author Share Posted November 10, 2014 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 More sharing options...
dsonesuk Posted November 10, 2014 Share Posted November 10, 2014 Like this? .right ol a img { float: right; margin: 0.3em; } .right ol { width: 12em; } .right ol a { float: right; } Link to comment Share on other sites More sharing options...
christina_g Posted November 12, 2014 Author Share Posted November 12, 2014 I've tried out the above and it certainly does something .. but I cannot clearly see what. At the moment, I get something like in the attached file :-( Link to comment Share on other sites More sharing options...
dsonesuk Posted November 13, 2014 Share Posted November 13, 2014 It looks like you may have a misplaced closing tag, as 2, and 3 content seem to be grouped together. when i looked and shrunk the width the text and image stack themselves in order, not like what you have at all. Link to comment Share on other sites More sharing options...
christina_g Posted November 17, 2014 Author Share Posted November 17, 2014 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 More sharing options...
dsonesuk Posted November 17, 2014 Share Posted November 17, 2014 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 More sharing options...
christina_g Posted November 19, 2014 Author Share Posted November 19, 2014 There we are ! :-) All's aligned, nice and neat ! Thank you very much for your help with this :-) Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now