Newbie problem with style sheet

merebel · January 5, 2007

haveing problems with a style sheet setup. I can get the layout I want but the my web pages text dosent show up in the main body of the style sheet ehre i would like it. it shows up on the lower right side
here is the syle shhet that I am useing, and I am looking to add the web page content in the center
the text shows up in the lower right hand side under the picture on the site
http://www.alderaanbase.com/test1.php
but the text needs to be in the middle in the light blue section.

Here is the style sheet
[code]<?

function print_header_small($title='')
{
print("
<head>
<title>$title</title>
<link rel='stylesheet' href='/include/alderaanbase.css'>

</head>

<body bgcolor=black text=black marginheight=0 marginwidth=0>
");
}

function print_header($title='Alderaan Base')
{
print("
<head>
<title>$title</title>
<link rel='stylesheet' href='/include/alderaanbase.css'>
</head>

<body bgcolor=black text=black marginheight=0 marginwidth=0>

<table width=100% height=100% cellspacing=0 cellpadding=5>
<tr>
<td class=header align=left height=110><img src='/images/alderaanbase1.jpg'></td>
</tr>
<tr>
<td>
<table width=100% cellspacing=10 cellpadding=10 border=0 height=100%>
<tr>
<td class=bodyline width=150 valign=top>
<a class=mainmenu href='/'>Home</a> 
<a class=mainmenu href='/calendar/eventslist.php'>Upcoming Events</a> 
<a class=mainmenu href='/events.php'>Past Events</a> 
<a class=mainmenu href='/gallery2/main.php?g2_itemId=79'>Photo Gallery</a> 
<a class=mainmenu href='/join.php'>Join the Rebellion!</a> 
<a class=mainmenu href='/reference'>Costuming Resources</a> 
<a class=mainmenu href='/forum'>Forum</a> 
<a class=mainmenu href='/members.php'>Members</a> 
<a class=mainmenu href='/honorary.php'>Honorary Base Members</a> 
 
 
 
<a class=mainmenu href='/invite.php'>To Invite Alderaan Base to an event or to find out more email us</a> 

 
 
  </td>

<td width='674' valign=top class=row1>

 
<td width='250' valign=top class=tablewhite>

 <img border=0 width=250 height=340 src='/images/rebelpreview.jpg'></a> 

");
}

function print_footer()
{
print(" </td>
</tr>
</table>
</tr>
</table>
</body>
</html>
");
}

function print_footer_small()
{
print "</body></html>";
}

function fix_url($linkurl)
{
if(substr($linkurl,0,4) == "http" || substr($linkurl,0,5) == "https")
{
$fixed_url = $linkurl;
}
else
{
$fixed_url= "http://" . $linkurl;
}

return $fixed_url;
}

[/code]

Thanks
Keith

dbrimlow · January 5, 2007

You showed the php/html code NOT the stylesheet.

The stylesheet is "alderaanbase.css".

Also, if that is the entire page, you are leaving out the <!DOCTYPE html PUBLIC etc...> AND/or at least the <html> tags.

Replace <body bgcolor=black text=black marginheight=0 marginwidth=0> with <body> and put the style tags in the body section of your stylesheet. Stay away from any styling in your body markup. They should be handled by the css.

ToonMariner · January 5, 2007

whoa there lesley.

try as best you can to at least produce valid html.
you don't have a starting html tag there sonny.

many of your tags don't have closing tags etc etc.

There is a lot of work for you there sonny have fun.

dbrimlow · January 5, 2007

I don't get the duplicate function tags. Unless there is a condition for one or the other are they both going to add headers and footers?

ToonMariner · January 5, 2007

brim - this individual has lots of work to do before we can even begin to help them.

merebel · January 5, 2007

if this helps here is the css sheet and tha main page that I am calling up

CSS
[code]/* General page style. The scroll bar colours only visible in IE5.5+ */
body {
/*background-color: #192c41;*/
background-color: #000000;
scrollbar-face-color: #0f202f;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #0f202f;
scrollbar-3dlight-color: #000000;
scrollbar-arrow-color: #264a55;
scrollbar-track-color: #777777;
scrollbar-darkshadow-color: #264a55;
margin: 0px 0px 0px 0px;
}

/* General font families for common tags */
font,th,td,p {
font-family: Arial, Helvetica, sans-serif ;
font-size: 10pt;
}

a:link,a:active,a:visited { text-decoration: underline; color : #ffffff; }
a:hover { text-decoration: none; color : #0f202f; }
hr { height: 0px; border: solid #000000 0px; border-top-width: 1px;}

/* This is the border line & background colour round the entire page */
/* .bodyline { background-color: #0f202f; border: 1px #264a55 solid; } */
.bodyline { background-color: #264a55; border: 1px #ffffff solid; }

/* This is the outline round the main forum tables */
.forumline { background-color: #000000; border: 2px #0f202f solid; }

td.banner {
background-color: black;
border-width: 0px 0px 0px 0px;
padding: 0px;
}

/* Main table cell colours and backgrounds */
td.row1 { background-color: #98a7be; }
td.row2 { background-color: #98a7be; }
td.row3 { background-color: #98a7be; }
td.row4 { background-color: #98a7be; }

/*
This is for the table cell above the Topics, Post & Last posts on the index.php page
By default this is the fading out gradiated silver background.
However, you could replace this with a bitmap specific for each forum
*/
td.rowpic {
background-color: #000000;
background-image: url(templates/alderaanbase/images/);
background-repeat: repeat-y;
}

/* Header cells - the blue and silver gradient backgrounds */
th {
color: #ffffff; font-size: 11px; font-weight : bold;
background-color: #0f202f; height: 25px;
background-image: url(templates/alderaanbase/images/);
}

td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
background-image: url(templates/alderaanbase/images/);
background-color:#000000; border-style: none; height: 28px;
}

/*
Setting additional nice inner borders for the main table cells.
The names indicate which sides the border will be on.
Don't worry if you don't understand this, just ignore it :-)
*/
td.cat,td.catHead,td.catBottom {
height: 29px;
border-width: 0px 0px 0px 0px;
}
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
font-weight: bold; border: #000000; border-style: solid; height: 28px;
}
td.row3Right,td.spaceRow {
background-color: #98a7be; border-style: none;
}

th.thHead,td.catHead { font-size: 12px; border-width: 1px 1px 0px 1px; }
th.thSides,td.catSides,td.spaceRow { border-width: 0px 1px 0px 1px; }
th.thRight,td.catRight,td.row3Right { border-width: 0px 1px 0px 0px; }
th.thLeft,td.catLeft { border-width: 0px 0px 0px 1px; }
th.thBottom,td.catBottom { border-width: 0px 1px 1px 1px; }
th.thTop { border-width: 1px 0px 0px 0px; }
th.thCornerL { border-width: 1px 0px 0px 1px; }
th.thCornerR { border-width: 1px 1px 0px 0px; }

/* The largest text used in the index page title and toptic title etc. */
.maintitle {
font-weight: bold; font-size: 16px; font-family: Arial, Helvetica, sans-serif;
text-decoration: none; line-height : 120%; color : #eeeeee;
}

a.maintitle,a.maintitle:hover,a.maintitle:visited {
font-weight: bold; font-size: 16px; font-family: Arial, Helvetica, sans-serif;
text-decoration: underline; line-height : 120%; color : #618da1;
}

/* General text */
.gen { font-size : 12px; }
.genmed { font-size : 11px; }
.gensmall { font-size : 10px; color: #ffffff}
.gen,.genmed,.gensmall { color : #000000; }

.gensmall2 {
color: #618da1;
font-size: 10px;
}

a.gensmall2 {
color: #618da1;
font-size: 10px;
text-decoration: underline;
}

a.gen,a.genmed,a.gensmall { color: #000000; text-decoration: none; }
a.gen:hover,a.genmed:hover,a.gensmall:hover { color: #000000; text-decoration: underline; }

/* The register, login, search etc links at the top of the page */
.mainmenu { font-size : 12px; color : #ffffff }
a.mainmenu { text-decoration: none; color : #ffffff; }
a.mainmenu:hover{ text-decoration: underline; color : #ffffff; }

b { font-weight : bold; color: #0f202f; }

/* Forum category titles */
.cattitle { font-weight: bold; font-size: 12px ; letter-spacing: 1px; color : #264a55}
a.cattitle { text-decoration: none; color : #7490aa; }
a.cattitle:hover{ text-decoration: underline; }

/* Forum title: Text and link to the forums used in: index.php */
.forumlink { font-weight: bold; font-size: 12px; color : #bfc8dc; }
a.forumlink { color : #000000; }
a.forumlink:hover{ text-decoration: underline; color : #ffffff; }

/* Used for the navigation text, (Page 1,2,3 etc) and the navigation bar when in a forum */
.nav { font-weight: bold; font-size: 11px; color : #eeeeee;}
a.nav:link { text-decoration: underline; color: #fffffff}
a.nav:visited { text-decoration: underline; color: #fffffff}
a.nav:hover { text-decoration: underline; color: #fffffff}

/* titles for the topics: could specify viewed link colour too */
.topictitle,h1,h2 { font-weight: bold; font-size: 11px; color : #eeeeee; }
a.topictitle:link { text-decoration: none; color : #000000; }
a.topictitle:visited { text-decoration: none; color : #000000; }
a.topictitle:hover { text-decoration: underline; color : #000000; }

/* Name of poster in viewmsg.php and viewtopic.php and other places */
.name { font-size : 11px; color : #eeeeee;}

/* Location, number of posts, post date etc */
.postdetails { font-size : 10px; color : #000000; }

/* The content of the posts (body of text) */
.postbody { font-size : 12px; line-height: 18px; color: #0f202f}
a.postlink:link { text-decoration: underline; color : ffffff }
a.postlink:visited { text-decoration: underline; color : ffffff; }
a.postlink:hover { text-decoration: underline; color : 5f829f; }

/* Quote & Code blocks */
.code {
font-family: Courier, 'Courier New', sans-serif; font-size: 11px; color: #006600;
background-color: #cccccc; border: #000000; border-style: solid;
border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}

.quote {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #336383; line-height: 125%;
background-color: #cccccc; border: #000000; border-style: solid;
border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}

/* Copyright and bottom info */
.copyright { font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #336383; letter-spacing: -1px;}
a.copyright { color: #336383; text-decoration: none;}
a.copyright:hover { color: #eeeeee; text-decoration: underline;}

/* Form elements */
input,textarea, select {
color : black;
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
border-color : #eeeeee;
}

/* The text input fields background colour */
input.post, textarea.post, select {
background-color : white;
}

input { text-indent : 2px; }

/* The buttons used for bbCode styling in message post */
input.button {
background-color : #777777;
color : #eeeeee;
font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* The main submit button option */
input.mainoption {
background-color : #cccccc;
font-weight : bold;
}

/* None-bold submit button */
input.liteoption {
background-color : #cccccc;
font-weight : normal;
}

/* This is the line in the posting page which shows the rollover
help line. This is actually a text box, but if set to be the same
colour as the background no one will know ;)
*/
.helpline { background-color: #0f202f; border-style: none; }

/* Import the fancy styles for IE only (NS4.x doesn't use the @import function) */
@import url("templates/alderaanbase/formIE.css");

// coppermine starts here

table {
font-size: 12px;
}

h1{
font-weight: bold;
font-size: 22px;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
line-height : 120%;
color : #000000;
margin: 2px;
}

h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
margin: 0px;
}

h3 {
font-weight: normal;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 2px;
}

p {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
margin: 2px 0px;
}

ul {
margin-left: 5px;
padding: 0px;
}

li {
margin-left: 10px;
margin-top: 4px;
margin-bottom: 4px;
padding: 0px;
list-style-position: outside;
list-style-type: disc;
}

.textinput {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
border: 1px solid #98a7be;
padding-right: 3px;
padding-left: 3px;
}

.listbox {
font-family: Verdana, Arial, Arial, Helvetica, sans-serif;
font-size: 100%;
border: 1px solid #98a7be;
vertical-align : middle;
}

.button {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
border: 1px solid #005D8C;
background-image : url(images/button_bg.gif);
background-position : bottom;
}

.comment_button {
font-family: Arial, Helvetica, sans-serif;
font-size: 85%;
border: 1px solid #005D8C;
background-image : url(images/button_bg.gif);
background-position : bottom;
padding-left: 3px;
padding-right: 3px;
}

.radio {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
vertical-align : middle;
}

.checkbox {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
vertical-align : middle;
}

a {
color: #0033CC;
text-decoration: none;
}

a:hover {
color: #0033CC;
text-decoration: underline;
}

bblink a {
color: #0033CC;
text-decoration: none;
}

bblink a:hover {
color: #0033CC;
text-decoration: underline;
}

.maintable {
border: 1px solid #264a55;
background-color: #98a7be;
margin-top: 1px;
margin-bottom: 1px;
}

.tableh1 {
background : #0f202f ;
color : #FFFFFF;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}

.tableh1_compact {
background : #264a55 ;
color : #FFFFFF;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}

.tableh2 {
background: #264a55 ;
color : #000000;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}

.tableh2_compact {
background: #264a55 ;
color : #000000;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}

.tableb {
background: #98a7be ;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}

.tableb_compact {
background: #98a7be ;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}

.tablef {
background: #98a7be;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}

.album_stat {
font-size: 85%;
margin: 5px 0px;
}

.thumb_title {
font-weight : bold;
font-size: 80%;
padding: 2px;
display : block;
}

.thumb_caption {
font-size: 80%;
padding: 1px;
display : block;
}

.thumb_caption a {
text-decoration: underline;
color: #000000;
}

.thumb_num_comments {
font-weight: normal;
font-size: 80%;
padding: 2px;
font-style : italic;
display : block;
}

.user_thumb_infobox {
margin-top: 1px;
margin-bottom: 1px;
}

.user_thumb_infobox th {
font-weight : bold;
font-size: 100%;
margin-top: 1px;
margin-bottom: 1px;
text-align : center;
}

.user_thumb_infobox td {
font-size: 80%;
margin-top: 1px;
margin-bottom: 1px;
text-align : center;
}

.user_thumb_infobox a {
text-decoration: none;
color: #000000;
}

.user_thumb_infobox a:hover {
color: #000000;
text-decoration: underline;
}

.sortorder_cell {
background : #264a55 ;
color : #FFFFFF;
padding: 0px;
margin: 0px;
}

.sortorder_options {
font-family: Verdana, Arial, Helvetica, sans-serif;
background : #264a55 ;
color : #FFFFFF;
padding: 0px;
margin: 0px;
font-weight: normal;
font-size: 80%;
white-space: nowrap;
}

.navmenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 100%;
font-weight: bold;
background : #264a55 ;
border-style: none;
}

.navmenu img {
margin-top: 1px;
margin-right: 5px;
margin-bottom: 1px;
margin-left: 5px;
}

.navmenu a {
position: relative;
display: block;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
text-decoration: none;
color: #FFFFFF;
}

.navmenu a:hover {
background : #98a7be ;
text-decoration: none;
color: #000000;
}

.admin_menu_thumb {
font-family: Arial, Helvetica, sans-serif;
font-size: 85%;
border: 1px solid #005D8C;
background-image : url(images/button_bg.gif);
background-position : bottom;
color: #000000;
font-weight: bold;
margin-top: 0px;
margin-bottom: 0px;
width: 85px;
}

.admin_menu_thumb a {
color: #000000;
text-decoration: none;
display: block;
position: relative;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 10px;
padding-right: 10px;
}

.admin_menu_thumb a:hover {
color: #000000;
text-decoration: underline;
}

.admin_menu {
font-family: Arial, Helvetica, sans-serif;
font-size: 85%;
border: 1px solid #005D8C;
background-image : url(images/button_bg.gif);
background-position : bottom;
color: #000000;
margin-top: 0px;
margin-bottom: 0px;
text-align: center;
}

.admin_menu a {
color: #000000;
text-decoration: none;
display: block;
position: relative;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 2px;
padding-right: 2px;
}

.admin_menu a:hover {
color: #000000;
text-decoration: underline;
}

.comment_date{
color : #5F5F5F;
font-size : 90%;
vertical-align : middle;
}

.image {
border-style: solid;
border-width:1px;
border-color: #000000;
margin: 2px;
}

.imageborder {
border: 1px solid #000000;
background-color: #98a7be;
margin-top: 30px;
margin-bottom: 30px;
}

.thumbnails {
background: #98a7be ;
padding: 5px;
}

.footer {
font-size : 9px;
}

.footer a {
text-decoration: none;
color: #000000;
}

.footer a:hover {
color: #000000;
text-decoration: underline;
}

.statlink {
color: #FFFFFF;
}

.statlink a {
text-decoration: none;
color: #FFFFFF;
}

.statlink a:hover {
color: #FFFFFF;
text-decoration: underline;
}

.alblink a {
text-decoration: underline;
color: #000000;
}

.alblink a:hover {
color: #000000;
text-decoration: underline;
}

.catlink {
display: block;
margin-bottom: 2px;
}

.catlink a {
text-decoration: underline;
color: #000000;
}

.catlink a:hover {
color: #000000;
text-decoration: underline;
}

.topmenu {
line-height : 130%;
font-size: 100%;
}

.topmenu a {
color : #0033CC;
text-decoration : none;
}

.topmenu a:hover {
color : #0033CC;
text-decoration : underline;
}

.img_caption_table {
border: none;
background-color: #FFFFFF;
width : 100%;
margin : 0px;
}

.img_caption_table th {
background: #98a7be ;
font-size: 100%;
color : #000000;
padding-top: 4px;
padding-right: 10px;
padding-bottom: 4px;
padding-left: 10px;
border-top : 1px solid #FFFFFF;
}

.img_caption_table td {
background: #98a7be ;
padding-top: 6px;
padding-right: 10px;
padding-bottom: 6px;
padding-left: 10px;
border-top : 1px solid #FFFFFF;
}

.debug_text {
border: #BDBEBD;
background-color: #98a7be;
width : 100%;
margin : 0px;
}

.clickable_option {
border-bottom : 1px dotted blue;
cursor : hand;
}

.listbox_lang {
color: #000000;
background-color: #98a7be;
border: 1px solid #98a7be;
font-size: 80%;
font-family: Arial, Helvetica, sans-serif;
vertical-align : middle;

}
[/code]

And the page that is calling up the style sheet and the css sheet
[code]<?
$style=getenv(DOCUMENT_ROOT) . "/include/style2.php";
include($style);

print_header();
?>

<h1> <marquee behavior="alternate" scrolldelay="200" ><a class=mainbody href='/calendar/eventslist.php'>Be Sure to Check Out Our Upcomeing Events Section </a></marquee></h1>

 

 

<center><h2>What is Alderaan Base?</h2></center>

 

Alderaan Base is the unit of the <a class=mainbody href="http://www.rebellegion.com" taget=_new>Rebel Legion</a> in New England. We are a
Star Wars fan group focused on creating movie quality reproductions of the costumes worn by the Galactic Republic and Rebellion.
The group does a variety of charity work, conventions and movie promotional events throughout New England.

 

Founded in June 2005, Alderaan Base was originally part of the <A target=_new class=mainbody href="http://www.echobaserebels.com">Echo
Base</a>. As our numbers grew, the challenges of 1 base spanning 11 states also grew. Eventually we all decided it would be for the best if we
separated from the larger base. This is, to the best of our knowledge, the first time in the history of the Rebel Legion that a base has split like
this.

 
 

</td>
</tr>

</td>

 

<? print_footer(); ?>[/code]

If it Helps

ToonMariner · January 5, 2007

merebel - firstly you need to produce much better html than what that script does!

go back and look at the source html of your page and then edit your php script to close the relvant tags (like td ) give the document a start and end html tag. try and make the html generated fairly easy to read.

Once you have doen that I would be more than appy to look at your problme but you MUST get that html code sorted first - get that right you will probably fix your issues.

Use teh w3c validation tool... [url=http://validator.w3.org/]http://validator.w3.org/[/url]

dbrimlow · January 5, 2007

Looking at your web page source code, the problems are indeed many.

The whole structure is wrong. You are actually putting the text where it is showing. The page is falling apart because it does not have an <html> tag, the table tags are not correct.

A better way to fix it is to open it in your browser, view source and copy and paste the html code that php produced.

You will be able to see from there where it is all screwy. Once you fix the html, go back to php and revise the php commands by putting the proper html tags to echo where they belong.

like this:
[code]function print_header($title='Alderaan Base')
{
print("
<!-- add the html tag --!> <html>
<head>
<title>$title</title>
<link rel='stylesheet' href='/include/alderaanbase.css'>
</head>[/code]

It isn't the css ... it's the markup structure.

Remember, php produces the html output you tell it to, so always start with a properly crafted html page so you will know what and where to tell php to create.

Sign In

Newbie problem with style sheet

Recommended Posts

merebel

Link to comment

Share on other sites

dbrimlow

Link to comment

Share on other sites

ToonMariner

Link to comment

Share on other sites

dbrimlow

Link to comment

Share on other sites

ToonMariner

Link to comment

Share on other sites

merebel

Link to comment

Share on other sites

ToonMariner

Link to comment

Share on other sites

dbrimlow

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information