PDA

View Full Version : css style sheet won;t attach


katecher
10-28-2011, 03:47 PM
Hello Everybody, I hope somebody can help me. A few days ago i created css style sheet, attached to my html file and everything worked fine. Today is layout stays perfectly fine in dreamweaver, but when i preview in browser i lost all my style. i don't understand what is going on?

Please can you help me??

Here is link to how my styles were not attached on server
http://www.katecher.com/dogs/index.html
here is code
<link rel="stylesheet" type="text/css" href="css/style.css"/>

and here is the image of my dreamweaver(screen shot)
http://www.katecher.com/dogs/test.html

and here is the code


@charset "UTF-8";


body {
margin: 0px;
padding: 0px;
background:#CF9 url(../pic/background.gif) fixed center;
}

#header_wrap {
width: 1024px;
height: 204px;
margin: 0px auto;

}

#header {
width: 1024px;
margin: 0 auto;
height: auto;
}

#menu_wrap {
width: 1024px;
height: 35px;
background:url(../pic/buttons/button.gif) repeat;
margin: 0px auto;
}


#menu {
width: 1024px;
height: 35px;
margin: 0 auto;
}


#menu ul {
margin: 0 0 0 25px;
padding: 0px;
list-style: none;
}


#menu li {
margin: 0px;
padding: 0px;
display: inline;
}

#menu a {
float:left;
display:block;
padding: 9px 0 0 0;
height: 35px;
width: 100px;
background: url(../pic/buttons/but.gif) no-repeat;
text-align: center;
font-size:16px;
text-decoration: none;
color:#e4f1cc;
font-family:Tahoma, Geneva, sans-serif;
outline: none;
a:visited { color: #993399
}
a:hover {
color: #330;
background-image: url(../pic/buttons/hover.gif);
background-repeat: no-repeat;
font-family: Tahoma, Geneva, sans-serif;
font-size: 16px;
text-align: center;
height: 35px;
width: 100px;
}
a:active {
color: #993333
}


#menu a:hover {
color: #330;
background-image: url(../pic/buttons/hover.gif);
background-repeat: no-repeat;
font-family: Tahoma, Geneva, sans-serif;
font-size: 16px;
text-align: center;
height: 35px;
width: 100px;
}

#menu .current {
color: #330;
background:url(../pic/buttons/hover.gif) no-repeat;
}

#content_wrap {
width: 1013px;
margin: 0 auto;
background-color: #666D43;
height: 980px;
padding: 5px;
}
#insidelongcolumn {
padding: 10px;
float: right;
}
#insideleft {
float: right;
width: 400px;
height: 180px;
background-image: url(../pic/welcome.gif);
padding: 10px;
background-repeat: no-repeat;
}
#nav {
background-color: #6E7948;
height: 150px;
width: 1024px;
margin-right: auto;
margin-left: auto;
}
#navcolumn {
float: left;
height: 120px;
width: 225px;
padding: 15px;
border-right-width: 1px;
border-right-style: ridge;
border-right-color: #9C6;
background-image: url(../pic/bgcolumnfoot.gif);
}
#footer {
background-color: #E5FAC3;
height: 25px;
width: 990px;
margin-right: auto;
margin-left: auto;
padding-left: 35px;
padding-top: 5px;
color: #333;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

#content {
width: 1024px;
border: 1px solid #330;
background:#C96;
height: 1000px;
margin-right: auto;
margin-left: auto;
float: left;
}

#top {
width: 750px;
background-color: #E1EDBF;
height: auto;
float: left;
}

#topleft {
background:#306;
width:250px;
height: auto;
float: left;
}

#topcenter {
background:#690;
width:250px;
height: auto;
float: left;
}

#topright {
background:#030;
width:250px;
height: auto;
float: left;
}
#rightcolumn {
background-color: #959F6B;
float: right;
height: 925px;
width: 250px;
padding-left: 8px;
border: 1px solid #330;
}
column1 {
float: left;
background-color: #693;
height: 200px;
width: 200px;
}
#bottom {
background-color: #E5FAC3;
width: 750px;
height: 670px;
float: left;
}
#longunder {
background-color: #626C3E;
height: 140px;
width: 750px;
float: left;
background-repeat: repeat;
padding: 0px;
background-image: url(../pic/breedsbg.gif);
}
#smbox {
background-color: #E5FAC3;
height: 100px;
width: 165px;
float: left;
padding: 5px;
}
#breeds {
background-color: #CC9;
height: 300px;
width: 230px;
overflow: scroll;
padding: 0px 0px 0px 9px;
}
h6 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #330;
}
#smboxspace {
background-color: #606D3B;
float: left;
height: 100px;
width: 10px;
}
#bottom_column {
float: left;
width: 335px;
height: 132px;
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-color: #9C0;
padding: 10px;
margin: 0px;
border-right-color: #8BCF00;
border-left-color: #8BCF00;
border-right-style: solid;
background-color: #E9F9C6;
border-top-style: double;
border-left-style: solid;
}
#longcolumn {
background-color: #E0FBC0;
width: 720px;
padding: 15px;
height: 200px;
}
#bcspace {
background-color: #E5FAC3;
float: left;
height: 132px;
width: 10px;
padding: 0px;
}
#breedsabove {
color: #FFF;
width: 220px;
height: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
padding: 7px;
text-align: center;
background-image: url(../pic/sign.gif);
background-repeat: repeat-x;
}
#localparks {
height: 30px;
width: 215px;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #000;
padding: 10px;
text-align: center;
background-repeat: repeat-x;
background-image: url(../pic/breedsbg.gif);
}
#names {
padding: 9px;
height: 120px;
width: 210px;
border-top-style: 8;
border-right-style: 8;
border-bottom-style: 8;
border-left-style: 8;
background-color: #EAFAC6;
}
#submitpic {
height: 25px;
width: 220px;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #FFF;
padding: 9px;
border: 1px solid #603;
text-align: center;
background-image: url(../pic/sign.gif);
}
#search {
background-color: #660;
height: 30px;
width: 1024px;
margin-right: auto;
margin-left: auto;
}
#searchleft {
background-color: #C93;
width: 512px;
float: left;
}
#searchlefthalf {
width: 250px;
background-color: #9EC4EA;
float: left;
height: 20px;
background-image: url(../pic/breedsbg.gif);
color: #600;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
padding: 5px;
}

dbepp
10-28-2011, 05:47 PM
What happens when you place the css directly in the html document? Did you design the style sheet separately or move it when finished?

domedia
10-28-2011, 06:33 PM
The page loads the stylesheet just fine.

A quick look and I see the references in your CSS file to your images are wrong.

For example:
http://www.katecher.com/dogs/css/pic/buttons/button.gif

This image does not exist. Fix your paths, or upload the images to the right locations.

katecher
10-28-2011, 06:36 PM
I created separately and attached to html.
I just added directly to html and nothing happened. have no clue what is going on.

here is the partial code

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>DogsTrail</title>
<style type="text/css">
@charset "UTF-8";


body {
margin: 0px;
padding: 0px;
background:#CF9 url(../pic/background.gif) no-repeat fixed;
}

#header_wrap {
width: 1024px;
height: 204px;
margin: 0px auto;

}

#header {
width: 1024px;
margin: 0 auto;
height: auto;
}



blah blah blah(didn't put the whole thing)

</style>

katecher
10-28-2011, 06:59 PM
not sure what do you mean, I have all images attached. if images will be missed then it will be just boxes with an x in the middle. i missing styles themselves.

i just started new css styling sheet on completely different html and so far everything is ok. i just want to figure out what i did wrong. maybe i am attaching in the wrong place, can'tfigure this out.

domedia
10-28-2011, 08:12 PM
not sure what do you mean, I have all images attached. if images will be missed then it will be just boxes with an x in the middle. i missing styles themselves.
No, images that are called in the stylesheet will not show a box with an x (in IE), they will simply not show up. Above, I showed you a reference to an image that is not right.

domedia
10-28-2011, 08:13 PM
What happens when you place the css directly in the html document? Stylesheets belong in separate CSS files.

DWcourse
11-01-2011, 11:48 PM
While it's best to have your CSS in a separate file, if you do put them in the html file you don't need "@charset "UTF-8";"

Here's an example:

<style type="text/css">
.test {
font-size: 10px;
}
</style>