CSS Hotspot on centered Image

Similar Questions

• EPub with Apple Pages centering images

  I use Apple Pages to create an eBook (I know I could have used InDesign, I'll use it for the next!). All the text is there, I used topics, and I am very satisfied with the result. However... When I export to ePub, the images are not centered. They are focused on the use of PDF. Take a look at my settings of the image pages to the following screenshot:

  

  

  The image (this is an example, but all 150 images in this way) is aligned to the Center by using the "Align" function you can see to the right, but when I select 'Center', it does not move (because it is already in the Center), and displays Align. I don't know if it's good or bad.

  

  

  As you can see, the image is aligned to the right when I export the ePub book and open it with Mac iBook. This is exactly the same on my iPad / iPhone. The image fell thus: look at the difference between the pictures shown in the screenshots that I added in this message.

  I'm running out of ideas and I hope you can help me.

  This is my first post on the Apple support forum, so please tell me if I could have explained something more accurately! :-)

  Thank you!

  Well, it's not too late to redo it in InDesign. The following has been done in v5.6.2 on OS X 10.11.6 Pages.

  I inserted and centred on an image in v5.6.2 Pages with above and below the text. The result when you export to PDF showed the image centered in overview and Acrobat Reader. When exporting Pages to ePub3, the image was right-justified in iBooks and saw that centered in Sigil 0.96 and Calibre 2.63.0.

  I decided to see if I could fool iBooks. With the help of Sigil, I added changes in style of book.css and referenced in the chapter file - 1.xhtml. Here, I'm telling you the div containing the image to use 70% of the width of the ePub with 15% margins on each side, apply 1em margin top and bottom margin of manoeuvre. Because the image is inside the div, I'm ordering him to use 100% of the container.

  

  After that I saved these changes in Sigil. The ePub open in iBooks with the centered image designated.

  

  I don't think you can fix this issue within Pages centering v5.6.2 image.

• How to call the css file and the images of our application...

  Hai,
  
  
  IM downloading a .css file and images in it that apex of the components shared , now how call the css file and the images of my request... Please tell me detailed...
  
  Published by: David on November 3, 2008 12:51 AM

  Hi David,

  Sorry, has not seen that you had started a new thread, so have answered this in 'undefined' is null (or) not an object " "

  Andy

• Centering images

  What is the best way to center an image on a page.  I can't do that with a new CSS rule... I accomplished it by wrapping the image in an h1 since my h1 tag is centered, but something tells me that this is not the best way.  No oh my new rules seem to work to get it centered and would appreciate any help certainly.

  Howard

  Example of source code:

  < ! 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 "> <!-InstanceBegin template="/Templates/maintemplate.dwt ' codeOutsideHTMLIsLocked = 'false'->
  < head >
  < meta http-equiv = "Content-Type" content = text/html"; charset = utf-8 "/ >"
  <!-InstanceBeginEditable name = "doctitle"-->
  < title > Dreamscapes #1 - the story behind the Image < /title >
  <! - InstanceEndEditable - >
  <!-InstanceBeginEditable name = "head"->
  < name meta = "robots" content = "index, follow" / >
  <! - InstanceEndEditable - >
  "< link href ="... /... "/ oneColFixCtrHdr.css" rel = "stylesheet" type = "text/css" / >
  "< script src ="... /... "/ SpryAssets/SpryMenuBar.js" type = "text/javascript" > < / script >
  "< link href ="... /... "/ SpryAssets/SpryMenuBarHorizontal.css" rel = "stylesheet" type = "text/css" / >
  "< link href ="... /... ' / favicon.ico ' rel = "shortcut icon" / >
  < / head >

  < body >

  < div class = "container" >
  < div class = "header" >
  "< h1 > < img src ="... /... "/ Images/headerlogo/headerlogo.png" width = "515" height = "41" alt = "Howard Grill Fine Art Photography" / > < br / >
  & quot;
  See things in a different light & quot; < br / >
  < / h1 >
  < ul id = "MenuBar1" class = "MenuBarHorizontal" >
  "< li > < a href ="... /... / index.html "> home < /a > < /li >"
  "< li > < a href ="... /... ' / portfolios.html ' class = "MenuBarItemSubmenu" > < /a > portfolios
  < ul >
  "< li > < a href ="... /... / landscapes.html "> landscapes < /a > < /li >"
  "< li > < a href ="... /... / pittsburghparks.html "> Pittsburgh parks < /a > < /li >"
  "< li > < a href ="... /... / sceneinstone.html "> scene in stone < /a > < /li >"
  "< li > < a href ="... /... / dreamscapes.html "> Dreamscapes < /a > < /li >"
  "< li > < a href ="... /... / urban.html "> Urban < /a > < /li >"
  "< li > < a href ="... /... / botanicals.html "> Botanicals < /a > < /li >"
  "< li > < a href ="... /... / oddsnends.html "> Odds ' n ends < /a > < /li >"
  < /ul >
  < /li >
  < li > < a href = "#" > Blog < /a > < /li >
  "< li > < a href ="... /... / articles.html "> items < /a > < /li >"
  "< li > < a href ="... /... ' / purchase.html ' class = "MenuBarItemSubmenu" > purchase < /a >
  < ul >
  "< li > < a href ="... /... / purchaseprints.html "> print < /a > < /li >"
  "< li > < a href ="... /... / purchasefolios.html "> Folios < /a > < /li >"
  "< li > < a href ="... /... / purchasenotecards.html "> cards < /a > < /li >"
  < /ul >
  < /li >
  "< li > < a href ="... /... "/ about.html ' class ="MenuBarItemSubmenu"> on < /a >
  < ul >
  "< li > < a href ="... /... / bio.html "> Bio < /a > < /li >"
  "< li > < a href ="... /... / contact.html "> Contact < /a > < /li >"
  "< li > < a href ="... /... / mailinglist.html "> list < /a > < /li >"
  "< li > < a href ="... /... / website.html "> website < /a > < /li >"
  < /ul >
  < /li >
  < /ul >
  < / div >
  <! - end .header - >
  < div class = "clear" > < / div >
  <!-InstanceBeginEditable name = "MainContent" value->
  < div class = "content" >
  1 Dreamscapes < h1 > < / h1 >
  "< h1 > < img src ="... /... "/ Images/storyimages/dreamscapes/dreamscapes1story.jpg" alt = "Dreamscapes #1" width = "800" height = "533" class = "centerimg" / > < / h1 > "."
  < p > < / p >
  < p > place: island of Sanibel, Florida, USA. < /p >
  < p > place: Gulf of Mexico < /p >
  < p > what effect surprising a zone plate can have on an image. The way it bends light seems to wrap the object in a soft light while giving a glow highlights. NET development is not possible, but the blurry appearance only adds to the mystery of the image. < /p >
  < p > as I mentioned in the statement of the artist, I won't give my thoughts about what the images in this series mean to me, I would rather their interpretation open to the Viewer. I find it interesting that I've heard quite varied iterpretations of each of these pictures from different people. In each case the interpretation was based on the events of the life of viewers. The interpretation of these images is a personal experience and, in my mind, it's what makes them unique. < /p >
  < p > < a href = "dreamscapes2story.html" > < img src = "... /.." "/ Images/pageimages/nextbutton.jpg" alt = "Next Image" width = "75" height = "20" class = "fltrtnoborder" / > < /a > < /p >
  < p > < / p >
  < p align = "center" >
  < input type = "button" value = "Close window" onclick = "self.close (); "onkeypress ="self.close (); "/ >
  < /p >
  < / div >
  <! - InstanceEndEditable - >
  < div class = "footer" > © 2011 Howard Grill | "All rights reserved < span class ="footertextright"> < a href ="... /... "/ index.html" title = "Howard Grill photography Home Page" > home < /a > | "< a href ="... /... "/ contact.html" title = "Contact Howard Grill" > Contact < /a > <! - end .footer - > | "" "< a href ="... /... "/ sitemap.html" title = 'Site Map' > Sitemap < /a > < / span > < / div >
  <! - end .container - > < / div >
  < script type = "text/javascript" >
  var MenuBar1 = new Spry.Widget.MenuBar ("MenuBar1", {imgDown: "..."}) "" / SpryAssets/SpryMenuBarDownHover.gif ', imgRight: ".. ({"/ SpryAssets/SpryMenuBarRightHover.gif"});
  < /script >
  < / body >
  <! - InstanceEnd - > < / html >

  And the CSS file:

  @charset "utf-8";
  {body
  margin: 0;
  padding: 0;
  color: #FFF;
  do-family: Verdana, Arial, Helvetica, without serif.
  do-size: 100%;
  line-height: 1.4;
  background-color: #888;
  }

  / * ~ ~ Tag of the element selectors ~ ~ *.
  UL, ol, dl {/ * because of variations between the browsers, it's best practices to zero padding and the margin on lists.} For consistency, you can specify the amounts you want to here, or on the list (LI, DT, DD) items they contain. Don't forget that what you're doing here cascade to the .nav list unless you write a more specific selector. */
  margin: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 100px;
  }
  H1, h2, h3, h4, h5, h6 {p}
  margin-top: 0;     / * remove the top margin works around a problem where margins can escape from their container div. The margin of the low rest it will take away from all of the following items. */
  padding-right: 15px;
  padding-left: 15px; / * adding padding to the sides of the elements in divs, instead of divs themselves, gets rid of any mathematical model of box. A div nested with side pads can also be used as an alternative method. */
  }
  . Container .header h1 {}
  do-family: Verdana, Geneva, without serif.
  do-size: 120%;
  color: #4A 0404;
  left margin:-17px;
  margin-top: 10px;
  make-style: italic;
  make-weight: bold;
  line-height: 140%;
  }

  an img {/ * this switch how to remove the default blue border displayed in some browsers around an image when it is surrounded by a link * /}
  border: none;
  }
  / * ~ ~ Style for your site links must remain in this order - including the Group of selectors that create the hover effect. ~~ */
  a: link {}
  color: #FFF;
  text-decoration: underline; / * unless you style your links appear to be extremely unique, it is best to predict stresses quick visual identification * /.
  }
  a: visited {}
  color: #FFF;
  text-decoration: underline;
  }
  a: hover, a: active, a: focus {/ * this group of selectors will give a browser keyboard the same experience of hovering as the person using a mouse. * /}
  text-decoration: underline;
  color: #A3A2A0;
  }

  . Clear {}
  Clear: both;
  }
  .clearfloat {/ * this class can be placed on a < br / > or div empty as the final element after the last div floating (in the #container) if the #footer is removed or put out the #container * /}
  Clear: both;
  height: 0;
  font size: 1px;
  line-height: 0px;
  }

  / * ~ ~ This container fixed-width surrounds the other div ~ ~ * /.
  . Container {}
  Width: 960px;
  margin: 0 auto;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  border-bottom-color: #FFF;
  border-right-color: #FFF;
  border-bottom-color: #FFF;
  border-left-color: #FFF;
  }

  / * ~ ~ It's layout information. ~~

  (1) padding is only placed on the top or the bottom of the div. The items in this div have padding on their sides. This avoids any «mathematical model of box» Keep in mind, if you add lateral pads or border to the div itself, it will be added to the width that you set to create the * total width. You can also remove the padding of the element inside the div tag, and place a second div inside it with no width and padding necessary for your design.

  */

  . Happy {}
  background-color: #000;
  padding-top: 10px;
  padding-right: 0;
  padding-bottom: 10px;
  padding-left: 0;
  margin: auto;
  do-family: Arial, Helvetica, without serif.
  font-size: 105%;
  border: 1px solid #FFF;
  }

  / * ~ ~ the header is not given a width. It will extend to the entire width of your layout. It contains an image placeholder to be replaced by your own logo linked ~ ~ * /.
  . Header {}
  background-image: none;
  color: #4 has 0404;
  text-align: center;

  }

  / * ~ ~ Footer ~ ~ * /.
  .footer {}
  do-size: 80%;
  text-align: left;
  padding-top: 8px;
  padding-right: 0;
  padding-bottom: 8px;
  padding-left: 10px;
  margin: 0px;
  }
  {.footertextright}
  padding-left: 475px;
  }
  .footer a: link {}
  color: #FFF;
  text-decoration: underline;
  }
  .footer a: active {}
  color: #4A 0404;
  text-decoration: underline;
  }

  .footer a: visited {}
  color: #FFF;
  text-decoration: underline;
  }
  .footer a: hover {}
  color: #4A 0404;
  }

  
  / * ~ ~ various float/clear classes ~ ~ * /.
  .fltrt {/ * this class can be used to float right to the item in your page.} The floating element must precede the element it should be next to the page. */
  float: right;
  margin left: 15px;
  border-top-width: 2px;
  border-right-width: 2px;
  border-bottom-width: 2px;
  border-left-width: 2px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  }
  .fltlft {/ * this class can be used to float an element on your page.} The floating element must precede the element it should be next to the page. */
  float: left;
  right margin: 15px;
  border-top-width: 2px;
  border-right-width: 2px;
  border-bottom-width: 2px;
  border-left-width: 2px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  }
  H1 {}
  text-align: center;
  font-size: 175%;
  padding-top: 15px;
  }
  H2 {}
  do-size: 150%;
  }

  
  . Header img {}
  padding-bottom: 15px;
  padding-top: 0px;

  }
  table {}

  }

  .caption {}
  make-style: italic;
  text-align: center;
  }

  {.italics}
  make-style: italic;
  do-size: 90%;
  text-align: left;
  }
  {#form}
  padding-left: 100px;
  }
  H3 {}
  do-size: 110%;
  }
  {.centertext}
  text-align: center;
  }
  {.centerimg}
  text-align: center;
  border: 2px solid #FFF;
  }
  {.fltlftnoborder}
  float: left;
  }

  {.fltrtnoborder}
  float: right;
  }

  hpg1 wrote:

  What is the best way to center an image on a page.

  http://cookbooks.Adobe.com/post_Centering_web_pages_and_other_elements_with_CSS-16640.html

• How to use CSS Transition of an image (navigation tab) move higher steady-state?

  I added padding and increase the height of the navigation bar to give place, but the images do not respond.  The Transition CSS function instead of the code outside of media from the media query and so I move it inside.  It does not in any way.  The pictures didn't budge.  This is not a problem with a nav footer where I use text instead of images and can easily change hover text and other States.  Problem seems to be in getting the Transition CSS function to work with button images.  I also tried to change the images to the expansion buttons and it does not work either.  Since the pictures are links, I have them in the html code.  I can't put in CSS and get them to work as links, unless there is a way that I'm not aware of.  It is perhaps part of the problem.  But given that many sites use images as buttons in nav that I believe that there is an easy solution.  Would be very grateful for help.

  Personally, I try to avoid using navigation based on image, because whenever you modify your site and menus, you must re-craft the images in a graphics application.  After 2 or 3 revisions site, it ages in a hurry.  More importantly, CSS style text links are much better for SEO, the translators of robot and screen readers.  Images of text may not be indexed, translated or "seen" by screen readers.

  That said, it's how to make the graphical buttons with image sprites. No complicated transitions JavaScript or CSS required.  It is made with the background images, background-position, and indented text links.

  ALT-Web demos: CSS Sprite button

  Nancy O.

• Centers image in cs5

  Most problems that are driving me crazy. The image in the link below left in firefox (which is what I want), but shows that centered in dreamweaver. Ideas to please as I'm pulling my hair out here thanks for any advice.

  http://www.sunridgegraphics.co.UK/AC3.html

  The fastest way is in a straight line after the last floating

  
  

  
  

  
  style = "" list-style-type: none; ">"
  
• what the hell goes wrong... heeelllpppppp!
  
• 
  
•