29 replies [Last post]
Maple Qrazy
Maple Qrazy's picture
Offline
Regular
Last seen: 12 years 25 weeks ago
Timezone: GMT-5
Joined: 2007-07-25
Posts: 15
Points: 0

My website is www.mapledays.com
I did a on the news item but it does not center correctly using firefox, in IE it does. The problem is that in IE, the footer appears incorrectly, but in Firefox it displays fully. What I need the most is to center the news item with firefox. Any suggestions?

HTML

Maple Days








Home


CSS


Contact







<?PHP
$number=4;
$static=TRUE;
include("show_news.php");
?>

CSS body { background-image: url('images/bg_pinkbub.gif'); background-repeat: repeat; scrollbar-arrow-color: #E1D470; scrollbar-track-color: #D37963; scrollbar-face-color: #D0615B; scrollbar-highlight-color: #EFC475; scrollbar-shadow-color: #EFC475; scrollbar-3dlight-color: #EFC475; scrollbar-darkshadow-color: #0F0E15; 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 #C8C05;
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;
}

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

<center> is not defined for

<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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Maple Qrazy
Maple Qrazy's picture
Offline
Regular
Last seen: 12 years 25 weeks ago
Timezone: GMT-5
Joined: 2007-07-25
Posts: 15
Points: 0

Validated

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







<?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;
}

flashcat7777
Offline
Enthusiast
Last seen: 9 years 38 weeks ago
Timezone: GMT-5
Joined: 2006-05-29
Posts: 64
Points: 5

The Validator is for HTML,

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.

Maple Qrazy
Maple Qrazy's picture
Offline
Regular
Last seen: 12 years 25 weeks ago
Timezone: GMT-5
Joined: 2007-07-25
Posts: 15
Points: 0

The footer is the problem

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 2 weeks 8 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

You've got nothing in it?

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.

Verschwindende wrote:
  • CSS doesn't make pies

Maple Qrazy
Maple Qrazy's picture
Offline
Regular
Last seen: 12 years 25 weeks ago
Timezone: GMT-5
Joined: 2007-07-25
Posts: 15
Points: 0

The footer is that big thing

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







<?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;
}

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 2 weeks 8 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

You've got way too many divs

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.

Verschwindende wrote:
  • CSS doesn't make pies

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 2 weeks 8 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

OK I see you're using a CMS.

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




Redesign

A ver a ver, un redesign. Estoy sin internet pero igual. Puse logo, nuevos colores, pero falta todavia. Falta mas time pero no hay :o Aprovechare lo que queda para hacer lo que pueda...

0 Comments Posted on 24 Jul 2007 by Maple

Ragnarok y Pagina

Hoy dia en Ragnarok segui con mis castillos, creo que salieron buenas cards. La pagina, todavia sigo jugando a ver que sale. Esta ves con CSS, es todo facil:o Se ve bien, 0 tables y puede ser facilmente cambiado. Bueno, seguire viendo que hago esta noche. Seguire con esto de CSS, mientras juego Ragnarok, veo television, tomo limonada, y....nose laughing

0 Comments Posted on 19 Jul 2007 by Maple

Hola

Hola smile

0 Comments Posted on 15 Jul 2007 by Maple

Content Management Powered by CuteNews

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You should really make it

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 2 weeks 8 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Ooooh I beat you to

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.

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

thepineapplehead wrote:Ooooh

thepineapplehead wrote:
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.
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 Smile 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

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 2 weeks 8 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

I've noticed that, it only

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.

Verschwindende wrote:
  • CSS doesn't make pies

Maple Qrazy
Maple Qrazy's picture
Offline
Regular
Last seen: 12 years 25 weeks ago
Timezone: GMT-5
Joined: 2007-07-25
Posts: 15
Points: 0

Thanks!

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!

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 27 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

obviously if you "learned"

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.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Maple Qrazy
Maple Qrazy's picture
Offline
Regular
Last seen: 12 years 25 weeks ago
Timezone: GMT-5
Joined: 2007-07-25
Posts: 15
Points: 0

Deuce:Ok, I didn't learn, I

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:)

{title}



{short-story}

[full-link]Read more •[/full-link] [com-link]{comments-num} Comments[/com-link]

Posted on {date} by {author}

My new CSS and HTML below

HTML

Maple Days


 
Home
Shop
Commissions
Forum
M.Desings
Staff
Contact

<?PHP $number=4; $static=TRUE; include("/***/****/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;
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;
}

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 2 weeks 8 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

You've found the correct bit

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

Change it so it says this:

{title}

{short-story}

[full-link]Read more •[/full-link] [com-link]{comments-num} Comments[/com-link] 0 Comments Posted on {date} by {author}

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

problem lies in the

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. Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Maple Qrazy
Maple Qrazy's picture
Offline
Regular
Last seen: 12 years 25 weeks ago
Timezone: GMT-5
Joined: 2007-07-25
Posts: 15
Points: 0

Thank you

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! Smile

Before:


{title}



{short-story}

[full-link]Read more •[/full-link] [com-link]{comments-num} Comments[/com-link]

Posted on {date} by {author}

After:

{title}

{short-story}

[full-link]Read more •[/full-link] [com-link]{comments-num} Comments[/com-link]

Maple Qrazy
Maple Qrazy's picture
Offline
Regular
Last seen: 12 years 25 weeks ago
Timezone: GMT-5
Joined: 2007-07-25
Posts: 15
Points: 0

Good Good!

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:

{title}

{short-story}

[full-link]Read more •[/full-link] [com-link]{comments-num} Comments[/com-link]

It is corrected if I do this:

{title}

{short-story}

[full-link]Read more •[/full-link] [com-link]{comments-num} Comments[/com-link]

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 Laughing out loud) Screenshot

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 2 weeks 8 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

No no no! Go back to the

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.

Verschwindende wrote:
  • CSS doesn't make pies

Maple Qrazy
Maple Qrazy's picture
Offline
Regular
Last seen: 12 years 25 weeks ago
Timezone: GMT-5
Joined: 2007-07-25
Posts: 15
Points: 0

pineapplehead code

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

{title}

{short-story}

[full-link]Read more •[/full-link] [com-link]{comments-num} Comments[/com-link] Posted on {date} by {author}

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 2 weeks 8 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Excellent, next we'll get

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

Verschwindende wrote:
  • CSS doesn't make pies

Maple Qrazy
Maple Qrazy's picture
Offline
Regular
Last seen: 12 years 25 weeks ago
Timezone: GMT-5
Joined: 2007-07-25
Posts: 15
Points: 0

So I have to do: .news

So I have to do:

.news {
}

and do something for its header

and everything else right?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 2 weeks 8 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Yes. The top bit of the

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 Wink

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

Verschwindende wrote:
  • CSS doesn't make pies

Maple Qrazy
Maple Qrazy's picture
Offline
Regular
Last seen: 12 years 25 weeks ago
Timezone: GMT-5
Joined: 2007-07-25
Posts: 15
Points: 0

ok I came to a problem. I

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 Sad

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

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 4 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Well, you have several html

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.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 2 weeks 8 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

That's fantastic, you've got

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

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;}

Verschwindende wrote:
  • CSS doesn't make pies

Maple Qrazy
Maple Qrazy's picture
Offline
Regular
Last seen: 12 years 25 weeks ago
Timezone: GMT-5
Joined: 2007-07-25
Posts: 15
Points: 0

Finally :D

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:)

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 2 weeks 8 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Excellent, glad you're happy

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

Verschwindende wrote:
  • CSS doesn't make pies