## chinee

if you want to have different colors of text in the same paragraph and add picture on the left side of the text both up and lower to the bottom how is it done i am getting trouble doing that can anyone suggest a way.

## scrappedcola 11

For the different colored text you could wrap the text you wanted to be different in <span> elements and set the styles of those spans specifically.

<p> <span style='color:purple'>I am purple</span><span style='color:red'>Yet I am red</span>I'm just the color of the paragraph.
</span>

Not really certain what you mean about the image but you could also set up spans with the backgrounds set to whatever image you want.

## Kraai 56

If you want the text to wrap around the right hand side of a picture, you will position the picture as left. position: left

## scrappedcola 11

Position:left is not valid css. You can float the image left and the text will wrap. But the only valid "position" values are: fixed, absolute, static, relative, and inherit. Using one of those you would use the the positioning attributes left,top,right,bottom with a distance value (left:0px, right:100%, top: 10px, etc) to change the margins of the element (or just use margin). Changing the position attribute will take the element outside of the normal flow of the document and is generally used to accommodate specific placement of elements (such as a fixed footer) as well as layering of elements (a modal dialog is an example here). You can also apply float on top of positioning. A good example for floating text around images is http://www.tizag.com/cssT/float.php

## chinee

thanks the site helped. but can anyone tell me why all my pictures are not showing becuse i can't see any way to write it again. help

<h1><img src="Libraries/Documents/webdevpics/genlogo.jpg" width="92" height="92" alt= "Generation Changeers Production Company" />Genration Changers Production Company</h1>
<img src="dance2.jpeg" width= "92" height="92" class="floatLeft">

## Kraai 56

I see in another threat here that you indicate the path to your image like this:

<h1><img src="http://www.GenerationChangersProductionCompany/index.html/Libraries/Documents/web dev pics/genlogo.jpg" width="92" height="92" alt= "Generation Changeers Production Company" />Genration Changers Production Company</h1>

Try to remove the index.html from the path, so it looks like:

<h1><img src="http://www.GenerationChangersProductionCompany/Libraries/Documents/web dev pics/genlogo.jpg" width="92" height="92" alt= "Generation Changeers Production Company" />Genration Changers Production Company</h1>

I also presume your domain is not "live" yet, because I cannot see the image on the above path as well.

## chinee

no it is not live yet. thanks for the suggestion but a no go.

## Kraai 56

Ok, if your domain is not live yet, the image will not show if you use the path to the domain directory. If your image was uploaded to the /web dev pics/ folder, it will only be visible once the domain is live.

In the meantime, if you want to see the image on your off-site page, you have to use the path to where you can find it locally, and not on http. It should be something like c:\path\to\your\image\genlogo.jpg where c is your harddrive.

## chinee

thats not even working

## Kraai 56

Please post the full html as you currently have it now, plus your css. That would help better to try solve your problem.

## chinee

ok. you have to excuse the footer its doesn't work to.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Generation Changers Production Company</title>

<style type = "text/css">
h1 { background-color: #FFD700;
text-align: center;
height: 100px;
color: black;
font-size: 37px;
font-family: impact;
margin-top:20px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
border-top-width:5px;}
h2 { background-color: #FF69B4;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
height: 70px;
color: black;
font-size: 26px;
margin-top:0px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;}
div {background-color: #FF8C00;
margin-bottom: .9em;
font-family: Arial, Helvetica, sans-serif;}

ul{
list-style-type:none;
}
li{
display:inline;
}
a{
float:center;
width:180px;
text-decoration:none;
color:white;
font-weight:bold;
background:#0000CD;
border-right:1px solid #FFFFFF;
}
a:hover{
background:#87CEFA;
}

footer{ background-color: #FF69B4;
height: 70px;
margin-top:0px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
}

p.ex{
float:right;
color:#008000;
text-align: justify;
font-family: Arial, Helvetica, sans-serif;
font-size: 26px;
}

p{
float:right;
color:#800000;
text-align: justify;
font-family: Arial, Helvetica, sans-serif;
font-size: 26px;
}

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

img.floatRight{
float:right;
margin: 4px
}

</style>
<body bgcolor= #FAEBD7>
<h1><img src="c:\Libraries\Documents\webdevpics\genlogo.jpg" width="92" height="92" alt= "Generation Changeers Production Company" />Genration Changers Production Company</h1>
<h2> Taking Action<br /><ul>
<li><a href= "HOME.html"> Home</a></li>
<li><a href= "Galleries.html">Galleries</a></li>
<li><a href= "PARTNERS.html">Partners</a></li>
<th><a href= "CONTACT.html">Contact</a></th>
</ul>

<p class="ex">WELCOME TO GENERATION CHANGERS PRODUCTION COMPANY</p>
<img src="masks.bitmap" width= "92" height="92" class="floatRight">
<p>We are a bunch of young persons who are enthusiastic about reaching out to others.<br /><br />
We do it through drama, dance and song. We are not entertainers but Ministers <br /><br />
who are delivering <strong> God's message</strong> to the people,men, women, young and old.<br /><br />
We don't just deal with biblical issues, but also social ones.<br /><br />
That is the issues that are happening in today's world.<img src="dance2.jpeg" width= "92" height="92" class="floatLeft">
</p>

</body>
</html>


## chinee

what is the firebug

## Kraai 56

Hi

I copied your code above, and used a path to an image in my harddrive, and it displays ok. The problem is with the path you specify. To get the correct path to the image, rightclick the image where it is, and go to properties, and copy its location and use that as the path. Remember to ad the image name at the end.

Firebug is a plugin you can download from the mozilla site, to help you with webpages.

## chinee

thanks i found the path but still not seeing anything so probably is something else so i am taking it to my teacher today and maybe he can figure it out.

## Kraai 56

Please let us know what your teacher said, so we all can learn from it.

## Borzoi 24

When linking to images or other pages, you should always use relative links. Only use absolute links when linking to external sites.

<!-- Using relative links means that if your domain changes, you wouldn't have to change the code. -->
<img src="images/picture.jpg" />

<!-- While not necessarily incorrect, if your domain changes, you would have to manually change the link. -->
<img src="http://mywebsite.com/images/picture.jpg" />

Depending on the setup of your server, you may need to put ./ at the beginning of the link to tell it to search the current folder. If you wish to go up a folder, prefix the link with ../ .

If the current page is in the "Banana" folder and the image you want is in the "images" folder for example:

<!-- The ../ tells the server to go up one folder. -->
<img src="../images/picture.jpg" />

If the current page is in the "Apple" folder which is within the "Banana" folder then you would use this:

<!-- The ../../ tells the server to go up two folders. -->
<img src="../../images/picture.jpg" />

## chinee

i solved it myself i finally copied the images folder into my aptana myfirstproject folder and now i can see all my pictures. like this.

<h1><img src="../myfirstproject/images/genlogo.jpg" width="100" height="100" alt= "Generation Changeers Production Company" />Genration Changers Production Company</h1>

## Kraai 56

Now that is good news. You see, it is all about getting the right path to the image, and the image must be accessable.

## chinee

now i heard i have to make the css external does any one have an idea of how to make this css external and have it work?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Generation Changers Production Company</title>

<style type = "text/css">
h1 { background-color: #FFD700;
text-align: center;
height: 100px;
color: black;
font-size: 37px;
font-family: impact;
margin-top:20px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
border-top-width:5px;}
h2 { background-color: #FF69B4;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
height: 70px;
color: black;
font-size: 26px;
margin-top:0px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;}
div {background-color: #FF8C00;
margin-bottom: .9em;
font-family: Arial, Helvetica, sans-serif;}

ul{
list-style-type:none;
}
li{
display:inline;
}
a{
float:center;
width:180px;
text-decoration:none;
color:white;
font-weight:bold;
background:#0000CD;
border-right:1px solid #FFFFFF;
}
a:hover{
background:#87CEFA;
}

body{ bgcolor= #FAEBD7;
}

p{
float:right;
color:#800000;
text-align: justify;
font-family: Arial, Helvetica, sans-serif;
font-size: 26px;
}

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

img.floatRight{
float:right;
margin: 4px
}

</style>
<body>
<h1><img src="../myfirstproject/images/genlogo.jpg" width="100" height="100" alt="Generation Changers Production Company" />Generation Changers Production Company</h1>
<h2>Taking Action<br />
<ul>
<li><a href= "index.html"> Home</a></li>
<li><a href= "GALLARIES.html">Galleries</a></li>
<li><a href= "PARTNERS.html">Partners</a></li>
<li><a href= "CONTACT.html">Contact</a></li>
</ul></h2>
</br>
<br />

<p> <span style='color:green'>WELCOME TO GENERATION CHANGERS PRODUCTION COMPANY</span> </p>
<img src="../../images/masks.bmp" width= "100" height="100" alt="masks" class="floatRight" />
<p>We are a bunch of young persons who are enthusiastic about reaching out to others.<br /><br />
We do it through drama, dance and song. We are not entertainers but Ministers <br /><br />
who are delivering <strong> God's message</strong> to the people, men, women, young and old.<br /><br />
We don't just deal with biblical issues, but also social ones.<br /><br />
That is the issues that are happening in today's world.<img src="../../images/dance2.jpg" width= "100" height="100" alt="dance2" class="floatLeft" />
</p>

</body>
</html>

## Borzoi 24

To make CSS "external" as you call it, cut and paste it into it's own file with no other HTML, not even the <script> tags and call it whatever you want with the extension .css. You would then replace where it was in the page code to this:

Assume the stylesheet you saves is called style.css

<link rel="stylesheet" type="text/css" href="foldername/style.css" />

if it's in the same folder then you just need style.css an no folder name. Just like other links, use relative links.

## chinee

a new problem now when i cut and paste the css in a css file and named it gen which is in a folder call css in myfirstproject. on the page all that is appearing is the logo the name and the links in a downward list form. no heading background color or anything just plane background.

h1 { background-color: #FFD700;
text-align: center;
height: 100px;
color: black;
font-size: 37px;
font-family: impact;
margin-top:20px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
border-top-width:5px;}
h2 { background-color: #FF69B4;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
height: 70px;
color: black;
font-size: 26px;
margin-top:0px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;}
div {background-color: #FF8C00;
margin-bottom: .9em;
font-family: Arial, Helvetica, sans-serif;}

ul{
list-style-type:none;
}
li{
display:inline;
}
a{
float:center;
width:180px;
text-decoration:none;
color:white;
font-weight:bold;
background:#0000CD;
border-right:1px solid #FFFFFF;
}
a:hover{
background:#87CEFA;
}

body{ bgcolor= #FAEBD7;
}

p{
align:center;
color:#800000;
text-align: justify;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}

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

img.floatRight{
float:right;
margin: 4px
}

## Borzoi 24

Your CSS looks fine.

Make sure the CSS file has the file extension .css and not .txt or anything else.

What is the code in your HTML file that you've used to link to the CSS file?

## Arkinder 93

My apologies for butting in - just a few things I noticed:

In previously posted HTML you have

src="../myfirstproject/images/genlogo.jpg"

Which tells me that your HTML document is not in the myfirstproject folder. Make sure that you are referring to your CSS file the same way you referred to your image.

<link rel="stylesheet" type="text/css" href="../myfirstproject/css/gen.css" />

When linking to anything its location will always be relative to the HTML document. Also, there are three invalid CSS properties.

1. a {
float: center;
width: 180px;
text-decoration: none;
color: white;
font-weight: bold;
background: #0000CD;
border-right: 1px solid #FFFFFF;
}

float: center; is not a real value. Elements can only be floated left or right.

2. body {
bgcolor= #FAEBD7;
}

bgcolor does not exist in CSS. Use the background-color: #FAEBD7; property instead.

3. p {
align: center;
color: #800000;
text-align: justify;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}

align does not exist in CSS. For the text to be centered use text-align: center; . There are several ways to have the paragraph itself centered, but which to use depends on the paragraph's surrounding elements, and their CSS.

Regards, Arkinder

## Borzoi 24

text-align: justify; is correct and valid.

## Arkinder 93

I never said it wasn't. ^_^ I was referring to,

p {
align: center;

After that was just to clarify that aligning text is separate from aligning their containers, and elements in general.

Regards, Arkinder

## chinee

i tried the path and change the other thing but still nothing

## Kraai 56

Hi again chinee

The ouestion of external stylesheet deserves a new topic actually, but here is the info:

To make a stylesheet external, you take it out of the html part of your pages, and link to it.

Here is how:

1. Copy your stylesheet (excluding the html tags like <html> and <head> only the pure stylesheet)and paste it to a text editor like notepad.

2. Save that file with a name say: style.css

3. Upload that file to your server where your website is hosted, in the root directory of your website ( or place it in the same folder on your pc where your website on your pc is if your site is not uploaded yet)

4. Remove all stylesheet code between <head> and </head> of your pages.

5. In the place of the removed code, place the following code between <head> and </head> of the pages you want to link to your stylesheet:

<head>
<link rell="stylesheet" href="http://www.yourserver.com/styles.css" type="text/css" />
</head>

where "yourserver" is where the site is hosted, and if on your pc, use the path on your local drive and not http etc.

## Kraai 56

Appologies BORZOI, I did not refreshed this page to see that you have already answered the question, and after posting, whooop, here comes page 3. I guess it is my age that makes me a bit slow?

got it thanks