SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    the align attribute in HTML

    Okay, I understand that "align" is deprecated. So I shouldn't use it as in the website I am updating, although it puts the image and text where I want both:

    <p><img src="graphics/bell-ringer.jpg" align=left width="150" height="150" alt="photo of child bell-ringer"></p>

    <p>You may hear the church bell in the steeple ringing; the children love to ring it!</p>

    The problem is this; I have a number of photos on that page, some of which are on the left, and some on the right. If I were to use CSS and text-align, I would have to make a div and a CSS rule for every single bit of text I wanted to place beside an image!

    Or am I wrong?

    [probable, I'm new!]

    Here is the page I am trying to transform from table-based to CSS-based:

    http://www.unitarianchurchofmontpelier.org/visit.html

    Thanks!

    Polly

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,786
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    style="float:left" and style="float:right"

    or set up your CSS with

    Code:
    .left {float:left;}
    .right {float:right;}
    and then use class="left" and class="right"
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are these classes to apply to the images?

    Because if they are to be applied to the text, wouldn't I have to put each piece of text in a div?

    Thanks for your help!

    Polly





    Quote Originally Posted by felgall View Post
    style="float:left" and style="float:right"

    or set up your CSS with

    Code:
    .left {float:left;}
    .right {float:right;}
    and then use class="left" and class="right"

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,786
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You can apply them directly to the images.

    Youd use text-align:left text-align:center and text-align:right on the container if you want to align the text in that container.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, I see!

    Just tried it, and it works.

    Now, on that same page, after the bell-ringer photo, I have used "br" to push the next photo down a bit.

    Is that acceptable?

    Thanks again!

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, I see!

    Just tried it, and it works.

    Now, on that same page, after the bell-ringer photo, I have used "br" to push the next photo down a bit.

    Is that acceptable? It seems rather presentational to be in the HTML.

    Thanks again!

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,786
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Set the top-margin on the image instead.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If an image can have a border, which I knew it could, it can have a margin!

    I may yet make it to laying out these pages all in CSS.

    Thanks!

    Polly

  9. #9
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code CSS:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    </style>
    </head>
    <body><!-- The Start of the Markup -->
    <div id="Container">
     
         <div id="Content">
              <h1>Unitarian Church of Montpelier</h1>
              <h4>Your first visit!</h4>
    <p>First of all, welcome!</p>
       <p>We hope you feel comfortable with us, and to help with that, we've put some practical information here. </p>
       <p><a href="#">Your Link</a>Directions are here, and information about children and the church is here. Parking in the immediate vicinity of the church can be tight on Sunday mornings because there are four churches very close to each other, but just a block or so away there is plenty of free parking; no need to use the meters on Sundays</p>
       <p>Our services start at 10 a.m. We have a greeter at the front door; please feel free to ask any questions you may have! The greeter knows how to operate the lift if you need assistance in getting upstairs. </p>
       <img src="image.jpg" width="350" height="190" class="right" alt="image"><!--This image is floated right-->
       <img src="image.jpg" width="150" height="150" class="left" alt="image">
       <p>The stairs at either side lead up to the sanctuary, where the ushers will give you the printed order of service. [The first two rows are reserved for the choir.] The order of service also contains the weekly announcements, which give an idea of what we're all doing! </p>
       <img src="image.jpg" width="341" height="256" class="right" alt="image">
       <p>Our usual services have the children remaining with their parents for the first short portion, and then the whole congregation sings the children out to church school:</p>
    <p>
         Go now in peace, go now in peace,
         May the spirit of love surround you
         Everywhere, everywhere you may go
                          </p><!--This is the Poem were going to style it with CSS since the Text is italic-->
    <p>We then move through hymns, meditations, music, and homily in a varied mix. Here the choir is performing:</p>
    <img src="image.jpg" width="" height="" alt="image">
    <p>After service, many of us come downstairs to the Vestry for coffee. There are often people at tables for the various committees and events; one place you might like to stop at is the Welcome Table, usually on the left near the coffee area. </p>
    <p>Bathrooms are through the right or left doors either side of the stage in the Vestry. </p>
    <p>We hope you enjoy your visit. If there is anything you need, please ask anyone, and if they can't help, they'll find someone who can! </p>
    </div><!--End of Content-->
    </div><!--End of Container-->
    </body>
    </html>
    I started you off. Im pretty sure you know how to style the Content correct?
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  10. #10
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for replying!

    I see what you are doing.

    And yes, I can style content, if it is text. But with images I am having a problem. Specifically, I have the following image:

    <img src="graphics/bell-ringer.jpg" width="150" height="150" alt="photo of child bell-ringer" class="left">

    Let's say I would like to style this single image with a margin at the top of 40px. How do I do it? Exactly what code do I write, and where does it go in the element?

    I can't use a class, because there is already one there, to force the image to the left.

    I don't want to alter the class "left" because I'm using it for other things.

    I need to do this so it doesn't come too close to the image above it. I used several "br" before, but it has been suggested in this thread to instead add a margin to the image.

    I'm sure it's simple, but at the moment I am feeling simple!

    Polly

    PS would it perhaps be better to put the text I want to place in a div, and then position the div? It would mean several small divs per page, but I can place blocks exactly with divs.

  11. #11
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pellerbe View Post
    Let's say I would like to style this single image with a margin at the top of 40px. How do I do it? Exactly what code do I write, and where does it go in the element?
    There are several options. If it's just for a single image, you can give it an ID (or another class; see below) and style that via CSS:
    Code HTML4Strict:
    <img src="graphics/bell-ringer.jpg"  width="150" height="150" alt="photo of child bell-ringer" class="left" id="bell-ringer">
    Code CSS:
    #bell-ringer {margin-top:40px}

    You can also set the style directly on the image element, but the disadvantage of that is that you'll have to edit the HTML document just to change the presentation (a hard coupling, which is usually undesirable).
    Code HTML4Strict:
    <img src="graphics/bell-ringer.jpg"  width="150" height="150" alt="photo of child bell-ringer" class="left" style="margin-top:40px">

    Quote Originally Posted by pellerbe View Post
    I can't use a class, because there is already one there, to force the image to the left.
    An element can belong to many classes. You specify them in the same class attribute, separated with spaces:
    Code HTML4Strict:
    <img src="graphics/bell-ringer.jpg"  width="150" height="150" alt="photo of child bell-ringer" class="left special">
    Code CSS:
    .left {float:left}
    .special {margin-top:40px}

    BTW, are you sure 'photo of a child bell-ringer' is a good text equivalent for the image? Is that what I'd need to know if I visited your site with images disabled, or what you'd say if you were to read the content of the page to me over the phone?

    I'm not saying it isn't, but a description of an image is very rarely the right text equivalent. If the image conveys information, the text equivalent should convey the same information. If the image is purely decorative (which this sounds like, to me), the best action is to specify an empty text equivalent (alt="") to indicate that it doesn't convey any imporant information.

    Note that a text equivalent is highly context-sensitive and should fit in with the surrounding text. Would 'photo of a child bell-ringer' sound out of place if a screen reader were reading the content of that page (in linear order as it occurs in the HTML markup)?
    Birnam wood is come to Dunsinane

  12. #12
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see what you are doing, and it works!

    Thank you so much.

    What I ended up doing was enclosing the photo and relevant text in a div, and then using a class in the CSS to put a top margin on the div. It meant several rules for the different top margins, but it worked.

    Now, within such divs, is there a way to center the text along whatever side of the photo the text is on?


    To see what I want to do, please look at

    http://www.unitarianchurchofmontpelier.org/visit.html

    except that page is all done using tables, which is why I am revising the site.

    thanks again!

    Polly

    PS I've just had a thought; I suppose I could position those divs instead of using margins, but I'd still have to position each one individually, so nothing would be saved. And I might be able to use the topmargin rules elsewhere in the site.

  13. #13
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pellerbe View Post
    Now, within such divs, is there a way to center the text along whatever side of the photo the text is on?
    I'm sorry, but I don't think I understand what you're saying here.
    Do you mean that you want to centre the text vertically next to the photo? If so, that's the one thing that's much harder to do with CSS than with tables.

    Quote Originally Posted by pellerbe View Post
    PS I've just had a thought; I suppose I could position those divs instead of using margins, but I'd still have to position each one individually, so nothing would be saved.
    Positioning would be a much poorer solution for this, since positioned boxes are removed from the flow. If you were to edit the text and add a couple of sentences to one div, you might have to re-position all subsequent divs.

    I recommend that you let the divs remain in the flow. However, I'm beginning to suspect that you're using margins for the wrong reason ...

    Are you trying to make the text of the next paragraph start below the previous photo? If so, you should use the clear property to ensure that an element clears any preceding floats. Margins can't be used for this, since you don't have full control over the page width or the font size.

    You can do something like this:
    Code HTML4Strict:
    <div>
      <p><img src="..." alt="..." class="left"> Lorem ipsum dolor sit amet...</p>
    </div>
    <div>
      <p><img src="..." alt="..." class="right"> Lorem ipsum dolor sit amet...</p>
    </div>
    Code CSS:
    .left {float:left}
    .right {float:right}
    div {clear:both}

    Add a bottom margin to the floated images (or a top padding to the cleared divs) to get some space.
    Birnam wood is come to Dunsinane

  14. #14
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    About centering text besides a photo; well, it's nice to know it just wasn't my lack of knowledge!

    About margins: you had it exactly right! wrong tool for the purpose. Doing it your way made for many fewer rules in the CSS too.

    Tommy, I haven't said this before and it's time to. You are an absolute dear to spend your time helping me! I very much appreciate it!

    I have read the references, but it can be difficult for a beginner to know when to apply what. So the personal help you are willing to give is all the more valuable.

    Thanks again!

    Polly

  15. #15
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pellerbe View Post
    Tommy, I haven't said this before and it's time to. You are an absolute dear to spend your time helping me! I very much appreciate it!
    Polly, it's a pleasure to help someone who is willing to learn. I honestly enjoy doing that.
    Birnam wood is come to Dunsinane


Bookmarks

Posting Permissions

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