Need help with my layout

  • 1
  • Question
  • Updated 6 years ago
I would like to add a picture of each musician, and am not sure how to lay it out on the page. At the moment I have this page in a HTML table. The information I would like to add beside each picture is what is currently on the page, interview link, some info on the musician as well as a link to the musicians web site. As you can tell, I already have the code in a table so that it displays the way it is at the moment.

Should I keep this info in a table or try something else that may be easier to maintain and modify if need be? I would love to hear ideas that I can explore further. Thanks!!!

www.mcran.com
click on the Interviews tab.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
  • looking forward to making this page more presentable

Posted 6 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Randy,

I think you have a couple of options for layout/organisation with images included.

Extending your table to include an image with each entry. This of course will increase the page length. You could add the image as say column 2 , reduce the width of the description such that the info may wrap around but that's not a bad thing in itself. If you are familiar with Excel then this can really help generate the table with CSS so that when you add or remove an entry you simply regenerate the table rather than having to go through a fairly intense HTML editing process

The second approach that comes to mind is a mouseover name which will throw up an image of the artist. This may compromise your minimalist style but it does work.functionally. If you went down this way then you may be best to assign a spot on your page for this to show as you don't want the distraction of the image over-laying information even if it's transient. Maybe in the side column?
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Thanks! I'm starting to wonder if I should just abandon the table and just put code in maybe two or three columns created by Yola. Maybe this is easier. Do-able? I already have my code for the images and links for the interview/ web sites.

I think I will play around and see what it looks like.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
I was thinking of it looking something like this.



What I'm not sure about is how to code this, for example putting the text next to the picture. Right not I have a column with the picture and another with the text and links.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
This is what I have done so far. The only thing I can't figure out is how to put spacing between the image and text. Also, does my code look OK?



<table border="0" cellpadding="10">

<tr>
<td><img src="http://sd.mcran.com/assets/pictures/randy3.jpg"width="80" height="80"</td>
<td>A great musician<br />
<a href="http://sd.mcran.com/assets/interviews/yennior.mp3">Interview</a>
<a href="http://www.either-orchestra.com/joel.html">Website</a></td>
</tr>

</table>

Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
cellpadding="x" is a way to increase the white space between the border of the cell and the content.

cellspacing="y" is the way to increase the distance between the cell borders
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
The reason I asked is that if you get the architecture suitably created then creating a spreadsheet for the content code is very straight forward. You should be able to simply list the artist and then deduce the image file name and the interview file name.

This would create your code content in a few milli-seconds. This really is workable and only depends on the files being absolutely systematic because they are deduced rather than read.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Thanks but for some reason I am not seeing any spacing. I will see if I can post a link to my test page.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Works fine now. The cellspacing did the trick
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
OK.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
I'm still plugging away here. This time modified my current Interviews page by adding a picture next to the interview listing. The picture is part of the code I used. I am finding this rather cumbersome so I created an interviews test page. You can click on the link when you click on the Interviews button, you will see an interviewtest button.

The interviewtest page is being created with column dividers, a picture and text widget. I have teo column dividers to simulate a two column approach.. I am viewing this way as a possible option. The only problem I have is this. Do I have to add new column dividers every time I make a new entry or is there a similar way to accomplish this. I hope there is because I am spending way too much time on this as it is.

If there is a better way of doing all of this, something I haven't thought of, please let me know.

www.mcran.com
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Randy,

When you use column dividers and trying to keep he horizontal fields aligned, then really your only way is to add the divider for each entry. It is cumbersome and slow I know.

You do have an alternative option and that is using CSS as I have mentioned but it requires the generation of the data most easily with Excel. Thus it requires a knowledge and comfort with a fair understanding of both Excel and CSS.

I am happy to work with you to create the Excel generation facility which then will create the CSS/HTML code for you to simply copy and paste into your interviews page.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
I would love to try out this new alternative using a spreadsheet and welcome your help!!

I use Linux as my operating system so as long as I have a spreadsheet, I am good to go?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
OK. Can you send me an email to gop@designscent.com. Thsi will probably require a number of iterations in the understanding so easier by email.