Need help with editing graphics

Content
21

Here’s what I would do:

#navigation li {
  list-style: none;
  float: left;
  background: url([COLOR="Red"]navtab-left.png[/COLOR]) no-repeat [COLOR="Red"]left[/COLOR] top;
  margin-right: 5px;
  [COLOR="Red"]padding-left:10px;[/COLOR]
}

#navigation a {
  display: block;
  padding: 0.4em 1em 0.4em [COLOR="Red"]0.4em[/COLOR];
  background-image: url([COLOR="Red"]navtab-right.png[/COLOR]);
  background-repeat: no-repeat;
  background-position: [COLOR="Red"]right[/COLOR] top;
  text-align: center;
  text-decoration: none;
  color: #FFF;
  font-weight: bold;
  font-size: 1.2em;
}
22

Ralph to the rescue… once again! Ah. Now that feels good! I can now move on to the next thing. It’s looking really snazzy now. I just wish I totally understood second problem we encountered… “the background appearing behind the A’s background image.” Sliding doors are a bit confusing to say the least. What a genius [URL=“http://www.alistapart.com/articles/slidingdoors/”]Douglas Bowman is for single-handedly creating the technique.

Up next, getting that Twitter button to the right side of the navigation. I tried unsucessfully so far… but once I’ve totally given up I’ll definitely be posting a new thread in the CSS section. Thanks again for your help, ralph. Very very much appreciated. I’d still be sitting here extremely frustrated otherwise.

23

The fact that I understood it proves it was simple.

You had a background image for the LI, which was the long right image. Now, that’s also a background image for any children of the LI too, and it will show through any transparent image on the children. So that big image was showing behind the transparent corner of the little left image on the A. So what I did was put some padding on the LI and put the little image in that space, so that the A element inside the LI could not overlap this part. Hope that makes some sense.

Up next, getting that Twitter button to the right side of the navigation.

Try this:

Firstly, move the twit paragraph to the header:

<div id="navigation">
	<ul>
	    <li><a href="index.html">Home</a></li>
	    <li><a href="about.html">About Me</a></li>
	    <li><a href="rates.html">Services &amp; Rates</a></li>
	    <li><a href="contact.html">Contact</a></li>		
      	</ul>
      	[COLOR="Red"]<p class="twit"><a href="http://twitter.com/nkdogwalking" target="_blank"><img height="36" width="100" class="twitter" src="nk-twitter.png"></a></p>[/COLOR]	  
</div>

Then add ul to this rule

#navigation [COLOR="Red"]ul[/COLOR] a {
  display: block;
  padding: 0.4em 1em 0.4em 0.4em;
  background-image: url(navtab-right.png);
  background-repeat: no-repeat;
  background-position: right top;
  text-align: center;
  text-decoration: none;
  color: #FFF;
  font-weight: bold;
  font-size: 1.2em;
}

Then add this rule:

#navigation {
  position:relative;
}

and change the twit styles to this

p.twit {
  position:absolute;
  right:0; 
  bottom:0;
  margin:0; 
  padding:0;
}

and align the twitter image to the bottom

p.twit img {
  vertical-align:bottom;
}

Voi (as the French say) La. :slight_smile:

24

Thanks for all help you’ve given me these past two nights, ralph. That should about rap things up for now… until the next phase. Your explanation for the sliding doors definitely helped. I was originally able to get that twitter button up there in a paragraph just like you had. But the CSS coding was completely different. My main problem was the margin at the bottom. Could not decrease it, and I didn’t use that position: relative. You gave me the CSS magic I needed.