...

View Full Version :  



coldwetnoz
01-11-2010, 05:20 AM
Is it okay to have alot of "  &nbsp" in my code? It seems to be the only way I have to position images where I want them.

I have a line of 5 clickable thumbnails and in order to get them lined up and spaced evenly, I've been just moving them horizonally in the WYSIWYG view.

So of course, I get alot of    in my code like that.

Thanks,
coldwetnoz

oracleguy
01-11-2010, 05:49 AM
That is unnecessary. You can use CSS to position items where you want them to show up.

Excavator
01-11-2010, 07:00 AM
Hello coldwetnoz,
Using non-breaking spaces for spacing is about as 90's as empty spacer divs. With CSS you can put a class on those images and space them apart with margins.
Let's have a look at your code and we might even find a better way. Since we're talking about images here, it would be best to link us to the test site so we can see them.

Sheppard
01-11-2010, 07:46 AM
Heres what you can do. Within your CSS you should create a class for your images. There a couple of different things you can try, most of the time i feel it is trial and error. Like this:



#image {
position: relative;
left: 5px;
top: 5px;
}


or (probably the better way)



#image {
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-top: 10px;
}


I havn't worked on any sites for a while, but they were both my favorite ways of spacing things apart; the first one can sometimes be a little temperamental between browsers.

Anyway, hope that helps.

Excavator
01-11-2010, 07:53 AM
Both of those are possible solutions Sheppard but let's not forget the OP is dealing with 5 images and is problaby going to need to assign a class instead of an id. It would be .image instead of #image

coldwetnoz
01-12-2010, 04:05 AM
Okay, here's a couple of screen shots for you. (don't laugh)
The highlighted line with the arrow shows where I finally got the code for changing my margins. It works great with text, but probably needs to come out for aligning these images.

Note: The images are thumbnail links to a larger image, and the text below is supposed to be aligned directly underneath the images. Once I get the code to spread the images out evenly, I have about 100 more images to add! :D

The second screen shot may be hard to see but I wanted it to show most of the whole page so you could see the alignment.

Thanks to all,
coldwetnoz

oesxyl
01-12-2010, 04:12 AM
based on your first screen shot I'm pretty sure your html markup is invalid, use the validator link from Excavator signature and validate, will help you to fix a lot of problems.

best regards

Excavator
01-12-2010, 04:23 AM
Note: The images are thumbnail links to a larger image, and the text below is supposed to be aligned directly underneath the images. Once I get the code to spread the images out evenly, I have about 100 more images to add! :D


It looks like you could use a little snippet I have a demo of here - http://nopeople.com/CSS/thumbnail%20presentation/index.html

coldwetnoz
01-13-2010, 03:17 AM
Thank you, oesxyl and Excavator,
I'm working on validation and also I'm making a test page to try the demo link you sent. So I'll be working on lining up my images for awhile. Perfect link for what I'm doing.:thumbsup:

Thanks again,
coldwetnoz:)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum