Need to Website Help! Fast!

The pokemon kid

The pokemon kid

Messages
564
Name
Mathew
Edit My Images
No
Hey guys, I have been creating a website for a Art student and the website is up at the moment. I am having a problem with one of the pages. I have gone through the code now many times and I still cant see the problem...

http://www.mathewteague.net78.net

You will notice that the portfolio page doesn't work for some reason, The CSS just doesn't seem to link with it... It is strange as all the other pages work at the moment...

The work has to be in on Thursday, so I need help quickly!

The website works on Google Chrome and Apple Safari, I am having problems with Microsoft Internet explorer and Mozilla Firefox.

I will post up the source code for the site when I can...
 
Source code.


<link href="CSS/Portfolio/HeaderFooterCSS.css" rel="stylesheet" type="text/css" >
<link href="CSS/Portfolio/MainCSS.css" rel="stylesheet" type="text/css" >

<style type="text/css">
body {
background-color: #3d7978;
}

</style>

</head>

<body>

<!--Header-->

<div id="LogoContainer"><a href="index.html" class="Logo" title="Rachel Hartwell Logo"><span class="DisplaceLogo"></span></a></div>

<div id="HomeContainer"><a href="index.html" class="Home">Home</a></div>

<div id="PortfolioContainer"><a href="Portfolio.html" class="Portfolio">Portfolio</a></div>

<div id="ContactContainer"><a href="Contact.php" class="Contact">Contact</a></div>

<div id="AboutContainer"><a href="About.html" class="About">About</a></div>

<!--Header-->

<div id="Line1"></div>

<!--Main-->

<div class="Year1Container"><a href="Year1.html" class="Year1" title="Year 1"><span class="DisplaceYear1"></span></a></div>

<div class="Year2Container"><a href="Year2.html" class="Year2" title="Year 2"><span class="DisplaceYear2"></span></a></div>
<div class="Year3Container"><a href="Year3.html" class="Year3" title="Year 3"><span class="DisplaceYear3"></span></a></div>
<div class="ClientContainer"><a href="Client.html" class="Client" title="Client Work"><span class="DisplaceMusic"></span></a></div>

<div id="DividingLine"></div>

<div id="Year1Title">Year 1</div>
<div id="Year1Text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</div>

<div id="Year2Title">Year 2</div>
<div id="Year2Text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</div>

<div id="Year3Title">Year 3</div>
<div id="Year3Text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</div>

<div id="ClientTitle">Client</div>
<div id="ClientText">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</div>



<!--Main-->

<div id="Line2"></div>
<!--Footer-->
<div id="FooterCopyright">Copyright of Rachel Hartwell</div>
<!--Footer-->





</body>
</html>
 
MainCSS

@charset "utf-8";
/* CSS Document */

#DividingLine{
position:absolute;
left:50%;
top:12.5%;
margin-left:30px;
margin-top:50px;
width:2px;
height:570px;
z-index:3;
border-left:dotted 1px #67c7c6;

}

.Year1Container{
position:absolute;
display:block;
left:50%;
top:12.5%;
margin-left:-390px;
margin-top:80px;
width:370px;
height:110px;
z-index:1;
}

a.Year1{
width:370px;
height:110px;
border:dotted 1px #97e9e5;
background-image:url(../../Images/Portfolio/Year1.jpg;
display:block;
z-index:2;


}

a.Year1:hover{
background-position:-370px 0;

}

a.Year1:active{
background-position:-800px 0;

}

.DisplaceYear1 {
position:absolute;
left:-5000px;

}


.Year2Container{
position:absolute;
left:50%;
top:12.5%;
margin-left:-390px;
margin-top:210px;
width:370px;
height:110px;
z-index:1;

}

a.Year2{

width:370px;
height:110px;
background-image:url(../../Images/Portfolio/Year2.jpg);
z-index:2;
background-position: 0px 0;
display:block;



}

a.Year2:hover{
background-position:-370px 0;

}

.DisplaceYear2 {
position:absolute;
left:-5000px;

}

.Year3Container{
position:absolute;
left:50%;
top:12.5%;
margin-left:-390px;
margin-top:340px;
width:370px;
height:110px;
z-index:4;

}

a.Year3{
width:370px;
height:110px;
border:dotted 1px #97e9e5;
background-image:url(../../Images/Portfolio/Portraiture2.jpg);
display:block;
z-index:4;

}

a.Year3:hover{
background-position:-400px 0;

}

a.Year3:active{
background-position:-800px 0;

}

.DisplaceYear3 {
position:absolute;
left:-5000px;

}

.ClientContainer{
position:absolute;
left:50%;
top:12.5%;
margin-left:-390px;
margin-top:470px;
width:370px;
height:110px;
z-index:2;

}

a.Client{
width:370px;
height:110px;
border:dotted 1px #97e9e5;
background-image:url(../../Images/Portfolio/Music2.jpg);
display:block;
z-index:4;

}

a.Client:hover{
background-position:-400px 0;

}

a.Client:active{
background-position:-800px 0;

}

.DisplaceClient {
position:absolute;
left:-5000px;

}

#Year1Title{
position:absolute;
left:50%;
top:12.5%;
margin-left:70px;
margin-top:80px;
width:80px;
height:25px;
font-family:Verdana, Geneva, sans-serif;
font-size:16px;
color:#b2fffe;

}

#Year1Text{
position:absolute;
left:50%;
top:12.5%;
margin-left:70px;
margin-top:100px;
width:300px;
height:100px;
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
color:#b2fffe;
display:block;
z-index:2;

}

#Year2Title{
position:absolute;
left:50%;
top:12.5%;
margin-left:70px;
margin-top:210px;
width:80px;
height:25px;
font-family:Verdana, Geneva, sans-serif;
font-size:16px;
color:#b2fffe;

}

#Year2Text{
position:absolute;
left:50%;
top:12.5%;
margin-left:70px;
margin-top:230px;
width:300px;
height:100px;
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
color:#b2fffe;

}

#Year3Title{
position:absolute;
left:50%;
top:12.5%;
margin-left:70px;
margin-top:340px;
width:80px;
height:25px;
font-family:Verdana, Geneva, sans-serif;
font-size:16px;
color:#b2fffe;

}

#Year3Text{
position:absolute;
left:50%;
top:12.5%;
margin-left:70px;
margin-top:360px;
width:300px;
height:100px;
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
color:#b2fffe;

}

#ClientTitle{
position:absolute;
left:50%;
top:12.5%;
margin-left:70px;
margin-top:470px;
width:80px;
height:25px;
font-family:Verdana, Geneva, sans-serif;
font-size:16px;
color:#b2fffe;

}

#ClientText{
position:absolute;
left:50%;
top:12.5%;
margin-left:70px;
margin-top:490px;
width:300px;
height:100px;
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
color:#b2fffe;

}
 
Haven't had much time to check the code but are you sure you haven't misnamed a file or a folder ?

It's easy to put a capital in place of a lower case and vice versa and then they won't link.

BTW it also goes totally loopy in Opera.

.
 
Last edited:
The thing is, I have two CSS pages. One for the header/ footers and the other for the main content. the Header/footer CSS is working completely fine. Its the main container that isnt working... And if you look at the source code, you will see that the file directory is exactly the same...
 
I'm seeing the line:
Code: 
<!--Main-->

<div id="MainContainer"></div>
in the online version that isn't in the version you posted here, or in any of the other pages. Should the page content be inside that <div>?
 
The maincontainer div was taken out as it wasnt needed. I had it in there from the first page and hadnt taken it out. As it wasnt doing anything, i took it out to make sure it wasnt doing anything it should...

The year1 container is only a container for the image, this should stop the other containers from working...

I will give what peter said a try. It is a little wierd as everything except dividing line in the main container doesnt work in these two browsers...
 
Yeh, I havent updated it haha, but it does nothing at all...

I think I have worked it out.

Im using a class within a class within a class if you notice on the pictures:

<div class="Year2Container"><a href="Year2.html" class="Year2" title="Year 2"><span class="DisplaceYear2"></span></a></div>

And in the other pages I have got it as Class within a class within a ID.

<div id="Year2Container"><a href="Year2.html" class="Year2" title="Year 2"><span class="DisplaceYear2"></span></a></div>

Also the final one is also wrong, as for some reason i have put DisplaceMusic, Instead of DisplaceClient...
 
Okay, that didn't solve it.

But I did actual fixed it, and god knows how...

I cut the year1,2,3,client containers and all their content out of the CSS, saved it. closed dreamweaver. opened it again, pasted it back in and it works fine.
 
Well, congratulations on that. :thumbs:
I was going to say a.Year3 and a.Client were showing the Year2 images, but then noticed you hadn't uploaded the Year3 & Client ones yet... :bonk:
 
Yeh, they are both coming soon images as she is only a second year student...

Going to make the changes now. :)
 
You must log in or register to reply here.
Back
Top