formating without tables 1

[rastaIT34]

this is a formatting question. I read everywhere that tables are bad so I'm trying to organize without tables.


On this page....

http://www.rossow-web.com/test/anne/paintings.html

I used the <ul> to organize the thumbnails. It looks ok in most browsers, but in Google chrome and opera they look all messed up. Anyone have any thoughts as to why? I'm using Dreamweaver to design and code.



Then this page...

http://www.rossow-web.com/test/anne/index.html

i cant figure out why it wont center... unfortunately i used a table here... i couldn't figure out another way to organize this. any thoughts?


thanks all this is a valuable resource...


Artist/Designer

 

[Vragabond]

1. You should remove line breaks (<br />) from your list. Only list items (li) can reside inside the list element (ul). Use margin-bottom on the li element to achieve a greater break between rows.
2. Make the margins/padding a bit smaller on the paintings page. Opera and Chrome cannot fit 4 photos in a row. If you increase the space for the photos just slightly, they will probably work in those two browsers as well.
3. About your slideshow page:
a) Remove the table
b) Float left all three elements (two anchors and one div)
c) Adjust the width of #imagescroller to be only as much as the width of its three children (in your current code that is 700px)
d) Remove position: absolute; from #imagescroller.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[rastaIT34]

Ok,

I fixed the centering / table issue with this page:

http://www.rossow-web.com/test/anne/index.html

removed the table and used <ul> and <li> elements.

Does it look ok to you?



still working on this page:

http://www.rossow-web.com/test/anne/paintings.html

thumbnails are so annoying but i guess using these elements <ul> and <li> is the way to go. right?

Thanks Vragabond for your help!!

Artist/Designer

 

[Vragabond]

Both pages look good to me. The only thing I would change is, I would use a png with transparent background for the carousel buttons, because the jpg you're using now looks a bit out of place with a non-matching background color.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[rastaIT34]

yea i bee working on it... and got them looking the same in all the browsers i tested in.


Hmm i thought the left and right arrows looked ok... are png's ok to use? i was always skeptical in using png's... i used the jpeg so i could add some space to push it away from the images...

how can i add some space in between the images? i tried padding but no success.

thanks again Vragabond!

Artist/Designer

 

[Einstein47]

If I might suggest something - the <br /> inside the title="" attribute is not supported. Title mouseover display is handled differently on different browsers. You will need to google for more details of how. But you could try putting a simple Carriage Return inside the title value like this:

 .... title="Anne Leone
“Cenote Series: Ten Swimmers”
50 x 128”    2010
acrylic/linen
1001A" >

The line breaks in the HTML will create the required <br> in IE and Safari. Firefox however will not do a line break at all. (your mileage may vary, see dealer for details).

Looks great otherwise.

Einstein47 (Starbase47.com)
“PI is like love - simple, natural, irrational, endless, and very important“

 

[rastaIT34]

Thank you, issue resolved....

Artist/Designer