Jump to content

Img Float Using A Class

music_fan01

By music_fan01
in CSS Help

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
https://forums.phpfreaks.com/topic/249674-img-float-using-a-class/
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;
}

Archived

This topic is now archived and is closed to further replies.

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.