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
    Mar 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image aligning problems/Page Break problems

    Now everyone keep in mind that I had not even heard of html until 3 days ago when I decided to learn how to make a page for our family. Well now I am obsessed. I use Opera and all seemed fine as I previewed my page until I checked it on IE - darn IE. After all I have learned reading today, Iwill probably scrap it all and start over soon without all my tables, etc. but.. for now I just need to viewable for my family when they use IE. Here's the site:
    www.angelfire.com/blog2/frankcassiesmom The pictures under the main family picture (the ones of my children) line up under the main pic and text and are aligned correctly left, center, right, when I view in Opera. In IE, they are all messed up. I can't figure out how to get those pictures' placement to not be dependant on page size. If the page is reduced, they creep up under the font and look weird. I almost feel vulnerable inviting people to look at my jumbled up, over accesorized code. But for 3 days in, at least the page looks okay. SO help me permanently align those images please.

    Thanks
    Last edited by frankcassiesmom; 03-03-2005 at 03:46 AM.

  • #2
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The pictures under the main family picture (the ones of my children) line up under the main pic and text and are aligned correctly left, center, right, when I view in Opera. In IE, they are all messed up. I can't figure out how to get those pictures' placement to not be dependant on page size. If the page is reduced, they creep up under the font and look weird. I almost feel vulnerable inviting people to look at my jumbled up, over accesorized code.
    Here's the code involved, in the future, please post it along with your question.
    Code:
    <p><font color="#cc9999"><img align="left" border="13" src="/blog2/frankcassiesmom/familypics/superfrank2.jpg" width="180" height="270" style="border: 13px solid #cc9999"><img align="center" border="13" src="/blog2/frankcassiesmom/Feb2005children/WebCassie.jpg" width="165" height="290" alt="" style="border: 13px solid #cc9999"> <img align="right" border="13" src="/blog2/frankcassiesmom/Feb2005children/Webadric.jpg" width="200" height="220" alt="" style="border: 13px solid #cc9999"></font>
    The <p> and <font> tags are not adding anything here, so you can remove them. The <p> tag is appropriate for a paragraph of text but the <font> tag is deprecated in favor of applying formatting through CSS. Also, align="x" on your images can go. Images are inline elements by default, so they will line up next to each other without help.

    You can acheive the same thing (with everything else stripped out) like this:
    Code:
    <html>
      <head>
        <style>
          .family { border:solid 13px #cc999; float:left; }
    
          #superfrank { width:180px; height:270px; }
          #WebCassie { width:165px; height:290px; }
          #Webadric { width:200px; height:220px; }
        </style>
      </head>
      <body>
    
        <img id="superfrank" class="family" src="/blog2/frankcassiesmom/familypics/superfrank2.jpg" alt="">
    
        <img id="WebCassie" class="family" src="/blog2/frankcassiesmom/Feb2005children/WebCassie.jpg" alt="">
    
        <img id="Webadric" class="family" src="/blog2/frankcassiesmom/Feb2005children/Webadric.jpg" alt="">
    
      </body>
    </html>
    The elements in the <body> are styled by the rules in the <style> section between the <head> tags.

    The .family defines a class of elements. Any element with class="family" will have the corresponding rules applied. Useful when you want to style several elements the same way.

    You'll notice each pic has its own id. Only one element per page can have a given id. Useful when you have several elements with unique dimensions.

    To get things looking right across browsers you'll also need to start with the appropriate DOCTYPE and validate your code as you go.

    Welcome to the forums. You're in the right place. Spend some time browsing recent posts and be sure to use the search feature. Also read over the guidelines while you're it at.
    Last edited by mcdougals4all; 03-03-2005 at 02:23 AM.
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #3
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks. I had to tweak it some because after I did it, the borders changed to green like the font. But it did cut back on some of my unneeded code "accessories" and led me to read and leanr about a lot of stuff I didn't understand. Thanks!

    Kim

    Oh and sorry about not posting the code. My first time *blush*


  •  

    Posting Permissions

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