Hello all,

 

I have just put up a dummy site need some help in regards to the style sheet and front page. So here goes.

 

1. I've uploaded all the files for the website onto the server, but for some reason when I go to the url it seems to have no styles attached to it. It works fine on my computer but not on the server.

 

How do I get my Style sheet to work with my site?

 

2. When I type in my url address it doesn't go to my frontpage as I want it to. It lists everything in directories and I have to open the front page from a list.

 

How do I set my front page to be the first thing displayed when going to my url?

 

Here's the url addres: http://www.Sumbop.co.uk

 

And here's the front page html file and the main css file:

 

HTML Front page:

 

<!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" lang="en" xml:lang="en">
<head>
<title>Vintage Freak</title>
<link rel="stylesheet" type="text/css" href="littlem.css" />
</head>

<body>

<div id="maincontainer">




<div id="header">


	<div id="navigation">
			<ul>
					<li><a href=""><img src="Wire_frame_pics/Vintage_freak_template_03.png"></a> </li>
					<li><a href=""><img src="Wire_frame_pics/Vintage_freak_template_04.png"></a></li>
					<li><a href=""><img src="Wire_frame_pics/Vintage_freak_template_05.png"></a></a></li>
					<li><a href=""><img src="Wire_frame_pics/Vintage_freak_template_07.png"></a></a></li>

  			</ul>
	</div>


</div>



 <div id="contentwrapper_contact">

<div id="contentwrapper_contact_back">


    <div id="maincontent_contact">


	</div>


</div>

<div id="footer">
		<table class="table">
			<tr>
				<td></td>
				<td class="info">Designed by</td>
			</tr>
			<tr>
				<td>2009</td>
				<td class="info">Nick Ayoola</td>
			</tr>
		</table>
     </div>

</div>


</div>

</body>

</html>
sdegdm

 

CSS:

 

html,body{
 margin:0;
 padding:0;
 font-family:arial, verdana, sans-serif;
 background-color:#000;
 height:100%;
 background-image: url(Wire_frame_pics/);
 background-repeat: no-repeat;

}

#maincontainer {
 width:970px;
 margin-right: auto;
 margin-left: auto; 
 min-height:100%;
 position:relative;
 margin-top: 10px;

}

/*------------Head------------*/

#topsection{
 color:#ffffff;

 }

#logo {

background-repeat: no-repeat;
}

#header {
width: 900px; 
height: 90px;
background-image: url(Wire_frame_pics/Vintage_freak_header_top.png);
background-repeat: no-repeat;
margin-top: 70px;

}

#navigation li {
 display:inline;
 margin:0;
 padding:0;
 }

#navigation {

 /*Width of left column*/
 float: right;
 margin-top:25px;
 margin-right:px;
}

#navigation a {
 	float:left;
 	margin:0;
   padding:0 0 0 0px;
   text-decoration:none;
 }




/*------------Head_end------------*/


/*------------Middle_start------------*/

/*homepage*/


#contentwrapper_contactr{
 position: absolute;
 width:900px;
 height: 520px;

}

#contentwrapper_contact_backr{
 position: absolute;
 width:900px;
 height: 450px;
 background-image: url(images/Front_1.jpg);
 background-repeat: no-repeat;
}

#maincontent_contactr {
		width: 390px;
    text-align: justify;

    float: right;
	margin-top: 15px;
	margin-right:60px ;
	height: 420px;

    background-repeat: no-repeat;

	opacity: .90;
	background-image: url(Wire_frame_pics/homepage_text_box_03.gif);
	background-repeat: no-repeat;

}

p {
color: #ffffff;
padding: 10px;
margin-top: 40px;
font-size: 13px;
white-space: normal;
}

/*homepage_end*/

/*Contact page*/

#contentwrapper_contact{
 position: absolute;
 width:900px;
 height: 520px;

}

#contentwrapper_contact_back{
 position: absolute;
 width:900px;
 height: 450px;
 background-image: url(images/right_pos_1.jpg);
 background-repeat: no-repeat;
}

#maincontent_contact {
		width: 390px;
    float: left;
    margin-top: 15px;
	margin-left: 60px;
	height: 420px;

    opacity: .90;
	background-image: url(Wire_frame_pics/contact_text_box_03.gif)
}
/*Contact page_end*/

/*Gallery page_start*/

#contentwrapper_gallery{
 position: absolute;
 width:900px;
 height: 520px;
}

#contentwrapper_gallery_back{
 position: absolute;
 width:900px;
 height: 450px;
 background-image: url(images/Center_pos_1.jpg);
 background-repeat: no-repeat;
}


#maincontent_gallery {
		width: 610px;

    margin-top: 15px;
	margin-left: auto;
	margin-right: auto;
	height: 420px;

    opacity: .90;

	background-image: url(Wire_frame_pics/gallery_text_box_03.gif)

}

img.Thumbs {

width: 75px;
height: 100px;
}

#move {

margin-top: 210px;
}

#gall p {

padding: 40px;
}

#gall li {
padding: 3px;
display: inline;
}

#gall{

margin-top: 25px;

}

#parag {

margin-left: 25px;
}

/*Gallery page_end*/

/*------------Middle_end------------*/

}

li {
list-style-type:none;
}


/*------------Footer------------*/

#footer{
 clear: both;
 margin-top: 460px;

 height:50px;
 float: left;
 width: 900px;
 border-style: solid;
 border-color: #ffffff ;
 background-color:#000;
 margin-bottom: 10px;

 	-moz-border-radius: 8px ;
-webkit-border-radius: 8px ;
}



.table{ width:900px;
	max-width:800px;
}

/*------------Footer_end------------*/

td.info {
 text-align: right;
}


p {

margin-right: 2px;
margin-left: 2px;
}

/*------------Script gallery_Start------------*/

#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
}	
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both;} 
#overlay img{ border: none; }

#overlay{ background-image: url(images/overlay.png); }

* html #overlay{
background-color: #333;
back\ground-color: transparent;
background-image: url(images/blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www..com/forum/images/overlay.png", sizingMethod="scale");
}

 

 

Thanks

try renaming your front page to index.htm

try renaming your front page to index.htm

 

That seems to have done the trick. Thanks.

 

Now only the css problem to go!

Did you attach external css to the page?

 

<link href="file location" rel="stylesheet" type="text/css" />

Edited January 27, 201016 yr by Sam G
added [code] tags

That seems to have done the trick. Thanks.

 

Now only the css problem to go!

 

 

your css file content is written in html. It should be written in..ermm....css

According to your link, the css file should be

http://www.sumbop.co.uk/littlem.css

but it doesn't load, so either you've named it wrong or not uploaded it or uploaded it into a wrong directory.

 

Remember that servers are case-sensitive while you computer probably isn't so check that the file name is all lower case.

According to your link, the css file should be

http://www.sumbop.co.uk/littlem.css

but it doesn't load, so either you've named it wrong or not uploaded it or uploaded it into a wrong directory.

 

Remember that servers are case-sensitive while you computer probably isn't so check that the file name is all lower case.

 

Awesome! I just had to change the first letter to lower case to match the link in my html file.

 

Thanks for you help!