PDA

View Full Version : Problems with my first ever site : Please help !



Williebee
Feb 27th, 2010, 08:43 PM
Hi

This is my first posting, so I hope somebody can help

I have been doing a bit of practice with html and CSS and at the request of the kids decided to produce a personalised home page

This is my first attempt at a site, as opposed to just trying a page at a time. The exercise was certainly worth it, trying to get everything coordinated isnít as easy as it looks.

Last night, I down-loaded Filezilla, watched a couple of YouTube videos and uploaded my files.

With great excitement I went to my browser and initially everything looked OK, but for some reason, my page would not open at all (Brian) An error kept saying file not found. I tried re-loading everything but the problem still exists, even though the file looks to be there.

Funny though, as I did my page, then used this as a template for all the others, just changing a few minor details and colours.

A friend suggested that a use a validation service, which I did (w3 schools)

Apart from the first error, missing xmlns attribute for element html, whatever that means, all other errors concern li items, between lines 33 and 38, thatís for the home page.

I really donít know what this means Ö Can anybody assist please

Another problem, is the image on the home page, which should be showing on the top left. Only the alt tag is showing (St Maryís Lighthouse) although the image is in the file structure.

The site is at www.williebee.co.uk

Either post any replies here, or e-mail at the address shown on the site

Many thanks !

Excavator
Feb 27th, 2010, 11:10 PM
Hello Williebee,
Give this a try - http://www.williebee.co.uk/Brian.html
Notice the capital B? The Brian button on your website links to brian.html.

Don't you love a simple fix? :D

j05hr
Feb 27th, 2010, 11:54 PM
Hi Williebee,

The problem with the validation is, you need to put this in the head tag


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">

The problem with the <li> tags is that, you have </br> tags at the end of every item and the validator doesn't allow them. What I would do is remove them and put a new div in the useful links and a line-height in the CSS

Here is the whole code to make it pass the validation and make the links have a gap between them.

HTML:


<!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-GB">
<head>
<title>Our family</title>

<link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>

<div id="container">
<div id="header">
<img src="images/header_family.png" alt="header" />
</div>

<!-- navigation area here 55 px high -->
<div id="nav">
<a href="index.html">Home</a>
<a href="brian.html">Brian</a>
<a href="kholiwe.html">Kholiwe</a>
<a href="joy.html">Joy</a>

<a href="leslie.html">Leslie</a>
<a href="christina.html">Christina</a>
</div>
<div id="main">

<div id="left">
<img src="images/lighthouse2.jpg" alt="St Mary's Lighthouse" />
<h3>A few useful links</h3>
<br />
<div id="usefullinks"> <!-- This is the div I have added from the css -->
<ul>
<li><a href="http://www.friendsofstmarysisland.co.uk/welcome.htm">St Mary's Lighthouse</a></li>
<li><a href="http://www.knowhere.co.uk/Whitley-Bay/Tyne-and-Wear/Northern-England/info/bestthings">Knowhere Guide</a></li>
<li><a href="http://en.wikipedia.org/wiki/Whitley_Bay">W/Bay in Wikipedia</a></li>
<li><a href="http://www.whitleywarriors.net/">Whitley Warriors</a></li>
<li><a href="http://www.nexus.org.uk/wps/wcm/connect/Nexus/Bus/Bus+timetables/">Nexus Bus Timetables</a></li>
</ul>
</div> <!-- New div ends here -->
</div>

<div id="right">
<img src="images/family_photo2.jpg" alt="picture of family" />
</div>


</div>



<div id="comment_for_kids">
<img src="images/bottom_line.png" alt="header" />
</div>
<div id="footer">
&copy; 2010 ... williebee.co.uk
</div>














</div>
</body>

</html>


CSS:


*{
margin:0px;
padding:0px;
}

body{
background-color:silver;
}

#container{
width:800px;
height:630px;
background-color:#dedeff;
margin:0 auto 0 auto;
position:relative;
}


#header{
width:100%;
height:80px;
;
color:white;
}


#nav{
margin:0 auto 0 auto;
background-color:#dedeff;
border:1px solid #dedeff; /* need to change this */
height:45px;
width:798px; /* set at 799 for a trial */
font-weight:bold;
border-top:2px solid black;

}

#nav a {
display:block;
width:120px;
height:40px;
padding-top:5px;
margin-left:9px; /* set at 9 for a trial */
text-align:center;
color:white;
text-decoration:none;
background-color:#0000ff;
float:left;
border:1px solid #0000ff;
}


#nav a:hover {
background-color:white;
color:#0000ff;
border:1px solid #0000ff;
}

#personal{
width:100%;
position:relative;
height:200px;
}

#main{
width:100%;
margin-top:2px;
border-top:2px solid black;
height:430px;
/*background-color:green;*/
}

#left{
width:200px;
height:428px;
float:left;
text-align:center;

}

/*
#left a:link{color:black;}
#left a:visited{color:black;}
#left a:hover{color:red;}
#left a:active(color:red;}
*/

#left ul{list-style-type:none;}

#right{
width:590px;
height:428px;
margin-left:206px;
background-color:olive;
border-left:2px solid olive;
border-right:2px solid olive;
border-bottom:2px solid olive;


}

/* trying a details box now */
#details{
width:400px;
height:200px;
float:left;
/* pading below may need changed */
padding-left:15px;
/*background-color:yellow;*/
}

#image{
width:360px;
height:195px;
margin-top:3px;
position:absolute;
left:500px;
}



/*title for favourite site bit */
#fav{
clear:both;
width:100%;
height:40px;
background-color:#dedeff;
text-align:center;
}


/* trying to make boxes for favourites 1 of 2 ..LHS */
#fav1of2{
width:380px;
height:200px;
background-color:olive;
float:left;
padding-left:15px;}

/* trying to make boxes for favourites 2 of 2..RHS */
#fav2of2{
width:380px;
height:200px;
background-color:red;
float:right;
/* pading below may need changed */
padding-left:15px;
}

#fav1of3{
width:246px;
height:200px;
background-color:#b2b2ff;
float:left;
padding-left:15px;
margin-right:9px;
}

/* female version */
#fav1of3f{
width:246px;
height:200px;
background-color:#ffbbff;
float:left;
padding-left:15px;
margin-right:9px;
}


#fav2of3{
width:246px;
height:200px;
background-color:#b2b2ff;
float:left;
padding-left:15px;
margin-right:8px;
}

/* female version */
#fav2of3f{
width:246px;
height:200px;
background-color:#ffbbff;
float:left;
padding-left:15px;
margin-right:8px;
}



#fav3of3{
width:246px;
height:200px;
background-color:#b2b2ff;
float:left;
padding-left:15px;
}

/* female version */
#fav3of3f{
width:246px;
height:200px;
background-color:#ffbbff;
float:left;
padding-left:15px;
}








/*menu options for 5 named pages only */

.vertical_menu{
margin-top:10px;
padding:0px;
width:220px;
list-style:none;
background:#b2b2ff;
}

.vertical_menu li{
display:block;
padding-left:10px;
margin-bottom:5px;
height:20px;
}

.vertical_menu li a{
display:block;
text-align:center;
height:20px;
background-color:#0000ff;
font-weight:bold;
color:white;
text-decoration:none;
}

.vertical_menu li a:hover{
background-color:red;
color:white;
}


.vertical_menu li a span{
line-height:20px;
}



/* female versions of vertical menu */
.vertical_menuf{
margin-top:10px;
padding:0px;
width:220px;
list-style:none;
background:#ffbbff;
}

.vertical_menuf li{
display:block;
padding-left:10px;
margin-bottom:5px;
height:20px;
}

.vertical_menuf li a{
display:block;
text-align:center;
height:20px;
background-color:#cf29a6;
font-weight:bold;
color:white;
text-decoration:none;
}

.vertical_menuf li a:hover{
background-color:#ff75d1;
color:white;
}


.vertical_menuf li a span{
line-height:20px;
}

span{font-size:14px;}

#video{
margin-left:auto;
margin-right:auto;
margin-top:20px;
width:480px;
height:385px;
border:10px solid red;
}

















































































#comment_for_kids{
clear:both;
width:100%;
height:40px;
background-color:olive;
}

#footer{
width:100%;
height:20px;
font-size:12px;
background-color:black;
color:silver;
clear:both;
text-align:center;
}
#usefullinks { /*This is what I have added for the new div */
line-height: 40px;
}


The problem with the image is, I don't think it is uploaded properly, check on your local version that the picture is there. Because when I tried to download the picture, it says, no preview avaliable which must mean it is damaged or not uploaded properly. Try to upload it again and see what happens.

Regards,
Josh

Williebee
Feb 28th, 2010, 12:00 AM
Thanks a million "Excavator"

That is certainly a very simple mistake to make and no doubt I'll never make it again.:thumbsup:

This evening I've been using the W3C Markup Validation Service and have gone through the 5 'named' pags of my site, found some problems and cleared everything up. After getting the 'green light' I even stuck the wee logo at the bottom of each page.

I'm still working on the index page, then will try the video one too, but that'll do me for today.

It's 11:00 pm now and I was attending a Photoshop course today, for 7 hours, plus about 2 hours this evening ... so I think I need a rest.

Thanks again for your help

Brian :D

Williebee
Feb 28th, 2010, 12:07 AM
Hi "Jo5hr"

Never saw your post, but will look at it tomorrow. Must have popped up while I was typing my previous reply.

Those 5 links on page one were a bit of an after-thought and I was tied trying to sort out more menus

I thought it would be very easy just to stick them in, then that would be me finished

The moral must therefore be ... don't try and cut corners

Regards !

Brian :D