css

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

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]

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]

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]

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]

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]

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

[scrappedcola]

Do you have firefox and firebug? If you do you might be able to debug the location thing easier that way. Load the page in firefox when firebug is open.Click on the network tab in firebug and have Images selected. You should see the images requests being made. If the link is red you know it couldn't find the image. You can then right click on the request and select open in a new window and you can play with the url until you get the right path to your image. What is the directory structure of your images and main page? If your main page is in c:\webpage\index.html and your images are in c:\webpage\Libraries/Documents/web dev pics/genlogo.jpg then the path to your image would be Libraries/Documents/web dev pics/genlogo.jpg. If you web page is in c:\webpage\Libraries\Documents\web dev page\index.html and the images are in :\webpage\Libraries/Documents/web dev pics/genlogo.jpg then your link to your images would be "../web dev pics/genlogo.jpg". Does this make sense? There are other ways to path to your images depending on your server config but for now this should get you in the right direction. If you see the images in firebug then your path is probably correct and you need to make certain your image has height and width (you could have some css messing with this). You might want to give the images a bright colored border for now to ensure that they are in the correct location and height on the page until you figure out the pathing. If you are finding that the images seem to be outside of the containing element and/or some of the layout runs together you may need to clear the float using a clearfix css class. This is a good page on that concept: http://www.positioniseverything.net/easyclearing.html. Note that in the previous link the conditionals for IE are unnecessary and the css within them can just be added as is since other browsers will ignore the css within.

[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>
    <head>
        <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>
    </head>
    <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= "ABOUTUS.html">About Us</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]

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]

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

[Borzoi]

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. -->
<a href="index.html">Home Page</a>
<img src="images/picture.jpg" />

<!-- While not necessarily incorrect, if your domain changes, you would have to manually change the link. -->
<a hred="http://mywebsite.com/index/html">Home Page</a>
<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]

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">
	
	<head>
		<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>
	</head>
	<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= "ABOUTUS.html">About Us</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]

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]

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]

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]

text-align: justify; is correct and valid.

http://www.w3schools.com/css/css_text.asp

[Arkinder]

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]

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]

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?

[chinee]

got it thanks