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 8 of 8
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Img class not working

    When I put my img class in my image, my img doest float left and my paragraphs dont stay to the right of the img.

    Code:
    /* body */
    
    body {
     margin:114px 0 0 0; 
    line-height:15px; 
    font-family: Tahoma, Arial; 
    background: url(images/body_top_bckg.jpg) no-repeat center top #171c20; 
    color:#bed7e6; 
    font-size:11px;
    }
    
    a { 
    color:#018BC1;
    }
    a:hover { 
    text-decoration:none;
    }
    #header {}
    #logo { 
    padding:30px 0 120px 0;
    color:#fff; 
    text-align:center;
    }
    
    
    /* logo */
    #logo a{ 
    color:#fff; 
    text-decoration:none; 
    font-weight:bold; 
    font-size:24px; 
    text-transform:uppercase; 
    }
    
    /* Menu */
    #menu {
    color:#fff; 
    text-align:center; 
    
    }
    #menu ul {
    text-align:center;
    list-style:none; 
    padding:0;
    }
    #menu ul li {
    display:inline
    }
    #menu ul a { 
    font-weight:bold; 
    font-size:14px; 
    text-decoration:none; 
    color:#fff; 
    background-color:#445d6c; 
    padding:0 10px 2px 10px;
    }
    #menu ul a:hover 
    { 
    background-color:#f26513;
    }
    
    /* Main */
    #main {
    background: url(images/body_all_bckg.jpg) repeat-y top center;
    
    }
    #content {
    width: 780px; 
    margin:0 auto;
    overflow:hidden;
    margin-bottom:3cm;
    
    
    
    }
    
    / * Text */
    #text {
        float: left;
        width: 760px;
        margin-top:1cm;
    }
    #text p {
     margin:7px 0 7px 0;
    }
    
    #text li {
    background:url(images/li.gif) no-repeat 0px 7px;
    }
    
    h1 {
    margin:30px 0 0 0; 
    padding:5px 0 7px 45px; 
    text-transform:uppercase; 
    font-size:25px; color:#fff; 
    background:url(images/h1_bckg.jpg) no-repeat;
    float:left;
    }
    
    /* Footer */
    
    #footer {
    background:url(images/footer_bckg.jpg) no-repeat top center; 
    height:102px; clear:both; 
    width:780px; 
    margin:0 auto; 
    }
    #left_footer {
     float:left;
     padding:60px 0 0 30px; 
    color:#fff; font-size:12px;
    }
    #left_footer a { 
    color:#fff;
    }
    #left_footer a:hover { 
    text-decoration:none;
    }
    #right_footer { 
    float:right;  
    padding:60px 30px 0 0; 
    color:#fff;  
    font-size:12px; text-align:right;
    }
    #right_footer a { 
    color:#fff;
    }
    #right_footer a:hover { 
    text-decoration:none;
    }
    
    #content .inner_copy {
    border:0;color:#f00;
    float:left;
    width:50%!important;
    margin:-202px 0 0 0;
    overflow:hidden;
    line-height:0;
    padding:0;
    font-size:12px
    
    }
    
    
    /* Floats */
    
    #leftFloat
    {
      float: left;
      width: 100px;
    }
    
    #rightFloat
    {
      float: right;
      width: 100px;
    }
    
    /* gallery */
        .row img {
            margin: 2px;
            border: 1px solid #0000ff;
            clear: both;
            width: 100px;
            height: 90px;
            margin-left:3px;
        }
         
        .first
        {
            float: right;
            text-align: center;
        } 
             
        .last {
            border: 1px solid #ffffff;
            float: right;
        }
         
        .desc
        {
            text-align: center;
            font-weight: normal;
            width: 120px;
            margin: 10px;
        }
    
    
    /* image */
    #image {
    
    margin-top:1cm;
    width: 400px;
    margin-top:2cm;
    }
    .floatLeft{
    float:left;
    }
    
    /* paragraphs */
    #p {
        float: left;  
        margin-right: 4px;
        padding-left: 20px;
        font-size:12pt;
    }
    
    /* Divider */
    #div {
    float: right; 
    width: 20px; 
    margin-right: 1px;
    height: 200px;
    }
    
    /* Icon */
    #icon {
    text-align:center;
    }
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <!--
    Author: Reality Software
    Website: http://www.realitysoftware.ca
    Note: This is a free template released under the Creative Commons Attribution 3.0 license, 
    which means you can use it in any way you want provided you keep the link to the author 
    
    intact.
    -->
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Title</title>
    <link href="style.css" rel="stylesheet" type="text/css" /></head>
    <body>
    
    
        <!-- header -->
         <div id="header">
            <div id="logo"><a href="index.html">Header</a></div>
            <ul id="menu">
                <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="">Link 1</a></li>
                <li><a href="">Link 2</a></li>
                <li><a href="">Link 3</a></li>
                <li><a href="contact.php">Contact</a></li>
            <li><a href="guestbook.php">Guestbook</a></li>
                
                      </ul>
    
    <div id="icon"><a href="twitter.com/">
    <img border="0" src="images/twitter.png" alt="twitter" width="58px;" height="53px;" />
    </a></div>
    
       
          
      </div>
        <!--end header -->
        <!-- main -->
        <div id="main">
        <div id="content">
    
       
     <div id="text">
                    <h1><strong>Welcome</strong></h1>
    </div>
    
    
    <div id="image">
        <img src="images/test.jpg" class="floatLeft;" width: "365px;"/>
    </div>
    
    
    
    
    <div id="p">
    <div style="float: left; width: 180px;">
    <h2>Header</h2>
      <p>Paragraph
      </p>
       
      </p>
    </div>
    
    
    <div id="div" style="float: left;">
    <img src="images/div103.gif" /></div>
    
    <div style="float: left; width: 190px;">
    <h2>Headerh2>
      <p>
    Paragraph
      </p>
      </div>
    </div>
    
    
    </div>
    
    
               
         <!-- footer -->
        <div id="footer">
        <div id="left_footer">&copy; Copyright 2011<strong> Author </strong></div>
        <div id="right_footer">
    
    <!-- Please do not change or delete this link. Read the license! Thanks. :-) -->
    Design by <a href="http://www.realitysoftware.ca" title="Website Design">Reality 
    
    Software</a>
    
        </div>
        </div>
        <!-- end footer -->
    </div>
        <!-- end main -->
    
    
    
    </body>
    </html>

  • #2
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    Change
    Code:
    <div id="image">
        <img src="images/test.jpg" class="floatLeft;" width: "365px;"/>
    </div>
    to

    Code:
    <div id="image">
        <img src="images/test.jpg" class="floatLeft" width: "365px"/>
    </div>
    You have semicolons in there that don't belong.
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello saxchick1,
    The colon does not belong there either, px is assumed. It should look more like this:
    Code:
    <div id="image">
        <img src="images/test.jpg" alt="description" class="floatLeft" width="365" />
    </div>
    Have a look at a float tutorial that might help you float images next to your text - http://css.maxdesign.com.au/floatutorial/
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Feb 2009
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts


    I made a few changes. I decided to go with the tutorial, but I didnt get the results I was looking for. I am trying to get my img underneath the 'Welcome' header and the two paragraphs to the right of the img while being separated by the div (the silver bar).

    (I know I have a few extra things in my css, once I get my site the the way I am trying to I am going to clean it up.)

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <!--
    Author: Reality Software
    Website: http://www.realitysoftware.ca
    Note: This is a free template released under the Creative Commons Attribution 3.0 license, 
    which means you can use it in any way you want provided you keep the link to the author 
    
    intact.
    -->
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="style.css" rel="stylesheet" type="text/css" /></head>
    <body>
    
    
    	<!-- header -->
         <div id="header">
        	<div id="logo"><a href="index.html">Header</a></div>
            <ul id="menu">
            	<ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="">Link 1</a></li>
                <li><a href="">Link 2</a></li>
                <li><a href="">Link 3</a></li>
                <li><a href="contact.php">Contact</a></li>
    	    <li><a href="guestbook.php">Guestbook</a></li>
                
                      </ul>
    
    <div id="icon"><a href="twitter.com/">
    <img border="0" src="images/twitter.png" alt="twitter" width="58px;" height="53px;" />
    </a></div>
    
       
          
      </div>
        <!--end header -->
        <!-- main -->
        <div id="main">
        <div id="content">
    
       
     <div id="text">
                    <h1><strong>Welcome</strong></h1>
    </div>
    
    <div class="floatLeft">
    	<img src="images/test.jpg" alt="image" width:"100" height="200"/>
    </div>
    
    <h2>Header</h2>
      <p>Text
      </p>
    
       
    
    
    <div id="div" style="float: left;">
    <img src="images/div103.gif" /></div>
    
    <h2>Header</h2>
      <p>Text
      </p>
    
    </div>
    
    
               
         <!-- footer -->
        <div id="footer">
        <div id="left_footer">&copy; Copyright 2011<strong> Author </strong></div>
        <div id="right_footer">
    
    <!-- Please do not change or delete this link. Read the license! Thanks. :-) -->
    Design by <a href="http://www.realitysoftware.ca" title="Website Design">Reality 
    
    Software</a>
    
        </div>
        </div>
        <!-- end footer -->
    </div>
        <!-- end main -->
    
    
    
    </body>
    </html>
    Code:
    /* body */
    
    body {
     margin:114px 0 0 0; 
    line-height:15px; 
    font-family: Tahoma, Arial; 
    background: url(images/body_top_bckg.jpg) no-repeat center top #171c20; 
    color:#bed7e6; 
    font-size:11px;
    }
    
    a { 
    color:#018BC1;
    }
    a:hover { 
    text-decoration:none;
    }
    #header {}
    #logo { 
    padding:30px 0 120px 0;
    color:#fff; 
    text-align:center;
    }
    
    
    /* logo */
    #logo a{ 
    color:#fff; 
    text-decoration:none; 
    font-weight:bold; 
    font-size:24px; 
    text-transform:uppercase; 
    }
    
    /* Menu */
    #menu {
    color:#fff; 
    text-align:center; 
    
    }
    #menu ul {
    text-align:center;
    list-style:none; 
    padding:0;
    }
    #menu ul li {
    display:inline
    }
    #menu ul a { 
    font-weight:bold; 
    font-size:14px; 
    text-decoration:none; 
    color:#fff; 
    background-color:#445d6c; 
    padding:0 10px 2px 10px;
    }
    #menu ul a:hover 
    { 
    background-color:#f26513;
    }
    
    /* Main */
    #main {
    background: url(images/body_all_bckg.jpg) repeat-y top center;
    
    }
    #content {
    width: 780px; 
    margin:0 auto;
    overflow:hidden;
    margin-bottom:3cm;
    
    
    
    }
    
    / * Text */
    #text {
        float: left;
    	width: 760px;
    	margin-top:1cm;
    }
    #text p {
     margin:7px 0 7px 0;
    }
    
    #text li {
    background:url(images/li.gif) no-repeat 0px 7px;
    }
    
    h1 {
    margin:30px 0 0 0; 
    padding:5px 0 7px 45px; 
    text-transform:uppercase; 
    font-size:25px; color:#fff; 
    background:url(images/h1_bckg.jpg) no-repeat;
    float:left;
    }
    
    /* Footer */
    
    #footer {
    background:url(images/footer_bckg.jpg) no-repeat top center; 
    height:102px; clear:both; 
    width:780px; 
    margin:0 auto; 
    }
    #left_footer {
     float:left;
     padding:60px 0 0 30px; 
    color:#fff; font-size:12px;
    }
    #left_footer a { 
    color:#fff;
    }
    #left_footer a:hover { 
    text-decoration:none;
    }
    #right_footer { 
    float:right;  
    padding:60px 30px 0 0; 
    color:#fff;  
    font-size:12px; text-align:right;
    }
    #right_footer a { 
    color:#fff;
    }
    #right_footer a:hover { 
    text-decoration:none;
    }
    
    #content .inner_copy {
    border:0;color:#f00;
    float:left;
    width:50%!important;
    margin:-202px 0 0 0;
    overflow:hidden;
    line-height:0;
    padding:0;
    font-size:12px
    
    }
    
    
    /* Floats */
    
    #leftFloat
    {
      float: left;
      width: 100px;
    }
    
    #rightFloat
    {
      float: right;
      width: 100px;
    }
    
    /* gallery */
    	.row img {
    	    margin: 2px;
    	    border: 1px solid #0000ff;
    	    clear: both;
    	    width: 100px;
    	    height: 90px;
    	    margin-left:3px;
    	}
    	 
    	.first
    	{
    	    float: right;
    	    text-align: center;
    	} 
    	     
    	.last {
    	    border: 1px solid #ffffff;
    	    float: right;
    	}
    	 
    	.desc
    	{
    	    text-align: center;
    	    font-weight: normal;
    	    width: 120px;
    	    margin: 10px;
    	}
    
    
    /* image */
    #image {
    
    margin-top:1cm;
    width: 400px;
    margin-top:2cm;
    }
    
    /* paragraphs */
    #p {
        float: left;  
        margin-right: 4px;
    	padding-left: 20px;
        font-size:12pt;
    }
    
    /* Divider */
    #div {
    float: right; 
    width: 20px; 
    margin-right: 1px;
    height: 200px;
    }
    
    /* Icon */
    #icon {
    text-align:center;
    }
    /* Table */
    table,th,td
    {
    border:1px solid black;
    }
    
    /* Index */
    .floatLeft
    {
    float: left;
    width: 440px;
    margin:40 40 40px 40px;
    margin-top:2cm;
    padding: 20px;
    }

  • #5
    New Coder
    Join Date
    Feb 2009
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I was trying to figure what I was doing wrong, so I took the following out and put them in separate html and css file, it worked, but when I try to put it back into my original css and html my images and paragraphs are not where they are suppose to be.

    Code:
      img.floatLeft { 
        float: left; 
        margin: 4px; 
    }
    
    /* paragraphs */
    #p {
        float: left;  
        margin-right: 4px;
    	padding-left: 20px;
        font-size:12pt;
    }
    Code:
    <img src="images/test.jpg" class="floatLeft" height="200px;"/>
    
    
    <div id="p">
    <div style="float: left; width: 180px;">
    <h2>Header</h2>
      <p>Text
      </p>
       
      </p>
    </div>
    
    <div id="div" style="float: left;">
    <img src="images/div103.gif" /></div>
    
    
    <div style="float: left; width: 190px;">
    <h2>Header</h2>
      <p>
       Text
      </p>
      </div>

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    The very first thing you should do is validate. See the links in my signature line about validation.

    I made a few changes. I decided to go with the tutorial, but I didnt get the results I was looking for. I am trying to get my img underneath the 'Welcome' header and the two paragraphs to the right of the img while being separated by the div (the silver bar).
    To do this you should probably not float your h1 Welcome. That h1 does not need wrapped in #text either, it can be a containing element on it's own.

    In your CSS, your comment looks like this / * Text */ and it should really look like this /* Text */ (see how I took out the space? The validator caught this.)

    To float your two paragraphs beside each other, have a look at this simple 2 column layout.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New Coder
    Join Date
    Feb 2009
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think my problem is somewhere in this part of my styling because I was rebuilding my css, and when I added this part to my css, my img ended up on top of my two paragraphs.

    Code:
    / * Text */
    #text {
        float: left;
    	width: 760px;
    	margin-top:1cm;
    }
    #text p {
     margin:7px 0 7px 0;
    }
    
    #text li {
    background:url(images/li.gif) no-repeat 0px 7px;
    }
    
    h1 {
    margin:30px 0 0 0; 
    padding:5px 0 7px 45px; 
    text-transform:uppercase; 
    font-size:25px; color:#fff; 
    background:url(images/h1_bckg.jpg) no-repeat;
    float:left;
    }

  • #8
    New Coder
    Join Date
    Feb 2009
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    The very first thing you should do is validate. See the links in my signature line about validation.



    To do this you should probably not float your h1 Welcome. That h1 does not need wrapped in #text either, it can be a containing element on it's own.

    In your CSS, your comment looks like this / * Text */ and it should really look like this /* Text */ (see how I took out the space? The validator caught this.)

    To float your two paragraphs beside each other, have a look at this simple 2 column layout.
    Are there various ways of floating paragraphs? I just went ahead put them in divs and floated them to the right?


  •  

    Posting Permissions

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