Margin and Padding question

I think my first responsive website.  Nothing too crazy.  Header, navigation bar, content, footer.  That's all.  However, I can't space them correctly.  I have an image in the header and want the header to be at the exact height of the image.  But the background of the header going slightly below the image. In addition, there is a gap between my header and the bar of navigation in firefox but not safari.  I want to know how to get rid of the interval in all browsers.  I've experimented with margins affecting 0 and/or automatic in several places and padding to 0 in several places, but nothing works. What is the trick? I put a link to the page so you can see what is happening and also to provide my HTML below and lower than CSS.  Thanks for any help!

http://www.jradrocks.com/indexnew

HTML

<! DOCTYPE HTML >

< html >

< head >

< meta charset = "UTF-8" >

< title > J.Rad < / title >

< link type = "text/css" rel = "stylesheet" hand. CSS"/ >

< meta name = "viewport" content = "width = device-width, original scale = 1.0" >

< / head >

< body >

< header > < Center > < img src = ' Background-Images/sick-Fantasy - Banner.png "alt ="Image of the banner"> < / center >

< / header >

< nav >

< ul >

< li > < a href = "#" > < img src = "Images/Background-News.png" alt = "News" > < /a > < /li >

< li > < a href = "#" > < img src = "Background-image/Bio.png" alt = "Bio" > < /a > < /li >

< li > < a href = "#" > < img src = "Background-image/Tour.png" alt = "Tower" > < /a > < /li >

< li > < a href = "#" > < img src = "Background-image/Store.png" alt = "Store" > < /a > < /li >

< li > < a href = "#" > < img src = "Background-Images/Music.png" alt = "Music" > < /a > < /li >

< li > < a href = "#" > < img src = "Background-image/Photos.png" alt = "Photos" > < /a > < /li >

< li > < a href = "#" > < img src = "Background-image/Videos.png" alt = "Vidéos" > < /a > < /li >

< li > < a href = "#" > < img src = "Background-image/Contact.png" alt = "Contact" > < /a > < /li >

< div class = "clearfix" > < / div >

< /ul >

< / nav >

< div id = "container" >

< article id "left column" = >

It's the session of the left for the main content column

< / section >

< id side = "right column" >

It's the right for secondary content column

< / side >

< div class = "clearfix" > < / div >

< / div >

<>footer

< / footer >

< / body >

< / html >

CSS

@charset "UTF-8";

/ * CSS document * /.

{body

height: 100%;

background-attachment: fixed;

background-image: url(Background-Images/Sick-Fantasy-Background.png);

background-position: top center;

background-size: coverage;

margin: 0 0;

padding: 0px;

}

{to header

overflow: auto;

background-size: coverage;

background-image: url(Background-Images/Rust-and-Foamy-Blood-Texture.png);

background-position: center;

margin: 0px;

padding: 0px;

}

{of NAV

background-color: #000;

background-size: coverage;

padding: 0;

margin: 0 0;

}

NAV ul {}

list-style: none;

margin-top: 0;

margin-left: 25px;

padding: 0px;

}

nav li a {}

color: #FFFFFF;

Display: block;

float: left;

padding: 0px;

text-decoration: none;

}

{.clearfix}

Clear: both;

Display: block;

}

NAV a: hover, nav li.active a {}

background-color: #996600;

}

#container {}

Max-width: 960px;

Width: 960px;

margin: auto;

}

{#left-column}

Width: 600px;

float: left;

Background: #0000FF;

}

{#right-column}

Width: 360px;

float: left;

Background: #FF0000;

}

{.clearfix}

Clear: both;

Display: block;

}

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

{#body}

Width: 100%;

}

#header {}

Width: 100%;

}

#container {}

Width: 100%;

}

{#left-column}

Width: 65%;

}

{#right-column}

Width: 35%;

}

IMG {}

Width: 100%;

}

}

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

{#left-column}

Width: 100%;

}

{#right-column}

Width: 100%;

}

}

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

#header {}

Width: 100%;

}

#container {}

Width: 100%;

}

}

The central element is obsolete, so delete it.

Banner Image

Then add the link above for main.css

The first style rule removes all the padding and margins of all the elements. Don't forget to add the padding and margins of these elements that need it such as h1 or p etc.

The second rule of style changes the image of an inline-block to a block element, and adds a margin to auto to Center. A margin of auto normally requires a width property, but the width of the image is used in this case.

There is one more problem in the document, namely

  • http://www.jradrocks.com/Background-Images/Photos.png"alt ="Photos">"

  • http://www.jradrocks.com/Background-Images/Videos.png"alt ="Vidéos">"

  • http://www.jradrocks.com/Background-Images/Contact.png"alt ="Contact">"

    • Div element is not allowed as a child of the ul element in this context.

    Tags: Dreamweaver

    Similar Questions

    • What IS the use of the margin and padding?

      When you create a new Web site, you can set margin and padding. What is this for?

      Hello

      Padding and margin, are CSS properties, check out these links for more details

      Margins: margin CSS

      Padding: CSS Padding

      Hope this helps

    • Margins and padding around image links are clickable. How can I configure only the image as the link?

      I can't not formatting of the links I added to my images. I used css rules to define the layout of my page, the margin using the css rules to dictate most of the layout. I had everything where it needs to be visually, however I have a problem after adding links. Whenever I put an image as a link, the white space around the image that is associated with the margin is also a clickable part of the link. I tried to use padding instead of margin for the page layout, but that was of no help. I want only the image itself to be the link so that the margins between photos in a gallery are not clickable links. How can I do this while maintaining the layout of the page?

      I think that the best way to solve this problem would be to hold each image in a div that is sized appropriately.  Put the margins and padding on the div.  Put the links on images.  The divs must be launched to get them on the same horizontal line.

      Make sense?

    • Margin and padding values

      Hello
      Should we we specifically state the margin and property in EACH selector to fill, even if its value is zero?
      (* I know that if they are not specified, the default values are used and they vary differently browsers browsers.)
      So, how can I simplify the process other than the use of grouped selectors?
      Thanks for any help!

      If you * want * it is zero, then you need to indicate that this is so.

      * {margin: 0; padding: 0 ;}}

      will define the margin/padding to zero on each element of the page.

      --
      Murray - ICQ 71997575
      Adobe Community Expert
      (If you * MUST * write me, don't don't LAUGH when you do!)
      ==================
      http://www.dreamweavermx-templates.com - template Triage!
      http://www.projectseven.com/go - DW FAQs, tutorials & resources
      http://www.dwfaq.com - DW FAQs, tutorials & resources
      http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
      ==================

      "Kit - P" wrote in message
      News:e27p4q$MDI$1@forums. Macromedia.com...
      > Hi,.
      > Should we specifically state the margin and padding property each
      > selector even if its value is zero?
      > (* I know that if they are not specified, the default values will be used and)
      > they
      (> varies differently from browsers browsers.)
      > So, how can I simplify the process other than the use of grouped selectors?
      > Thanks for any help!
      >

    • Cannot set the margins or padding

      Margins and padding don't work for images, forms or anything I can say.

      Can you help me understand how to set the padding and margins?

      Or I have to quickly create with Muse and export to Dreamweaver or Expression?

      Ugh. Well, Muse is not yet provide a mechanism for vertically centering in the browser window, so to realize that you need to be creative with others come. According to your comfort with the coding, the complexity of the page and the frequency that you want to achieve this outcome, the way invites you to create outside of the Muse or you may want to explore creative insert use of HTML, the Page Propertiessection or the creation of a MuCOW widget.

    • painful margins left/padding

      I'll be darn if I can understand why I have these problems of left margin.

      One is in my sidebar div, and that should be obvious:

      < div id = "sidebar" > we have a wide range of houses to bounce

      < / div > <! - ends sidebar - >

      I would like him to have the same left margin as the div above it (not in the HTML code but in Visual page on a desktop computer): < div id = "bouncer" >

      I've been playing with the CSS and cannot move the div to the left.

      In addition, I have a four-column page footer area. The text, it is too far left, as well:

      < div class = "colonne-quatrieme" >

      < div class = "content of the column" >

      < ul >

      Bristol < /li > < li > Bounce House rentals

      Forestville < /li > < li > Bounce House rentals

      Plainville < /li > < li > Bounce House rentals

      Newington < /li > < li > Bounce House rentals

      West Hartford < /li > < li > Bounce House rentals

      East Berlin < /li > < li > Bounce house rentals

      < /ul >

      < / div >

      < / div >

      And I looked at the lists and lists bulleted, all in the style of the leaf and cannot, for the life of me, know the dash.

      Can I get a second pair of eyes?

      The web page is here:

      http://bouncezonect.com/bouncezone.html

      Is the style sheet to http://bouncezonect.com/CSS/main.CSS

      In the HTML code, I don't want to set the bar just below the content div, because on the phones, I want it to appear under this div.

      Thank you!

      -Mark

      Footer:

      UL {margin: 0; padding: 0}

      #sidebar {float: left}

      Nancy O.

    • I recently dropped my laptop and it is weird, one day he int open up to 4 start times and sometimes it shows me a folder and a question mark in the interface and sometimes asked to reset my password, what are the steps to take?

      I recently dropped my laptop and it is weird, one day he int open up to 4 start times and sometimes it shows me a folder and a question mark in the interface and sometimes asked to reset my password, what are the steps to take?

      Anything can be corrupted on your MacBook Pro, but from what you say, it seems that the cable drive/SSD/flash memory/SATA hard was seriously damaged. Him "question mark" means that your Mac is unable to find any bootable device, meaning that it does not yet detect your OS X drive.

      You should make a backup of your files (if you can still do it) and take the Mac at the Apple Store or dealer to get a diagnosis. There may be several damaged parts.

    • OfficeJet 6500 e709: prints w / scale on the left margin and does not print right side of the page

      Prints with a wide margin and does not print the last 2 "or 3" on the right side of the page. This occurs even when the value of the left margin to little or none.

      HP trouble shoot said there is nothing wrong and test page prints fine.  Then back to the problem so try to print.

      HI @philg2,

      I see your thoughts produce a wide margin left and right of the page is cut off. What program are you printing from, and this occurs when you print from all programs or just a particular program?

      I see your post that this is not happening when you print a test page, so I think the problem is somehow related to the driver or program that you use. Let's start with the HP print and Scan Doctor is a free utility (tool) that allows to quickly resolve problems printing, scanning and connectivity, including but not limited to:

      • Connectivity:

        USB: Check that the USB connection from your computer to the HP product works properly.

        Network: Verifies that the network connection between your computer and your network is working properly.

      • Device Status Test: checks the errors of the device, such as paper, paper jams, stands transport and paper issues and provides instructions to resolve the error.

      • Driver: checks the driver missing or corrupt files.

      • Device Manager: check the problems in Device Manager that could prevent printing.

      • Device online: check if the product has been suspended or put in offline and then sets the State back in line if necessary.

      • Print queue: checks and clears pending print jobs in the print queue (a newspaper for printing waiting to print).

      • Port Match: check the port settings for the HP product.

      • Device conflicts: check the conflicts with other drivers, such as the other brands of printers.

      • Ink issues: check the cartridges and the ink levels for issues that affect the print quality.

      • Print settings: check and adjust the print quality settings.

      • Test print: print a test page for the assessment of the print quality and provides options for cleaning and if necessary print head alignment.

      • Scan tests: check the scanning mechanism, drivers, and registry entries.

      Source:try the HP Print and Scan Doctor for Windows

      Click here to download and run the print and Scan Doctor > > www.hp.com/go/tools

      If this does not resolve the problem, after back and let me know if there are all the symbols except the Green checkmarks and what they are next of course. The key is not always easy to identify the key and check mart are in the green circle.

      • If you see only the Green checkmarks (), the tool did not find any problem.

      • If you see green sides (), the utility identified a problem and fix it automatically.

      • If you see yellow exclamation points (), the test failed and requires monitoring of the user, but the step was ignored.

      • If you see a red X (), follow the onscreen instructions to fix the problem.

      Thanks, I look forward to hearing back on your part.

    • How to recover the forgotten password if you have forgotten your password for the alternative account and the question secret

      Hi, I am unable to access my account of * address email is removed from the privacy *. I really need to return as soon as possible because I have a lot of important issues and contacts inside...

      Thank you!

      View all Windows Live and Hotmail questions in the appropriate forum found here:
      http://windowslivehelp.com/

    • Kindly unblock my account that I don't remember my email and Security Question.

      Kindly unblock my account that I don't remember my email and Security Question.

      I received important emails in the account. He has been blocked it for a month now.

      Kindly unblock as soon as POSSIBLE.

      I'll be very grateful.

      Thank you.

      Hello

      If you are referring to a Hotmail account, read this

      I'm sorry, but we cannot help with hotmail problems in Microsoft answers Feedback Forum you send to

      Please repost your question in hotmail in the hotmail link below forums

      http://windowslivehelp.com/product.aspx?ProductID=1

    • I forgot my password and secret question

      I firgot my password and my question secret, help me please

      Hi TUNCAYTUNCAY,

      ·          You are Ref Err by Windows password or password any program?

      See the link below to learn more about Microsoft support for forgotten passwords.

      http://answers.Microsoft.com/en-us/Windows/Forum/windows_xp-security/keeping-passwords-secure-Microsoft-policy-on/024dd682-b3a4-4EA8-8E71-8e4892092a5e

    • WinXPsysytem: The upgrade and have questions

      Have a dell e521 that I train and some questions.  Have already updated to 3 GB of memory on x 86 operating system.  Bios version active what 1.1.6 4/7/2007.  Have checked Dells site and they offer a version of bios 1.1.11 released on 04/09/2007.  Having checked their previous versions and mine is not yet in there.  Don't know if I should go with the 1.1.11 version or stick with what is on mine, any suggestions?  Also, I put in a 500 GB seagate HDD.  Have a 80 GB drive there now which is pretty maxed out.  Playing with the idea to put xp pro on the 80 GB and using the programs and storage 500 GB.  I would like to know if it's a good idea or not!  Could use pointers and how much others who have more experience I have of course on my best options for installation.  for performance and features.  Thank you in advance, Ron.

      It's sad to say, you should probably have spent your money on a new computer rather than on the RAM and a new hard drive.  Windows XP (you posted in a forum of Windows XP, that's what I assume you have) will be supported is no longer starting in April 2014. This means no more security updates and therefore increases the vulnerability to malware.

      That said, your system now-updated can probably support Windows 7. You must run the Windows 7 Upgrade Advisor to check the remaining material.

      As you say, Dell does not list the intervening versions of BIOS with 1.1.4, 1.1.10, so unless someone at Dell or in the Dell forums can tell you what "improvements" in your version or with your version 1.1.10, you have no way of determining that. Based on omissions, I think there were only minor changes in these versions.

      Normally, I would leave the BIOS alone.  Note, however, that Dell "recommends" 1.1.10 be installed because
      The update contains improvements or changes that will keep your system current and compatible with other system modules (firmware, BIOS, drivers and software) software.
      If you want to stick with XP, I would leave the BIOS alone. If you want to install Windows 7 (assuming that there are Windows 7 drivers for all your hardware), I would Setup 1.1.11.  Be sure to read and follow instructions carefully.

      BTW, it's a little surprising that you only have a 80 GB drive.  CNET review of the Dimension E521 said he came with a 320 GB drive.

    • How can I change my HTTPS thing, so it isn't always pop up and ask questions about the sites Web secure when I play some games?

      Feel free to change the title

      How can I change my HTTPS thing, so it isn't always pop up and ask questions about the sites Web secure when I play some games?

      You're talking about Facebook?

      Try the gyration of the Secure Browsing

      http://www.Facebook.com/help?page=1079

    • How do you get access to your computer when you forgot your password and hint question

      My mother did not use his computer for a while and forgot his password and hint question. Is there anyway to get into the computer without them? She has a Toshiba laptop with Windows Vista installed on it.  Thank you.

      Hello

      I'm sorry, but the strategy of microsoft in these forums is that without assistance will be given about lost or forgotten passwords

      read the policy at the link below

      http://answers.Microsoft.com/en-us/Windows/Forum/windows_vista-security/keeping-passwords-secure-Microsoft-policy-on/a5839e41-b80e-48c9-9d46-414bc8a8d9d4

      I suggest you reinstall vista

    • Drag and drop question - Desktop and USB

      Hello!!

      I have an Asus laptop that I bought in September with Windows 8 is installed. I saw drag and drop questions on desktop lately, and I'll provide you with a full run down of what past:

      1. this particular case, I wanted to save my mobile by copying and pasting all the files from my phone to a USB (USB Kingston).

      2. I selected all files, right click to copy, open the folder that I made in the USB for my phone content and do a right-click Paste.

      3. nothing's happened, Explorer seems to have frozen, so I opened the Task Manager and press end task, all closed and restarted my laptop.

      4. I have excluded that my phone was the issue. I was able to create a folder on my desktop and copy and paste all of the content of my phone in the folder on my desktop.

      5. I tried to copy and paste / drag and drop an image from my office to the flash drive. Explorer Windows freezes on the rise again.

      6. I tried another flash drive. Explorer Windows froze again.

      Apparently I'm unable to copy files ON a USB key, which makes the backup and backup of things a headache because Windows Explorer stops working every time.

      I am the only user of this laptop, and I don't know what is happening or what to do. Any help would be appreciated. Windows 8.1 upgrade would solve this problem?

      Hi Karthik,

      1. There is no error message.

      2. I tried earlier drag - move my documents to my flash drive and it works perfectly.

      I just tried again to drag and drop from my office to my flash drive and for some reason, it works again.

      I don't think that was with my flash drives, but with Windows Explorer itself. Nevertheless, it seems to have fixed itself somehow. Thank you very much for your help!

    Maybe you are looking for

    • Cannot find sent email

      I downloaded the program. I am asked to give my e-mail address. I enter my email address, but do not get a confirmation email from back. However, now that I went to this Help Center, I was able to create an account, so I can now be able to complete t

    • Locate the specific E-mail mailbox

      Hello: I can look for a specific mailbox, by defining as mailbox search test, followed by the name of mailbox. This translates to a list of emails in this mailbox. But I can not locate this mailbox, in order to add new e-mail messages to it. Help, pl

    • Updated bios bad Thnikpad T510

      I run the windows bios update application and go further for the same time, when I get back computers was stacked with big THINKPAD bios image, I have rebooted but nothing still stuck on THINKPAD, I can go change bios and records everything, blue but

    • Layout error for Sony Picture Package even after the installation of Adobe Flash Player.

      When trying to open Sony Picture Package-message says need to install Macromedia Flash Player.  After you download Adobe Flash Player - always get the same message.

    • Dynamic content of ListItem

      Hello! I have a listview with messages. Each message is the text (body) and attachments (Images, videos, links etc.). To display the body I use 'ListItemData.body '. But what is the best way to view attachments (it is an array of types and links?) I