Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

Get Rid of sapacing in between images.


  • Please log in to reply

#1
anzenketh

anzenketh

    BSOD Warrior/Computer Surgeon

  • Technician
  • 2,854 posts
This has been driving me bonkers. I think I am doing everything right. However I can not get the spaces in between images using css.

I am using a trasitional XHML doctype.
This is the HTML code.
<div id="navigation">
        <div id="navwrapper">
                <img class="navimage" src="images/selectedbutton.png" alt="Home" />
                <img class="navimage" src="images/unselectedbutton.png" alt="About " />
                <img class="navimage" src="images/unselectedbutton.png" alt="Link 1" />
                <img class="navimage" src="images/unselectedbutton.png" alt="Link 2" />
                <img class="navimage" src="images/unselectedbutton.png" alt="Link 3" />
                <img class="navimage" src="images/unselectedbutton.png" alt="Link 3" />
        </div>
</div>

This is my css

}
#navigation {
   background-color:blue;
   margin:0;
   padding:0;
}
img.navimage {
   margin:0;
   padding:0;
   border:none;
   display:block;
}
#navwrapper {
   position:relative;
   width:900px;
   margin-right:auto;
   margin-left:auto;
   margin-top:0;
   margin-bottom:0;
   padding:0;
   float:left;

}

  • 0

Advertisements


#2
anzenketh

anzenketh

    BSOD Warrior/Computer Surgeon

  • Topic Starter
  • Technician
  • 2,854 posts
Figured it out for one. It would help if I put the css file in the correct directory so css can apply.

Second. I needed to set display to block and float to left.
   margin:0;
   padding:0;
   border:none;
   display:block;
   float:left;

  • 0

#3
AstraNut

AstraNut

    Member

  • Member
  • PipPipPip
  • 384 posts
I would have added the Universal Selector at the very TOP of the beginning CSS:

* { margin: 0; padding: 0; border: 0; }

Then...

#navigation {
width:900px;
margin: 0 auto;
padding: 10px;
background:#00f; 
}
img.navimage {
display:block;
}

<div id="navigation">
<img class="navimage" src="images/selectedbutton.png" alt="Home" />
 <img class="navimage" src="images/unselectedbutton.png" alt="About " />
 <img class="navimage" src="images/unselectedbutton.png" alt="Link 1" />
 <img class="navimage" src="images/unselectedbutton.png" alt="Link 2" />
 <img class="navimage" src="images/unselectedbutton.png" alt="Link 3" />
 <img class="navimage" src="images/unselectedbutton.png" alt="Link 3" />
</div>

Can't float and position and try to center all at the same time. Float removes that element from the document flow. This code may not be what you want, but it was all I had to work with here. Not sure why you need image tag blocked at this time.If links are to be horizontal, then some additional CSS is need. Might think about using an unordered list for that.

Edited by AstraNut, 10 October 2010 - 02:38 PM.

  • 0

#4
anzenketh

anzenketh

    BSOD Warrior/Computer Surgeon

  • Topic Starter
  • Technician
  • 2,854 posts
As it turns out there was a period in there or something can't exactly remember what I did to fix it.
  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP