[Solved] <Center> does not center?

<center> is not defined for your DTD, it isn't used any longer the correct way to center horizontally is to use auto margins on a fixed width element.

You must get in the habit of validating your markup as it is full of errors; apart from the fact that you must stop using the <BR> tag the way you are if it is used with a XHTML then it must be written <br />
that is closed, and in lower case letters.

Please run your page through a validator and address the markup issues.

Ok, I validated and both CSS nad HTML and they ended up correctly, however, the HTML had errors when I included the PHP, when I took it out it worked perfectly. In this HTML I put the PHP, is there an alternate way so that I can include my PHP? Also, the footer seems to not show up correctly. Any suggestions please?

HTML (Please note I put 1 comment in the HTML, make sure to erase if testing)

Maple Days

Home


CSS


Contact

View shoutbox

<?PHP $number=4; $static=TRUE; include("/****/*****/public_html/cute_news/show_news.php"); //Without this PHP tag, it validates. ?>

CSS
body {
background-image: url('images/bg_pinkbub.gif');
background-repeat: repeat;
font-family:Tahoma,sans-serif;
color: #0F0E15;
font-size: 11px;
height:100%;

}
#top
{
border-bottom: 0px solid gray;
}
#top h1
{
padding: 0;
margin: 0;
}
#container
{
width: 900px;
height:100%;
margin: 10px auto;
background:url('images/fondito.png') 50% 0;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
#leftnav
{

float: left;
width: 150px;
height: 100%;

margin:0;
}
#rightnav
{
float: right;
width: 150px;
height:100%;
margin: 0;

}
#content
{
margin-left: 150px;
border-left: 0px solid gray;
margin-right: 150px;
border-right: 0px solid gray;
padding: 1em;
max-width: 600px;
height:100%;
}

#footer
{
clear: both;
margin: 0;
color: #333;
background:url('images/piesito.png') 50% 0;
border-top: 0px solid gray;
font-size:10px;
height:150px;
}
#leftnav p, #rightnav p
{
margin: 0 0 0 0;
}
#content h2
{
margin: 0 0 .5em 0;
}

a:link, a:visited {
text-decoration:none;
color:#936B35
}

b{
color:#B9694E;
font-size:12px;
font-family:"Times New Roman";
}

i{color:#A27232;
font-size:13px;
}
u{color:#DB723B;
}

a:hover { text-decoration:none;
font-style:normal;
color:#F31082;
font-size:10px;
text-transform:none;
letter-spacing:0px;
}

td { background:none;
font-size:9px;
font-family: Verdana, Tahoma;
line-height: 16px;
color:#DA930F;
}
.avi { background-color:#D1D764;
border: 2px solid #E8512D;
margin: 2px;

}
.ava {
font-family:verdana;
color:#EFA630;
font-size:7pt;
border:1px solid #C8C055;
background:#F6F498;
text-align: center;
}

.toptitle{
position:relative;
top:16px;
font-weight: bold;
color:#EB4F18;
font-family:"Times New Roman";
text-align:left;
padding-left:160px;
}
.top {
font-weight: bold;
font-size:16px;
color:#EB4F18;
font-family:"Times New Roman";
text-transform: uppercase;
letter-spacing: 2px;
padding: 0px 0px 0px 0px;
width:488px;
height:65px;
background: transparent url('images/cn/top.jpg');
background-repeat: no-repeat;
text-align:CENTER;
}
.bg {
background: transparent url('images/cn/boxbg.png');
background-repeat: repeat-y;
width:475px;
padding: 7px 30px 0px 30px;
TEXT-ALIGN:JUSTIFY;
font-family: georgia;
color:#D77761;
letter-spacing: 1px;
font-size: 10px;
}

.bottom {
background: transparent url('images/cn/bottom.png');
background-repeat: no-repeat;
text-align: center;
width:475px;
height:25px;
}

a.buttonlink {
font-size:11px;
padding: 1px 0px 0px 10px;
font-family:Tahoma,sans-serif;
color:#FFFFFF;
display:block;
letter-spacing:5px;
height:15px;
width:104px;
background-color:#FFC3BC;
border-top-style:solid;
border-top-color:#F78B87;
border-top-width:1px;
border-bottom-style:solid;
border-bottom-color:#F78B87;
border-bottom-width:1px;
border-left-style:solid;
border-left-color:#F78B87;
border-left-width:4px;
border-right-style:solid;
border-right-color:#F78B87;
border-right-width:1px;
}

a.buttonlink:hover {
font-size:11px;
padding: 1px 0px 0px 10px;
font-family:Tahoma,sans-serif;
color:#FFFFFF;
display:block;
letter-spacing:5px;
height:15px;
width:119px;
background-color:#FFC3BC;
border-top-style:solid;
border-top-color:#F78B87;
border-top-width:1px;
border-bottom-style:solid;
border-bottom-color:#F78B87;
border-bottom-width:1px;
border-left-style:solid;
border-left-color:#F78B87;
border-left-width:4px;
border-right-style:solid;
border-right-color:#F78B87;
border-right-width:1px;
}

The Validator is for HTML, so any PHP might confuse it. I suggest that you copy the output HTML from the server and paste it into the Validator or you can just give the Validator the URI for your page.

Even if the PHP is the problem, lets exclude that tag. The problem is the footer that does not display fully..

You've got nothing in it? What's it supposed to be displaying?

You should also get rid of all those breaks - you can use a bottom margin on the classes and padding on the holding div.

The footer is that big thing that says "Copyright MapleDays 2007 Webmistress Maple". Using firefox, it only displays a part of it, I want it to display fully but I had no luck. Here is the new CSS and HTML I use, CSS is validated and HTML works when removing the only php tag it has.

HTML

Maple Days

Home


CSS


Contact

View shoutbox

<?PHP $number=4; $static=TRUE; include("/home/lchsp/public_html/cute_news/show_news.php"); ?>

CSS body { background-image: url('http://i182.photobucket.com/albums/x206/mapledays/bg_pinkbub.gif'); background-repeat: repeat; font-family:Tahoma,sans-serif; color: #0F0E15; font-size: 11px; height:100%; } #top { border-bottom: 0px solid gray; } #top h1 { padding: 0; margin: 0; } #container { width: 900px; height:100%; margin: 10px auto; background:url('http://i182.photobucket.com/albums/x206/mapledays/fondito.png') 50% 0; color: #333; border: 1px solid gray; line-height: 130%; } #leftnav {

float: left;
width: 150px;
height: 100%;
margin:0;
}
#rightnav
{
float: right;
width: 150px;
height:100%;
margin: 0;
}
#content
{
margin-left: 185px;
border-left: 0px solid gray;
margin-right: 150px;
border-right: 0px solid gray;
padding: 1em;
max-width: 600px;
height:100%;
}

#footer
{
clear: both;
margin: 0;
color: #333;
background:url('images/piesito.png') 50% 0;
border-top: 0px solid gray;
font-size:10px;
height:150px;
}
#leftnav p, #rightnav p
{
margin: 0 0 0 0;
}
#content h2
{
margin: 0 0 .5em 0;
}

a:link, a:visited {
text-decoration:none;
color:#936B35
}

b{
color:#B9694E;
font-size:12px;
font-family:"Times New Roman";
}
i{color:#A27232;
font-size:13px;
}
u{color:#DB723B;
}

a:hover { text-decoration:none;
font-style:normal;
color:#F31082;
font-size:10px;
text-transform:none;
letter-spacing:0px;
}

td { background:none;
font-size:9px;
font-family: Verdana, Tahoma;
line-height: 16px;
color:#DA930F;
}
.avi { background-color:#D1D764;
border: 2px solid #E8512D;
margin: 2px;

}
.ava {
font-family:verdana;
color:#EFA630;
font-size:7pt;
border:1px solid #C8C055;
background:#F6F498;
text-align: center;
}

.toptitle{
position:relative;
top:16px;
font-weight: bold;
color:#EB4F18;
font-family:"Times New Roman";
text-align:left;
padding-left:160px;
}
.top {
font-weight: bold;
font-size:16px;
color:#EB4F18;
font-family:"Times New Roman";
text-transform: uppercase;
letter-spacing: 2px;
padding: 0px 0px 0px 0px;
width:488px;
height:65px;
background: transparent url('http://i182.photobucket.com/albums/x206/mapledays/cutenews/top.jpg');
background-repeat: no-repeat;
text-align:CENTER;
}
.bg {
background: transparent url('http://i182.photobucket.com/albums/x206/mapledays/cutenews/boxbg.png');
background-repeat: repeat-y;
width:475px;
padding: 7px 30px 0px 30px;
TEXT-ALIGN:JUSTIFY;
font-family: georgia;
color:#D77761;
letter-spacing: 1px;
font-size: 10px;
}
.bottom {
background: transparent url('http://i182.photobucket.com/albums/x206/mapledays/cutenews/bottom.png');
background-repeat: no-repeat;
text-align: center;
width:475px;
height:25px;
}
a.buttonlink {
font-size:11px;
padding: 1px 0px 0px 10px;
font-family:Tahoma,sans-serif;
color:#FFFFFF;
display:block;
letter-spacing:5px;
height:15px;
width:104px;
background-color:#FFC3BC;
border-top-style:solid;
border-top-color:#F78B87;
border-top-width:1px;
border-bottom-style:solid;
border-bottom-color:#F78B87;
border-bottom-width:1px;
border-left-style:solid;
border-left-color:#F78B87;
border-left-width:4px;
border-right-style:solid;
border-right-color:#F78B87;
border-right-width:1px;
}
a.buttonlink:hover {
font-size:11px;
padding: 1px 0px 0px 10px;
font-family:Tahoma,sans-serif;
color:#FFFFFF;
display:block;
letter-spacing:5px;
height:15px;
width:119px;
background-color:#FFC3BC;
border-top-style:solid;
border-top-color:#F78B87;
border-top-width:1px;
border-bottom-style:solid;
border-bottom-color:#F78B87;
border-bottom-width:1px;
border-left-style:solid;
border-left-color:#F78B87;
border-left-width:4px;
border-right-style:solid;
border-right-color:#F78B87;
border-right-width:1px;
}

You've got way too many divs in there and way too much inline styling which makes editing and debugging a bit of a nightmare!

Let me have a go at editing your HTML to make it a bit easier to manage.

OK I see you're using a CMS. You'll need to get into that a little bit to get it exporting better code.

This is what you want to end up with:

Maple Days

Maple Days

Menu

Home

Shop

Commissions

Forum

M.Desings

Staff

Contact

hits

online

Content Management Powered by CuteNews

Edit/ I see that TPH has kindly written an example of the sort of markup that you want to be aiming for, however this is beside the point slightly that you are fundamentally missing how to read your own css and markup so before changing things observe why the problem occurred as outlined below so that you better understand how to avoid these problems and hopefully get used to using tools such as Firebug.

You should really make it clear - as TPH points out it has no content! - that the footer is actually a background image, rather than as we would think of a footer containing footer content

It's not really difficult to figure out, you have a background image that is 900px wide, set as a background of an element that has no specified width, that element (#footer) sits nested in a div - that is unnamed - that has a specified width of ~420px you are seeing exactly what you have asked it to show!

You will need to figure out where you actually need that footer element and what dimensions if any it needs when it is in a correct position in the flow.

Getting in the habit of using dev tools such as FF firebug will really help in determining what is happening with elements and what rule they are working with and inheriting and what nesting is in place.

I would get out of the habit of allowing unidentified divs if you create a div please give it an identifier, either a class or an ID, you'll run into problems if you need to target specific divs when they aren't named.

Also get rid of the inline styling it's a bad idea to use inline styles altogether.

The breaks are written correctly now but they still need to be removed as you are using them as styling elements which they are not use margins if space is required.

Hugo.

Ooooh I beat you to it.

Your problem probably lies from all those random divs with widths of 420px that serve no purpose whatsoever.

Clean up your code as much as you can and try and get cutenews to output half-decent code, and we can help with the CSS.

Your problem probably lies from all those random divs with widths of 420px that serve no purpose whatsoever.

Clean up your code as much as you can and try and get cutenews to output half-decent code, and we can help with the CSS.
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me
Not with an explanation of the problem though just a rewrite of markup which is however kind and useful for the OP, and hopefully if cutenews isn't too awkward it will be used as a replacement; they will also need probably to adjust the CSS somewhat?

Help me signatures are multiplying, which reminds me of a song from a popular musical

I've noticed that, it only seems to happen if you quote somebody.

Yes the CSS will need a complete rewrite as well, but when we get proper HTML code we can style it.

Well, I learned CSS by myself in only one day, so I am still learning! Thank you for your answers, I will fix everything I can right now and repost code if I still have problems, thank you!

obviously if you "learned" CSS in one day you wouldn't need help.
What you have done is read a tutorial on what CSS is and you are LEARNING it.

I've been using CSS for many many moons and I will never claimed I have "learned CSS" too many different ways of doing things that I will forever be learning CSS, but that's what makes it fun.

Deuce:Ok, I didn't learn, I just tried to, of course I probably know less than 20% of CSS but each day i learn as much as possible.

Everyone:I got to the problem, it is in the Cutenews code(thanks Hugo it really was the 420px thing, Thanks for the suggestion of using firebug it really helped) And I also re-did the menu as a list:) very nice:) I tried playing around with the code of cutenews but no luck, I will continue, any suggestions while I try are welcome:)

My new CSS and HTML below

HTML

Maple Days

 

Home

Shop

Commissions

Forum

M.Desings

Staff

Contact

CSS
body {
background-image: url('http://i182.photobucket.com/albums/x206/mapledays/bg_pinkbub.gif');
background-repeat: repeat;
font-family:Tahoma,sans-serif;
color: #0F0E15;
font-size: 11px;
height:100%;
}
#top
{
border-bottom: 0px solid gray;
background:url('http://i182.photobucket.com/albums/x206/mapledays/banner_maple.jpg') 50% 0;
width:900px;
height:180px;
}

#container
{
width: 900px;
height:100%;
margin: 10px auto;
background:url('http://i182.photobucket.com/albums/x206/mapledays/fondito.png') 50% 0;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
#leftnav
{
float: left;
width: 150px;
height: 100%;
margin:0;
}
#leftnav dt{
background:url(http://i182.photobucket.com/albums/x206/mapledays/menu.png);
width:135px;
height:29px;
margin-bottom:10px;
margin-top:15px;
background-repeat:no-repeat;
}
#leftnav dd {
margin: 15px 0 0 0;
}
#leftnav a {
font-size:11px;
padding: 1px 0px 0px 6px;
font-family:Tahoma,sans-serif;
color:#FFFFFF;
display:block;
letter-spacing:4px;
height:15px;
width:104px;
background-color:#FFC3BC;
border-style:solid;
border-color:#F78B87;
border-width:1px;
border-left-width:4px;
}
#leftnav a:hover {
font-size:11px;
padding: 1px 0px 0px 6px;
font-family:Tahoma,sans-serif;
color:#FFFFFF;
display:block;
letter-spacing:4px;
height:15px;
width:119px;
background-color:#FFC3BC;
border-style:solid;
border-color:#F78B87;
border-width:1px;
border-left-width:4px;
}

#rightnav
{
float: right;
width: 150px;
height:100%;
margin: 0;
}
#content
{
margin-left: 185px;
border-left: 0px solid gray;
margin-right: 150px;
border-right: 0px solid gray;
padding: 1em;
max-width: 600px;
height:100%;
}

#footer
{
clear: both;
margin: 0px;
color: #333;
background:url('http://i182.photobucket.com/albums/x206/mapledays/piesito.jpg') 50% 0;
border-top: 0px solid gray;
font-size:10px;
height:150px;

}
#content h2
{
margin: 0 0 .5em 0;
}
a:link, a:visited {
text-decoration:none;
color:#936B35
}
a.counter{
text-decoration:none;
color:#936B35
}
a.counter:hover{
text-decoration:none;
color:#936B35
}
b{
color:#B9694E;
font-size:12px;
font-family:"Times New Roman";
}
i{color:#A27232;
font-size:13px;
}
u{color:#DB723B;
}

a:hover { text-decoration:none;
font-style:normal;
color:#F31082;
font-size:10px;
text-transform:none;
letter-spacing:0px;
}

.toptitle{

font-weight: bold;
color:#EB4F18;
font-family:"Times New Roman";
text-align:left;
padding-left:160px;
margin-top:10px;
}
.top {
font-weight: bold;
font-size:16px;
color:#EB4F18;
font-family:"Times New Roman";
letter-spacing: 2px;
padding: 0px 0px 0px 0px;
width:488px;
height:65px;
background: transparent url('http://i182.photobucket.com/albums/x206/mapledays/cutenews/top.jpg');
background-repeat: no-repeat;
text-align:CENTER;
}
.bg {
background: transparent url('http://i182.photobucket.com/albums/x206/mapledays/cutenews/boxbg.png');
background-repeat: repeat-y;
width:475px;
padding: 7px 30px 0px 30px;
TEXT-ALIGN:JUSTIFY;
font-family: georgia;
color:#D77761;
letter-spacing: 1px;
font-size: 10px;
}
.bottom {
background: transparent url('http://i182.photobucket.com/albums/x206/mapledays/cutenews/bottom.png');
background-repeat: no-repeat;
text-align: center;
width:475px;
height:25px;
}

You've found the correct bit in the cutenews file.

Change it so it says this:

problem lies in the show_news.php include doesn't it? is that the first file snippet you showed of those three?
btw I edited out your server path details, no need to let the whole world know.

Wow! it sort of goes through! I will continue working it out. Althouth it is not still like it was before, the footer shows, so now the problem is fixing the news again. www.mapledays.com to see how it goes changing, suggestions still welcome. I was hours and didn't get it, but now I'm learning more and more, thanks!

Before:

Ok I got I got it!!! I'm so happy! I just have one minor problem.
I have this code that has a minor mistakes:

It is corrected if I do this:

But that correction doesn't seem a nice one, any suggestions? Also, on Internet Explorer, it seems that I get a different output. I will leave a screenshot o part of what it is supposed to look (just for my record and for you helping me ) Screenshot

No no no!

Go back to the original code I posted and use that. There's no point littering your code with all those divs and inline styling.

Use the code I posted, let us know when it's uploaded - then we can help you use your CSS file to replicate your effect.

Ok I went back to the code, check again www.mapledays.com to see the new outcome.

Excellent, next we'll get your CSS tweaked to sty;e what you have.

So I have to do:

.news {
}

and do something for its header

and everything else right?

Yes.

The top bit of the boxes (the four squares, along with the colourful top border and tape) should be joined into one image and set as the background image of the h2.

If the border is a flat colour you can just set a matching left and right border on the first paragraph.

You can then style the text to match your image

Give it a go and let us know if you get stuck or need any more help!

ok I came to a problem. I have the bottom as a <p class=bottom> and the text is in <p>...so how should I do that in css?

so far I did a .newsitem h2{} and a .newsitem p{}

please look at the results in www.mapledays.com it looks awful

What I had before seemed good but it had too many divs. So I want this way, but I have lots of trouble. Please help

Well, you have several html errors that you must fix before you can complain about how any browser renders your site. After all, CSS is defined only for valid html or xhtml.

That's fantastic, you've got that done a lot quicker than I thought

This CSS should get it looking like your original design:

.newsitem { background: transparent url('http://i182.photobucket.com/albums/x206/mapledays/cutenews/boxbg.png') repeat-y; overflow: auto; }

.newsitem * {
padding: 0;
margin: 0;
}

.newsitem h2 {
font-weight: bold;
font-size:16px;
color:#EB4F18;
font-family:"Times New Roman";
letter-spacing: 2px;
text-align: left;
text-indent: 160px;
line-height: 25px;
height:65px;
background: transparent url('http://i182.photobucket.com/albums/x206/mapledays/cutenews/top.jpg') no-repeat;
}
.newsitem p {
margin: 0;
width: 425px;
padding: 7px 30px 0px 30px;
text-align: justify;
font-family: georgia;
color: #D77761;
letter-spacing: 1px;
font-size: 10px;
}

p.bottom {
background: transparent url('http://i182.photobucket.com/albums/x206/mapledays/cutenews/bottom.png') no-repeat bottom left;
text-align: left;
height: 25px;
line-height: 10px;
}

p.bottom a {float: right;}

p.bottom em a {float: none;}

Perfect!!! All I need now is to add my information~! Thank you thepineapplehead. From now on I will eat pineapples:) just joking. Thank you, I will continue to be in this forum, very helpful and I would like to share the knowledge I have:)

Excellent, glad you're happy with the solution. Any other questions, you know where to find us!