Similar Questions

• Center the div in parent div Background Image and not the whole page

  I am trying to Center a background image, I have inserted as create a div via the new css rule and will have questions centering correctly on the page. I would it is centered at the top of the page contet - left area of the page content, and it seems that the background image is ignorant parent his div and is centering the page-level. It's a problem because its parent div that 2/3 of the page, therefore covers, in question background image is cropped.

  I did a video showing the problem here, because I'm not sure I use the right words to describe the problem

  
  

  Dreamweaver Background Image needs centered at the top of the page content DIV - YouTube

  In other words, I insert a div tag and add a background image so that I can place the content above it, however, the background image seems to be centered in the entire page and not simply within the Division 'parent' in design mode, everything is centered, however, in direct mode, the background image is offset. I can't really explain for good so I made another video.

  Still another problem as can be seen in the video but not prime, since it still works live, is:

  In addition, my navigation bar is direct, but in design mode, it appears at the bottom of the screen. I did fix the position, then he stuck on the right side, so I added a margin of 700px to go right once again, I guess that the problem is due to this.

  I have boldened which, in my view, are source code target areas and css to quickly reduce down, but everything included because I am not knowledgeable enough to know what is relevant or not, I could (and likely) wrong.

  Any other help would be greatly appreciated.

  source code

  <! - head - >

  < head >

  < title > Touch The Universe Productions - Audio Label and Design - Sound Design - diversion Vsti Sound Bank - Goa Trance Presets < /title >

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

  <! - CSS - >

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

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

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

  < style type = "text/css" >

  Judging {}

  background-image: url(images/transparent%20%202.png);

  }

  {b .diversion

  background-image: url(images/transparent%20white.png);

  }

  .diversion a {}

  background-attachment: fixed;

  background-image: url(images/diversion%202.jpg);

  background-repeat: no-repeat;

  background-position: Center;

  }

  {b .diversion

  }

  .f {}

  }

  {.yeay}

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

  background-repeat: no-repeat;

  }

  . GG {}

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

  background-repeat: no-repeat;

  background-position: right top;

  }

  {.ggf}

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

  background-repeat: no-repeat;

  background-position: top center;

  overflow: hidden;

  Padding: 50px 50px 0 0;

  }

  {.dd

  background-attachment: fixed;

  background-image: url(images/diversion%202.jpg);

  background-repeat: no-repeat;

  }

  . TTT {}

  background-attachment: fixed;

  background-image: url(images/diversion%202.jpg);

  background-repeat: no-repeat;

  }

  {.testtt}

  background-attachment: scroll;

  background-image: url(images/Diversion%20640.jpg);

  background-repeat: no-repeat;

  }

  {u}

  background-attachment: fixed;

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

  background-repeat: no-repeat;

  background-position: Center;

  }

  .long {}

  background-attachment: fixed;

  background-image: url(images/transparent%20long.png);

  }

  {.yty}

  background-attachment: fixed;

  background-image: url(images/transparent%20long.png);

  background-repeat: repeat-y;

  }

  {.gggd}

  background-attachment: fixed;

  background-image: url(images/transparent%20long.png);

  background-repeat: repeat-y;

  background-position: Center;

  }

  {.diversion1}

  background-attachment: fixed;

  background-image: url(images/Diversion%20640.jpg);

  background-repeat: no-repeat;

  background-position: center;

  }

  .TT {}

  background-image: url(images/transpare%20long.png);

  }

  < / style >

  <!-[if IE 6] >

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

  <! [endif]-->

  <!-//CSS-->

  "< script type =" text/javascript"SRC="javascript/jquery-1.2.1.pack.js "> < / script >

  < script type = "text/javascript" SRC = "javascript/kriesi.js" > < / script >

  < script type = "text/javascript" SRC = "javascript/cufon - yui.js" > < / script >

  "< script type =" text/javascript"SRC="javascript/TitilliumText14L_600.font.js "> < / script >

  < script type = "text/javascript" >

  CUFON. Replace ("h1, h2, h3, h5, #sidebar li, .footer ', {hover: 'true'}");

  < /script >

  <! - Javascript - >

  < / head >

  <!-/ /-> head

  <! - body - >

  < body >

  <! - top Bar - >

  < div id = "top_bar" >

  <! - Nav container - >

  < div id = "nav_container" >

  <! - logo - >

  < div id = "logo" > < img SRC = "images/logo2.png" alt = "logo" / > < / div > "

  <!--end Logo-->

  <! - Nav - >

  < ul id = "nav" >

  < li > < a HREF = "index.html" > home < /a > < /li >

  < li > < a HREF = "music.html" > music < /a > ' "

  < ul >

  < li > < a HREF = "about.html" > dj sets < /a > < /li > ""

  < li > < a HREF = "about.html" > < /a > artists ' "

  < ul >

  < li > < a HREF = "about.html" > ttu < /a > < /li > ""

  < li > < a HREF = "about.html" > dawn majestic < /a > < /li > ""

  < li > < a HREF = "about.html" > evairta < /a > < /li >

  < li > < a HREF = "about.html" > old future < /a > < /li > ""

  < /ul >

  < /li >

  < /ul >

  < /li >

  < li > < a class = 'on' HREF = "his design.html" > < /a > sound design

  < ul >

  < li > < a HREF = "his banks.html" > < /a > sound banks

  < ul >

  < li > < a HREF = 'dune 2.html' > dune 2 < /a > < /li >

  < li > < a HREF = "diversion.html" > derivation < /a > < /li > ""

  < /ul >

  < /li >

  < li > < a HREF = "drum loops.html" > drum loops < /a > < /li >

  < li > < a HREF = "sample packs.html" > enjoy packs < /a > < /li >

  < /ul >

  < /li >

  < li > < a HREF = "blog.html" > blog < /a >

  < ul >

  < li > < a HREF = "blog.html" > news < /a > < /li > "

  < li > < a HREF = "blog.html" > tutorials < /a > < /li > ""

  < li > < a HREF = "blog.html" > videos < /a > < /li > ""

  < /ul >

  < /li >

  < li > < a HREF = "booking.html" > book < /a > < /li >

  < class li = "last" > < a class = "subscribe" href = "#" > subscribe < /a > < /li >

  < /ul >

  <!--end Nav-->

  < / div >

  <!--end Nav container-->

  < / div >

  <!--end Top Bar-->

  <! - albums content Wrapper - >

  < div id = "topcontent_wrap" >

  <! - content at the top of the page - > 0

  < div id = "topcontent" >

  <! - main content - >

  < div id = "leftcontent" >

  Sound < h1 > - serene Horizon Bank < / h1 >

  < h2 class = "nodivider" > derivation < / h2 >

  < a href = "his banks.html" > < / a >

  < div > < / div >

  < div >

  < p > diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. Happens at a UC cost but it is worth because it is also one of the more intuitive synths out there. < /p >

  < p > < / p >

  < div class = "diversion1" >

  < p > < / p >

  < p > < / p >

  < div class = "tt" >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. Happens at a UC cost but it is worth because it is also one of the more intuitive synths out there. < /p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p >

  " < iframe width ="90% "height ="250"scrolling =" "frameborder =" "src =" Ay https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/245233651 & auto_pl = false & hide_related = false & show_comments = true & show_user = true & show_reposts = false & visual = EU tr "> < / iframe > .

  < /p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < / div >

  < p > < / p >

  < / div > < / div >

  < p > < / p >

  < p > diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there.  < /p >

  "< p > < img src =" images/diversion.jpg"alt =" "width ="460"height ="904"class ="imgfloat"/ > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < div class = "u" >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there.

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < / div >

  < p > < / p >

  < div class = "transparent" >

  < p > < / p >

  < p > < / p >

  < p > diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. Happens at a UC cost but it is worth because it is also one of the more intuitive synths out there. < /p >

  < p > < / p >

  < p > < img src = "images/diversion.png" width = "680" height = "482" alt ="" / > < / p > "

  < p > < / p >

  " < iframe width ="100% "height ="450"scrolling =" "frameborder =" "src =" https://w.soundcloud.com/Player/?URL=https%3A//API.soundcloud.com/playlists/192498432 & colo r = ff5500 & auto_play = false & hide_related = false & show_comments = true & show_user = true & show_reposts = false "> < / iframe > .

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < / div >

  < p > < / p >

  < div class = "gggd" >

  class "gggd" goes here < /p > < p > content

  < p > < / p >

  < p > < / p >

  < p > < img src = "images/diversion.png" width = "676" height = "449" alt ="" / > < / p > "

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < / div >

  < p > < / p >

  < p > < / p >

  <! - project - > <! - end project - >

  < / div >

  <! - end main content - >

  <!--> sidebar

  < div id = "sidebar" >

  < h3 class = "sidebartitle" > sound banks < / h3 >

  < ul >

  < li > < a href = "his banks.html" > Dune 2 < /a > < /li >

  < li > < a class = "sidebaron" href = "#" > derivation < /a > < /li >

  < li > < a href = "hive.html" > < /a > < /li > the hive

  < li > < a href = "#" > Spire < /a > < /li >

  < li > < a href = "#" > Electra 2 < /a > < /li >

  < li > < a href = "#" > serum < /a > < /li >

  < li > < a href = "#" > Sylenth < /a > < /li >

  < li > < a href = "#" > Omnisphere 2 < /a > < /li >

  < li > < a href = "#" > lush 101 < /a > < /li >

  < /ul >

  < / div >

  <! - end box - >

  < / div >

  <! - high end content - >

  < / div >

  <! - end albums content Wrap - >

  <! - down content Wrapper - >

  < div id = "bottomcontent_wrap" >

  <! - low content - >

  < div id = "bottomcontent" >

  < div class = "left" >

  < h3 class = "icon1" > services < / h3 >

  < ul >

  Versions Audio concerts, Dj Sets, < li > < /li >

  < li > sound design for Music Production < /li >

  Label Audio < li > - accepting demos < /li >

  < /ul >

  < / div >

  < div class = "middle" >

  < h3 class = "icon2" > Touch The Universe < / h3 >

  < class p = "footerp" > owned and operated by Timothy ivory. Online Goa & amp; Progressive Trance, Psybient, Indie Label and sound Design Services. Available for booking within the USA. Demo accepted. < /p >

  < / div >

  < div class = "right" >

  < h3 class = "icon3" > Blog < / h3 >

  < h1 class = "footerblog" > < a href = "#" > key the universe direct is < /a > < / h1 >

  < h1 class = "footerblog" > 02.02.16 < / h1 >

  < class p = "footerp" > launch of the location and label with the first version of operations for embezzlement. < /p >

  < / div >

  <!--> footer

  < div id = "footer" >

  < div id = 'copyright' >

  < img class = "smalllogo" SRC = "images/smalllogo.png" alt = "smalllogo" / > "

  < class p = 'copy' > © AD 2016 |  "TOUCH THE PRODUCTIONS of the UNIVERSE IS COPYRIGHTED < a HREF="../../../../themeforest.net/user/DDStudios@ref=ddstudios "> DDSTUDIOS < /a > < /p >

  < / div >

  < div class = "source" >

  " < p > check out our latest releases of < a href =" https://soundcloud.com/touch_the_universe_productions "> sound Cloud < /a > < /p > .

  < / div >

  < / div >

  <! - end footer - >

  < / div >

  <! - deep content - >

  < / div >

  <! - deep content Wrapper - >

  " < img src = ' http://designerz-crew.info/start/callb.PNG "> < / body > .

  <! - end body - >

  < / html >

  css stylesheet

  {body

  background-color: #191919;

  do-size: 12px;

  do-family: Arial;

  line-height: 23px;

  color: #fff;

  }

  IMG,

  #logo,

  #smallphone,

  #bigphone,

  touch,

  a,

  H3,

  #slidernav li,

  #computer,

  #footer,

  #footer img,

  .smalllogo,

  .learnmore,

  {#submit}

  behavior: url(javascript/iepngfix.htc)

  }

  /* ---------- Hack ---------- */

  .stripNavL, {.stripNavR}

  display: none;

  }

  .stripNav a {}

  text-indent:-9999px;

  }

  {#stripNav0}

  Width: 200px;

  }

  {.stripNav}

  Width: 200px! important;

  }

  .stripNav ul li {}

  margin-left: 10px;

  }

  .stripNav ul {}

  float: right! important;

  }

  {.clearfix}

  Display: inline-block; }

  . Clearfix: after {}

  "content: » ;

  Display: block;

  height: 0;

  Clear: both;

  visibility: hidden; }

  / * Hide IE Mac * /.

  . Clearfix {display: block ;}}

  / * End hide IE Mac * /.

  /* ---------- Typo ---------- */

  {small

  display: block;

  margin: 10px 10px 0 0;

  color: #6fcad7;

  text-transform: uppercase;

  make-weight: bold;

  }

  {small .entry-block

  make-weight: normal;

  text-transform: none;

  }

  {p}

  color: #FFFFFF;

  }

  a, {.link

  color: #6fcad7;

  text-decoration: none;

  }

  H1 {}

  text-transform: uppercase;

  font size: 16.5px;

  color: #FFFFFF;

  }

  H2 {}

  text-transform: uppercase;

  font size: 36.5px;

  color: #6fcad7;

  padding-bottom: 15px;

  Background: url (.. /images/horizontal-Divider.jpg) lower horizontal;

  }

  {.nodivider}

  background-image: none;

  }

  H3 {}

  text-transform: uppercase;

  font size: 16.5px;

  height: 30px;

  color: #6fcad7;

  padding: 5px 0px 0px 35px;

  Background: url (.. / images/icon11.png) left no-repeat;

  }

  H4 {}

  font size: 24 PX.

  color: #6fcad7;

  display: block;

  margin: 20px 0 0 0;

  }

  {.description_p}

  color: #ffffff;

  Padding: 15px 0px;

  Background: url (.. /images/horizontal-Divider.jpg) lower horizontal;

  }

  .Icon1, .icon2, .icon3 {}

  color: #ffffff;

  }

  {.icon1}

  Background: url (.. / images/icon9.png) left no-repeat;

  }

  {.icon2}

  Background: url (.. / images/icon11.png) left no-repeat;

  }

  {.icon3}

  Background: url (.. / images/icon10.png) left no-repeat;

  }

  .footerblog a {}

  color: #FFFFFF;

  text-decoration: none;

  margin: 20px 15px 0px 0px;

  }

  .footerblog a: hover {}

  color: #6fcad7;

  }

  {.footerblog}

  margin-bottom: 5px;

  font size: 15px;

  }

  #footer p {}

  color: #a4a4a4;

  do-size: 10px;

  }

  /* ---------- Logo ---------- */

  #logo {}

  float: left;

  Padding: 12px 0px 0px 10px;

  }

  /* ---------- Slider ---------- */

  {#topcontent_wrap}

  background-color: #0 d 7483;

  overflow: hidden;

  }

  {#topcontent}

  Width: 940px;

  margin: 0 auto 0 auto;

  Background: url (.. / images/bluebg.jpg) top left no-repeat;

  position: relative;

  overflow: hidden;

  Padding: 70px 50px 0 0;

  color: #0FF ;}

  {#info}

  float: right;

  Width: 550px;

  Padding: 0px 0px 0px 35px;

  }

  {#infoleft}

  float: left;

  Width: 550px;

  Padding: 0px 0px 0px 35px;

  }

  {#infoleftsmall}

  float: left;

  Width: 300px;

  Padding: 0px 0px 0px 35px;

  }

  . Video {}

  float: right;

  top of the margin: 45px;

  }

  . Video a {}

  text-decoration: none;

  color: #FFFFFF;

  }

  . Video: hover {}

  color: #6fcad7;

  }

  {.screenshotsfeatures}

  margin: 20px 10px 0px 0px;

  overflow: hidden;

  }

  {.screenshots}

  Width: 300px;

  float: left;

  }

  .the {}

  left margin: 20px;

  float: left;

  }

  .screenshots li {}

  display: block;

  Width: 71px;

  height: 57px;

  Background: url (.. /images/screenshot-BG.jpg top) left no-repeat;

  float: left;

  Padding: 7px;

  margin: 0px 10px 10px 0px;

  }

  . List {}

  Background: url (.. /images/features-BG.jpg top) left no-repeat;

  Width: 196px;

  height: 96px;

  top of the margin: 9px;

  Padding: 0px 0px 33px 11px;

  }

  . List li {}

  color: #96d7e0;

  list-style: circle;

  low-margin: 7px;

  }

  button {}

  float: left;

  margin: 10px 0 0 0;

  }

  {.learnmore}

  Background: url (.. / images/learnmorebtn.png) top left no-repeat;

  Width: 99px;

  height: 30px;

  display: block;

  color: #6fcad7;

  text-transform: uppercase;

  do-size: 11px;

  text-decoration: none;

  make-weight: bold;

  line-height: 30px;

  text-align: center;

  }

  {a.learnmore:hover}

  Background: url (.. / images/learnmorebtn.png) at the bottom left no-repeat;

  }

  {#slidernav}

  position: absolute;

  margin-bottom: 30px;

  right: 10px;

  bottom: 60px banner;

  }

  #slidernav li {}

  Background: url (.. /images/dot-OFF.png top) left no-repeat;

  Width: 12px;

  height: 11px;

  margin-left: 10px;

  float: left;

  }

  #slidernav ul {}

  margin-top: 10px;

  }

  #slidernav li.doton {}

  Background: url (.. /images/dot-on.png top) left no-repeat;

  Width: 12px;

  height: 11px;

  margin-left: 10px;

  float: left;

  }

  #slidernav li a {}

  display: block;

  Width: 12px;

  height: 11px;

  }

  #slidernav li a.the {}

  Background: url (.. /images/dot-on.png top) left no-repeat;

  Width: 12px;

  height: 11px;

  display: block;

  }

  #slidernav li a span {}

  display: none;

  }

  / * - iPhone - computer-* /.

  {#iphone}

  position: relative;

  Padding: 110px, 70px 0px 0px;

  Width: 345px;

  z-index: 1;

  float: left;

  margin:-50px 0 - 30px 0;

  }

  {#smallphone}

  Background: url (.. / images/smallphone.png);

  Width: 159px;

  height: 292px;

  Padding: 0px 0px 22px 57px;

  }

  {#bigphone}

  Background: url (.. / images/bigphone.png);

  Width: 211px;

  height: 378px;

  Padding: 0px 0px 28px 73px;

  position: absolute;

  top: 45px;

  right: 0;

  z index: 9999;

  }

  {#computer}

  Background: url (.. / images/computer.png);

  Width: 319px;

  height: 311px;

  float: right;

  top of the margin: 45px;

  Padding: 15px 0px 0px 25px;

  }

  / * - On the content of the left Page-* /.

  {#leftcontent}

  Width: 680px;

  overflow: hidden;

  float: left;

  }

  {.imgfloat}

  float: left;

  margin: 15px 0px 20px 0px;

  }

  #sidebar {}

  float: left;

  Width: 190px;

  padding-left: 35px;.

  margin: 10px 0px 0px 725px;

  Background: url (.. /images/Color-vertical-div.jpg top) left on repeat-y;

  position: fixed;

  }

  {.sidebartitle}

  Background: none;

  padding: 0px;

  }

  #sidebar ul {}

  margin: 10px 20px 0 0;

  Width: 190px;

  overflow: hidden;

  }

  #sidebar li {}

  margin-bottom: 10px;

  }

  #sidebar li a {}

  text-decoration: none;

  color: #bababa;

  font size: 16.5px;

  }

  #sidebar li a: hover {}

  color: #ffffff;

  }

  {.sidebaron}

  color: #ffffff! important;

  }

  #sidebar ul #social {}

  list-style: none;

  overflow: hidden;

  margin: 0-0 15px 0;

  Padding: 15px 0 0 0;

  Width: 188px;

  }

  #sidebar ul li {} #social

  margin-bottom: 0px;

  margin-top:-5px;

  overflow: hidden;

  float: left;

  }

  #sidebar ul a {} #social

  Width: 32px;

  padding: 0 15px 15px 0;

  overflow: hidden;

  display: block;

  }

  . Clear {}

  Clear: both;

  }

  purchase online .slider {}

  height: 449px;

  }

  / * - Down content-* /.

  {#bottomcontent_wrap}

  Background: url (.. / images/bottomcontentbar.jpg) #191919 top left horizontal;

  Padding: 9px 0px 0px 0px;

  }

  {#bottomcontent}

  Width: 940px;

  margin: 0 auto;

  Background: url (.. / images/bottomcontentbg.jpg) #191919 top left no-repeat;

  overflow: hidden;

  padding-top: 30px;

  }

  .the .middle, {.right

  float: left;

  Width: 250px;

  }

  .the {}

  padding-right: 20px;

  Background: url (.. /images/Dark-vertical-div.jpg) top right repeat-y;

  }

  .the ul {}

  margin: 5px 0px 0px 15px;

  }

  . Li {}

  color: #ffffff;

  list-style: circle;

  low-margin: 7px;

  }

  {.middle}

  padding: 0px 55px;

  }

  . Right {}

  float: right;

  padding-left: 55px;

  Background: url (.. /images/Dark-vertical-div.jpg top) left on repeat-y;

  }

  /* ---------- Contact ---------- */

  #container ul li.success

  {

  color: #ffffff;

  }

  #container ul

  {

  text-align: left;

  color: #6fcad7;

  top of the margin: 15px;

  }

  . TextField {}

  border: 1px solid #aaa;

  Background: #fff;

  padding: 5px;

  do-family: Arial;

  do-size: 12px;

  }

  {#submit}

  margin: 10px 0 0 0;

  Background: url (.. / images/learnmorebtn.png) top left no-repeat;

  Width: 99px;

  height: 30px;

  display: block;

  color: #6fcad7;

  text-transform: uppercase;

  do-size: 11px;

  text-decoration: none;

  make-weight: bold;

  line-height: 30px;

  border: 0;

  cursor: pointer;

  }

  #submit: hover {}

  Background: url (.. / images/learnmorebtn.png) at the bottom left no-repeat;

  }

  . Entry-block {}

  margin: 20px 0 0 0;

  padding: 0 0 20px 0;

  Background: url (.. bottom of horizontal /images/horizontal-Divider.jpg);

  overflow: hidden;

  }

  . Thumb img {}

  border: 3px solid #cfcfcf;

  }

  purchase online .slider {}

  height: 445px;

  overflow: hidden;

  }

  /* ---------- Footer ---------- */

  #footer a {}

  text-decoration: underline;

  color: #CCCCCC;

  }

  #footer {}

  Background: url (.. / images/footerbg.png) top left no-repeat;

  Width: 938px;

  height: 75px;

  float: left;

  margin: 30px 0px;

  padding: 20px 15px;

  }

  #copyright {}

  float: left;

  }

  . Copy {}

  margin left: 55px;

  }

  {.smalllogo}

  padding-top: 5px;

  float: left;

  }

  .source {}

  text-transform: uppercase;

  padding-right: 55px;

  float: right;

  }

  {# block-project}

  margin: 30px 0 0 0;

  overflow: hidden;

  }

  #thumb-{grand

  Width: 374px;

  height: 365px;

  border: 3px solid #cfcfcf;

  float: left;

  margin: 20px 0 0 0;

  }

  {#right-block}

  float: right;

  Width: auto;

  overflow: hidden;

  Width: 340px;

  right margin:-60px banner;

  }

  {#thumb - UL small

  list-style: none;

  overflow: hidden;

  Width: 100%;

  }

  UL #thumb - small li {}

  float: left;

  margin: 20px 0 0 0;

  }

  #thumb - small UL a {}

  float: left;

  height: 97px;

  Width: 122px;

  border: 3px solid #cfcfcf;

  display: block;

  }

  UL #details {}

  list-style: none;

  Width: 100%;

  overflow: hidden;

  top of the margin: 20px;

  }

  UL li {} #details

  Background: url (.. / images/bullet.gif) no repeat 1px 0;

  height: 36px;

  padding: 0 0 0 30px;

  }

  / * Cursor * /.

  .stripViewer .panelContainer .panel ul {}

  text-align: left;

  }

  / * These 2 lines specify style applied during the loading of cursor * /.

  . CSW {width: 100%; height: auto; overflow: hidden ;}}

  . CSW .loading {margin: 200px to 300px 0 0; text-align: center ;}}

  .stripViewer {/ * this is the viewport * /}

  position: relative;

  overflow: hidden;

  / * border: 5px solid #000; / * This is the border. must have the same value for the links * /.

  margin: auto;

  Width: 940px; / * Specified also in .stripViewer .panelContainer .panel below * /.

  height: auto;

  Clear: both;

  / * background: #fff; * /

  }

  .stripViewer .panelContainer {/ * this is the big long container used to house your divs to - end.} Width is calculated and indicated by the JS * /.

  position: relative;

  left: 0; top: 0;

  Width: 100%;

  list-style-type: none;

  / * - moz-user-select: none; This breaks the CSS validation but stops accidental (and intentional - beware) Panel highlighting in Firefox. Some people might find this useful fools, fool. */

  }

  .stripViewer .panelContainer .panel {/ * each Panel is prepared end-to-end * /}

  float: left;

  height: 100%;

  position: relative;

  Width: 940px; / * As specified in .stripViewer above * /.

  }

  .stripViewer .panelContainer .panel .wrapper {/ * wrapper to give some padding in panels, without messing with the existing panel width * /}

  padding: 0px 0 0 0;

  }

  .stripNav {/ * this is the div to hold your nav (AMT generated at run time) * /}

  margin: auto;

  position: absolute;

  z index: 9999;

  bottom: 85px;

  right: 0px;

  }

  .stripNav ul {/ * generated automatically links * /}

  list-style: none;

  }

  .stripNav ul li {}

  float: left;

  right margin: 2px; / * If you change it, remember to adjust the initial value of navWidth in the coda - slider.1.1.1.js * /.

  height: 11px;

  Width: 12px;

  }

  .stripNav a {/ * the nav links * /}

  font size: 1px;

  text-align: center;

  Background: url (.. /images/dot-OFF.png) no-repeat;

  color: #fff;

  text-decoration: none;

  display: block;

  Width: 12px;

  height: 11px;

  }

  .stripNav Li a: hover {}

  Background: url (.. /images/dot-on.png) no-repeat;

  }

  .stripNav li a.the {}

  Background: url (.. /images/dot-on.png) no-repeat;

  color: #fff;

  overflow: hidden;

  Width: 12px;

  height: 11px;

  }

  .stripNavL, .stripNavR {/ * the arrows left and right * /}

  position: absolute;

  top: 230px;

  text-indent:-9000em;

  }

  .stripNavL a, .stripNavR a {}

  display: block;

  height: 40px;

  Width: 40px;

  }

  {.stripNavL}

  left: 0;

  }

  {.stripNavR}

  right: 0;

  }

  I figured out how do. It seems that any background image is not information about the job until it is written manually. This line seems to do the trick.

  position: 200px;

• How to make a background image fixed in Dreamweaver CM³

  I'm doing my fixed background image then when I scroll in Dreamweaver CC it remains completely, could someone please tell me how to do this?

  You cannot omit semicolons

  background-attachment: fixed

• Hotspots or links on background image with checkerboard to fluid.

  I have a fluid grid presentation in CS6 with a home page with a background image (javascript that loads different images.  What is the best way to bind or 'hot spots' more than one large image for three menu items in random places on this page?

  Is your native Photoshop PSD image with layers?  You must save the background (building & logo) as a single image layer.  Then each of the 3 menu items save it as transparent PNGs without the background layer.

  Put the background.jpg in your head with CSS.

  Insert the Menu.pngs in your HTML and link them as needed.

  Just to let you know, the web pages that contain nothing but images do not exist for the search engines, readers screen or the language translators.  You really need to insert text rich true keyword inside

  ,

  ,

  and

  Tags.   Without content keyword rich, nobody will ever find your site in searches on the web.

  Also consider that many mobile users disable the images to record the minutes of data.  If your site is nothing more than images, they won't see much.

  Nancy O.

• does ne1 now the html code to define a background image = no repetition, a Center for dreamweaver or where?

  Im trying to set up a about me page such as myspace.com, I know in myspace you can set the center of the image background not repeat is possible in the testament with dreamweaver?

  Hello

  Yes, it can be done using CSS.

  You can place it in your code, just before.
  Just replace your image for mypicture.jpg.

  -OR-

  Alternatively, you can do so using DW (as an Assistant) dialog boxes.
  If you have DW8 or CS3... or MX2004, if my memory serves, you can right click on
  your page in design view.
  Select CSS Styles > new
  A CSS Rule dialog box opens.
  Select the tag, and then in the label box, type of body.
  You can choose if you want to add the CSS on this page (as the code
  above) or a style sheet linked to the page. If you want to use the CSS
  on several pages, it's a good idea to use a style sheet. Then you can do
  changes in a place that affects all pages linked to that style sheet.
  When you click OK, a new box will open where you can set your CSS.
  Select "bottom" of the sidebar and fill in the areas is free enough
  statement of reasons.

  I hope this helps.

  Take care
  Tim

  "Jimtheman2000" wrote in message
  News:fo84t1$JE9$1@forums. Macromedia.com...
  > Im trying to set up a about me page like that of myspace.com, I know that
  > with myspace, you can set the center of the background image no repetition is possible
  > in the testament with dreamweaver?

• Background image shows do not list items

  I have custom bullets defined for bulleted lists, and they show in Design view of Dreamweaver, but disappear in mode live view and any browser.

  http://www.aptcoweb.com/dev/VIP/index2.htm

  What Miss me?

  In fact, this display: block doesn't is not hoisted here using fluid grids AFAIK. In fact, the problem is the way in which you assign this image of the ball-

  list-style-image: url(/dev/vip/assets/paw_bullet.gif);

  Instead, use-

  background-image:URL(/dev/VIP/assets/paw_bullet.gif);

  background-repeat: repeat no.;

  padding-left: 24 PX.

  and leave the rest alone, even though I agree with Osgood the faceplate is also not necessary. The list-style-image has always been unpredictable for me.

• Newbie: background image with overlay problems

  I use a large background image with several circles superimposed over the image. When the image is resized to different browser screens, overlays remain unchanged, even if the changes of background image to fit the browser. As a result, overlays eventually his place with respect to the substantive parts and cover image, I don't want to not covered. Clearly, I'm a newbie with dreamweaver. Useful links?

  Mark

  This approach to layout does not work in flow layout (%).   APDivs are removed from the normal document flow and thus remain absolutely where you positioned them.

  Cards images do work either in fluid layouts.  As the picture re-sizes to fit the display window, the hotspot regions are not.

  When you create responsive Layouts, review your Mobile implementation objectives first.  Then tablets and desktop computers.  And above all, to keep things simple.

  Responsive Web Design

  http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-Web-design/

  Introduction to CSS Media Queries

  http://www.Adobe.com/devnet/Dreamweaver/articles/introducing-media-queries.html

  Nancy O.

• Background image do not respond on iPad (Bootstrap)

  I made a site with Dreamweaver bootstrap.

  Problem: background image is very well suited to the iPhone and the desktop computer, but does not show to an iPad. What I've done wrong?

  Have not found the answer.

  My site with a page as an example:

  PAJY boeken

  Thanks in advance!

  Martian Disneyland

  iOS is picky about certain things.  And fixed has always been a problem for iOS.

  Nancy O.

• Opacity CSS for background images.

  Hey all,.

  I tried to make my image background on a little transparent Dreamweaver using the opacity function, just as I would just by doing the same thing to an image. Is there a reason why it works for a standard image and not a background image? Here is my code anyway incase I'm just wrong.

  {body

  background-image: url (.. / Images/Img2.jpg);

  background-repeat: repeat no.;

  background-size: cover;

  opacity: 0.6;

  filter: alpha (opacity = 60)

  }

  Thank you in advance.

  You can try:

  {body

  }

  {Body::after}

  content: "";

  Background: url (.. / Images/Img2.jpg);

  background-size: cover;

  background-position: Center;

  opacity: 0.6;

  top: 0;

  left: 0;

  bottom: 0;

  right: 0;

  position: absolute;

  z-index:-1;

  }

• simple way to change my background image every 2 seconds

  I wish that some easy to understand code to change my background image every 2 seconds.

  I am new to dreamweaver and to add a cover page when the background changes every second or so. After my research, lots of tips is to use jquery, but I've never used and it confuses me!

  Simple ideas?

  If you use the bootstrap, it is very easy to integrate. Take a look at https://bootstrapbay.com/blog/bootstrap-3-carousel-tutorial/ to help you

• Grid height of container to 100% with background image

  Hello

  I am a beginner with grids of fluid... I want to get whaY I always used to call a div wrapper - up to 100% with a background image, so I can put all my tests on top of it... and I can't get the grid container to stretch 100%...

  I would like to use the container to contain the image, and then run the other diving on top (within) can it... someone please give me a leg upward?

  Thank you

  Try this:

  Resizable background image full Page

  Nancy O.

• Double background image renders in all browsers except IE - time Senitive question

  Looking for help.  I have to hurry to set up a HTML5 Web site, unfortunately, I have to make it look like one that has been created using a model of sitebuilder package.  The original site is http://www.ourvietnamvets.com

  I use Dreamweaver CS5.5 and validated my code structure with WC3 and received without errors or warnings.

  IE does only the background color and not the double background image.

  CSS CODING

  @charset "utf-8";

  {body

  margin: 0;

  do-family: Verdana, Arial, Helvetica, without serif.

  do-size: 14px;

  line-height: 20px;

  background-color: #060b 60;

  height: 400px;

  Width: 992px;

  background-image: url (.. / Images/bg_bp88.jpg), url (.. / Images/bg_jl6x.jpg);

  background-position: top left Center;

  background-repeat: no-repeat, repeat-x;

  margin-left: auto;

  margin-right: auto;

  position:! important;

  }

  HTML5 CODING

  ! DOCTYPE HTML >

  < html >

  < head >

  < meta charset = "utf-8" >

  <!-TemplateBeginEditable name = "doctitle"-->

  < title > Untitled Document < /title >

  <! - TemplateEndEditable - >

  <!-TemplateBeginEditable name = "head"->

  <! - TemplateEndEditable - >

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

  < script src = "SpryAssets/SpryMenuBar.js" type = "text/javascript" > < / script > "

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

  < / head >

  < body >

  < div class = "special" > stays Viet Nam Vets < / div >

  < div class = "container" >

  < div class = "sidebar1″" >

  Y at - it an IE hack or something I should use?  I desperately need help on this.  I have the entire site to the top before the end of the week.  The former site is a reference to an old event of last year and this new site should be up like a blast of e-mail and a lot of marketing for this fundraiser is to get out on Monday morning.

  Thanks in advance to anyone who can offer any help.

  Daisy

  Daisy, there is hope for everyone.

  The good news is that it works in IE9, FF20, Chrome, Safari and other features of CSS level 3 support.

  The bad news is that images of multiple-background in the selector similarly do not appear in pre - IE9 because they are not browsers compliant web standards.  Never have been, never will be.

  The solution would be to feed the lesser browsers IE conditional comment with a single background image.

  Or break things upwards, some more by applying unique background for html selectors, body and .header images.

  Nancy O.

• Background image different (div) on every page of the site complicated by model

  Hope I can explain this: here are the details

  -With the help of Dreamweaver cs5.5

  -Make a model pages.

  -Each page will have a different background image; but the image is contained in a div tag (name of the div is .mainbackground) happening behind the main core of the site, the image is not in the < body >
  -The .mainbackground div is EDITABLE
  -J' already have a css specific class to assign to this div on each page, so that the image is different on each page.
  -On the template page, the .mainbackground div has no class assigned image (so no background image)

  -Because this div is editable I can then go into each page and set it to the desired - image class works very well.  Except that... and this is my main question:

  -In the code, all other regions are listed IN THIS above mentioned div of .mainbackground SO that means that:

  -If I need to update the structure of the pages I have to remove the editable area that controls the background image that would be - remove editable .mainbackround area.  Then go back to my template, make changes and save everything - so any changes will carry through to my other pages.  It's good and bad, because I'd get all the structural changes, but I also let go of all the text specific to these pages.

  - Then when I'm finished I have to go back and first add a combo box to the .mainbackground class and then reapply the background to the .mainbackground classes to fix the images on the pages again...

  The site is very small so I can deal with it, but I'm going about this all wrong?

  
  Is there a template feature that I don't get?  I would like to continue using the template feature, and I don't want a different photo on each page...

  I've attached a picture showing a page that you can see the background image - which will be different on each page.

  So the next solution does not change the CSS if necessary? :

  

• Menu Bar Spry Widget 2.0 with several background images.

  Hello

  I am quite new to HTML & CSS. I designed a navigation system using Dreamweaver built in the Spry menu bar. When I discovered that it did not work on the mobile platform iOS (iPad), I rebuilt using the 2.0 Bar Menu Spry Widget. After going through the tutorial of David Powers on the subject (here: http://www.adobe.com/devnet/dreamweaver/articles/spry_menu_bar.html ) and tweaking the CSS by trial and error that I'm going to look very nice, but is not quite where I want it to be, and I need help. It is a question of the 3 part (well okay, it's three different questions).

  Here are two links to the work in progress (note: all site links, see the pages still using the older menus built-in spry bar - please ignore them). CSS for the menu is contained in these documents. Each maintains a drop-down list in a slightly different way. Both versions are relevant to questions 2 and 3.

  http://www.mentalwarddesign.NET/Dynamech/about/index.html

  http://www.mentalwarddesign.NET/Dynamech/about/indexV2.html

  1. when a link is set to a menu item that contains a submenu, the submenu drop-down does not work on iOS touchscreen devices (ie the iPad). Main menu link must be removed so that it works correctly. I want a user to be able to click (or tap) on the main menu item and be taken directly to the first page in the submenu. Is there a solution for this?

  2. the first version (/ index.html) has a submenu with a border and demarcation lines. The second version (/ indexV2.html) has no borders/lines, but a RADIUS on the corners. I try to combine these to have the RADIUS and the lines. The borders are controlled by #MenuBar. SubMenu.MenuItem RADIUS is controlled by #MenuBar.SubMenuVisble and #MenuBar.MenuLevel1.SubmenuVisible. The problem I get when you combine the two effects is that borders extend beyond the RADIUS. I tried ' overflow: hidden ' on any combination of the foregoing ID's and the only thing that made him the flyout of sub-sub to appear is prevented. Any thoughts on how I might accomplish this?

  3 here is what is referenced in the subject.  The Menu bar is in a div tag called navMain. The background image in this div is made unique navigation bar image to look like seven tabs. If you look at the indexV2.html link above and go to the 'about' tab you'll see what I'm doing. I need to use a different background image for each tab for consulted/assets /. And of course I don't want the images repeat in the submenus as they do here. But wait, there is more! I also want to create a State "chosen" so that the image on hover shows from any page you are visiting currently - IE if you look at any page in the 'Drawings' submenu (of lets say that you are on the "miscellaneous" page) then the stationary image for "Drawings" is displayed. And if possible, he would suffer to the question I posed in the #1?

  Thanks in advance for helping this newbie. The responces are greatly appreciated.

  Ed

  If the markup of my menu bar is the following

  • Homepage
  • Entertainment
  • Policy
  • Sports

  so I can style each button as follows

  #MenuBar .home. MenuItem, #MenuBar .home. MenuItem. {MenuItemLabel}

  background-color: orange;

  }

  #MenuBar .entertainment. MenuItem, .entertainment #MenuBar. MenuItem. {MenuItemLabel}

  background-color: red;

  }

  #MenuBar .politics. MenuItem, #MenuBar .politics. MenuItem. {MenuItemLabel}

  background-color: white;

  }

  #MenuBar .sports. MenuItem, .sports #MenuBar. MenuItem. {MenuItemLabel}

  background-color: blue;

  color: white;

  }

  GRAMPS

• Failed to insert a background image in a changeable ID style

  I use Dreamweaver CS4. I can't insert a background image into an editable region in a Style ID

  The message I get "this change should change the code which is locked by a model or a translator. The changes will be ignored.

  Can someone tell me how to unlock the background image. I can display text without a problem.

  Thank you

  Jim

  I need to put a different background image into the #banner in each page based on the template.

  Open each page.  On each page, you can change this.

  on this subject.

  Save and close the page.  You will now have a different background image on each of these pages.