Just Trying To Figure Out The Problem [Archive] - Lissa Explains it All: Web Design Forums

View Full Version : Just Trying To Figure Out The Problem

LilyBear

08-09-2009, 10:29 PM

See I've tried to put the Title of the page in the center with what Lissa says in the site but nothing does the trick. The Colors are alright the problem is in the setting of the paragraph and title position. Also tried all the suggestions on the site to post pictures(at the Top or at ether side of the Title of the page) but again it just does not work. I use IE. How can I fix the problem and add pictures then slowly add new pages and link them together I've been at this for almost a whole day so I decided to just come out and ask directly for help since I don't know what else to do.

Here is the format I did on Notepad:

<html>
<head>
<title>The Actors and Actresses I Like</title>

<style type="text/css">

body { background-color: #ff0099; }
h2 {font-family: verdana;
color: 33ccff }
p {font-family: verdana;
color: 33ccff }
.center { text-align: center; }

</style>

</head>

</body>

<p class="center"><h2>The Actors and Actresses I Like</h2></p>

<p class="center><p>This is my site that is all about all the actors and actresses I like.
I will be posting pictures, videos,news and anything I can find about the actors and actresses
I admire as proffecionals and some for (at least what they appear to be).
I hope You come and visit often, please spread the word about the site,
also don't forget to leave a comment before you leave.

Sincerly;

Angel</p>

</body>
</html>

Here is the link: C:\Documents and Settings\Owner\My Documents\2Test.html

LilyBear

08-09-2009, 10:42 PM

I forgott I'll add graphics and such later but I first wanted to do a test to see how it would all look and if I knew how to do this. Aperently I can do color coding right and I think even the font and size of the content but not be able to add pictures and such which is why I have not gone out to do Graphics and such.

b3ns

08-15-2009, 09:55 AM

The text-align CSS code is to set the alignment of text in the element specified. .center { text-align: center; } is correct and everything, but you're adding that class selector to the <p> tag (<p class="center"> in other words), therefore it'll only centre the text directly inside that element. This is the definition of the text-align property in CSS:

The text-align property specifies the horizontal alignment of text in an element.

And just to let you know in this code .center { text-align: center; } - .center is the selector, text-align is the property and center is the value. (i.e. selector { property: value; }) and that's what I'm referring to when I say "CSS property". So:

<p class="center"><h2>The Actors and Actresses I Like</h2></p>

Is perfectly fine but it will only centre the text inside the <p> HTML element and it won't centre text in other elements within the parent element which in the case is <p> (i.e. <p><h2>This is a child element</h2></p>). And remember the text-align property only centres text in the HTML element specified. So you need to use the class="center" in the <h2> tag directly. Like this:

<p><h2 class="center">The Actors and Actresses I Like</h2></p>

Hope you understand :).

LilyBear

08-15-2009, 07:03 PM

Thanks for answering my question I hope I cna do this well now and also um how can I post pictures along side of the Title and later in a photo only page? Ether way thanks sooo much!

LilyBear

08-15-2009, 07:28 PM

Also at the left corner at the top of the paraghraph it says:
<p class="center> how can I take that off there? Aother question how can I place the Sincerly; Angel like this at the end (bottom) of the paragrahp ( Sincerly;
Angel)

Thanks again hopefully you'll be able to help me with these little glitches and then perhaphs you'll be able to help me with posting pictures on ether side of the page Title and then make a photo page perhaphs if you can and how to link from page to page if I know how to do all this I'll be set to be able to do my website my own thanks again so much for the previous help.

iGeek

08-16-2009, 02:39 AM

A couple of things: when defining colors in CSS (hexadecimal) you need to start the color with a pound sign ( # ). You can also define multiple properties for multiple elements at the same time. Notice how in your code the H2 tag and the P tag share the same definitions. You can shorten it by using a comma:

h2, p
{
font-family: Verdana;
color: #33ccff;
}

In CSS, there is a difference between using an ID (#) and a class ( . ). When using an ID, it is invalid for two or more elements to share the same ID. Using classes, however, allows multiple tags or all kinds to share the same definitions. You do not need to wrap the H2 tag in a P; you can simply add the center class to the H2 tag:

<h2 class="center">The Actors and Actresses I Like</h2>

The same thing goes for the P tag:

<p class="center">My content</p>

I noticed you used line breaks in your content; HTML ignores line breaks and extra spaces. To get a new line, you must use the <br /> tag, which puts an actual line break in the content (pushing it to the next line). However, if you want to have a consistent width to the content, it is very unnecessary to break your content. You should wrap your P tag with a division (<div>):

<div id="content"><p>This is my site that is all about all the actors and actresses I like. I will be posting pictures, videos, news and anything I can find about the actors and actresses I admire as proffecionals and some for (at least what they appear to be). I hope You come and visit often, please spread the word about the site, also don't forget to leave a comment before you leave.<br /><br />Sincerely,<br />Angel</p></div>

You'll notice put an ID for the DIV. This allows us to change the width from CSS. The final code is:

<!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" xml:lang="en" lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<title>The Actors and Actresses I Like</title>

<style type="text/css">
body
{
background-color: #ff0099;
}
h2, p
{
font-family: Verdana;
color: #33ccff;
}
.center
{
text-align: center;
}
#content
{
width: 500px;
margin: 0px auto;
}
</style>

</head>

<body>

<h2 class="center">The Actors and Actresses I Like</h2>

<div id="content"><p>This is my site that is all about all the actors and actresses I like. I will be posting pictures, videos, news and anything I can find about the actors and actresses I admire as proffecionals and some for (at least what they appear to be). I hope You come and visit often, please spread the word about the site, also don't forget to leave a comment before you leave.<br /><br />Sincerely,<br />Angel</p></div>

</body>
</html>

The margin property is shorthand CSS to center the DIV in the page.

It can be viewed here: http://www.phreakyourgeek.com/etc/angel.html

LilyBear

08-16-2009, 11:06 PM

Thanks soo much iGeek thanks now I know how to do that and such thanks you a million times as well as thanks to b3ns.

LilyBear

08-17-2009, 12:09 AM

See I again went to Lissa Explains It All for refrence on how to place a background Image. I did what it says to do but it doesn't show up at all. I even put my own graphichs and such but again nothing what's so ever shows. So what can Ido to fix it? Thanks soo much you guys for helping me soo much By the way I changed my BG color to FFCCFF it looks more like me.

</head><bodybackground="BGIActors&ActressesILike.jpg"bgcolor="#FFCCFF"bgproperties="fixed">

iGeek

08-17-2009, 03:50 AM

In order to maintain a valid, working website you should use CSS for background colors and images.

<!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" xml:lang="en" lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<title>The Actors and Actresses I Like</title>

<style type="text/css">
body
{
background: #ffccff url('BGIActors&ActressesILike.jpg') fixed;
}
h2, p
{
font-family: Verdana;
color: #33ccff;
}
.center
{
text-align: center;
}
#content
{
width: 500px;
margin: 0px auto;
}
</style>

</head>

<body>

<h2 class="center">The Actors and Actresses I Like</h2>

<div id="content"><p>This is my site that is all about all the actors and actresses I like. I will be posting pictures, videos, news and anything I can find about the actors and actresses I admire as proffecionals and some for (at least what they appear to be). I hope You come and visit often, please spread the word about the site, also don't forget to leave a comment before you leave.<br /><br />Sincerely,<br />Angel</p></div>

</body>
</html>

I've used shorthand CSS for the background property. The syntax is:

background: [hexadecimal color] [bacjground image] [attributes];

b3ns

08-17-2009, 10:45 AM

iGeek great advice and I do agree with you CSS is the way to go...if I had to set a background image on my web page I'd do that with CSS as you said, but for newbies (and I'm presuming LilyBear is new to HTML/CSS) it may be good for him/her to start learning the more advanced stuff of CSS styling later on. For now sticking to HTML may be a good idea as to learn CSS its best to have indepth knowledge of HTML already.

<bodybackground="BGIActors&ActressesILike.jpg "bgcolor="#FFCCFF"bgproperties="fixed">

This is incorrect, here's the correct code and I'll explain why :):

<body background="BGIActors&ActressesILike.jpg" bgcolor="#FFCCFF" bgproperties="fixed">

In HTML there are a couple of things: HTML elements (or tags) and attributes of those elements. In this case, body is the HTML element and background, bgcolor, bgproperties are the attributes of the body tag/element. The attributes are somewhat to change characteristics of the body element. For example:

<p align="center">Text Here</p>

The align attribute of the p tag is to change the element's position slightly, I guess in a way that's changing characteristics of the HTML element.

For example, in the body tag you can add the attribute background which adds a background image to the web page. But, when we write the attribute inside the tag like: <body background - when we want to add a value inside an attribute we need to add an equals sign then double quotations for the value. Like:

<body background="value" bgproperties="value">

etc etc.

iGeek

08-17-2009, 11:44 PM