Zymic Webmaster Forums > Using Mulitply Css Documents.

k.digennaro

Jul 27 2008, 06:42 PM

Hey all,
A while back some taught me how to use multiply CSS documents, but I cant seem to remember how and forgot wat post I was told in. Any ways I have a complex background and I want to put in on a seperate CSS document. Then I want to put the nav bar content bars etc on another CSS document and put it on top.

Hope I'm making sense,
Thanks,
Kevin

Alex

Jul 27 2008, 06:59 PM

Just <link> all of the separate CSS documents separately one after the other in the <head>.

k.digennaro

Jul 27 2008, 07:11 PM

so for instance..

CODE

Correct? And then I would list what I wanted on the bottom first? So I want the background on the bottom so background.css goes before style.css?

Thanks,
Kevin

Alex

Jul 27 2008, 08:07 PM

The order only matters if one of the stylesheets redefines something previously set in another stylesheet. In which case the order determines which has priority.

k.digennaro

Jul 27 2008, 08:25 PM

Kk that makes sense,

thanks for the help alex,
-Kevin

hmmmm I seem to getting an error, my background image wont show, it looks like all file names etc are right. Did i do the multiply CSS's right?

HTML

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <title>!-DemEYES-!</title>
            <link href="background.css" rel="stylesheet" type="text/css" />
            <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="background"></div>
</body>
</html>

CSS

CODE

#background{
background-image:url(images/background.jpg);
background-repeat:no-repeat;
margin:0 0;
padding:0 0;
width:100%;
height:100%;
}

Thanks,
Kevin

k.digennaro

Jul 27 2008, 09:34 PM

I also tried .jpeg and .JPEG for the file name, no luck (its in the pc as .jpg so i didnt expect it to work

)

NaRzY

Jul 28 2008, 08:59 AM

Do you want it for different browsers or a style switcher?

Jacob.

Alex

Jul 28 2008, 10:04 AM

If you want it to be height:100%; without any content, then html and body have to be set to 100% height as well.

k.digennaro

Jul 28 2008, 02:44 PM

@jacob im trying to create it for different browsers, i was hoping putting this file in a seperate CSS would make the other more fluid.

@alex im not sure i understand you completely could you please explain? basically i want the background to take up the whole screen with no scrolling

Trippin7464

Jul 28 2008, 03:05 PM

To everyone else, I don't know if you guys have even Read Kevins posts, but from what I understand he's expecting to get layered effects from using multiple stylesheets. Which as far as I know isn't going to happen so i'm no help.

Alex

Jul 28 2008, 03:40 PM

You need the following additional CSS to make your current stylesheet work (otherwise the height: 100%; in the #background div won't take effect):

CODE

* { margin: 0; padding: 0; }
html, body { height: 100%; }

It's possible that you're right Trippin, I read it as just wanting to use separate stylesheets for different collections of styles. We'll find out I assume.

k.digennaro

Jul 28 2008, 05:46 PM

QUOTE

It's possible that you're right Trippin, I read it as just wanting to use separate stylesheets for different collections of styles. We'll find out I assume.

Alex is right I simply just want to have two style sheets instead of one, I think it will be easier to code.

I'm still having trouble with this alex, it doesnt seem to work. I tried the CSS without the "*" and with it, and with and with out the height and width.

CSS

CODE

*{ margin: 0; padding: 0; }
html, body { height: 100%; }

#background{
background-image:url(Desktop\demeyes\images\background.jpg);
background-repeat:no-repeat;
margin:0 0;
padding:0 0;
width:100%;
height:100%;
}

HTML

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <title>!-DemEYES-!</title>
            <link href="background.css" rel="stylesheet" type="text/css" />
            <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="background">
</div>
</body>
</html>

k.digennaro

Jul 28 2008, 07:35 PM

I did a little test to see if it would read the other CSS document and it does. So im not sure why its not reading "background.css".

Alex

Jul 29 2008, 08:54 AM

It probably is reading both just fine. Can you upload it somewhere?

k.digennaro

Jul 29 2008, 01:03 PM

yeah ill upload it on zymic after work

Thanks,
Kevin

k.digennaro

Jul 29 2008, 08:55 PM

Sorry about that I was on my way out the door for work. Files are uploaded here, http://nd373.vndv.com/

Alex

Jul 29 2008, 09:05 PM

Path to the image is definitely wrong. When I change it to a path to an image it works perfectly.

k.digennaro

Jul 29 2008, 09:14 PM

i keep double checking that and im not finding an error let me look one more time, ah you know what, i changed it to see if it was in another spot, let me change it back and see if i still dont get an image. Path is changed back but the image still doesnt work. I have the image in a file on my desktop. Its inside a file with my html and css in a folder called images. The image is saved as 'background.jpg'. Therefore the path i have writen is as follows.

CODE

background-image:url(images\background.jpg);

Thanks,
Kevin

Alex

Jul 29 2008, 09:19 PM

You have the slash the wrong way around. \ is only used for local Windows files. HTTP uses /.

k.digennaro

Jul 29 2008, 09:36 PM

omg....lol I cant even beleive I did that... let alone not realize it....lol i thought i had the coding messed up or something....let alone a dumb typo.....lol

hmmmm seems like something else is off, still no image..... its still displaying like its not getting to the file. Files are uploaded on url above. Here's my code, this is driving me crazy...lol this is simple html and css.... just shows make one error and it can completely throw you off...

CODE

*{ margin: 0; padding: 0; }
html, body, background { height: 100%; width: 100%; }

#background{
background-image:url(images/background.jpg);
background-repeat:no-repeat;
margin:0 0;
padding:0 0;
}

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <title>!-DemEYES-!</title>
            <link href="background.css" rel="stylesheet" type="text/css" />
            <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="background">
</div>
</body>
</html>

Thanks,
Kevin

Alex

Jul 29 2008, 09:42 PM

html, body, background { height: 100%; width: 100%; }

^ wrong, should be #background.

k.digennaro

Jul 29 2008, 09:59 PM

still not didnt solve the problem with the image.... its weird cus usually if its a problem with the location of the image you get little box with the little red 'x' i dont see even that. page is just blank

Thanks,
Kevin

Alex

Jul 29 2008, 10:06 PM

You didn't change what I said to change, you added a # before html.

I said "#background".

k.digennaro

Jul 29 2008, 10:25 PM

i feel like an idiot....lol but its still not working..lol. I even tried resaving the image under a differnt name to make sure it wasnt an error in the actual image, if you go to http://nd373.vndv.com/images/Demeyes.jpg thats the actual image file, nothing is displayed either

Alex

Jul 29 2008, 10:45 PM

It looks like it's working to me?

k.digennaro

Jul 29 2008, 10:53 PM

you see the image? huh... its not working for me.....