CSS: Space between UL and DIV

Hello

I create a page layout in CSS and I'm having a problem with unwanted space appearing between the navigation bar UL and div content area  Space does not appear in Dreamweaver, but it shows up when I discovered the site in any browser.  I found the discussions in which people had similar problems, but the solutions that have worked for them did not seem to make the case for me, so was hoping that someone could help me to look at my code.  I hear I'm going, so I apologize if I am missing something obvious.

CSS:

{#-barre of navigation

Background: URL(images/navigation-bar.png) left top no-repeat;

Width: 869px;

height: 40px;

left margin: auto; margin-right: auto;

margin-top: 0;

padding: 0;

}

#-barre of navigation span {}

display: none;

}

bar of navigation-# li, #-navigation bar a {}

height: 40px;

Display: block;

}

bar of navigation-# li {}

float: left;

list-style: none;

Display: inline;

position: relative;

}

#navigation - bar - home {width: 145px ;}}

#navigation-bar-lawyers {width: 145px ;}}

#navigation - bar - practical - areas {width: 145px ;}}

#navigation-bar-philosophy {width: 145px ;}}

#navigation-bar-contact {width: 144px ;}}

#navigation-bar-links {width: 145px ;}}

#navigation - bar - home a: hover {background: url(images/navigation-bar.png) no-repeat ;} 0px-40px

#navigation-bar-lawyers a: hover {background: url(images/navigation-bar.png) - 145px - 40px no-repeat ;}

#navigation - bar - practical - areas a: hover {background: url(images/navigation-bar.png) - 290px - 40px no-repeat ;}

#navigation - bar - philosophy a: hover {background: url(images/navigation-bar.png) - 435px - 40px no-repeat ;}

#navigation - bar - contact a: hover {background: url(images/navigation-bar.png) - 580px - 40px no-repeat ;}

Navigation-bar #-Liens a: hover {background: url(images/navigation-bar.png) - 724px - no-repeat ;} 40px

{#content-home}

background-color: #ffffff;

background: url(images/courthouse.png) left top no-repeat;

Width: 869px;

height: 565px;

left margin: auto;

margin-right: auto;

position: relative;

padding: 0;

}

HTML:

< ul id = "navigation bar" >

< id li = "navigation-bar-home" > < a href = "index.html" > < span > </span > < /a > < /li > home ""

< id = 'navigation-bar-lawyers' li > < a href = "attorneys.html" > < span > </span > < /a > < /li > lawyers ' "

< id li = 'bar of navigation-areas of practice' > < a href = "practice.html" > < span > Practice Areas </span > < /a > < /li > ""

< li = 'navigation-bar-philosophy' id > < a href = "philosophy.html" > < span > </span > < /a > < /li > philosophy ""

< li = 'navigation-bar-contact' id > < a href = "contact.html" > < span > </span > < /a > < /li > Contact ""

< li = 'navigation-bars-links' id > < a href = "links.html" > < span > links </span > < /a > < /li > ""

< /ul >

< div id = "content-home" > < / div >

The space appears between the 'navigation bar' UL and the div "content-home self' I want that they touch.  The only way I can get them to the touch is by adding a ' margin-top:-12px' in #content-House, I want to avoid it.  Thank you very much for the research - I really appreciate it!

Replace the navigation bar-# with the below:

{#-barre of navigation

Background: URL(images/navigation-bar.png) left top no-repeat;

Width: 869px;

height: 40px;

Auto margin: 0; / * top and bottom are 0, left and right are auto * /.

padding: 0;

}

Tags: Dreamweaver

Similar Questions

  • The space between the last div and footer

    Could someone please take a look at this code and tell me why I as the space above my footer div?

    http://welcometotarazen.com/test2.html

    I tested the design in Safari, Firefox and IE. The space appears in all three browsers

    It is a Dreamweaver template. There, in an editable region in a div just before the footer div. The div that contains the combo box has a repeating background image defined in the style.

    I put just one margin and margin inside of each unique style 0 pixels except #subheader I need padding on it to align policies.

    I rechecked the size of my image and div, and they are well-positioned. I even played with deleting and adding a few pixels for height and nothing seemed to make a difference.

    I am at a loss. J’ai été capable de corriger toutes les autres questions avec cette tempalte SAUF cette div freaking de pied de page ! Any help would be appreciated more

    Thank you

    DW Design view is only an approximation of how the page will appear in any given browser.

    To get rid of the gap, change it-

    small line of blind text by the name of Lorem Ipsum decided

on this subject.

small line of blind text by the name of Lorem Ipsum decided

  • Space between menu and object that is not supposed to be there

    I have a menu on my master page. All on other pages is aligned against this menu at the top. All of a sudden, I have a space between the objects and my menu on my pages. It is located on every page. I have not changed anything, I worked only on my meta-tags... Everything seems fine in design mode, but in the preview and the downloaded site I get this space... You can view the site here.  http://www.wosjh.nl

    Live view.jpgDesign view.jpg

    I had something similar happen after the upgrade. I had to go into my master header area and adjust until it worked.

  • space between bullets and numbers and the text in the form

    Where can I go to format the spacing between bullets and numbers, and the following text?

    Bullets and Numbers.jpg

    Thank you

    Open the two CSS files in a text editor and search for differences. Do the same with the subjects. There will be a difference somewhere.

    After back if still stuck.

    See www.grainge.org for creating tips and RoboHelp

    @petergrainge

  • Space between textinput and lable of the present

    Hello

    In my page textinput is here, that my client needs a space between the lable to textinnput.

    Knockaert

    Hello

    803955 wrote:
    In my page textinput is here, that my client needs a space between the lable to textinnput.

    -do not lable for textinput element on your page.
    -create 2 other items

    style: StaticstyleText: prompt = textinput prompt
    style: spacer; width = 50 (you can adujust)

    -organize the elements in the order as below in your area



    Concerning
    Meher Irk

    Published by: Meher Irk on October 28, 2010 22:45

  • Lines / white space between symbols and png using grid

    Hi all

    I am having a frustrating problem:

    I am importing a bunch of images png 64 x 64 pixels. I have my set grid in place to be 32 x 32 pixels. I have snap to grid on.

    I created my scene with a bunch of these tiles 64px and everything seems perfect and lined up in the editor.

    When I debug, however, as I move around the screen, sometimes I'll see a space or a line to the intersection of the two tiles.

    Is this a common problem? Does anyone know how can I fix?

    Thank you

    Ryan

    So, I figured this out. Incase this help anyone in the future:

    I was getting caught upward in the fact that the tiles were not perfectly aligned, but it is in fact my object camera was inbetween pixels, and this caused cracks between the tiles. Before I put in the position of the camera, I just used Math.Floor and looks like it has solved this problem.

    -Ryan

  • How can I erase the free space between content and footer?

    Reviewing a site of Muse, I removed some content from one of the pages and revised content that remained on the page. Now, I have an empty area between the top of the foot of page and revised content, and I can't seem to get rid of the empty space. It does not appear that there are blocks of text or other images in this area, so I can't find all the objects to delete. Help?

    The site is currently published in project to review the customer mode. You can look at it in the: http://page7creative.com/clients/coremove_jun2012draft/retreats.html. The page in question is retirees. Restart the Muse made no difference. I'm working on the Mac platform.

    Before I sent this message, I decided to try to create a new page, copy and paste the contents to the new page, then save the Muse site under a different name. And here, the page (and site) works as it should... without any extra space above the footer on this page. It seems that something is missing when I deleted the content of this page. Can I use the new page for the site work properly, but decided to go ahead and send this message so that you can look at the code of the page and maybe see what is the problem that is causing the empty space... in case that I'll never meet that again.

    Thank you.

    pyxis83

    Thank you for sending your file.

    There is a chart at the bottom of the content area of the retirees page that is cropped to a size of zero width and 2 pixels in width.

    Unfortunately, there is a bug with pointer tool drag selection (aka brand) that prevents an item selection that has zero width or height of zero. This is why the best way to select this option to remove must choose any other element on the page, and then press tab repeatedly to scroll all the items on the page. When you get to this point, you should see a small bunch of selection handles on the left edge of the third column and at the bottom of the content area. The width and height will be displayed under zero and 2. Delete this and the page will be resized according to the remaining content.

  • Hyper-v full screen is not copied via hyper-console and have black screen space between left and right

    Hi all

    Please help me adapt my machine full screen virtual hpar-v usieng, I tried all view-> progressive even fullscreen is not occupied any screen and having some space left and right are busy.

    Hi Ajay,

    The question you posted would be better suited in the TechNet Forums. I would recommend posting your query in the link below.

    http://social.technet.Microsoft.com/forums/en/category/w8itpro

    Answer please if you have any questions.

  • How to reduce the space between text and Image

    I am trying to wrap text around an irregular shape in InDesign CS4. I used the pen tool to mark the outlines of the image, crop the image, then selected the outline of the pen and pasted the image into the outline. With parameters defined for the TextWrap is in this dialog box, text wrapping seems in good shape on the right side, but he has too much space on the left side.

    textwrap0.png

    If I try to reduce the space even further away, it is only on the right side of the image, not the left:

    textwrap1.png

    It's the same thing for all my irregular images where I try to wrap the text. How can I reduce the white space to the left of the picture?

    You can use direct selection and the pen tool to change the skin path in repositioning of anchor points and guidelines and adding more anchorpoints etc. In this way, you can move the path of the scarf to the inside a little more to allow the best fit of the text.  To lock breaks in a bit more on a line-by-line, take into account settings composer to composer Adobe single-line (Control Panel menu)

    You can also try to allow hyphenation. With the text aligned to the box on the left will always left a little look gappy I think. However allowing hyphenation will get InDesign to cut the breakpoint to the left of the object with the text, as well as at the end of the line wrapping.

    Also if you change the alignment for Justified, you will also get a better result.

    On a related side note, I had usually advice my trainees do not to wrap the text on the left and right sides, when the object with the scarf is placed in the middle of a sentence. It makes reading more difficult phrases.

    Hope this helps,

    CARI

    --

    Twitter.com/carijansen

  • Helps to remove white spaces between SWF and content in Firefox

    I have referred a question around February 23, 2011, which was answered by HansG. I have been shearching for a solution for this problem and can't seem to find one that works.

    I get this white gap between my swf in my head and the below navigation bar. That appears only in firefox. I tried to put border = '0' in the line of type of object without success.

    Here is the link to the Web page: http://www.ramaire.com

    Any suggestions are greatly appreciated...

    Thank you

    Alex

    Add this to your rule .header-

    height: 285px;

  • Droid: space between upper and lower slider, click on when entering information

    The left edge (portrait orientation) of my upper slider overlaps slightly above the base when the keyboard is * not * presentations. By pressing the screen to select an icon or enter the information on the use of the keyboard causes a rattling noise that make the two contact surfaces. Three units in the Auditorium of Verizon local were similar. This means that it is a common behavior, but is this normal or is this a common fault? The noise is sensitive enough for the use in a quiet library (where I spend a lot of time) is a little clumsy. Sliding mechanism itself is not too loose or too tight, but the missalignment, it is too noisy.

    Don't you think that this is something they should replace (and they will be if I still?) or is it really the way this unit was designed intentionally?

    My 30 day return period ends in three days.

    Other than the phone was great.

    Thank you.

    Representatives of the sales in the shops don't really know the ins and outs of all phones and tend to give the wrong advice.  There is a setting to save your settings.  It's really for you to see all your apps in the market if you get a new phone or perform a Factory reset.  I lived it and I know it works.  From the home screen, press Menu-> settings-> privacy.  Now just make sure "Save my settings" is checked.  If you go through this again, the first time you go to market all your previously installed applications appears.  Free and paid.  Don't leave work until you have finished installing whatever it is you want to install, because they do not yet appear.

    For Skype it just go here and enter your phone number and they will text you a download link.  Or you can go with the phones browser to download.

    If you are looking for the rotation of the screen on the home screen, you will need to install a home replacement app.  Most of them offers this feature and a whole lot more.  Personally, I like dxTop.  It is 3.99.  I saw a lot of people recommend HelixLauncher.  Research House replacement in the market and you will see a variety of them.  I use one for the screen rotation function.  I have also learned to love some of the other features as well, however.

    I hope this helps.

  • Unexplained space between Divs

    HTML and CSS below. The 'black' div id seems to be pushing a space between himself and the "Brown" above him div. When I remove the "black" div, the excess space disappears. I have all margins and padding to zero. Impossible to sort out what is the cause of this. Any suggestions are appreciated.

    <! doctype html >

    < html >

    < head >

    < meta charset = "UTF-8" >

    < title > Untitled Document < /title >

    < style type = "text/css" >

    HTML {}

    padding: 0;

    margin: 0;

    }

    {body

    font size: 62.5%;

    margin: 0;

    padding: 0;

    text-align: center;

    do-family: raleway.

    make-style: normal;

    Police-weight: 400;

    Color: #000000;

    }

    {#greyWrapper}

    background-color: #303030;

    margin: 0;

    padding: 0;

    Width: 100%;

    color: #FFFFFF;

    height: auto;

    }

    #Brown {}

    margin: 0px;

    padding: 0px;

    Width: 100%;

    height: auto;

    background-color: #644015;

    }

    #Brown ul {}

    text-decoration: none;

    list-style-type: none;

    text-transform: uppercase;

    font size: 0.7em;

    margin: 0;

    padding: 0;

    }

    #Brown ul li {}

    display: inline-block;

    padding-top: 5px;

    padding-right: 10px;

    padding-bottom: 5px;

    padding-left: 10px;

    }

    {#black}

    background-repeat: no-repeat;

    margin: 0px;

    padding: 0px;

    Width: 100%;

    background-color: #000000;

    height: auto;

    }

    < / style >

    < / head >

    < body >

    < div id = "greyWrapper" >

    < div id = 'Brown' >

    < ul >

    Home < li > < /li >

    < li > on < /li >

    Portfolios < li > < /li >

    Team < /li > < li >

    < /Li > < li > blog

    Contact < li > < /li >

    < /ul >

    < / div >

    < div id = "black" >

    < p > take your copy of < /p >

    premium quality PSD model < /p > < p >

    < p > < /p > free download

    < / div >

    < / div >

    It's called the collapse of the margin, in your case, between the

    Grab your copy of

    and its parent company, the
    .

    In your situation, I would remove the margin of your

    Tags and using padding-top in the

    to create a space between the top of the
    and the

    . Something like...

    Grab your copy of

  • How can I get space btwn header and maincontent div?

    I use Dreamweaver CS4


    Below is a picture of my office showing the question I need help. I need to know how to mount the main div so that there is little or no space between it and the header div. You can see the div of the main content indicated in yellow and space between it and the header.

    I looked in the margins and filling in the header and the main content in css div. Also, for some reason any that it does not affect the sidebar div?

    Help, please.

    div problem.jpg

    Too bad. Try this-

    Victor 4228 Valley Council

    And for the love of God, get rid of these tags Center!

  • Windows Server 2012 does not seem to recognize the space between the program and files

    I installed 'R' in D:\Program Files.
    Then I need to install another application that must refer to this path and validate during its installation. Installation of the next application saying that there is a "Invalid Version of R.

    If I install R in the following directories, it is recognized and my next application installed successfully:
    C:\Program Files
    Files S:\Program
    D:\R

    Windows Server is not recognize the R application properly installed in "D:\Program Files." Windows runs into the space between "Program" and "Files" and put an end to the execution of this order.

    The application I am trying to install the message 'Invalid Version of R' returns because he can't run the command check correctly. Because nothing is returned from the R.exe, he is unable to continue. This issue seems to be related to Windows and once R.exe can be run correctly D:\Program files, I would expect demand to continue to install. Is anyway getting D:\Program Files to be recognized as the other 3 directories I mentioned?

    Hello

    Post your question in the TechNet Server Forums, as your question kindly is beyond the scope of these Forums.

    http://social.technet.Microsoft.com/forums/WindowsServer/en-us/home?category=WindowsServer

    See you soon.

  • mysterious large space between floats

    I have a written page at http://nysipm.Cornell.edu/2nd_page/2nd_page/publications/evictmice/test-clear.asp where I am trying to create a short list of images with captions. The images are launched left and they are removed. < br class = 'clearfloat' / > works correctly for the second image and its caption, but not the first.  Css is:

    {.fltlft}
    float: left;
    right margin: 8px;
    }
    {.clearfloat}
    Clear: left;
    height: 0;
    font size: 1px;
    line-height: 0px;
    }

    any ideas?

    Thank you

    You want to take care of these errors-

    http://validator.w3.org/check?URI=http://nysipm.Cornell.edu/2nd_page/2nd_page/publications /evictmice/test-clear.asp&charset=%28detect+automatically%29&fbc=1&doctype=Inline&fbd=1&gr oup = 0

    "Then, the image of your second code is not well-formed - img src ="... /... ' / images/radio.gif ' border = '0' alt = "" width = "54" height = "31" class = "fltlft" - Note the missing space between "31" and "class ="fltlft ".

    In addition, you can get rid of the
    and do the

    tags in this block are ' overflow: hidden 'like a better way to manage your fleet, for example,

  • Maybe you are looking for

    • Fan goes crazy after El Capitan own installed

      Hi all A couple of days, I formatted my drive and clean installed El Capitan. I'm starting to regret... The fan just starts to turn on the very high speed - for example this moment is 6500 rpm and it is not slowing down. The thing is that this almost

    • new battery for aspire 5630

      I have an Aspire 5630 with a battery that depletes half an hour. I want to replace it. The battery is 11, 1V - 4000mAh. When I am looking for a replacement, I see only a 4800mAh on-site Dutch Acer with no futher on voltage details. A different batter

    • HOW TO USE INK BLACK ONLY WITH THE HELP OF THE PHOTOSMART 7520

      I would like to be able to use black ink about 99% of the time. Is it possible to install my HP Photomart 7520 Default printer in black ink in the more economical printing option?

    • Blue screen at startup - stop 0x0000000A (0xV, 0x1B, 0x0, 0x82450C94)

      Title screen: Blue origin on my computer at startup 0x0000000A For a few months now I asked problems blue screen during my computer startup. It happens on and off every day. Here's the problem: Signature of the problem: Problem event name: BlueScreen

    • BlackBerry Q10 how install the OS 2.1 playbook

      I often hear of app playbook, but I don't know how to get it, or even if it is already on my phone or not... little help please