cannot line up text and image as desired

Discussion in 'CSS' started by StickMaker, Jan 17, 2007.

  1. #1
    All the text on the page should be left-justified; all the images centered. I can't get it; can somebody please straighten out this old man? Here are my Style section and part of the html in the body:

    IN THE HEAD:
    <style>
    	h2 {color: #FF00FF;
    	font-family: "comic sans ms", Tahoma, Verdana, Arial, sans-serif;
    }
    	.imgborder {
    	border: 5px solid #FFFFFF;
    }
    	img.floatCenter {
            float: center;
            margin: 10px;
    }
    	p { text-align: left;
    	font: 16px "comic sans ms", Tahoma, Arial, sans-serif;
    	color: #FFFFFF;
    }
    </style>
    HTML:
    IN THE BODY:
    <p>This image has a 5-pixel-wide white (FFFFFF) border added by css.<br><br>
    
    <img style="width: 300px; height: 221px;" alt="dog in my cheezies"
     src="dog.jpg" class="imgborder" class="floatCenter" /><br><br><p>I actually found this in my Cheezies.<br><br>
    
    <p>Note that the image is centered because of the css in the head.
    HTML:
    thanks!
     
    StickMaker, Jan 17, 2007 IP
  2. crazybjörn

    crazybjörn Peon

    Messages:
    270
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #2
    The CSS:

    <style>
    h2 {
      color: #FF00FF;
      font-family: "comic sans ms", Tahoma, Verdana, Arial, sans-serif;
    }
    
    .imgborder {
      border: 5px solid #FFFFFF;
    }
    
    .floatCenter {
      text-align: center;
      margin: 10px;
    }
    
    p {
      text-align: left;
      font: 16px "comic sans ms", Tahoma, Arial, sans-serif;
      color: #FFFFFF;
    }
    </style>
    HTML:
    The HTML:

    <p>This image has a 5-pixel-wide white (FFFFFF) border added by css.</p>
    <div class="floatCenter"><img style="width: 300px; height: 221px;" alt="dog in my cheezies" src="dog.jpg" class="imgborder" /></div>
    <p>I actually found this in my Cheezies.</p>
    <p>Note that the image is centered because of the css in the head.</p>
    HTML:
    Some things to note:
    1. Always close your tags, if you use <p> be sure to use a </p> at the end of the paragraph.
    2. If you want to use multiple classes for a single element you do it all in one class="" for example: class="someclass otherclass"
    3. If you want to center something, put it in a container and center its contents. Like I've done above.
    4. Oh and don't forget the title="" tag for images, and yes alt="" and title="" are used differently.
     
    crazybjörn, Jan 17, 2007 IP
  3. StickMaker

    StickMaker Peon

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Many thanks, crazybjörn's! That did it for sure. Wish I knew half of what you know about CSS.

    Your help much appreciated. That was a little page I did just to study CSS.
     
    StickMaker, Jan 18, 2007 IP
  4. crazybjörn

    crazybjörn Peon

    Messages:
    270
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Happy to help :)
     
    crazybjörn, Jan 18, 2007 IP