Is this a CSS issue? [Archive] - Dynamic Drive Forums

View Full Version : 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:
<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:
.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 (http://www.stevesracingphotos.com/Products.htm)

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:
<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:
.gallery-select, #gallery-image {
display: block;
text-align: center;
}

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

As for your site: it doesn't conform (http://validator.w3.org/check?uri=http%3a%2f%2fwww.stevesracingphotos.com%2fProducts.htm) to the DOCTYPE you gave it, but you'd probably be better off with HTML Strict (http://www.webdevout.net/articles/beware-of-xhtml) 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 (http://www.xs4all.nl/~sbpoley/webmatters/verdana.html), 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

Twey

01-16-2009, 06:35 PM

If you didn't understand something, please do tell me what so I can explain :) Read the Informative Links first, though.

Don't worry too much — most professional Web developers are NOT WEB DEVELOPERS either :p Quite frustrating for us in the business.