Eliminating the top padding of a Div tag

Similar Questions

• The difficulty to position a div tag... help!

  Hello

  I can't post a div tag It is with the 3n1 inside logo label. All the other div tags move with a fluid page while this div glue right there in a way that is not elastic. It is created in the same way as the others are. I don't understand! Help, please!

  http://www.kathrynswezydesign.NET/KSwezy_local%20root%20NEW/3n1band.html

  I can't post a div tag It is with the 3n1 inside logo label. All the other div tags move with a fluid page while this div glue right there in a way that is not elastic. It is created in the same way as the others are. I don't understand! Help, please!

  Although it is one absolute positioning like others, his behavior is dictated by its unique position in the code.

  It's the only div outside the div container - which means its parent container is theTag, which means that it moves with the window of the browser.

  It must be inside of the

  who is positioned. Then, it will be constrained by the div container, not the body tag and moves compared to others the divs.

  Change

  
  
  
  
  
  

  TO

  
  
  
  
  

  You will also need to adapt the left coordinate of the div logo to visually match the Interior of the container

  Something like

  {#logoimage}
  height: 198px;
  Width: 192px;
  position: absolute;
  left: 750px; / * adjust according to * /.
  top: 335px;
  }

• How to position spry ToolTip with a div instead of the top left of the page

  I changed the java script to a spry leading position of tool in the top left of my page.  I need to be placed in a position defined by the top left of a div instead, so it always appears in the same place regardless of the size of the screen or browser.  Any ideas?  That's what I changed to get the default value of positioning of the cursor position:

  Change SpryTooltip.js line 211:

  From:

  Spry.Widget.Utils.putElementAt (this.tooltipElement, this.pos, {x: this.offsetX, y: this.offsetY}, true);

  TO:

  Spry.Widget.Utils.putElementAt (this.tooltipElement, {x: this.offsetX, y: this.offsetY}, true);

  This does not take into account the position of the mouse and uses only shifts to set the fixed position...

  Here is a link to what I'm working on.  The forklift upper center is the element that so far, I've built that has the ToolTip overview.

  http://fallswayrents.com/indexHover.html

  Thank you!  Mike

  Line 65 of the HTML:

  $('.tooltip').hover (function () {}

  who to change:

  {$('.tooltip__#topcenter__').hover (function ()}

  As all the info-bubbles-containers have a class .tooltip, the previous code displays the 2 other ToolTips too since we did not have a defined tag.

• How Center any page in the web browser and make the tag div main to kiss the top of the page?

  Okay, so I got in trouble with a couple of things. One, when I look at the my page in live view, it is perfectly centered, but when I open in a web browser, it is on the left of the page. Two, I can not get the main div to kiss the top of the page. Here is the code, so I hope someone can help out me. = P

  < ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > ""

  " < html xmlns =" http://www.w3.org/1999/xhtml ">

  < head >

  < meta http-equiv = "Content-Type" content = text/html"; Charset = UTF-8 "/ >"

  < title > sheet of copper through < /title >

  < style type = "text/css" >

  .main {}

  Width: 980px;

  }

  {.bannerarea}

  height: 200px;

  Width: 950px;

  }

  < / style >

  < style type = "text/css" >

  {#apDiv1}

  position: absolute;

  Width: 200px;

  height: 115px;

  z-index: 1;

  left: 74px;

  }

  {#apDiv2}

  position: absolute;

  Width: 360px;

  height: 226px;

  z-index: 1;

  left: 95px;

  top: 136px;

  }

  {#apDiv3}

  position: absolute;

  Width: 445px;

  height: 297px;

  z-index: 1;

  left: 519px;

  top: 299px;

  }

  < / style >

  < link href = "CLC/CLC.css" rel = "stylesheet" type = "text/css" / > "

  < style type = "text/css" >

  {#apDiv4}

  position: absolute;

  Width: 447px;

  height: 300px;

  z-index: 2;

  left: 517px;

  top: 628px;

  }

  {#apDiv5}

  position: absolute;

  Width: 479px;

  height: 292px;

  z index: 3;

  left: 33px;

  top: 291px;

  }

  {#apDiv6}

  position: absolute;

  Width: 950px;

  height: 242px;

  z index: 4;

  }

  {#apDiv7}

  position: absolute;

  Width: 480px;

  height: 300px;

  z-index: 5;

  left: 34px;

  top: 627px;

  }

  < / style >

  < / head >

  < body >

  < div class = 'hand' >

  < div id = "apDiv6" > < img src = "CLC/features" width = "950" height = "250" alt = "BanniΦre" / > < / div > "

  < p > < / p >

  < p > < / p >

  < div class = "text" >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < div id = "apDiv5" >

  < h3 > < strong > copper crossing sheet < facilities > is an acre 23 complex dedicated to the care of animals. We have created a warm and friendly destination for lovers of pets. Weather you have a cat or Canary, a dog or a frog, we can help you take care of your pet. On campus, you will find: < / h3 >

  < p > < a href = "f" > < strong > Animal Kingdom Veterinary Hospital < facilities > < /a > - their staff compassionate and is specialized in the care of domestic and exotic animals. < /p > medical

  < p > < a href = "f" > < strong > Comfort Bed & amp; Bath < facilities > < /a > a great pet pension for dogs, cats, birds, reptiles and small mammals which also offers grooming of animals. < /p >

  < p > < a href = "thereatureconservancy.org" > < strong > The Creature Conservancy < facilities > < /a > - an organization non-profit unique offering various educational programs with exotic animals, summer camps, visits and a variety of animals on display. "" < /p >

  < p > < strong > < a href = "f" > dogwood Veterinary Referral Center < /a > < / strong >-a centerthat one full service surgery and Imaging provides exceptional care for pets with neurological problems. < /p >

  < / div >

  < p > < / p >

  < p > < / p >

  < p >

  < div id = "apDiv4" >

  " < iframe width ="444"height ="250"frameborder ="0"scrolling =" "marginheight ="0"marginWidth ="0"src =" http://maps.google.com/maps?f=q & source = s_q & hl = in & geocode = & q = 4940 + ann + rd + ann arbor-saline + + a ROOR + MID + 48103 & aq = & sll = 42.250821, - 83.756397 & DPA = 0.004813, 0.008476 & ie = UTF8 & hq = & hnear = 4940 + nn + Arbor-saline + Rd, + Ann + tree + Charter + canton + Michigan + 48108 & he's = 42.21421, - 83.797332 & spn = 0.004815,0.008476 & t = h & z = 14 & output = embed "> < / iframe > .

  < p > 4940 Ann Arbor Saline RD Ann Arbor MI 48103 < /p >

  < / div >

  < br / >

  < p > < / p >

  < / blockquote >

  < / div >

  < p > < / p >

  < blockquote >

  < p > < / p >

  < blockquote >

  < p > < / p >

  < / blockquote >

  < / blockquote >

  < div id = "apDiv3" > < img src = "CLC/arialCLC.jpg" width = "444" height = "300" / > < / div > "

  < p > < / p >

  "< div id ="apDiv7"> < img src ="... / downloads/copy of PICT0029. Width of "JPG" = "444" height = "300" / > < / div > "

  < / div >

  < / body >

  < / html >

  Thank you! (The site is not live yet, it's that I would have just posted the URL.)

  Add:

  .main {}

  Width: 980px;

  Auto margin: 0;

  position: relative;
  

  }

• Responsive Design - Show and hide the div tags

  Hello

  I am building a website using sensitive design. I want a certain div tag to be read on a desktop and a tablet but then to disappear and a different div be made visible on the mobile device.

  I realized the above with the code below, but I found a problem. The problem I found is that the div is hidden here still an empty space remains there then it creates a large empty space. Anyway is to hide this great space?

  (mobile)

  {#tab-container}

  display: none;

  visibility: hidden;

  Clear: both;

  float: none;

  left margin: 0;

  Width: 96%;

  display: block;

  margin-right: auto;

  left margin: auto;

  padding-top: 10px;

  padding-bottom: 10px;

  text-align: center;

  border-top-width: 1px;

  border-bottom-width: 1px;

  border-top-style: solid;

  border-bottom-style: solid;

  border-bottom-color: #000;

  border-bottom-color: #000;

  }

  {#phone-tabs}

  display: block;

  visibility: visible;

  Clear: both;

  float: none;

  left margin: 0;

  Width: 96%;

  display: block;

  margin-right: auto;

  left margin: auto;

  padding-top: 10px;

  padding-bottom: 10px;

  text-align: center;

  border-top-width: 1px;

  border-bottom-width: 1px;

  border-top-style: solid;

  border-bottom-style: solid;

  border-bottom-color: #000;

  border-bottom-color: #000;

  line-height: 30px;

  }

  (Tablet)

  {#tab-container}

  display: block;

  visibility: visible;

  Clear: both;

  float: none;

  left margin: 0;

  Width: 96%;

  display: block;

  margin-right: auto;

  left margin: auto;

  padding-top: 10px;

  padding-bottom: 10px;

  text-align: center;

  border-top-width: 1px;

  border-bottom-width: 1px;

  border-top-style: solid;

  border-bottom-style: solid;

  border-bottom-color: #000;

  border-bottom-color: #000;

  }

  {#phone-tabs}

  display: none;

  visibility: hidden;

  Clear: both;

  float: none;

  left margin: 0;

  Width: 96%;

  display: block;

  margin-right: auto;

  left margin: auto;

  padding-top: 10px;

  padding-bottom: 10px;

  text-align: center;

  border-top-width: 1px;

  border-bottom-width: 1px;

  border-top-style: solid;

  border-bottom-style: solid;

  border-bottom-color: #000;

  border-bottom-color: #000;

  }

  (office)

  {#tab-container}

  display: block;

  visibility: visible;

  Clear: both;

  float: none;

  left margin: 0;

  Width: 70%;

  display: block;

  margin-right: auto;

  left margin: auto;

  padding-top: 10px;

  padding-bottom: 10px;

  text-align: center;

  border-top-width: 1px;

  border-bottom-width: 1px;

  border-top-style: solid;

  border-bottom-style: solid;

  border-bottom-color: #000;

  border-bottom-color: #000;

  }

  {#phone-tabs}

  display: none;

  visibility: hidden;

  Clear: both;

  float: none;

  left margin: 0;

  Width: 70%;

  display: block;

  margin-right: auto;

  left margin: auto;

  padding-top: 0px;

  padding-bottom: 0px;

  text-align: center;

  border-top-width: 0px;

  border-bottom-width: 0px;

  border-top-style: solid;

  border-bottom-style: solid;

  border-bottom-color: #000;

  border-bottom-color: #000;

  }

  Thanks for your help!

  Alex

  Try to delete the two lines, as shown below.

  Display: block overrides display: no because it is further down in the code.

  For this reason, visibility: hidden comes into play. This statement is exactly intended to hide the contents, while leaving the blank space.

  Edit: I think that really is all you need:

  {#tab-container}

  display: none;

  }

  (mobile)

  {#tab-container}

  display: none;

  visibility: hidden;

  Clear: both;

  float: none;

  left margin: 0;

  Width: 96%;

  display: block;

  margin-right: auto;

  left margin: auto;

  padding-top: 10px;

  padding-bottom: 10px;

  text-align: center;

  border-top-width: 1px;

  border-bottom-width: 1px;

  border-top-style: solid;

  border-bottom-style: solid;

  border-bottom-color: #000;

  border-bottom-color: #000;

• Hide the div tags in the media queries

  Hello

  I ran into a bit of a problem trying to get some div tags appear on some devices. I thought that if a div has been set to hidden then it does not appear. I pasted my code below.

  The theory behind my design is to have a different fixed background on the desktop image, Tablet and phone. So I inserted a transparent image on top to control how image is seen on each window.

  "What I try to achieve is when the site is displayed on a desktop ' #large-ipad" is hidden and the ' #-wide image' is seen. "" And then once the site reaches the correct display window i.e. an ipad ' #large-ipad ' becomes visible and the ' #-wide image "is hidden. Then a third image will swap when it is read on a mobile device, but I have not to this article yet.

  When it is viewed on a desktop computer I think it is still showing the image sheets before the roll content.

  This is just a test at the minute, so there is no content and background images are set on my computer. If you don't know what I'm after, please ask and I will try to rephrase my description.

  @media only screen and (min-width: 481px) {}

  {.gridContainer}

  Width: 100%;

  padding-left: 0%;

  padding-right: 0%;

  margin: auto;

  background-attachment: fixed;

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

  background-repeat: no-repeat;

  background-position: top center;

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  }

  {#LayoutDiv1}

  Clear: both;

  float: left;

  left margin: 0;

  Width: 100%;

  display: block;

  background-color: #FFF;

  padding-top: 20px;

  padding-bottom: 20px;

  }

  {# image - wide

  Clear: both;

  float: left;

  left margin: 0;

  Width: 100%;

  display: block;

  visibility: hidden;

  }

  {#body - text

  Clear: both;

  float: left;

  left margin: 0;

  Width: 100%;

  display: block;

  background-color: #FFF;

  padding-top: 300px;

  padding-bottom: 300px;

  }

  {#large-ipad}

  Clear: both;

  float: left;

  left margin: 0;

  Width: 100%;

  display: block;

  }

  }

  / * Desktop layout: 769px for a max of 1920px.  Inherits the styles of: Mobile and tablet. */

  @media only screen and (min-width: 769px) {}

  {.gridContainer}

  Width: 100%;

  Max-width: 1920px;

  padding-left: 0%;

  padding-right: 0%;

  margin: auto;

  background-attachment: fixed;

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

  background-repeat: no-repeat;

  background-position: top center;

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  }

  {#LayoutDiv1}

  Clear: both;

  float: left;

  left margin: 0;

  Width: 100%;

  display: block;

  height: 70px;

  z-index: 1000;

  background-color: #FFF;

  position: fixed;

  Top: 0px;

  }

  {# image - wide

  Clear: both;

  float: left;

  left margin: 0;

  Width: 100%;

  display: block;

  position: static;

  z-index: 0;

  }

  {#body - text

  Clear: both;

  float: left;

  left margin: 0;

  Width: 100%;

  display: block;

  background-color: #FFF;

  padding-top: 300px;

  padding-bottom: 300px;

  }

  {#large-ipad}

  Clear: both;

  float: left;

  left margin: 0;

  Width: 100%;

  display: block;

  visibility: hidden;

  overflow: hidden;

  }

  }

  Any help would be massively appreciated I really want the effect I'm after.

  Kind regards

  Alex

  Hi all

  Think I have asked this question a little prematurely. I thought it, just needed to change the None display: display: none;

  Sorry to take your time to read above.

  See you soon,.

  Alex

• Problem with the text in the div tag

  Hey there,

  the question that I have is that every time that I add text to a div tag and press 'enter' to start on another paragraph, the text on the first paragraph right guard moved down to about a paragraph. It happens in Dreamweaver and the browser when available is presented as a preview. I have included a few pictures below, please advise.

  First added text, which seems fine:

  

  But when I try to type the text after pressing "enter".

  

  I want the text to align to the top instead of from a paragraph down. Something like this (made in InDesign):

  

  I will include the code as well. When I select the div tag, it's what is highlighted in the code pane:

  < div id = "about6" >

  < p > Hey there < /p >

  < p > Hey there 2 < /p >

  < p > Hey there 3 < /p >

  < p > Hey there 4 < /p >

  < / div >

  A screenshot of the of type parameters for this div:

  

  Any help would be appreciated. Thank you.

  Paragraphs, titles etc. have legacy browser style rules.

  We can remove the style by adding rules to the top of the stylesheet

  * {

  padding: 0;

  margin: 0;

  }

  Even better is to include a CSS reset set of rules such as found here http://meyerweb.com/eric/tools/css/reset/

  By the way, please note that the use of identifiers will limit your fun by using style rules. You should not use ID unless needing a single login. In your case, I would use a class.

  Heights of adjustment are also going to strangle the natural flow of your document, especially if you intend to start on the drawings of fluid

  I hope this helps.

• How can I put a div at the top of the page with a background color? No white space

  I'm trying to put an orange bar all at the top of a page and which also spans the entire width of the page, regardless of the size of the page.

  With the code below the orange bar appears, but there is a space between the top of the browser and the orange bar.

  < div style = "background-color: #f79321;" height: 30; width: auto; "> < p > < / p > < / div >

  How can I get rid of that white space? I tried to adjust the margin and filling to 0px, but that did not work.

  That particular space is caused by the default of the

  tag in your

  . You can either start the

  content by something other than

  , as
  , or remove the margin/padding of the

  {p}

  margin: 0;

  padding: 0;

  }

• Image disappears in the Div tag

  Hello Dreamweavers.

  IM by selecting my image that is inside a div tag and when I hit the enter/return is disappeaers. What is going on?

  The reason Im doing this is to add a legend title to my image leaving a space under the pitcure.

  Thank you

  

  * {

  margin: 0;

  padding: 0;

  }

  {#box1}

  Width: 600px;

  }

  {.floatright}

  float: right;

  left margin: 12px;

  margin-top: 0px;

  margin-bottom: 9px;

  margin-right: 0px;

  padding-right: 0px;

  }

  < / style >

  < / head >

  < body >

  < div id = "box1" >

  < p > < br >

  Contrary to popular belief, is not simply random text Lorem Ipsum. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years. Richard McClintock, a Professor of Latin at the Hampden - Sydney College in Virginia, one of the more obscure terms latins, computer, looked up a passage of Lorem Ipsum and passing by her quote of the word literature classic, discovered the undoubted source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of the 'of Finibus Bonorum and Malorum"(The extremes of good and evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet... '. ", comes from a line in section 1.10.32 < br >

  Contrary to popular belief, is not simply random text Lorem Ipsum. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years. Richard McClintock, a Professor of Latin at the Hampden - Sydney College in Virginia, one of the more obscure terms latins, computer, looked up a passage of Lorem Ipsum and passing by her quote of the word literature classic, discovered the undoubted source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of the 'of Finibus Bonorum and Malorum"(The extremes of good and evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet... '. ", comes from a line in section 1.10.32 < /p >

  < p > < / p >

  < p >

  < img src = "_images/award.jpg" width = "240" height = "192" class = "floatright" > contrary to popular belief, Lorem Ipsum is not simply text randomly. " It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years. Richard McClintock, a Professor of Latin at the Hampden - Sydney College in Virginia, one of the more obscure terms latins, computer, looked up a passage of Lorem Ipsum and passing by her quote of the word literature classic, discovered the undoubted source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of the 'of Finibus Bonorum and Malorum"(The extremes of good and evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet... '. ", comes from a line in section 1.10.32 < /p >

  < / div >

  < / body >

  < / html >

  IM by selecting my image that is inside a div tag and when I hit the enter/return is disappeaers.

  When you do what you say, it will disappear you tap "return" with the selected image . This will remove the 'image' of this region.

  The solution is to select the image in Design view (if that's what you're comfortable with), hit "right arrow key" and then press return. This will give you space 'after' the image, keeping the image.

• The alignment of the div tags/content

  I have a div class = "wrapLinks" (unordered list) and a div class = "slider" (image carousel), and both are within the class = "content" div  At some point, "wrapLinks" were in the top left of the content.  After you create the div class is 'slider', the 'wrapLinks' have been 'pushed' down under the "cursor" that comes from taking up space at the top left of the content.  Ideally, I want the two (aligned horizontally) inline with eachother. First, I tried to change the margin for both classes of div in the css, but that doesn't seem to work.  I then tried to add "float: left;" to the "wrapLinks" and "float: right;" for the "cursor" in the css, but that also does not work.  I also try to put a button on the cursor.  I think that's what we call a 'floating div tag", but not sure.  I feel that I write the CSS properly for each class of div.

  Any ideas on what I can / should I do?

  I have provided a reference image.

  

  Even with the following addition/changes, the carousel seems too wide to fit completely on the page:

  .wrapLinks UL

  {

  margin: 10px 0px 0px;

  padding: 4px 0px 0px;

  do-family: "Arial Unicode MS";

  / * + 9px placement: shift-346px; * /

  position: relative;

  left: 9px;

  top:-346px;

  }

  .float-right

  {

  float: right;

  margin: 225px 60px banner 0px 0px;

  / * + placement: Maj 51px-301px; * /

  position: relative;

  left: 51px;

  high:-301px;

  }

  /*################*/

  . Slider

  {

  / * + placement: Maj 248px 8px; * /

  position: relative;

  left: 248px.

  top: 8px;

  }

• alignment with the &lt; div &gt; tags

  I am having trouble getting my 3rd < div > tag align (id = flash). It is left in line with the edge of the tag '#content' < div >. Essentially left alignment on the edge of my centered layout. Here is my code, anyone can have an idea on what I'm missing? I am new to do not use tables.

  Thank you

  < head >
  < meta http-equiv = "Content-Type" content = text/html"; Charset = UTF-8 "/ >"
  < Title > page < /title >
  < style type = "text/css" >
  {body
  do-family: Arial, Helvetica, without serif.
  background-color: #FFF;
  margin: 0px;
  padding: 0px;
  }
  #container {}
  margin: 0 auto;
  Width: 999px;
  }
  #content {}
  Width: 100%;
  }
  {#flash}
  position: absolute;
  top: 134px;
  left: 216px;
  }
  < / style >
  < / head >

  < body >
  < div id = "container" >
  < div id = "content" > < img src = "images/background.jpg" width = "997" height = "2400" / > "
  < div id = "flash" >

  This is a decision by aligning

  < / div >
  < / div >
  < / div >
  < / body >
  < / html >

  The same can be applied to the normal margins:

  {#flash}

  margin: 134px 216px 0px 0px;

  }

  Is that what you are looking for?

  Nick

• Lining of DIV is the step towards the top

  Hi, I have built the next page in DW CS4

  http://matthamiltonracing.com/indextwo/indextwo.html

  The three divs below the navigation bar are all feeders left, with no top margin. The navigation bar has no bottom margin that I see.

  All works well in IE 8.

  However, 7 to know that they don't line up properly?

  any suggestions

  Thank you

  Mark

  You mean that they line up properly along the top edge?

  The only thing in the code that could have an effect is an empty paragraph tag just before your "boig."

  . Delete a see what happens.

   

  
   

  It could also be at the margin of the top by default on the list in the "leftnews".

  If you try to add:

  UL #leftnews, #leftnews li {}

  margin-top: 0;

  padding-top: 0;
  }

• 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

• Disorder by selecting the Div tags

  Hello

  Im trying to create a website portfolio for me but I'm having trouble with the selection of some div tags, I added to my page.

  

  As you can see here the top right divtag is selected/clicked on illustrated by give it a blue box around it. It allows me to add a rollover image to which is what I try to do with home' 'info' and 'contact' buttons shown above right. However when I click on or around the div tags that hold these buttons I can't "select" them so that the blue box appears around the edge and therefore impossible to add the rollover image.

  This is the encoding of the page, if it helps (I) normally work in the design window, I have not been taught in the coding

  < ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > ""

  " < html xmlns =" http://www.w3.org/1999/xhtml ">

  < head >

  < meta http-equiv = "Content-Type" content = text/html"; charset = utf-8 "/ >"

  < title > Untitled Document < /title >

  < style type = "text/css" >

  {#wrapper}

  float: none;

  Width: 1500px;

  margin: auto;

  }

  {#p1}

  float: left;

  height: 350px;

  Width: 490px;

  margin left: 15px;

  top of the margin: 15px;

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

  }

  {#p4}

  float: left;

  height: 350px;

  Width: 490px;

  top of the margin: 15px;

  margin left: 15px;

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

  }

  {#p5}

  Clear: none;

  float: left;

  height: 350px;

  Width: 490px;

  top of the margin: 15px;

  margin left: 15px;

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

  }

  {#p6}

  float: left;

  height: 350px;

  Width: 490px;

  top of the margin: 15px;

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

  }

  {#p2}

  background-color: #333;

  float: left;

  height: 350px;

  Width: 490px;

  top of the margin: 15px;

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

  }

  {#p3}

  background-color: #999;

  float: left;

  height: 350px;

  Width: 490px;

  right margin: 15px;

  top of the margin: 15px;

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

  }

  {#p7}

  float: left;

  height: 350px;

  Width: 490px;

  top of the margin: 15px;

  margin left: 15px;

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

  }

  {#p8}

  float: left;

  height: 350px;

  Width: 490px;

  top of the margin: 15px;

  margin left: 15px;

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

  }

  {#p9}

  float: left;

  height: 350px;

  Width: 490px;

  top of the margin: 15px;

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

  }

  {#home-btn}

  background-color: #999;

  float: left;

  height: 30px;

  Width: 30px;

  margin-top:-715px;

  margin left: 15px;

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

  }

  {#contact-btn}

  float: left;

  height: 30px;

  Width: 30px;

  margin-top:-625px;

  margin left: 15px;

  background-color: #FF6;

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

  }

  {body

  left margin: 0px;

  margin-top: 0px;

  margin-right: 0px;

  margin-bottom: 0px;

  }

  {#info-btn}

  background-color: #09F;

  float: left;

  height: 30px;

  Width: 30px;

  margin left: 15px;

  margin-top:-670px;

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

  }

  < / style >

  < / head >

  < body >

  < div id = 'wrapper' >

  < div id = "p9" > < / div >

  < div id = "p8" > < / div >

  < div id = "p7" > < / div >

  < div id = 'p6' > < / div >

  < div id = "p5" > < / div >

  < div id = "p4" > < / div >

  < div id = 'p3' > < / div >

  < div id = "p2" > < / div >

  < div id = "p1" > < / div >

  < / div >

  < div id = "contact-btn" > < / div >

  < div id = "info-btn" > < / div >

  < div id = "Home-btn" > < / div >

  < / body >

  < / html >

  Any ideas?

  Cheers, Ryan

  I normally work in the design window that I've not been taught in the coding

  You will learn about code regardless if you make the effort. Start with these links:

  http://w3schools.com/

  http://www.csstutorial.NET/

  DW assumes that you have knowledge of HTML & CSS code.

  If you cannot or will not work with the code, you use the wrong tool.

  For the non-codeurs, Adobe offers 2 other options: Adobe Muse & portfolio

  Nancy O.

• Please can someone help me fix this code? Its doesn't seem to make the div you want to stick to the top of the page: the code is shown below.

  I need help, what is the problem with the code below:

  <! DOCTYPE html >

  < html >

  < head >

  < title > < / title >

  < style >

  *{

  margin: 0;

  padding: 0;

  }

  {#sticky}

  Width: 600px;

  background-color: #000;

  color: #fff;

  do-size: 2em;

  border-radius: 0.5ex;

  padding-top: 10px;

  padding-bottom: 10px;

  padding-left: 3px;

  }

  {#sticky.stick}

  position: fixed;

  top: 0;

  z index: 10000;

  }

  {#sticky-anchor}

  height: 0;

  }

  {#wrapper}

  Width: 600px;

  Auto margin: 0;

  padding: 0;

  }

  #header {}

  Width: 600px;

  height: 140px;

  Auto margin: 0;

  }

  #content {}

  Display: block;

  height: 800px;

  Width: 600px;

  background-color: pink;

  }

  < / style >

  < / head >

  < body >

  < script >

  function sticky_relocate() {}

  var window_top = $(window) .scrollTop ();

  var div_top is $('#sticky-anchor').offset () .top;.

  If (window_top > div_top) {}

  $('#sticky').addClass ('stick');

  } else {}

  $('#sticky').removeClass ('stick');

  }

  }

  {$(function()}

  $(window) .scroll (sticky_relocate);

  sticky_relocate();

  });

  < /script >

  < div id = 'wrapper' >

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

  < div id = "post-it-anchor" > < / div >

  < div id = "sticky" > it will stay at the top of the page < / div >

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

  < / div >

  < / body >

  < / html >

  Nothing wrong (other than a few problems regarding coding practices). You simply need to link to the top of the jQuery library.