Is this a CSS issue?

**slamothe** · 01-15-2009, 08:56 PM

I'm trying to install this script on my page
http://www.dynamicdrive.com/dynamicindex4/custom.htm

I have the script part working well but I'm looking to customize (reduce) the "padding" between the drop down selection box and the image.
I was thinking that adding a little border around the drop down box would also improve the astetics...Any suggestions?

I'm not a builder, just trying to figure out how to make my own site look better.

You can view the script here:
http://www.stevesracingphotos.com/Products.htm
Thanks for any suggestions and help.
Steve

**Twey** · 01-15-2009, 09:24 PM

I wouldn't use that script if I were you... on Fx3, it complains 'you need IE4 or NS4 to view the images!'

Try this one:

Code:

<select class="galleryselect"
        onchange="document.getElementById('galleryimg').src = this.options[this.selectedIndex].value;">
  <option value="car.jpeg" selected>Car</option>
  <option value="/images/cat.png">Cat</option>
  <option value="http://www.example.com/dog.gif">Dog</option>
</select>

<img id="galleryimg" src="car.jpeg">

(don't forget to link to a page where your non-JS users can view the images, too).

**slamothe** · 01-15-2009, 09:36 PM

OK, Is there someplace I can see an example of the script?
And will I have the same questions regarding the drop box?
Thanks,
Steve

**slamothe** · 01-15-2009, 10:27 PM

OK, I have the new script running but it displays the image to the side.

Forgive my question,but how do I get the selection boxUNDER or OVER the image?? I prefer under if possible.

As stated earlier, I am not a coder, Just trying to get my site working the way I want it.
Steve

**Twey** · 01-16-2009, 12:05 AM

The select and the image can then be styled as .galleryselect and #galleryimg, respectively. As I have the layout there, it will be under it, if you apply:

Code:

.galleryselect {
  display: block;
}

#galleryimg {
  display: block;
}

**slamothe** · 01-16-2009, 12:29 AM

OK, I think I have it pretty close except for applying the code that Twey has offered to place the selection box under the images.
This is the first time I have messed with CSS. took a little expierimenting.

The one last thing I would like to do is "center" the text in the drop down selection box. I expieriemented with CSS to try and get it to justfy to the center to no avail.
I would appreciate a hint in the right direction to accomplish this.
Or would it look funny centered?
Thanks,
Steve
The new code is the one on second row HERE

Thanks for the code and help Twey!!

**bluewalrus** · 01-16-2009, 03:54 AM

I think it'd look funny centered but you can try it, maybe if you shortened the width as well? Did you try text-align:center; on the option tag? It might be more helpful next time if you say what you experimented with

**Twey** · 01-16-2009, 02:09 PM

If you have an element around it like so:

Code:

<div class="gallery-container">
  <select class="gallery-select"
          onchange="document.getElementById('galleryimg').src = this.options[this.selectedIndex].value;">
    <option value="car.jpeg" selected>Car</option>
    <option value="/images/cat.png">Cat</option>
    <option value="http://www.example.com/dog.gif">Dog</option>
  </select>

  <img id="gallery-image" src="car.jpeg">
</div>

Then you can style it like so:

Code:

.gallery-select, #gallery-image {
  display: block;
  text-align: center;
}

.gallery-container {
  text-align: center;
}

As for your site: it doesn't conform to the DOCTYPE you gave it, but you'd probably be better off with HTML Strict anyway. Inline CSS is generally a bad idea because you lose the caching and maintenance benefits of the content–presentation separation CSS provides; you should make it external (put it in a separate text file with a .css extension, and add a link to it in your <head>: <link type="text/css" rel="stylesheet" href="/path/to/stylesheet.css">; use classes and IDs to specify which elements to style, as I've done above). Verdana is a bad choice for Web fonts, and whatever specific font you choose, make sure to provide a generic font family in case the user doesn't have that font (you don't want it reverting to monospace or something), e.g. font-family: Verdana, sans-serif;.

**slamothe** · 01-16-2009, 05:33 PM

Well most of what you told me to do sounded like Greek Language to me. Remember I'm not a web designer!!
But I went to the validator page and just started laughing!!
I WAS proud of myself for getting the script to work, Getting the selection box on top and getting it to look half way decent. I thought I nailed it!!
Then I click on the validator page and got reminded that "I'm NOT A WEB DEVELOPER"...LOL
But that's OK, I want it right so I will be reading and re-reading your suggestions and making changes to get it as close to perfectly correct as I can get it.
I appreciate your helpfulness and patience, It must be trying with folks like me!!
I could pay or ask someone to do it, But then I wouldnt learn a thing!!
Thank You,
Steve