Jump to content

Img Float Using A Class

music_fan01

By music_fan01
in CSS Help

 Share

Recommended Posts

music_fan01 Member

music_fan01

Posted
Posted

I have my index page set up with an image and two paragraphs to the right. I am trying to use <img class="floatLeft" />, but when I adjust my code using  <img class="floatLeft" /> my picture ends up next to my header.

 

<!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" style="float:left; 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">© 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>

 

/* 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;
}

Link to comment
Share on other sites
music_fan01 Member

music_fan01

Posted
  • Author
Posted

I added the class to my css and to my img, but now my paragraphs end up being under my img instead of to the right.

 

<div id="image">
    <img src="images/test.jpg" class="floatLeft;" width: "200px;"/>
</div>

 

/* 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;
}

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.