Help with my html channel info!

xsnook

Hey there! I made an image in photoshop and sliced it up. I then took it to dreamweaver and replaced all the images with dropbox links. In the preview it looks perfect, but when I put it on twitch well...look for yourself:  http://www.twitch.tv/xsnook 

If anyone has an answer, please help :)

here's the code: http://pastebin.com/h80rNC04

biotest

is you dropbox account set to private or something? when i paste one of your image links into my browser i get

Error (403)

It seems you don't belong here! You should probably sign in. Check out our Help Center and forums for help, or head back to home.

 

Maybe its just me :s

xsnook

If it was I fear the images in my twitch channel wouldn't show up at all

biotest

they dont show up for me  i just see lots of empty boxes with red squares in, maybe it my pc :(

Fire

Those are incorrect dropbox links and will only show up to people with the auth cookie to view them. You need direct links.

xsnook

Ok I tried putting a few dropbox "share" links into the code. Now I can't see some of the stuff on my twitch page (I didn't replace all of the links yet because it doesn't seem to be working).

Fire

You need links like this format:

https://dl.dropbox.com/u/33446/twitch/star-siglemic.png

the folder they're in needs to be publicly shared to get direct, non-get links, as I recall.

xsnook

Fire I can't thank you enough for that, however, how the info on my page will now appear to you is why I opened this thread. There are spaces in between many of the slices. I don't know what that's about

xsnook

It works fine in the Dreamweaver and Chrome previews by the way.

Here the new pastebin: http://pastebin.com/W1s5wpdS

Fire

Ah, I see your bug... Tables don't exactly work as expected in longbios, all rows need to be the same height for them to work correctly. It's better to use a master div with the backgrounf set as an image and position child elements inside that with padding and such.

xsnook

crap ok, I guess I'll figure out how to do that later tonight xD I hope I can make it look about the same haha

xsnook

I made the Background and the 6 different buttons...I can't seem to put the buttons on top of the background image in Dreamweaver, they just go off to a side. I've tried Googling a few different ways to do this, but it keeps coming up with articles on "slices," which as we figured out aren't working too well for my particular image. I wouldn't mind learning this in depth from a tutorial but I can't find one haha.

Fire

you need to position them by using padding-left, padding-right, and padding-top ( negative margins work too )

padding-left pushes the object that many pixels ->

padding-right pushes it that many pixels <-

padding-top pushes it down that many pixels

padding-bottom will push it up

It's a bit of an odd duck to work with, but it's all you really have since relative positioning and top/left/bottom/right are not allowed.

biotest

couldnt you set the whole unsliced image at the bio background and place the link images over the top?

xsnook

It's a bit of an odd duck to work with, but it's all you really have since relative positioning and top/left/bottom/right are not allowed.

Fire once again you just saved me a bunch of time xD

xsnook

So I guess absolute positioning is out too?

Fire

standard positioning of any kind is out, thus the use of padding to get a similar effect

@biotest that's exactly what you're doing, that's what I meant by "It's better to use a master div with the background set as an image and position child elements inside that with padding and such."

biotest

o yer, thats what scim reading does for ya =))

xsnook

jeez I've no idea what I'm doing. Why does twitch have these restrictions!

Fire

for security really. If they weren't in place there's a number of nasty things you could do ( none of which I will list :p )

xsnook

Haha! Well...For now I'm just gonna throw up the buttons, but if anyone knows an easy way I can put the buttons on top of my background image I'll give it a try.

biotest

do it as @fire said, Set the whole unsliced image as your background then use padding to position your link images.

<div style="background-image:url(linktoimage.jpg); width:620px; height:???px;">

<div style="padding-top:???px; padding-left:???px;">

<a href="http://www.facebook.com"><img src="linktofacebookimage"></a>

</div>

</div>

just change the ??? to whatever number you need.

And before anyone moans at me YES i know you can add the style to the img tag :P

Fire

@xsnook hey, take your original slice code and put style="float:left;" on all of the img tags, see if that fixes the whitespace problem

@biotest I prefer to add my stylings to a "container" div anyway when possible :p

xsnook

oh...my god...fire you are the man! first I tried it on just the images and I didn't get anything so I plunked it on to the "spacers" and bam it's perfect now! You're the best man. Also, Biotest thanks for what you said that was gonna be my next option if the first didn't work.

xsnook

hmmmm...but why did it work is the question?

Fire

Something I completely forgot about really. Floating causes element flow to change, making it act more like an inline display style than a block display style. It occurred to me looking at another thread that adding a float is exactly what I had to do in one of the early versions of Siglemic's longbio many many moons ago, due to the same problem.

xsnook

Still wish I could do hotspots so I could outline the shape of the button, but hey this seems to be working just as well, just takes a bit longer. Thanks for all the help!

Fire

You're welcome :)