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.
chinee 0 Junior Poster in Training
scrappedcola 11 Posting Whiz in Training
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 Senior Poster Featured Poster
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 Posting Whiz in Training
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 0 Junior Poster in Training
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 Senior Poster Featured Poster
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 0 Junior Poster in Training
no it is not live yet. thanks for the suggestion but a no go.
Kraai 56 Senior Poster Featured Poster
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 0 Junior Poster in Training
thats not even working
Kraai 56 Senior Poster Featured Poster
Please post the full html as you currently have it now, plus your css. That would help better to try solve your problem.
scrappedcola 11 Posting Whiz in Training
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 0 Junior Poster in Training
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 0 Junior Poster in Training
what is the firebug
Kraai 56 Senior Poster Featured Poster
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 0 Junior Poster in Training
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 Senior Poster Featured Poster
Please let us know what your teacher said, so we all can learn from it.
Borzoi 24 Posting Whiz
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 0 Junior Poster in Training
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 Senior Poster Featured Poster
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 0 Junior Poster in Training
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 24 Posting Whiz
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 0 Junior Poster in Training
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 Posting Whiz
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 Posting Pro in Training
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.
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.body { bgcolor= #FAEBD7; }bgcolor does not exist in CSS. Use the
background-color: #FAEBD7;property instead.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 Posting Whiz
Arkinder 93 Posting Pro in Training
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 0 Junior Poster in Training
i tried the path and change the other thing but still nothing
Kraai 56 Senior Poster Featured Poster
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 Senior Poster Featured Poster
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 0 Junior Poster in Training
got it thanks
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.