PDA

View Full Version : CSS link problem


el tazaar
09-12-2005, 04:34 AM
Hey

I am using a css file and also sitesell as a host and they need you to have the css file in a seperate file from the html. i.e. support-files when i am in DW i link the html to the css file using this code
<link rel="stylesheet"href="support-files/style.css"type="text/css"/>
but it loses all the images.

The images are held in a file called image-files and are all linked properly but when i put the css file on the same root level it all works

Can you help. I have included the css file below and also attached the html file.

p {padding:12px}

.img {margin-right:5px}
.img1 {margin-right:15px}

body {
background-color:#4B0049;
color:#7C2B96;
font-family:arial;
font-size:11px;
padding:0;
margin:0;
line-height:13px;
text-align:center;
}

.content {color:#7C2B96; text-decoration:none;}

#wrap {
margin:0 auto;
padding:0;
width:766px;
height:100%;
background:url(/image-files/px.jpg) repeat-y left;
display:table;
}

#wrap_in {
margin:0 auto;
padding:0;
width:701px;
height:100%;
display:table;
}

#top { background-image:url(/image-files/top.jpg);
margin:0px auto 0px auto;
width:701px;
height:96px;
text-align:left;
display:table;
padding:0px;
}

.top {color:#414141; text-decoration:none; font-family:tahoma; font-size:12px}

#m1r {
background-image:url(/image-files/m1r.jpg);
width:145px;
height:24px;}

#m1 {
background-image:url(/image-files/m1.jpg);
width:145px;
height:24px;}

#m2{
background-image:url(/image-files/m2.jpg);
width:145px;
height:24px;}

#m2r{
background-image:url(/image-files/m2r.jpg);
width:145px;
height:24px;}

#m3 {
background-image:url(/image-files/m3.jpg);
width:145px;
height:24px;}

#m4 {
background-image:url(/image-files/m4.jpg);
width:145px;
height:24px;}

#m5 {
background-image:url(/image-files/m5.jpg);
width:145px;
height:24px;}

#m6 {
background-image:url(/image-files/m6.jpg);
width:145px;
height:24px;}

#m7 {
background-image:url(/image-files/m7.jpg);
width:145px;
height:24px;}

#m8{
background-image:url(/image-files/m8.jpg);
width:145px;
height:24px;}

#left_box {
width:143px;
height:160px;
border-width:1px;
border-color:#A8A8A8;
border-style:solid;
display:table;}

#content {
width:701px;
margin:0px auto 0px auto;
padding:0;
text-align:left;
display:table;}

#content_left {
width:146px;
text-align:left;
padding:0;
margin:0;
float:left;
display:table;
clear:both;}

#content_right {
width:555px;
text-align:left;
margin:0;
padding:0;
float:right;
display:table;}

.gray {color:#A2A284; text-decoration:none;}

#right_cont_left {
width:369px;
text-align:left;
margin:0;
padding:0;
float:left;
display:table;}

#right_cont_right {
width:186px;
text-align:left;
margin:0;
padding:0;
float:right;
display:table;}

#date_box {
width:555px;
height:24px;
background-color:#ECECEC;
display:table;}

#box1 {
width:186px;
height:160px;
background-color:#E3D1EA;
display:table;}

#box2 {
width:184px;
height:219px;
border-width:1px;
border-color:#A8A8A8;
border-style:solid;
display:table;}

#box3 {
width:184px;
height:133px;
border-width:1px;
border-color:#A8A8A8;
border-style:solid;
display:table;}

#box4 {
width:362px;
height:168px;
border-width:3px;
border-color:#440E62;
border-style:solid;
background-color:#5D2A79;
display:table;}

#box_h {
width:368px;
height:24px;
background-color:#440E62;
display:table;}

#box5 {
width:368px;
height:178px;
background-color:#E3D1EA;
display:table;}

#box51 {
width:368px;
height:150px;
background-color:#E3D1EA;
display:table;}

#box6 {
width:368px;
height:132px;
background-color:#EFEFEF;
display:table;}

#box61 {
width:555px;
height:132px;
background-color:#EFEFEF;
display:table;}

#box_h_priv {
width:555px;
height:24px;
background-color:#440E62;
display:table;}

.width {width:525px}
.width1 {width:115px}

#margin_left {margin-left:12px}
#margin_left1 {margin-left:8px}
.margin_left2 {margin-left:8px}

#column1 {
width:180px;
float:left;}

#column2 {
width:168px;
float:right;}


#footer {
width:701px;
height:82px;
margin:0px auto 0px auto;
line-height:16px;
padding:0px;
text-align:left;
background:url(/image-files/footer.jpg) no-repeat left;
display:table;
clear:both;
}

#footer1 {
width:701px;
height:94px;
margin:0px auto 0px auto;
padding:0px;
text-align:left;
background:url(/image-files/px_bot.jpg) top left repeat-y;
}

.white {color:#ffffff; text-decoration:none}
.bot_txt {color:#440E62; text-decoration:none}
.dark {color:#000000; text-decoration:none}
.green {color:#39B54A; text-decoration:none}
.green_l {color:#ADE461; text-decoration:none}
.gray {color:#737373; text-decoration:none}
.gray_l {color:#DADADA; text-decoration:none}
.big {font-size:12px}
.n{font-size:11px}
.sm{font-size:10px}

#line {
height:1px;
background-image:url(/image-files/dot.jpg);
}

#clear {
clear:both}


a { color:#7C2B96; text-decoration:none}

.search { width:118px;
height:21px;
font-family:tahoma;
font-size:12px;
border-style:;
border-width:;
border-color:#;
background-color:#;
color:#;
margin-left:0px;
margin-right:0px}

.textarea{ width:214px;
height:194px;
font-family:tahoma;
font-size:11px;
border-style:solid;
border-width:1px;
border-color:#BEC0C2;
background-color:#ffffff;
color:#585858;
overflow:auto;
margin-left:0px;
margin-right:0px}

.u {text-decoration:underline}
.t {text-transform:uppercase}

a:hover{text-decoration:underline;}
#a:hover{text-decoration:none;}

davidj
09-15-2005, 10:08 AM
if the css is outside the root then i think you need an actual path

e.g www.host.com/folder/cssfolder/mycss.css

gmcrone
09-15-2005, 10:53 PM
In the CSS file put the absolute path to your images in.

E.G.
background:url(/image-files/px.jpg) repeat-y left;
becomes
background:url(http://my.site.com/image-files/px.jpg) repeat-y left;

Mike...

domedia
09-16-2005, 03:18 AM
And if you don't use absolute paths, make sure the path to the image is relative to the *css* file, not relative to the page the css file is linked into.