Need help with an html / css web

**Aussiemines** · Oct 08th, 2012, 07:57 AM

Hello all I am new to the community here and I hope to help others as others help me.

Here is my problem. I am trying to create a website using CSS, JQuery, HTML and some php later (still not sure weather I want the PHP)

So the problem is that it appears that the CSS sheet is not linking to the HTML sheet. (page/s)

Bellow are both codes in order CSS first and followed by HTML.

CSS:

Code:

.body{
background url:(images/bodybg.jpg)
}
#slider_wrapper {
height: 246px;
}
#slider {
position: relative;
width: 1000;
height: 350;

}
#slider img {
position: absolute;
top:
left: 0;
display: none;
background: url(images/loading.gif) no-repeat 50% 50%;
}
#slider a {
border: 0;
display: block;
}
/*
* jQuery Nivo Slider v3.1
* http://nivo.dev7studios.com
*
* Copyright 2012, Dev7studios
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/

/* The Nivo Slider styles */
.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
max-width: none;
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
}

/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
top:0;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img { display:block; }

/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
width:100%;
z-index:8;
padding: 5px 10px;
opacity: 0.8;
overflow: hidden;
display: none;
-moz-opacity: 0.8;
filter:alpha(opacity=8);
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
text-align:center;
padding: 15px 0;
}
.nivo-controlNav a {
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
*{

margin: 0;

}

html, body{
height: 100%;

}

.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}

.footer, .push {
height: 4em;
color: #FFFFFF;
text-align: center;
}

HTML:

HTML Code:

<!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">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script src="jquery-1.7.1.min.js " type="text/javascript"></script>
<script src="jquery.nivo.slider.js " type="text/javascript"></script>
   
<title>Shutter Speed Artography</title>
</head>
 
<body id="body">
<div class="wrapper">
<div id="slider-wrapper">
<div is="slider">
<img src="images/Abstract 73.jpg" title="Abstract image 73" height="350" width="1000">
<img src="images/beetle 3.jpg" title="#htmlcaption" height="350" width="1000">

</div>
<div id="htmlcaption" class="nivo-slider-caption">
</div>
<strong>image</strong> <a href="#">tag</a>
</div>
</div>
  
<h1 id="main_heading">Shutter Speed Artography</h1>
 
<br />
<br />
<br />
<div id="upper-content">

<div id="p-home">
<p>
Welcome to the home of Shutter Speed Artography
</p>
</div>
</div>
  
</div>
 
<div class="footer">

<p>
Copyright &copy; 2012 Shutter Speed Artography
</p>
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
</p>

</div>
</body>

</html>

So there are the 2 codes.

I would be most grateful if somone could assist me with this issue.

Thanks

Nick

**Web Design Forums** · Oct 08th, 2012 07:57 AM

**TheGAME1264** · Oct 08th, 2012, 08:01 AM

Is your CSS file saved as css/style.css? That's usually what causes a stylesheet to fail...the location isn't referenced correctly.

**Aussiemines** · Oct 08th, 2012, 08:04 AM

Is your CSS file saved as css/style.css? That's usually what causes a stylesheet to fail...the location isn't referenced correctly.

I have a seperate area from the HTML so the CSS file is located in a directory / file named CSS

therefor the link is: css/styl.css

**TheGAME1264** · Oct 08th, 2012, 08:56 AM

CSS or css ? And styl.css or style.css? Directories (depending on your server) and filenames are spelling and case sensitive.

If you can't get it to work, upload it somewhere and show us the link.

**Aussiemines** · Oct 08th, 2012, 09:01 AM

I have this:

HTML Code:

<!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">
<head>
<body id="body">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script src="jquery-1.7.1.min.js " type="text/javascript"></script>
<script src="jquery.nivo.slider.js " type="text/javascript"></script>
   
<title>Shutter Speed Artography</title>
</head>
 
<body>
<div class="wrapper">
<div id="slider-wrapper">
<div is="slider">
<img src="images/Abstract 73.jpg" title="Abstract image 73" height="350" width="1000">
<img src="images/beetle 3.jpg" title="#htmlcaption" height="350" width="1000">

</div>
<div id="htmlcaption" class="nivo-slider-caption">
</div>
<strong>image</strong> <a href="#">tag</a>
</div>
</div>
  
<h1 id="main_heading">Shutter Speed Artography</h1>
 
<br />
<br />
<br />
<div id="upper-content">

<div id="p-home">
<p>
Welcome to the home of Shutter Speed Artography
</p>
</div>
</div>
  
</div>
 
<div class="footer">

<p>
Copyright &copy; 2012 Shutter Speed Artography
</p>
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
</p>

</div>
</body>

</html>

then the CSS:

Code:

body{
background url:(images/bodybg.jpg)
}
#slider_wrapper {
height: 246px;
}
#slider {
position: relative;
width: 1000;
height: 350;

}
#slider img {
position: absolute;
top:
left: 0;
display: none;
background: url(images/loading.gif) no-repeat 50% 50%;
}
#slider a {
border: 0;
display: block;
}
/*
* jQuery Nivo Slider v3.1
* http://nivo.dev7studios.com
*
* Copyright 2012, Dev7studios
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/

/* The Nivo Slider styles */
.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
max-width: none;
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
}

/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
top:0;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img { display:block; }

/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
width:100%;
z-index:8;
padding: 5px 10px;
opacity: 0.8;
overflow: hidden;
display: none;
-moz-opacity: 0.8;
filter:alpha(opacity=8);
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
text-align:center;
padding: 15px 0;
}
.nivo-controlNav a {
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
*{

margin: 0;

}

html, body{
height: 100%;

}

.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}

.footer, .push {
height: 4em;
color: #FFFFFF;
text-align: center;
}

**TheGAME1264** · Oct 08th, 2012, 09:28 AM

I think you misunderstood me. My bad.

What I meant was to upload the page somewhere via FTP and let us see it. The code by itself isn't quite enough information to go on in this case.

**Aussiemines** · Oct 08th, 2012, 09:47 AM

Sure I can do that.

The link to the project is: http://www.aussiemines.com/spa

**TheGAME1264** · Oct 08th, 2012, 10:01 AM

You've definitely got the CSS referenced correctly within the HTML page. This means that you're not seeing something you're expecting to see.

Personally, if it's what I think it is I think your problem is here:

Code:

#slider {
    position: relative;
        width: 1000;
        height: 350;

}

This should be:

Code:

#slider {
    position: relative;
        width: 1000px;
        height: 350px;

}

Always specify units of measure.

**Aussiemines** · Oct 08th, 2012, 10:41 AM

Thanks I shall try this and see if that fixes the problem

I shall reply soon.

**Aussiemines** · Oct 08th, 2012, 11:26 PM

Nope problem not fixed.

Here is an ftp account I have setup for you.

FTP:

File Zilla

Host: ftp.aussiemines.com
Username: public@aussiemines.com
Password: Public_Open

Hope that helps you help me

Thanks again I am most gratful for your assistance.

Nick.

Thread: Need help with an html / css web

LinkBack

Thread Tools

Search Thread

Display

Remove Ads

Posting Permissions

Thread: Need help with an html / css web

LinkBack

Thread Tools

Search Thread

Display

Remove Ads

Posting Permissions

Sections

General Info