Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image alignment within a div

    Hi. I'm just learning html and css. My project is formatting an ebook, and it's looking pretty good so far. My challenge is in aligning the images. I have them each (60 images throughout the book) in a div which includes the caption. I'm trying to get them to align center. They're not all the same width, but none is over 550 px and 300 dpi. My wish is to have each caption also align center, and no wider than its image. Is this possible? I'm having tremendous problems!

    Does it matter in what order I place the declarations within the stylesheet?

    Here's the CSS I have so far (which isn't working!). I know I'm pasting in too much, but maybe something is conflicting with the pertinent parts.

    html {
    margin: 0;
    padding: 0;
    }
    body {
    font: 95% georgia, palatino, serif !important;
    line-height: 1.8 !important;
    color: #000;
    margin: 1.5em;
    padding: 0;
    text-indent: 1.2em;
    margin-bottom: 0em;
    }
    p {
    text-indent: 1em;
    text-align: left !important;
    margin-bottom: 0em;
    orphans: 2;
    widows: 2;
    }
    p.contents {
    text-indent: 0em;
    margin-top: .7em;
    }
    p.chapter {
    text-indent: 0em;
    font-weight: bold;
    font-size: 1.5em;
    page-break-before: always;
    margin-top: 3em;
    margin-bottom:3.5em;
    text-align: center !important;
    }
    /*to force a pagebreak*/
    p.newpage {
    page-break-before: always !important;
    text-indent: 0em;
    }
    p.firstpara {
    text-indent: 0em;
    }
    p.firstpara:first-letter {
    font-family: "georgia";
    font-weight: bold;
    float:left;
    font-size: 200%;
    margin-top: -.1em;
    margin-right: .1em;
    }
    p.firstpara:first-line
    font-variant: small-caps;
    }
    span.chapnum {
    font-size: 1em;
    font-weight: regular;
    margin-bottom:.5em;
    }
    p.subhead {
    font-size: 1.5em;
    font-style: italic;
    text-indent: 0em;
    margin-top: .5em;
    margin-bottom: .1em;
    }
    p.subsubhead {
    font-size: 1.3em;
    text-indent: 0em;
    margin-top: .3em;
    }
    p.minihead {
    font-size: 1.2em;
    text-indent: 0em;
    text-decoration: underline;
    margin-top: 0em;
    }
    p.sidebarmark {
    font-size: 1em;
    text-indent: 0em;
    font-weight: regular;
    font-style: italic;
    margin-top: 0em;
    margin-bottom: -1em;
    }
    p.sidebarmarkend {
    font-size: .8em;
    text-indent: 0em;
    font-weight: regular;
    font-style: italic;
    margin-top: .3em;
    margin-bottom: .7em;
    }
    p.rightalign {
    text-align: right !important;
    }
    p.glossary {
    }
    /*Differentiate sidebars*/
    #sidebar {
    color: #632c09;
    font-family: TrebuchetMS, sans-serif !important;
    border-top: 1px dashed red;
    border-bottom: 1px dashed red;
    margin-top: 3em;
    margin-bottom: 3em;
    }
    div.pic {
    display: inline-block !important;
    margin-top: 2em;
    margin-bottom: 1.5em;
    }
    img {
    image-align: center !important;
    margin-bottom: .1em !important;
    }
    p.caption {
    font-style: italic;
    text-align: center !important;
    text-indent: 0em;
    font-size: smaller;
    font-color: black;
    margin-left: 5%;
    margin-right: 5%;
    }
    div.keep {
    display: inline-block !important;
    }
    blockquote {
    margin-top: 1em;
    margin-right: 5em;
    margin-bottom: 1em;
    margin-left: 4em;
    line-height: 1.6em !important;
    font-style: italic;
    }
    /*To eliminate first line indent after image*/
    div + p {
    text-indent: 0em !important;
    }
    blockquote + p {
    text-indent: 0em !important;
    }
    /*For resources at the end of book*/
    p.info {
    text-indent: 0;
    margin-bottom: 1em;
    }
    ul {
    list-style-position: outside;
    text-indent: -.5em;
    margin-left: 1em;
    }
    Any suggestions or advice would be very much appreciated!

  • #2
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    can you paste or provide the HTML so we know what is being applied where?

    Also, you shouldn't have a 300dpi image for an html page, as it's just a big file that doesn't need to be there.

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks resdog.

    I too thought 300 dpi was large, but I read (somewhere) that that's desirable for ebooks. I will research further.

    Each image is in a div like this:


    </p>
    <div class="pic">
    <p><img src="a.luciano.jpg" alt="luciano on tram" /></p>
    <p class="caption">At work on the tram: Luciano (top) and his three partners. Victim&rsquo;s cap is visible at lower left.</p>
    </div>


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •