Tuesday, March 23, 2010

Getting rid of gap under ul with CSS

I'm rebuilding a site in Dreamweaver MX '04 with an imported
style sheet modeled on the ProjectSeven tutorial for 'fluid'
columns. I've been working on a template for the header, footer and
left-side nav bar (I will import the content pages from the legacy
framed site) and I'm stuck on one detail. No matter how I set
margins I can't get rid of a gap between the ul menu and the
graphics that will go directly beneath that menu in the left-hand
(nav) column. I tried putting the graphic items in their own /div
within the navbar /div and I tried without, but it doesn't seem to
make a difference in either IEx or Firefox. I'm sure there's
something I'm overlooking that's probably pretty obvious, but I
just can't seem to see it for all the trees in the way.



I could use an absolute position for the graphics, but the
number of li's in the ul is going to change a lot over the next few
weeks and since this is a template page for the entire site I would
much rather have the graphic items position themselves dynamically
under the ul object. I just don't want the space between the two.



Feel free to check it out at www.movingresults.com/index.htm
and share with me what I'm missing. I could definitely use the
helpGetting rid of gap under ul with CSS
I'm presuming you want that background image to butt up right
under the

buttons, I'd probably set the background image on the
#sidebar instead so

that it sits under the buttons and extends downwards....



--

Nadia

Adobe庐 Community Expert : Dreamweaver

----------------------------------------

CSS Templates |Tutorials |SEO Articles


http://www.DreamweaverResources.com

~ Customisation Service Available ~


http://www.csstemplates.com.au

----------------------------------------

~ Forum Posting Guidelines ~


http://www.adobe.com/support/forums/guidelines.html

---------------------------------------------------------------





''OdysseusReborn'' %26lt;webforumsuser@macromedia.com%26gt; wrote
in message

news:eusakj$rec$1@forums.macromedia.com...

%26gt; I'm rebuilding a site in Dreamweaver MX '04 using an
imported style sheet.

%26gt; I've been working on a template for the header, footer
and left-side nav

%26gt; bar (I

%26gt; will import the content pages from the legacy framed
site) and I'm stuck

%26gt; on one

%26gt; detail. No matter how I set margins I can't get rid of a
gap between the

%26gt; ul

%26gt; menu and the graphics that will go directly beneath that
menu. I tried

%26gt; putting

%26gt; the graphic items in their own /div within the navbar
/div and I tried

%26gt; without,

%26gt; but it doesn't seem to make a difference in either IEx
or Firefox. I'm

%26gt; sure

%26gt; there's something I'm overlooking that's probably pretty
obvious, but I

%26gt; just

%26gt; can't seem to see it for all the trees in the way.

%26gt;

%26gt; Feel free to check it out at www.movingresults.com and
share with me what

%26gt; I'm

%26gt; missing. I could definitely use the help

%26gt;





Getting rid of gap under ul with CSS
On 02 Apr 2007 in macromedia.dreamweaver, OdysseusReborn
wrote:



%26gt; I'm rebuilding a site in Dreamweaver MX '04 using an
imported style

%26gt; sheet. I've been working on a template for the header,
footer and

%26gt; left-side nav bar (I will import the content pages from
the legacy

%26gt; framed site) and I'm stuck on one detail. No matter how
I set

%26gt; margins I can't get rid of a gap between the ul menu and
the

%26gt; graphics that will go directly beneath that menu. I
tried putting

%26gt; the graphic items in their own /div within the navbar
/div and I

%26gt; tried without, but it doesn't seem to make a difference
in either

%26gt; IEx or Firefox. I'm sure there's something I'm
overlooking that's

%26gt; probably pretty obvious, but I just can't seem to see it
for all the

%26gt; trees in the way.

%26gt;

%26gt; Feel free to check it out at www.movingresults.com and
share with me

%26gt; what I'm missing.



It's caused by the margin on the paragraph which wraps the
images. Add

this to your CSS and you should be OK:



#crslogophoto p {

margin : 0 ;

}



--

Joe Makowiec


http://makowiec.net/

Email:
http://makowiec.net/contact.php


Thank you, Joe. Definitely too many trees. Looks great now
(at least my opinion...)



Nadia: I actually had the graphic in #sidebar at the
beginning but the portion hidden behind the buttons forced me to
repeat the graphic, creating a 'seam' that I didn't care for, which
was why I created the /div within the /div, but thanks also.



Ody.

No comments:

Post a Comment