...

View Full Version : Img class not working



saxchick1
10-26-2011, 03: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">
<!--
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>

optimus203
10-26-2011, 03: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, 04: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, 03: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">
<!--
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>






/* 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, 04: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, 04: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, 04: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, 03: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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum