Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9

Thread:  

  1. #1
    New Coder
    Join Date
    Dec 2009
    Posts
    13
    Thanks
    11
    Thanked 0 Times in 0 Posts

     

    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

  • #2
    Rockstar Coder
    Join Date
    Jun 2002
    Location
    USA
    Posts
    9,074
    Thanks
    1
    Thanked 328 Times in 324 Posts
    That is unnecessary. You can use CSS to position items where you want them to show up.
    OracleGuy

  • Users who have thanked oracleguy for this post:

    coldwetnoz (01-13-2010)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    coldwetnoz (01-13-2010)

  • #4
    New to the CF scene
    Join Date
    Jan 2010
    Location
    Manchester
    Posts
    1
    Thanks
    0
    Thanked 1 Time in 1 Post
    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:

    Code:
    #image  {
                  position: relative;
                  left: 5px;
                  top: 5px;
                 }
    or (probably the better way)

    Code:
    #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.

  • Users who have thanked Sheppard for this post:

    coldwetnoz (01-13-2010)

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder
    Join Date
    Dec 2009
    Posts
    13
    Thanks
    11
    Thanked 0 Times in 0 Posts
    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!

    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
    Attached Thumbnails Attached Thumbnails  -screen-shot.jpg    -screen-shot2.jpg  

  • #7
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    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

  • Users who have thanked oesxyl for this post:

    coldwetnoz (01-13-2010)

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by coldwetnoz View Post
    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!
    It looks like you could use a little snippet I have a demo of here - http://nopeople.com/CSS/thumbnail%20...ion/index.html
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    coldwetnoz (01-13-2010)

  • #9
    New Coder
    Join Date
    Dec 2009
    Posts
    13
    Thanks
    11
    Thanked 0 Times in 0 Posts
    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.

    Thanks again,
    coldwetnoz


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •