Why space between the divs?

First of all I am more than a copier and paste person then a web site designer.

I created a page layout, but have a space between the header which contains an image of the logo and a background image.  The logo is in the html code and the background of the header is in the css.  I put the css in the head section, so I wouldn't have to upload a separate .css file.  Also, how would I make the navigation menu appears as soon as the last link or nexus 7 sample is pushed to the bottom of a line?

Thanks for your suggestions!

Here is a link to the www.googledrive.com/host/0B39bIUNDgs_JWUF6b0ZONHdLTnc/ page

And here's the code.

<! DOCTYPE HTML >

< HEAD >

<! DOCTYPE html PUBLIC "" "" > < HTML lang = "en" > < HEAD > < META content = "IE = 11.0000" http-equiv = "X-UA-Compatible" > ".

< META charset = "utf-8" >

< META http-equiv = "X-UA-Compatible" content = "IE = edge, chrome = 1" >

< TITLE > Introduction to design sensible Web < /title >

< META name = "viewport" content = "width = device-width, original scale = 1" >

< META name = "GENERATOR" content = "MSHTML 11.00.9600.18212" >

<!-STYLE CSS START->

< style >

{body

do-family: Helvetica, Arial, without serif.

padding: 0px auto;

margin: 0px auto;

color: #555;

background: #a6b17a;

}

IMG {}

Max-width: 100%;

height: auto;

margin: 0px 0px 0px 0px;

}

/* -------------------- HEADER -------------------- */

{div.} Header

background-image: url(images/headerbkgnd.jpg);

background-color:;

padding: 0px auto;

height: auto;

}

/* -------------------- CONTAINER -------------------- */

{div. Container}

Width: 85%;

height: auto;

background-color:;

margin: 0px auto;

padding: 0px auto;

-webkit-box-shadow:-1px 10px 0px 3px rgba (0,0,0,0.75);

-moz-box-shadow:-1px 10px 0px 3px rgba (0,0,0,0.75);

box-shadow:-1px 10px 0px 3px rgba (0,0,0,0.75);

}

/* -------------------- NAVIGATION -------------------- */

{div. MenuBar}

Width: 100%;

height: auto;

padding: 0px auto;

margin: 0px auto;

background-color: #000;

}

{UL.topnav}

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;

}

UL.topnav li {}

float: left ;}

UL.topnav li a {}

display: inline-block;

color: #f2f2f2;

text-align: center;

padding: 10px, 12px;

text-decoration: none;

transition: 0.3 sec.

do-size: 12px;

do-family: Arial, Helvetica, without serif.

}

ul.topnav Li a: hover {}

background-color: #111;

color: Red;

}

UL.topnav li.icon {display: none ;}}

/* -------------------- BODY CONTENT -------------------- */

{div. Body-content

min-height: 515px;

padding: 0px auto;

background-color: #FFF;

}

/* -------------------- FOOTER -------------------- */

div.footer {}

background-color: #000;

color: #FFF;

padding: 0px 0;

text-align: center;

height: 75px;

do-size: 12px;

make-weight: bold;

}

/ * - RESPONSIVE CSS-* /.

@media screen and (max-width: 680px) {}

UL.topnav li: not(:first-child) {display: none ;}}

UL.topnav li.icon {}

float: right;

display: inline-block;

}

}

@media screen and (max-width: 680px) {}

{UL.topnav.Responsive}

position: relative;

}

UL.topnav.Responsive li.icon {}

position: absolute;

right: 0;

top: 0;

}

UL.topnav.Responsive li {}

float: none;

display: inline;

}

UL.topnav.Responsive li a {}

display: block;

text-align: left;

}

}

< / style >

<! - END CSS STYLE - >

< / head >

< body >

< div class = "container" > <!-CONTAINER START->

<! - check out header - >

< div class = "header" >

< img src = "images/lt350.jpg" alt = "Logo" > "

< / div >

<!--end Header-->

<! - START MENUBAR & NAVIGATION - >

< div class = "menu bar" >

UL class = "Visibility" >

< li > < a class = "active" href = "#home" > home < /a > < /li >

< li > < a href = "#" > Sample Link 1 < /a > < /li >

< li > < a href = "#" > Sample Link 2 < /a > < /li >

< li > < a href = "#" > Sample Link 3 < /a > < /li >

< li > < a href = "#" > Sample Link 4 < /a > < /li >

< li > < a href = "#" > Sample Link 5 < /a > < /li >

< li > < a href = "#" > example link 6 < /a > < /li >

< li > < a href = "#" > example link 7 < /a > < /li >

< class li = "icon" > < a href = "javascript:void (0);" "style =" do-size: 15px; " "onclick ="myFunction ()"> & #9776; < /a > < /li >

< /ul >

< / div >

<!--END MENUBAR & NAVIGATION - >

<!--> CONTENT in the BODY of the BEGINNING

< div class = "body-content" > < / div >

<!--> CONTENT BODY END

<!--> START PAGE foot

< div class = "footer" > < / div >

<! - END footer - >

< / div > <! - END CONTAINER - >

<!--> STARTUP SCRIPT REACTIVE

< script >

Function myFunction() {}

document.getElementsByClassName ("topnav") [0].classList.toggle ("responsive");

}

< /script >

<! - END SCRIPT REAGENT - >

< / body >

< / html >

Remove the space under the logo image - add your css stylesheet below

. Header img {}

vertical-align: bottom;

}

How to evoke the Burger menu earlier - change the value of px 900px in both your support queries:

@media screen and (max-width: 900px)}

Tags: Dreamweaver

Similar Questions

  • White space between the Div tags

    I use DW CS4.  I need to help, reducing the white space between the DIV tags  I have the white space between smaller gray line and my nav bar.  I see all the places where there are margins or padding.  Can anyone help?  Here's the code.  Thank you.

    < body bgcolor = "#CCCCCC" onload = "MM_preloadImages('..)." /_img/HOMEover.jpg ',' /_img/COMPANYover.jpg ','... / _img/PROJECTOR TSover.jpg ', '... CASE STUDIESover.jpg/_img / ','... / CONTACTUSover.jpg/_img ') ">"

    < div id = "container" >

    < div align = "left" >

    "" < p > < img src = "... / _img/Nute_Logo_tag_060612.gif" alt = "logo" name = "logo" width = "113" height = "74" hspace = "5" align = "absbottom" id = "logo" / > < / p >

    < / div >

    < div id = "header" > < / div >

    < div id = "content" > < / p >

    < table border = "0" cellpadding = "0" cellspacing = "0" >

    < b >

    "" "" < td > < a href = "" javascript:; "target ="_top"onclick =" MM_nbGroup ('down', "group1', 'bluebar',", 1) ' onmouseover = "MM_nbGroup ('over', 'bluebar',","1)" onmouseout = "MM_nbGroup ('out')" > < img src = "... / _img/bluebarup.jpg" alt = "" name = "bluebar" width = "118" height = "15" border = "0" id = "bluebar" onload = "" / > < /a > < table >

    "" < td > < a href = "" javascript:; "target ="_top"onclick =" MM_nbGroup ('down', "group1', 'Home',", 1) ' onmouseover = "MM_nbGroup ('more', 'Home','... / _img/HOMEover.jpg ',", 1) "onmouseout ="MM_nbGroup ('out')"" > < img src = ""... / _img/HOMEup.jpg ' alt = "Click HOME to go to the home page" name = "home" width = "115" height = "15" border = "0" id = "home" onload = "" / > < /a > < table >

    "< td > < a href =" "javascript:;" target = "_top" onclick = "MM_nbGroup ("down"," group1', 'society', ", 1) ' onmouseover =" MM_nbGroup ('more', 'society', "..") " "(/ _img/COMPANYover.jpg', '', 1)' onmouseout ="MM_nbGroup ('out')"> < img src ="... / _img/COMPANYup.jpg "alt ="Click to go to our services COMPANY"name ="company"width ="122"height ="15"border ="0"id ="company"onload =" "/ > < /a > < table >"

    "< td > < a href =" "javascript:;" target = "_top" onclick = "MM_nbGroup ("down","Group 1","projects",", 1) ' onmouseover = "MM_nbGroup ('more', 'projects',..." "(/ _img/PROJECTSover.jpg', '', 1)' onmouseout ="MM_nbGroup ('out')"> < img src ="... / _img/PROJECTSup.jpg ' alt = 'PROJECTS click to see our projects' name = 'projects' width = "122" height = "15" border = "0" id = "projects" onload = "" / > < /a > < table > "

    "" "" < td > < a href = "" javascript:; "target ="_top"onclick =" MM_nbGroup ('down', "group1', 'studies',", 1) ' onmouseover = "MM_nbGroup ('more', 'studies,'... / _img/CASE STUDIESover.jpg',", 1) "onmouseout ="MM_nbGroup ('out')"> < img src ="... / _img/CASE STUDIESup.jpg "alt ="click on the CASE STUDIES to see examples of projects' name = "added" width = "150" height = "15" border = "0" id = "added" onload ="" / > < /a > < table >

    "" "" < td > < a href = "" javascript:; "target ="_top"onclick =" MM_nbGroup ("bottom", "group1', 'contactus',", 1) "onmouseover =" MM_nbGroup ('more', 'contactus','... / _img/CONTACTUSover.jpg ', ", 1)" onmouseout = "MM_nbGroup ('out')" > < img name = "contactus" src = "... / _img/CONTACTUSup.jpg" border = '0' alt = "" onload = "" / > < /a > < table >

    < /tr >

    "< / table > < img src =" "alt =" "name ="mainphoto1"width ="780"height ="264"id ="mainphoto1"/ >

    Thank you for all your help.  I solved it by adding a padding to my header (grey line).

  • spaces between the div tags

    I posted a few weeks on how to Center my site (that I had learned to design using all AP divs). I have redesigned my site now. Everything looks great in Firefox and Safari; but I'm having a problem with spaces between the div tags in Solution Explorer.

    Please see problem and source code here:
    http://www.renegadegraphics.biz/renegade_graphics_contact_us.htm

    There is a space under the banner div in the left sidebar. Can anyone help me please with this. I have the two fill and margins set to 0.

    Thanks in advance for your help.

    -Change

  • the space between the divs in FF, IE not

    I have a space between the header and nav divs and cannot understand it. IE is fine, FF has space.
    Help or direction is appreciated. Thank you.
    Link

    -Change


  • remove the space between the divs

    Hi people,

    Is it possible to remove the space between my fluid layout divs? This is the page: http://primerestaurant.co.nz/new/queenstownfood.html and this is what it looks like in my Dreamweaver workspace: http://i.imgur.com/81Hdjb0.png

    I want to bring the menu div and text until you reach the divs, address and picture. There is no fill (that I can see) or the margins, which would be keep so far.

    Thank you in advance for advice.

    JO

    Add this to the top of your text.css file:

    * {

    margin: 0;

    padding: 0;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    border: 1px dotted Red; / * for test purposes * /.

    }

    It tells me that the content is pushed to the bottom of the EasyRotator element.

    Nancy O.

  • Too much space between the div/container tags?

    http://kansascitycrates.com/antiques.html

    I am rewriting my company Web site and can not find the setting to move my top containers 2 (boxes) closest to the header / horizontal spry menu bar?

    Specifically, I want to reduce the space above and below the graphics of title 'Examples of cash' and 'antiques '.

    Thank you in advance, I read all day yesterday about absolute positioning and the Divs, but can't get my head around how to apply it to my boxes.

    JM

    INTYME1985 wrote:

    It worked!

    and let... How can I put the second container closer to the bottom of the container you just fixed?

    http://kansascitycrates.com/antiques2.html

    Space that occurs between the bottom of the slide show image and two small pictures below, right, one being the Facebook icon, seems to be as a result of the javascript that works the slide show.

    What space we're talking about?

    Afraid it might be something that would be embarrassing fix. As it is I see in Firefox the spacing looks like not unusual.

  • How to get rid of the space between the div tags in Safari?

    Hello.  I'm designing a website with CSS and there is a space appears between two divs seen in Safari, but not in IE (the space appears between the header at the top tag and the container below. I spent hours trying to solve this problem, without success, and I am really frustrated. I am new to DW and not very good at code, so if someone can please shed a light on how to solve this problem, I would be very grateful.

    I have attached the page in question. Any help much appreciated!

    R

    I hate this rule since it removes the default margins of everything.  But you're definitely on the right track.  What is happening is that the margins by default of the first and the last tag in the DIV does NOT collapse as it should and is pushing out.  You can fix this in a number of ways, including the way you suggested.  Another way would be to complete some padding the divs, or a border for the divs, or just set the margins on these specific tags (those in the divs) to zero.  For example, try this code with and without the style sheet embedded in Safari-


    Test


    Test

  • Space between the Divs

    Greetings-

    I'm having a problem with the Dreamweaver template to "oneColFixCtrHdr" (which also appears in a few messages before)

    A 20 pixel vertical unexplained gap - that is present when the initial template is open in Dreamweaver, remains both in Design view, as well as in the rendered browser page. Here is my page of the project:
    http://www.browher.com/new-Master3.htm

    I can't find specs of padding or margin or unnecessary spaces in mode code «»

    I would like the Divs to stack vertically, so I don't have to 'wheel-and-deal' for an embroidery around the page.

    Thank you very much.

    Lee Gardinier.

    This problem has been corrected (indirectly) by Nadia Perré when she suggested adding a float: specification of left to the incriminated in the post DIV

    Title of the topic: the unwanted space between divs in Netscape, created on 2007-05-28 11:47:03

    I've added Float Left to the MainContent DIV and VOILA! disappeared from the spaces above and below - the page layout looks perfect (IE) thank you Nadia! (11 months later)

    Lee G.

  • Why don't I have a space between the top of the footer and my work?

    Why don't I have a space between the top of the footer and my work?

    Thank you for wanting to help, but I thought about it. The space was due to the fact that the top of the footer does not begin until the end of the height of the page pointed to technical. I thought that the foot has been included in the height of the page.

  • Space between the region of the coast to coast

    Hi friends,

    I have two regions Emp and Dept that contains the report in the region and it is aligned side by side on the page.

    But even if I aligned it side by side, the space between the two regions is less. It is possible to increase the space between the two region to a certain extent so that it will look neat, rather than appear as crowded.

    I have reproduced the same thing in my apex.oracle.com. That's why you can find FYR

    Under enforcement 63081 with application name region alignment on page 1, you can see two region emp and dept report which is aligned side by side.

    I need the spaces between these two regions to increase. Currently there is no any black and white space these two regions.

    Thank you

    Brgds,
    Mini

    Mini wrote:
    Hi friends,

    I have two regions Emp and Dept that contains the report in the region and it is aligned side by side on the page.

    But even if I aligned it side by side, the space between the two regions is less. It is possible to increase the space between the two region to a certain extent so that it will look neat, rather than appear as crowded.

    Under enforcement 63081 with application name region alignment on page 1, you can see two region emp and dept report which is aligned side by side.

    I need the spaces between these two regions to increase. Currently there is no any black and white space these two regions.

    Fix the errors of presentation grid (East of the region of Dept not in column 20) and apply some CSS padding to the cells in the table regionlayout :

    .regionlayout td {
  padding: 0 16px 16px 0;
}

  • How can I fix the space between the bottom of my window and taskbar?

    Recently (today), firefox has had a space between the bottom of the window and my taskbar. I tried the relocation and safe mode, and it does not disappear. Here is a screenshot of the problem. http://imgur.com/mTQtrDN

    Hey guys, I discovered that it was not just firefox, but all the windows with borders, like the windows Explorer. My difficulty was unlock the taskbar and dragging to halfway up, then down.

  • Piano roll Editor: is it possible to eliminate the spaces between the many notes at once?

    Using the step input method, I entered a number of 1/2 notes in the piano roll Editor.

    Then I selected all my notes and decided to shorten all 1/4 notes after realizing that the pace was too slow.

    The problem is that I now have many empty spaces between the notes of 1/4:

    Is it possible to eliminate all the spaces between the notes at once with all selected notes notes?

    Or I have to manually move each 1/4 at the end of the previous note footnote 1/4.

    I think there must be a quicker way to do this.

    Select all under the Edition of the piano roll Editor menu or command button has

    Then enter the end of a single note and all selected notes will also expand.

  • How can I close a space between the lines?

    I typed a promissory note and have extra space between the lines.  How can I close this space?

    Hello

    Click on the "Line spacing" icon in the section 'Paragraph' of the 'Home' tab This icon is the fourth first in the default icon and has a high and arrow down to it.

    Click your setting spacing appropriate line in the list that appears.

    Change the default font size

    http://www.askdavetaylor.com/change_default_font_size_in_wordpad.html

    Windows XP Professional must have a copy of the Works word processor.  It is easier to work with.

    Start > type Works

    Select the word processor from the list

    If it does not, go to C:\\Program Microsoft Works

    Search for MSWorks

    Double-click the file to launch

    The icon looks like this in Windows Vista-

  • How can I remove the black space between the title and the main section of the screen?

    Hello

    I'm a black space between the title and the main screen. I don't want this space.

    How can I remove this space?

    Please help as soon as possible?

    http://www.BlackBerry.com/knowledgecenterpublic/livelink.exe/fetch/2000/348583/800332/800505/800508/...

  • Remove the spaces between the css attributes?

    Hello! I know that I can customize my preferences to 'apply the updated source shaped', but it is automatically added to spacing to the attributes of the tag and I don't see a way to change this in the options I give. I want to write my code without spacing in the attributes. Believe it or not, it is easier on my eyes in this way.

    That's what I prefer:

    whatever {width: 40%; height: 25% ;}}

    If I use source formatting, it does this:

    whatever {width: 40%; height: 25% ;}}

    If I can't change this behavior in the settings, not much, but I want to assure you that I have not just miss.

    Thank you!

    You don't miss anything.  DW uses conventional spaces between the CSS attributes.

    You can shrink your CSS code at the end of the project.  That will remove the spaces and line breaks.

    Nancy O.

Maybe you are looking for

  • Aspire MP3800 overheats during games and stop of monitor only downwards

    Hello. Recently, our office has begun closing the screen while playing games (especially the new graphic high through Steam or even Facebook). The system itself seems to remain on (only stops the screen itself) but you'll have to retart everything to

  • Photosmart premium c309g-m rattling noises and then says "paper jam".

    Print a report and when I try to print another report the sounds of "grinding" printer and says now "paper jam". When the print order is given now just clicks and keeps saying paper jam.  There is no paper jam I can find.  I cleaned the paper rolls,

  • I can eliminate some of my "process"?

    Over time, it seems that the number of processes continues to grow (as I see on the Task Manager) which slows down my computer.  I can't believe that I really need all these processes is running all the time.  How can I know which ones I can disable

  • Snaps to whole pixel (pixel perfect animation)

    Hello!I have the problem. In fact, I always had this problem, but now I have to do 50 different animation of the shape and the problem broke out. It is really difficult to keep clean edges. When "Show grid" turned on and that you try to create the pe

  • Acrobat Pro DC account and try - Rich Media button

    The Properties/Actions of the big tab is missing. Anyone know why? It is perhaps a problem in the trial account. However, this feature is a key factor in the decision of our small businesses to buy the subscription software or not. I not had problems