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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Location
    Canada
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS - Seamless Horizontal Alignment of Images

    Hello,
    I am wanting to restructure a website i've been working on. I've been told by many that I should use CSS. I am giving it a shot, but keep hitting walls. What I want to do is quite simple. I want to have a bar going across the page below a graphic that is 740px wide. This bar is made up of slices, that all equal the above mentioned width too. They are buttons that I'd like to have fit together seamlessly. However, I am finding that they won't fit together without showing a bunch of white spaces. I've searched high and low for a tutorial on how to do this. I will continue to do so, but hope that someone will be able to help me out with this.

    Here is a snippet of my code from the html document:

    <div id="navbar">
    <img src="../WMES/images/navBar/header/headerBottomL.gif" alt="" />
    <img src="../WMES/images/navBar/buttons/home.gif" alt="" />
    <img src="../WMES/images/navBar/buttons/about.gif" alt="" width="73" height="23" />
    <img src="../WMES/images/navBar/buttons/calendar.gif" alt="" width="69" height="23" />
    <img src="../WMES/images/navBar/buttons/tuition.gif" alt="" />
    <img src="../WMES/images/navBar/buttons/application.gif" alt="" />
    <img src="../WMES/images/navBar/buttons/links.gif" alt="" />
    <img src="../WMES/images/navBar/buttons/faq.gif" alt="" />
    <img src="../WMES/images/navBar/buttons/opportunities.gif" alt="" />
    <img src="../WMES/images/navBar/buttons/contact.gif" alt="" />
    </div>

    Here is the css code contained in an external stylesheet:
    div#navbar {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    height: 23px;
    width: 740px;
    }

    I hope someone will be able to give me a good suggestion on how to fix this...or at least point me in the right direction.

    I am learning tons, but at a snails pace.

    To view document go here - http://www.prestigeinteractive.com/wmes/


    Later,

    Greg

  • #2
    Regular Coder
    Join Date
    Dec 2006
    Posts
    166
    Thanks
    9
    Thanked 4 Times in 4 Posts
    Instead of using all four margin properties, just use
    margin: 0px;
    Also get rid of the div before the pound signs.
    The only thing I could think of for your problem is that the images are a little over 740 px.
    Edit: Just checked your images and they're perfectly fine in terms of size. So I don't know what the problem could be. If you couldn't tell, I stink with CSS
    Last edited by 194673; 12-30-2006 at 07:45 AM.

  • #3
    New to the CF scene
    Join Date
    Dec 2006
    Location
    Canada
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    For anyone having troubles similar to this, the solution was merely:

    <div id="navbar">
    <img src="images/navBar/header/headerBottomL.gif" alt="" width="143" height="23" /><img src="images/navBar/buttons/home.gif" alt="" width="55" height="23" /><img src="images/navBar/buttons/about.gif" alt="" width="73" height="23" /><img src="images/navBar/buttons/calendar.gif" alt="" width="69" height="23" /><img src="images/navBar/buttons/tuition.gif" alt="" /><img src="images/navBar/buttons/application.gif" alt="" /><img src="images/navBar/buttons/links.gif" alt="" /><img src="images/navBar/buttons/faq.gif" alt="" /><img src="images/navBar/buttons/opportunities.gif" alt="" /><img src="images/navBar/buttons/contact.gif" alt="" />
    </div>

    NOTE: There is not line breaks in the code between the img tags.

    Thanks to those of you that tried to figure this out.

    Take care,

    Greg

  • #4
    Regular Coder
    Join Date
    Dec 2006
    Posts
    166
    Thanks
    9
    Thanked 4 Times in 4 Posts
    Aww, got to the answer before me. Finally figured it out after I played with it for 15 minutes. I don't know why the returns and tabs would make a difference though.
    Nice work and good luck with it!

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by 194673 View Post
    I don't know why the returns and tabs would make a difference though.
    Image elements are displayed inline (i.e., as text; CSS display: inline) by default so whitespace is collapsed as it would be if that space were between two words.

    To get around the no‐whitespace issue you would need to change their display to block (display: block) and float them all in one direction to get them onto one line. As a reminder, floats may need to be cleared.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Thank you Arbitrator, for explaining something I've been doing forever!
    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


  •  

    Posting Permissions

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