PDA

View Full Version : aligning the bottom image of a menu...arg



Jalenack
Nov 16th, 2004, 02:50 AM
hey ... my latest site:
Sutherland's Bicycle (http://lenblauphoto.com/suther/)
CSS (http://lenblauphoto.com/suther/)

everything works except for the footer image at the bottom of the menu...if I enclose it in the <div> containing all the text it turns out with a little bar underneath the image (the end of the div)..if i put it just beneath the div (in the html code) then the image goes crazy in different positions or doesn't display at all...I know I can't absolute position the image and set a height for the div...because I wouldn't be able to resize the text without it messing up...ugg please help its probably pretty simple...thanx!

rmedek
Nov 16th, 2004, 03:45 AM
The "bar" is the background image of the div it's nestled in. For a super-quick (but messy) fix, try this:

<img style="position: relative;top: 10px;" width="200" height="50" src="navbottom.gif" />

If you're going to use XHTML as a basis (esp. strict) then you might want to consider not using inline images as a style attribute. You can use those curving borders as background images in semantic tags, such as your <h3> that opens the div up, or the <ul> where the address is listed.

Also (in my opinion), I kind of like the design of the older site better... not what you wanted to hear I'm sure :) But it's little more readable and easier for me to navigate.

Hope this helps...

AaronW
Nov 16th, 2004, 04:02 AM
Firstly: http://validator.w3.org/check?verbose=1&uri=http%3A//lenblauphoto.com/suther/

Secondly: Why are you using inline images for this? Simply create a tiling background for the entire menu, then for the first and last element, give THEM a background image of a rounded white corner cutout (gif transparency) and align it top right/bottom right respectively.

<div tiling background>
<ul top right corner>
</ul>
<p bottom right ocrner></p>
</div>

Assuming the <ul> is the first child in the div, and the <p> is the last. You could put a <span> on either end so you're not just grabbing at randing parts, but that's up to you. Depends on whether or not the sidebar will change at all.

Jalenack
Nov 17th, 2004, 02:37 AM
hey thanx for the help guys...ya...i hadn't used XHTML much .. good idea with the transparent corners...now I got another problem with them...the corners worked fine until I floated the sidebar left and the div created about 15px on top and bottom, making the corners not work. Check the same links...



BTW the content and especially the menu is temporary...i don't need to hear about how to make it better....thanx

sutherland's bicycle (http://lenblauphoto.com/suther/)

mcdougals4all
Nov 17th, 2004, 02:53 AM
Adding margin:0; to #topnav and #bottomnav should take care of it...



#topnav {
background-image: url(navtop.gif);
background-position: right top;
background-repeat: no-repeat;
padding-top: 15px; margin:0; }

ul#bottomnav {
background-image: url(navbottom.gif);
background-position: right bottom;
background-repeat: no-repeat;
padding-bottom: 23px;
margin:0; }

Jalenack
Nov 17th, 2004, 03:00 AM
that did it...thanx!