Problems Which Require Fixing

A website I've been editing for a family member...

Page 1 of 1

6 Replies - 677 Views - Last Post: 30 November 2010 - 06:30 PM

#1 litedrive  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 102
  • Joined: 30-September 10

Problems Which Require Fixing

Posted 06 November 2010 - 04:50 PM

A couple years back, I referred one of my family members to a friend of mine who was fairly well versed in web development at the time.

Now, two years later, I've decided to take on the task of learning the ins and outs of it myself.

I'll cut to the chase: my uncle needed some minor editing done to his website. Seeing as how I wouldn't bother my friend with something which would seem purely simple, I figured I could learn a thing or two by giving it a shot myself.

The task seemed easy: change the width of the header tabs so they don't appear clunky, and reupload a different video to the website.

The issue is that no matter what I've tried (whether it be switching from absolute URLs to relative, to converting the file to a different extension, to changing the characters to simplify it, etc.), nothing seems to be happening. The file will load, but barely. Half hazardly, in fact.

Another issue is the tab system. All the header is, really, is just a pure CSS tab menu bar which consists of a <ul> tag and a few <li>s to make up for the pages. There's some php in there too, but I'm hardly versed in that yet.

The thing is that my uncle wanted a tab removed from the menu. So, I removed it, and the menu was left looking clunky. I figured after a few minor CSS edits the thing would be left fine, but unfortunately things don't work that way.

So, any help at all possible would be appreciated. For the moment, I'll post the index, css, and video.php files in case anyone wishes to take a look. Thanks again.

CSS

body {
	text-align:center;
	}
	
#container {
  margin: 0 auto;
  width: 720px;
  } 

#banner{
background: url('../image/EMNWLogo2.jpg');
background-repeat: no-repeat;
height:90px;
}

#tabs{
padding:0;
margin:0;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#FFFFFF;
font-weight:bold;
background-color:#256727;
width: 720px;
}

#tabs ul{
list-style:none;
margin:0 20px 0 0;
padding:0 40px 0;
width: inherit;
}

#tabs ul li{
display:inline;
text-transform:capitalize;
}
#tabs ul li a{
padding:6px 17px;
color:#FFFFFF;
background:#256727;
float:left;
text-decoration:none;
border:1px solid #256727;
border-left:0;
text-transform: capitalize;
}
#tabs ul li a:hover{
background:#8fd7e5;
color:#7F9298;
text-decoration:none;
border-bottom:1px solid #8fd7e5;
}
#tabs ul li a.active{
background:#8fd7e5;
color:#FFFFFF;
border-bottom:1px solid #8fd7e5;
}

#content{
background:#8fd7e5;
clear:both;
font-size:12pt;
color:#256727;
padding:10px;
font-family:Arial, Helvetica, sans-serif;
border-bottom:1px solid #256727;
border-left:1px solid #256727;
border-right:1px solid #256727;
width:720px;
}

#title {
	color: #0099CC;
	font-size: 30px;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	font-weight: bold;
	padding-top: 20px;
	padding-bottom:20px;
}

#title2 {
	text-align: center;
	padding-top: 40px;
	padding-bottom:20px;
}

.pagecontentleft {
	font-family: Arial;
	text-align: left;
	font-size: 17px;
	text-indent: 1.5em;
	word-spacing: 3px;
	padding-top: 10px;
}

.pagecontentcenter {
	font-family: Arial;
	text-align: left;
	font-size: 17px;
	text-indent: 1.5em;
	word-spacing: 3px;
	padding-top: 10px;
}
.pagecontentleftbold {
	font-family: Arial;
	text-align: center;
	font-weight: bold;
	font-size: 17px;
	word-spacing: 3px;
	padding-top: 10px;
}
.pagecontentcaptian {
	font-family: Arial;
	text-align: left;
	font-size: 17px;
	text-indent: 1.5em;
	word-spacing: 3px;
	padding-top: 10px;
	margin-left: 90px;
	margin-right: 30px;
}
.pagecontentleftsponsor {
	font-family: Arial;
	text-align: left;
	font-size: 17px;
	text-indent: 1.5em;
	word-spacing: 3px;
	padding-top: 10px;
	clear:both;
	
}
.pagecontentright {
	font-family: Arial;
	text-align: left;
	font-size: 17px;
	text-indent: 1.5em;
	word-spacing: 3px;
	padding-top: 40px;
	padding-bottom: 45px;
}

img.float {
	padding-top: 12px;
	padding-left: 6px;
}
img.float1 {
	padding-top: 12px;
	padding-left: 13px;
}

img.floatleft {
	float: left;
    margin: 4px;
	padding-top: 6px;
	padding-right: 10px;
}

img.floatright {
	float: right; 
    margin: 4px; 
	padding-top: 6px;
	padding-left: 10px;
}
img.floatright2 {
	float: right; 
  margin: 4px;
	padding-top: 70px;
	padding-left: 10px;
	padding-bottom: 80px;
}

li.title {
	font-weight: bold;
	margin-bottom: 10px;
}

#captian {
	padding-top: 10px;
	padding-bottom: 5px;
}

#sponsors {
	color: #000;
}

.sponsorslink {
	font-size: 12pt;
	color: #276524;
	text-align:center;
}

.sponsorslink2 {
	margin-left: 9%;
	font-size: 12pt;
	color: #276524;
}

A:link {
	text-decoration: underline;
	color: #276524;
	}
A:visited {
	text-decoration: underline;
	color: #0099CC;
	}
	
ul.none {
	list-style-type: none;
	}
	
ul.center {
	list-style-type: none;
	text-align:center;
	padding-right: 50px;
	}

ul.centerdonate {
	list-style-type: none;
	text-align:center;
	padding-right: 340px;
	}

ul.centerdonate2 {
	list-style-type: none;
	text-align:center;
	font-size: 10pt;
	padding-right: 340px;
	}
	
ul.floatleft {
	list-style-type: none;
	float: left;
	padding: 5px;
	margin-left: 50px;
	}
li.master {
	font-weight: bold;
	padding-top: 10px;
}
li.master2 {
	font-weight: bold;
}


HTML

<?php include("titles.php"); ?>
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css/emnw.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Enviornmental Media Northwest - <?php echo $title ?></title>
</head>
<body>
<div id="container">

<div id='banner'></div>

  <div id="tabs">
    <ul>
      <li><a href='./?page=0' <?php if ($_REQUEST['page']==0) { echo "class='active'"; } ?> >Home</a></li>
      <li><a href='./?page=1' <?php if ($_REQUEST['page']==1) { echo "class='active'"; } ?> >Youth Ecology Program</a></li>
      <li><a href='./?page=2' <?php if ($_REQUEST['page']==2) { echo "class='active'"; } ?> >Captain Ozone</a></li>
      <li><a href='./?page=3' <?php if ($_REQUEST['page']==3) { echo "class='active'"; } ?> >Sponsors</a></li>
      <li><a href='./?page=4' <?php if ($_REQUEST['page']==4) { echo "class='active'"; } ?> >Contact</a></li>
      <li><a href='./?page=7' <?php if ($_REQUEST['page']==7) { echo "class='active'"; } ?> >Donate</a></li>
    </ul>
   </div>


<div id='content'>
<?php          
if ($_REQUEST['page']==0) include("aboutus.php");
if ($_REQUEST['page']==1) include("YEProgram.php");
if ($_REQUEST['page']==2) include("captainozone.php");
if ($_REQUEST['page']==3) include("sponsors.php");
if ($_REQUEST['page']==4) include("contact.php");
if ($_REQUEST['page']==7) include("donate.php");
if ($_REQUEST['video']==1) echo "COzoneVid.php";
if ($_REQUEST['page']==5) include ("YEPvideo.php");
if ($_REQUEST['page']==6) include("ozonevideo.php");

?>
</div>
</div>
</body>
</html>


Video File (which is 'YEPvideo.php')

<embed src="./video/AllYEPPSAs.mp4" autostart="true" width="640" height="480" />
<video width="640" height="480" src="video/AllYEPPSAs.mp4" controls>
</video>


Page Titles in PHP

if ($page==0) { 
$title = "Home";
} 

if ($page==1) { 
$title = "Youth Ecology Program";
} 

if ($page==2) { 
$title = "Captain Ozone";
}

if ($page==3) { 
$title = "Sponsors";
}

if ($page==4) { 
$title = "Contact";
}

if ($page==6) { 
$title = "Captain Ozone Video";
}

if ($page==5) { 
$title = "Youth Ecology Program Video";
}

if ($page==7) { 
$title = "Donate";
}

?>

This post has been edited by litedrive: 06 November 2010 - 04:57 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Problems Which Require Fixing

#2 BenignDesign  Icon User is offline

  • Angel of Death
  • member icon




Reputation: 4695
  • View blog
  • Posts: 8,926
  • Joined: 28-September 07

Re: Problems Which Require Fixing

Posted 08 November 2010 - 02:09 PM

Do you happen to have a copy of what the code looked like BEFORE you tinkered with it? And are you getting any specific error messages?
Was This Post Helpful? 0
  • +
  • -

#3 Shado3225  Icon User is offline

  • D.I.C Regular

Reputation: 17
  • View blog
  • Posts: 325
  • Joined: 23-February 10

Re: Problems Which Require Fixing

Posted 08 November 2010 - 02:46 PM

And could you post only the code relative to your query?
Was This Post Helpful? 0
  • +
  • -

#4 litedrive  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 102
  • Joined: 30-September 10

Re: Problems Which Require Fixing

Posted 12 November 2010 - 05:31 PM

This is for the tabs, which are off centered, and need to match the body of the content. By the way, I'm sorry it took me some time to reply: the last time I had worked on this was actually on the same day I had decided to post this thread.

#tabs ul{
list-style:none;
margin:0 20px 0 0;
padding:0 40px 0;
width: inherit;
}

#tabs ul li{
display:inline;
text-transform:capitalize;
}
#tabs ul li a{
padding:6px 17px;
color:#FFFFFF;
background:#256727;
float:left;
text-decoration:none;
border:1px solid #256727;
border-left:0;
text-transform: capitalize;
}
#tabs ul li a:hover{
background:#8fd7e5;
color:#7F9298;
text-decoration:none;
border-bottom:1px solid #8fd7e5;
}
#tabs ul li a.active{
background:#8fd7e5;
color:#FFFFFF;
border-bottom:1px solid #8fd7e5;
}


Here's the link to the website, so you can see what this has accomplished so far.

Another problem is the video file - it's an MP4, and it's located in the right directory. Does anyone have any idea why this could be loading?
Was This Post Helpful? 0
  • +
  • -

#5 litedrive  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 102
  • Joined: 30-September 10

Re: Problems Which Require Fixing

Posted 15 November 2010 - 06:00 PM

Oops, I meant to say "Does anyone have any idea why this isn't loading?" All I need is a few suggestions, or if someone can point me in the right direction and tell me what exactly it is that I'm doing wrong. Again, the tabs are meant to fit the width of the body.

To me, it seems like it could be the structure of the way the site was built itself, but then again I'm not sure.
Was This Post Helpful? 0
  • +
  • -

#6 Shado3225  Icon User is offline

  • D.I.C Regular

Reputation: 17
  • View blog
  • Posts: 325
  • Joined: 23-February 10

Re: Problems Which Require Fixing

Posted 16 November 2010 - 12:33 AM

Your container is 735px in width but your div named tabs (which holds the nav tabs) is only 720px. That's problem 1.

Then does the width of all the tabs + margins and borders = the width of the div (tabs) that is holding it. That's problem 2.
Was This Post Helpful? 0
  • +
  • -

#7 litedrive  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 102
  • Joined: 30-September 10

Re: Problems Which Require Fixing

Posted 30 November 2010 - 06:30 PM

Ah, thanks for the input, but I believe I pretty much fixed it. All I decided to do was separate each tab into an individual div tag and code everything separately. Seemed to work fine.

I'm not sure if mods delete unneeded threads or not here, but either way I say go for it since this thread is really not needed.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1