Sidebar not flush with top border

I am brand new to web design and DW.  I can't figure out how to bring my left sidebar flush with the header of the page.  I am following along in the DW-CS6 Class in a book.  Here is the code.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
          background-color: #FFF;
          margin: 0;
          padding: 0;
          color: #000;
          font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
          font-size: 100%;
          line-height: 1.4;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
          padding: 0;
          margin: 0;
h1, h2, h3, h4, h5, h6, p {
          margin-top: 0;           /* removing the top margin gets around an issue where margins can escape from their containing block. The remaining bottom margin will hold it away from any elements that follow. */
          padding-right: 15px;
          padding-left: 15px; /* adding the padding to the sides of the elements within the blocks, instead of the block elements themselves, gets rid of any box model math. A nested block with side padding can also be used as an alternate method. */
.sidebar1 aside {
          font-size: 90%;
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
          border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
          color: #42413C;
          text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
          color: #6E6C64;
          text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
          text-decoration: none;
/* ~~ This fixed width container surrounds all other blocks ~~ */
.container {
          width: 950px;
          background-color: #FFFFFF;
          margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
          border: 2px solid #060;
#logo {
          position: absolute;
          width: 170px;
          height: 158px;
          z-index: 1;
          margin-top: 10px;
          margin-left: 30px;
/* ~~ The header is not given a width. It will extend the full width of your layout. ~~ */
header {
          background-color: #090;
          background-image: url(images/banner.jpg);
          background-repeat: no-repeat;
          height: 130px;
/* ~~ These are the columns for the layout. ~~
1) Padding is only placed on the top and/or bottom of the block elements. The elements within these blocks have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the block itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the block element and place a second block element within it with no width and the padding necessary for your design.
2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a block set to float right). Many times, padding can be used instead. For blocks where this rule must be broken, you should add a "display:inline" declaration to the block element's rule to tame a bug where some versions of Internet Explorer double the margin.
3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar blocks could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
4) If you prefer your nav on the left instead of the right, simply float these columns the opposite direction (all left instead of all right) and they'll render in reverse order. There's no need to move the blocks around in the HTML source.
.sidebar1 {
          float: left;
          width: 180px;
          background-color: #EADCAE;
          padding-bottom: 10px;
.content {
          padding: 10px 0;
          width: 770px;
          float: right;
.content h1 {
          font-size: 200%;
          margin-top: 10px;
          margin-bottom: 5px;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
          padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
nav p {
          font-size: 90%;
          font-weight: bold;
          color: #FFC;
          background-color: #090;
          text-align: right;
          padding-top: 5px;
          padding-right: 20px;
          padding-bottom: 5px;
          border-bottom-width: 2px;
          border-bottom-style: solid;
          border-bottom-color: #060;
          background-image: url(images/background.png);
          background-repeat: repeat-x;
nav p a:link, nav p a:visited {
          text-decoration: none;
          color: #FFC;
          padding: 5px;
nav p a:hover, nav p a:active {
          color: #FFF;
          background-color: #060;
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
          list-style: none; /* this removes the list marker */
          border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
          margin-bottom: 15px; /* this creates the space between the navigation on the content below */
ul.nav li {
          border-top-width: 1px;
          border-right-width: 1px;
          border-bottom-width: 1px;
          border-left-width: 1px;
          border-top-style: solid;
          border-right-style: solid;
          border-bottom-style: solid;
          border-left-style: solid;
          border-top-color: #0C0;
          border-right-color: #060;
          border-bottom-color: #060;
          border-left-color: #0C0;
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
          padding: 5px 5px 5px 15px;
          display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
          width: 160px;  /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
          text-decoration: none;
          background-color: #090;
          color: #FFC;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
          background-color: #060;
          color: #FFF;
/* ~~ The footer ~~ */
footer {
          padding: 10px 0;
          background-color: #090;
          position: relative;/* this gives IE6 hasLayout to properly clear */
          clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
          font-size: 90%;
          color: #FFC;
          background-image: url(images/background.png);
          background-repeat: repeat-x;
/*HTML 5 support - Sets new HTML 5 tags to display:block so browsers know how to render the tags properly. */
header, section, footer, aside, article, figure {
          display: block;
.green {
          color: #090;
-->
</style><!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--></head>
<body>
<div class="container">
  <div class="green" id="logo"><img src="images/butterfly-ovr.png" width="170" height="158" alt="GreenStart Logo"></div>
  <header></header>
  <nav>
    <p><a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">Contact Us</a></p>
  </nav>
  <div class="sidebar1">
    <ul class="nav">
      <li><a href="#">Green News</a></li>
      <li><a href="#">Green Products</a></li>
      <li><a href="#">Green Events</a></li>
      <li><a href="#">Green Travel</a></li>
      <li><a href="#">Green Tips</a></li>
    </ul>
    <aside>
      <img name="Sidebar" src="" width="180" height="150" alt="">
      <p>Insert caption here</p>
    </aside>
  <!-- end .sidebar1 --></div>
  <article class="content">
    <h1>Insert main heading here</h1>
    <section>
     <h2>Insert subheading here</h2>
      <p>Insert content here</p>
    </section>
    <!-- end .content --></article>
  <footer>
    <p>Copyright 2012 Meridien GreenStart.  All rights reserved.</p>
    <address>
      Address Content
    </address>
  </footer>
  <!-- end .container --></div>
</body>
</html>
Any help would be greatly appreciated.

Add this to the end of your nav p CSS selector at Line 209 of your HTML file, after 'background-repeat...':
margin-bottom: -2px;
Your nav p will then look like this:
nav p {
          font-size: 90%;
          font-weight: bold;
          color: #FFC;
          background-color: #090;
          text-align: right;
          padding-top: 5px;
          padding-right: 20px;
          padding-bottom: 5px;
          border-bottom-width: 2px;
          border-bottom-style: solid;
          border-bottom-color: #060;
          background-image: url(images/background.png);
          background-repeat: repeat-x;
          margin-bottom: -2px;

Similar Messages

  • Sidebar not flush in IE

    Hello,
    Thanks so much for your help in advance. I am building a Web
    site and both my banner and my sidebar are library items. On the
    Mac, in Safari and Firefox, the sidebar is flush with the banner,
    like I want it. But in IE on a PC, there is a space between the
    banner and the sidebar. Can someone tell me how to fix this? Any
    ideas you can give me will be much appreciated.
    the page:
    http://medillcherubs.org/2008/index.html

    Add this to the end of your nav p CSS selector at Line 209 of your HTML file, after 'background-repeat...':
    margin-bottom: -2px;
    Your nav p will then look like this:
    nav p {
              font-size: 90%;
              font-weight: bold;
              color: #FFC;
              background-color: #090;
              text-align: right;
              padding-top: 5px;
              padding-right: 20px;
              padding-bottom: 5px;
              border-bottom-width: 2px;
              border-bottom-style: solid;
              border-bottom-color: #060;
              background-image: url(images/background.png);
              background-repeat: repeat-x;
              margin-bottom: -2px;

  • Web Analysis report is not coming with the border/logo/heading while print

    Hi All,
    I am using 9.3.1 version of hyperion planning were Web Analysis report is not coming with the border/logo/heading while printing with the option "print all object", Only the data grid is coming in the print. If I use "print screen" it is coming with border/logo/heading but it gives a screenshot of the report, that won't cater out need.
    So please suggest us with a resolution to have border, logo and heading, while using Print all object.
    Thanks with regards....
    Rao

    Hi Sagar,
    In scripts when you will see print preview the logo will be not shown up with clarity.Take the print out of the document and check whether logo is printing up with clarity.
    Thanks
    Phani

  • Glass Not Flush With Bezel On All Sides

    Like the battery in My MacBook, the glass panel on the front of my iPhone is not Flush with both sides of the bezel. On the right side it meets perfectly smooth with the edge, on the left side it dips slightly creating a little lip with the bezel. It's not huge, but it's there.
    Just wondering if this is typical of iPhone construction or if I need to take it into an Apple Store for a swap. Like I said, I see it in almost every MacBook I've seen, but then the battery is designed to be removable and one would expect it to be an imperfect fit. The iPhone is a sealed enclosure with no user accessible parts. I realize no manufacturing process is perfect, but is this something I should even try to get Apple will likely to replace or is it like the stuck pixel LCD problem of the past?

    It's defective. Take it back.
    I have both a macbook and a iPhone, both perfect.

  • IPhone 5s top glass not flush with chrome bezel?

    So I was recently rubbing my iphone screen clean with a microfiber cloth when I noticed there was some white dust / lint on the top of the screen where the glass meets the bezel that simply won't rub off. Upon closer inspection the "white lint" I'm seeing is not lint / dust at all, it is the edge of the glass part being raised above the chrome bezel, and instead of being black or transparent it is white. When I look at the top part edge on (like looking down directly at the lock button) it appears that the front part of the screen is raised up ever so slightly. If I apply pressure on this raised part it goes down like it should and is 100% flush like in the product images on the official apple iphone site, but as soon as I release it comes back up again. It's a really minor cosmetic issue right now, but I'm concerned about down the line, like a thread getting snagged in the tiny elevated part and pulling the screen to be more separated. Or maybe over time the separation will increase on its own?
    Other than that (and my loose rattling lock button, which I've learned to live with since all the ones on display at my local apple store also have rattling lock buttons) the phone is flawless. Would apple be able to re-seat the screen to fix this issue? Or if I showed them this would they just want to offer a replacement? I am definitely not pleased with this very minor defect, but not sure what to do. The fact that the screen is raised doesn't bother me, it's that it looks like white dust / lint because is stuck in there where it is raised that bothers me.
    Thanks for your replies

    I went in, genius noted that the display glass was separating, and replaced it on the spot. Support like this is why I keep buying apple products. Thank you apple!
    Message was edited by: CharlesEnglish - grammar

  • I created a Pages document inserting 2 columns using 1) Inspector 2) Layout 3) columns.  How do I decrease the height of the column.  Have tried to use cursor and drag down the top border, but that does not reset the top border.

    I created a Pages document inserting 2 columns using 1) Inspector 2) Layout 3) columns.  How do I decrease the height of the column.  Have tried to use the cursor and drag down the top border, but that does not reset/decrease the top border.

    Set your columns back to one for the moment. In layout mode, insert a Text box. Place it in the upper left corner of your document, and drag down and right to the size of the container for your two columns. Click inside the Text Box, and now bump up your columns to 2. Your two columns are now contained in this resizable Text Box.

  • Safari will not open with top sights.

    I like Safari to launch with top sights.  No matter what I do in preferences, Safari 5.1 always opens with the last page I visited.  This is usually a search I no longer need.  The only time Safari launches with top sights is if I close all windows before exiting Safari.  How can I get Safari 5.1 to launch with top sights?

    Go to System Preferences - General
    Deselect:  Restore windows when quitting and re opening apps
    http://www.macrumors.com/2011/07/20/how-to-disable-lions-resume-feature/

  • Sidebar not connected with Kerberos after upgrade 10.5.2

    before upgrade 10.5.2 with sidebar finder i could connected at xserve with kerberos AFP, after upgrade not possible connected sidebar with kerberos only use connected the server in the menu bar finder.
    where it is problem
    TANKS

    You are not alone, I have seen the same issue.
    If however I click on the "all .." option in the sidebar, and then on the server name from the subsequent list it works for me.
    Weird
    Dave

  • T440s lid not flush with body

    Hi Everyone
    I just received my T440s and the first thing I noticed when I looked at the front of the machine with the lid closed is that the rubber gasket only touches in the corners.  There is an increasingly large gap between the lid gasket and the body of the machine as you move towards the centre of the machine.  I laid a straight edge on the top of the lid and sure enough the lid is bowed.  Similarly i laid the straight edge across the edge of the palm rest with the lid up and it also is bowed (in the opposite direction of the lid).  The gap is quite significant (image below).  Is the machine designed this way or is it a build quality issue?  Either way, I'm not happy about it and will likely return the machine.
    Thanks
    Link to Pic
    Converted pic to link per Forum Rule:  About Posting Pictures In the Forum
    Solved!
    Go to Solution.

    Yeah the last time they tried this everyone thought it was a defect. Arches are better at supporting weight, so it's almost a strictly better design than not.
    W520: i7-2720QM, Q2000M at 1080/688/1376, 21GB RAM, 500GB + 750GB HDD, FHD screen
    X61T: L7500, 3GB RAM, 500GB HDD, XGA screen, Ultrabase
    Y3P: 5Y70, 8GB RAM, 256GB SSD, QHD+ screen

  • Shift not working with top and bottom rows of keys

    I have an odd thing happening with my Macbook. I tried making a new account, but that didn't fix it. The problem is that when typing, the top rows of keys QWERTYUIOP and the bottom row of letters ZXCVBNM don't type anything when you combine them with the shift key. I'm not sure what happened to cause this or what to do to troubleshoot it. Any ideas would be appreciated.

    Any time that you force Windows to stop instead of letting it shut down normally (sometimes you have to shut it off), you may have lost clusters of data that interfere with the proper operation of Windows. So I suggest you start up and run scandisk and make sure you check the box for fixing problems. The other box doesn't need to be checked unless you suspect bad sectors on the hard drive and it takes a long time so I recommend only checking the one box for finding and fixing errors.
    Let us know if this worked and the problem is fixed.
    Good luck.

  • Screen not flush with bezzle,quick question...

    Hey guys I have a quick question,ok so I just visited a apple store and recieved a new/referb. iPhone 3gs because of dust under the screen and noticed that the replacement phones bezzle and screen isn't flush and was wondering if i could bring the new phone in for a replacement phone with a flush screen? It's not realy a big issue but the first iPhone 3gs I had didn't have this problem.
    Also has anyone had any experiences with this issue?
    Thanks for your time and your help,
    Noah
    Message was edited by: Mr.Noah Renfrow
    Message was edited by: Mr.Noah Renfrow

    the 3GS is known for that. you should be able to return it.

  • Finder sidebar not updating with applications open/save dialog boxes

    Hi all,
    I've searched the threads and can't seem to find an answer to this recurring issue that I'm having.
    I save folders to current projects in the Finder sidebar. However, I find that when I try to find those sidebar folders from within the open/save dialog applications that it is often times and old version of the sidebar. In the image linked below note the Finder sidebar on the left and the InDesign CS sidebar on the right. The list of folders is different. The version via InDesign seems to be an older cached version.
    Screen capture: http://www.fabianross.com/forum-images/screen-capture.png
    Does anyone know how to update this cached version to see the new list of folders?
    Thanks,
    Jerry

    Try deleting this file: com.apple.sidebarlists.plist
    /Users/YourName/Library/Preferences. Drag that file from the Preferences folder to the Trash, empty the Trash and reboot. See if that helps...
    Seems to me that Adobe is very picky about where the files are kept on the hard drive. You might not want them in the Sidebar. Whenever you do an Adobe software update, the installer needs the path to where those files go. If it's missing in action, it can wreak havoc.
    Make sure when you do Adobe updates, if there is a link included or a Read Me file, check that out first before installing anything.
    Run Disk Utility and Repair Disk Permissions BEFORE and AFTER any software updates:
    Launch Disk Utility. Select MacintoshHD in the panel on the left, select FirstAid, then click: Repair Disk Permissions. Quit DU when it's finished and reboot.
    Carolyn

  • Chrome ring not flush with plastic back

    Hi, any others having the problem that the chrome ring is nog flush/aligned with the plastic back of the iPhone ? Annoying to feel this kinda sharp edge when holding it. Will Apple fix this under the warranty ?
    Thanks,
    Jan

    I received one in that condition -- very sharp plastic edge you could probably shave with. Because I had handled over 40 iPhone orders at my business and knew this wasn't normal, I refused it in the store and they swapped it on the spot.

  • Display not flush with the case

    Hi,
    I just got my brand new macbook pro 15"...
    I notice the the display on the hinge side...the left and right don't have equal amount of gap between the display and the case. The difference is quite noticeable.
    Also when looking from DVD-ROM side, the display and the case are perfectly flush but from the ports side, the gap is larger on the hinge side than the front.
    Is this normal?

    A new machine should be perfect out of the box. Take it to an Apple Store.
    Message was edited by: macbig

  • Iphone 3gs screen not flush

    My new Iphone 3gs has a problem where the top right hand side glass is not flush with metal bezel leaving a quite rough and sharp metal corner.Is the normal? im not thinking so as my 3g was flush all the way around.Im have also noticed the screen is slightly dipped on one side and not straight.I cant go back to the phone shop where i signed up its not close to where i live or work.Will i be able to arrange to get this fixed or replaced at the apple store in the city where i work ?
    Im actually not happy to let my neice play with the phone games as it is rather sharp.

    Maciej Karcz wrote:
    The right side on my 3GS is also a little higher than the left. I have read about a few other instances of this on the 3GS. It's not a problem for me since I keep my phone in a Griffin Clarifi case. Since the uneven lip seems to occur occasionally with the 3GS, replacing for a new one is no guarantee that it will be any better. I recommend just getting a case for the phone, it will keep the phone safe and your niece safe too.
    Mine is in a case, too. I did remove it and found no noticeable difference, right to left. I agree that a case is the best way to go .. with or without any cosmetic flaws in the iPhone.
    Phil

Maybe you are looking for

  • Trouble Connecting MacBook to Netgear WGT624

    Hello, I just got a MacBook and am having trouble connecting to my netgear WGT624 wireless router. We've had the router for some time with a PC connected via ethernet. This is the first time trying to connect wirelessly. I click on System Preferences

  • To get the value in a field based on lov selection of another field.......

    Hi all, I have a requirement where i need to select a LOV value and based on that value the field next to it should be generated...... in brief suppose i have a field name EMPLOYEE NO as lov........ as i select the employee number the field next to i

  • Preparing for clean reinstall

    I want to backup data and download OS to have a fresh system. I'm aware that I need to back up docs, etc, but wondering if there are system things I must attend to. (Or to which I must attend if you are one of thos snoonty Englsh majors) Ha. Thanks f

  • Doubt in Table Function?

    Hi, I created a Table funtion. Its working fine. After processing every record, I am piping the record. Can we pipe bulk records (for ex: 50 records) ? Is there any advantange in pefromance? Thanks in advance. Thank you, Regards, Gowtham Sen

  • I'm gettin a syntax

    whats wrong with this insert statement String insert = ("INSERT INTO reservations (depart, arrive, date, time, cus_num) VALUES ('"+depart+"','"+arrive+"', '"+date+"', '"+time+"', '"+getcusid+"');"); it just says syntax error in sql