Img class not working

saxchick1

10-26-2011, 02:18 AM

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.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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>


<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>


<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>


<div id="footer">
<div id="left_footer">© Copyright 2011<strong> Author </strong></div>
<div id="right_footer">


Design by <a href="http://www.realitysoftware.ca" title="Website Design">Reality

Software</a>

</div>
</div>

</div>


</body>
</html>

optimus203

10-26-2011, 02:59 AM

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

to

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

You have semicolons in there that don't belong.

Excavator

10-26-2011, 03:12 AM

Hello saxchick1,
The colon does not belong there either, px is assumed. It should look more like this:

<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/

saxchick1

10-27-2011, 02:32 AM

http://i48.photobucket.com/albums/f213/solysol/output2-1.jpg

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.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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>


<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>


<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>


<div id="footer">
<div id="left_footer">© Copyright 2011<strong> Author </strong></div>
<div id="right_footer">


Design by <a href="http://www.realitysoftware.ca" title="Website Design">Reality

Software</a>

</div>
</div>

</div>


</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;
}
/* Table */
table,th,td
{
border:1px solid black;
}

/* Index */
.floatLeft
{
float: left;
width: 440px;
margin:40 40 40px 40px;
margin-top:2cm;
padding: 20px;
}

saxchick1

10-27-2011, 03:33 AM

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.

img.floatLeft {
float: left;
margin: 4px;
}

/* paragraphs */
#p {
float: left;
margin-right: 4px;
padding-left: 20px;
font-size:12pt;
}

<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>

Excavator

10-27-2011, 03:44 AM

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 (http://nopeople.com/CSS%20tips/simple_2-column/index.html).

saxchick1

10-27-2011, 03:50 AM

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.

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

saxchick1

10-28-2011, 02:36 AM

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 (http://nopeople.com/CSS%20tips/simple_2-column/index.html).

Are there various ways of floating paragraphs? I just went ahead put them in divs and floated them to the right?