images showing vertical instead of horizontal

[jrthor2]

How can I get the images above the slideshow photos to be horizontal instead of vertical?

http://74.220.207.192/~zluthorg/photo_gallery/?level=album&id=2&mode=slideshow (http://74.220.207.192/%7Ezluthorg/photo_gallery/?level=album&id=2&mode=slideshow)

Thanks

[dtm32236]

I'd put them in a <ul> list, then you can make the <li>s display:inline;

as seen here:
http://css.maxdesign.com.au/listamatic/horizontal01.htm

[jrthor2]

I've tried that, but it's now showing that way.

[WebJoel]

CSS:<style>
#large-thumb-toolbar2 {width:190px; height:25px; padding-top:6px; border:1px solid silver;}
#large-thumb-toolbar2 li {float:left; margin:0 10px 0}
</style>HTML:
<ul id="large-thumb-toolbar2">does the trick for IE. :) Messes-up still in Firefox. (Still examing this..)

back:

Getting closer... looks the same in IE and Fx but I suspect that you will want the "<form>" and the navigation buttons all aligned horizontally...
CSS:
<style>
#jump_menu2 {width:220px; height:25px; float:left; display:block}

#large-thumb-toolbar2 {width:200px; height:25px; padding-top:6px; border:1px solid silver;}
#large-thumb-toolbar2 li {display:inline; margin:0 10px 0}
</style>

<form id="jump_menu2" action="#" method="get">
<ul id="large-thumb-toolbar2">

[jrthor2]

thanks for your help WebJoel. your code works a little better, but it is showing the bullets next to the images as well.

Thanks again!

[jrthor2]

also, I changed the width to 100%, but I'd like the images to be centered. Using text-align didn't do the trick. Here is my updated code:

#large-thumb-toolbar2 {width:100%; height:25px; border:1px solid silver; text-align: center;}
#large-thumb-toolbar2 li {float:left; margin:0 10px 0 0;}

[dtm32236]

#large-thumb-toolbar2 {width:100%; height:25px; border:1px solid silver; text-align: center; list-style-type:none;}

to get rid of the bullets.

[dtm32236]

and try adding text-align:center to #large-thumb-toolbar2 li too:

#large-thumb-toolbar2 li {float:left; margin:0 10px 0 0; text-align:center;}

[jrthor2]

I've tried that already, and it still didn't align it center or get rid of the bullets. I left it in for now so you can see.

[jrthor2]

It's actually getting that bullet from this style, in my default-text.css

.main-content ul li {margin:0 0 0.2em 2px; padding:0 0 0 12px; background:url(/~zluthorg/images/bg_bullet_full_1.gif) no-repeat 0 0.5em; line-height:1.4em; font-size:120%;}

But why would it be using that bullet style??

[dtm32236]

i don't know why it's not centering or using that default-text.css rule, you can do this to counteract it:

#large-thumb-toolbar2 {width:100%; height:25px; border:1px solid silver; text-align: center; list-style-type:none; background:none;}

[jrthor2]

I put that in, but the bullet image still shows.

[dtm32236]

hmmm... i don't know why that is

try list-style:none; instead of list-style-type:none;

[jrthor2]

Ok, I got the bullet image to not show. I had to put that style on the li element. I still want the images centered at the top. Here is my code so far:

#large-thumb-toolbar2 {width:650px; height:25px; border:1px solid silver; text-align: center;}
#large-thumb-toolbar2 li {float:left; margin:0px 0px 0px 0px; list-style-type: none; background:none;}

[dtm32236]

setting the width of the UL to 288px should do it...

#large-thumb-toolbar2 {width:288px; height:25px; border:1px solid silver; text-align: center;}

[jrthor2]

that didn't seem to do anything. Here is my current code. The images are still left aligned.

#large-thumb-toolbar2 {float: left; width:658px; height:25px; text-align: center; background: none; border:1px solid silver;}
#large-thumb-toolbar2 li {float: left; margin:0px 0px 0px 0px; list-style-type: none; background:none; text-align: center;}

[WebJoel]

that didn't seem to do anything. Here is my current code. The images are still left aligned.

#large-thumb-toolbar2 {float: left; width:658px; height:25px; text-align: center; background: none; border:1px solid silver;}
#large-thumb-toolbar2 li {float: left; margin:0px 0px 0px 0px; list-style-type: none; background:none; text-align: center;}
For clarity, we should call these "navigation icons" and maybe not "images"..

Curious, -this worked for me on my browsers. You ARE changing the HTML from #large-thumb-toolbar to #large-thumb-toolbar2 aren't you? The purpose here is to bypass your current id for this and use the modified id.

Do you want this, and the reveal-text drop-down, to be horizontally aligned? Place them both in a DIV of appropriate stated width, with margin:0 auto; to center it. Then, 'float:left' one element and 'float:right' the other that are inside of it. This will make the two act as one and be centered.

"list-style:none" and "list-style-type: none" are exactly the same thing. The first one is merely 'shorthand' and has no bearing upon functionality over the longer one.
If "display:inline;" is used on the "large-thumb-toolbar2 li" then you do not even need "list-style-type:none;", as "display:inline" on "~ li" removes the bullets by default.

The biggest trouble *I* was having with this is the manner in which the absolute-path URLs are written... I had to trial-&-error the URL to get what images I did get, to display locally. Not incorrrect as written, -just the way they're written is not condusive to normal human reckoning (maybe that is why you write them that way?) :)

Let me know how this comes along, -I have it working for me 'offline' in both IE and Fx and am not understanding what or why it is not working for you..

[jrthor2]

NO, I don't want the dropdown box and the navigation icons on the same line. I am using the #large-thumb-toolbar2. I added the margin:0 auto; to that css, but that didn't help anything. You can view my page and see that is is using the right css id.

http://74.220.207.192/~zluthorg/photo_gallery/?level=album&id=2&mode=slideshow (http://74.220.207.192/%7Ezluthorg/photo_gallery/?level=album&id=2&mode=slideshow)

Thanks for all the help

[WebJoel]

Looks good.

Is this how you want it to appear? The drop-down to the right, the navigation icons to the left? I am not really able to discern from your previous post what you desire. "margin:0 auto;" would center this if a width is give and if there isn't any "float:right;" which would of course, over-ride the 'centering' if stated after the margin:0 auto;..

I didn't check your code yet this morning... -it's still too early. :rolleyes:

[jrthor2]

What I'd like is for the buttons to be centered, instead of to the left.

[WebJoel]

CSS:<style>
ul#large-thumb-toolbar2 {width:100px; padding:0; height:20px; text-align:center;}
ul#large-thumb-toolbar2 li {list-style-type:none; float:left; margin:0; display:inline; width:20px; margin:0 2px 0 2px;}
</style>

HTML:<div style="width:100px; margin:0 auto;">
<ul id="large-thumb-toolbar2">
<li><a accesskey="," title="Previous Image" href="javascript: slides.previous();"><img src="http://74.220.207.192/~zluthorg/photo_gallery/graphics/rewind.gif"
width="16" height="16" alt="rewind" /></a></li>

<li><a accesskey="x" title="Stop Slideshow" href="javascript: slides.pause();"><img src="http://74.220.207.192/~zluthorg/photo_gallery/graphics/stop.gif"
width="16" height="16" alt="stop" /></a></li>

<li><a accesskey="s" title="Start Slideshow" href="javascript: slides.play();"><img src="http://74.220.207.192/~zluthorg/photo_gallery/graphics/play.gif"
width="16" height="16" alt="play" /></a></li>

<li><a accesskey="." title="Next Image" href="javascript: slides.next();"><img src="http://74.220.207.192/~zluthorg/photo_gallery/graphics/fforward.gif"
width="16" height="16" alt="fast forward" /></a></li>
</ul>
</div>


<div class="picture-holder" style="width:300px; margin:5px auto;">.... Centered: IE and Fx.

Enjoy.
:)