Converting to CSS (Separate sheet) [Archive]

View Full Version : Converting to CSS (Separate sheet)

rluka

05-06-2006, 10:31 PM

Wow,this has been a learning experience for me. So far I have this:
Link Removed

I am trying to rebuild this site with a separate style sheet:
Link Removed

I cant get the bottom/right logo loaded.
The logo is located at:
Link Removed

Here is the Style Sheet Code that I have so far:

/* CSS Document */

html, body
{
margin: 0px;
padding: 0px;
background-color: #E7EFFF;
background-image: url(design/leftmargin.gif);
background-repeat: repeat-y;
}
#container
{
margin-left: 100px;
}
#header
{
background-color: #55759C;
border-top-width: 5px;
border-bottom-width: 5px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #A5ADDE;
border-bottom-color: #A5ADDE;
}
h1
{
color: #FFFFFF;
margin-left: 20px;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
}

This is a great forum and I have been helped here quite a bit and I have to say that I really appreciate it
Thanks..Ron L

drhowarddrfine

05-06-2006, 10:43 PM

Don't understand. You have no code for images in your html and you have nothing for this in your css.

rluka

05-07-2006, 01:05 AM

Don't understand. You have no code for images in your html and you have nothing for this in your css.

I dont have any code because I took it out. It didnt work so I'm asking if someone can give me the right code: I was using

background-image url(pictures/*.jpg) bottom right fixed no-repeat;

I tried it in the #container and #header and nothing happened!! I'm just learning CSS so I know that Im not doing it right.
Your help would be greatly appreciated
Thanks..Ron L

lansing

05-07-2006, 02:29 AM

drhowarddrfine

05-07-2006, 02:32 AM

There is nothing in the #container so it is probably collapsing to zero. Try putting a   into the html for that div and see if it appears. Another thing to try is adding height and width in the css to see what happens but I think the lack of content in the div is the problem.

rluka

05-07-2006, 10:39 AM

I am not sure why you didn't enter the picture name in the SS code you had or was the symbol * the picture name? This code below should display the picture as you want...you might have to change the path & picture name to match your site.

background-image url("pictures/3HorsesBySusanKerr.jpg") bottom right fixed
no-repeat;

Thats what I used..I put it into *container and nothing happened..I'll try the other suggestions also.

Im really new at this..
Thanks for your input..Ron L

VIPStephan

05-07-2006, 04:33 PM

At the moment you're making things more complicated than you need.
At first put all your content into the container (that's why it's called "container") that you have one wrapping div that represents the page:

<body>
<div id="container">
<div id="header"><h1>T R O Y K A</h1></div>
<div id="content">content here...</div>
</div>
</body>

Then, as I can see in your CSS above you have an image for that left border... completely unnecessary. The color of the current leftmargin.gif should become the background color of the body (#A5ADDE) and as background image you put the one with the three horses.
Then you just add the background color that you currently have for the body (#E7EFFF) to the #container. So it should look like this:

body
{
margin: 0px;
padding: 0px;
background: #A5ADDE url(pitures/3HorsesBySusanKerr.jpg) bottom right fixed no-repeat; /* that's bg-color, bg-image, bg-position etc. all combined in one property */
}
#container
{
margin-left: 100px;
background-color: #E7EFFF;
}

And that's it. With no image at all (except of the horses). :)

rluka

05-07-2006, 06:48 PM

At the moment you're making things more complicated than you need.

Im pretty sure that I didn't do it right. Heres what I got:
http://www.islandnet.com/~luka/Troyka/test4/home.html (http://www.islandnet.com/~luka/Troyka/test4/index.html)
And Im trying to get this with the horse in the bottom right hand corner:
http://www.islandnet.com/~luka/Troyka/test3/index.html (http://www.islandnet.com/~luka/Troyka/test3/home.html)

And this is how I entered the code you gave me. Is it correct?

/* CSS Document */

body
{
margin: 0px;
padding: 0px;
background: #A5ADDE url(pitures/3HorsesBySusanKerr.jpg) bottom right fixed no-repeat; /* that's bg-color, bg-image, bg-position etc. all combined in one property */
}
#container
{
margin-left: 100px;
background-color: #E7EFFF;
}
#header
{
background-color: #55759C;
border-top-width: 5px;
border-bottom-width: 5px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #A5ADDE;
border-bottom-color: #A5ADDE;
}
h1
{
color: #E7EFFF;
margin-left: 50px;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
}

Again, I have to say that I really appreciate your help
Ron L

VIPStephan

05-07-2006, 08:15 PM

No sorry, it was my fault (in part). I wasn't thinking far enough and didn't test before I relpied. But the background image isn't displayed because you have a typo in the path. Here's the right CSS. However, if you have more content than the window can display the image is moved downwards. It's a little harder to make it stay at the bottom right corner of the window (and have the content scroll over it at the same time) and I'll have to figure out later (if nobody else has a solution).
Here's the CSS that's good for now (everything goes in the <head> section):

<style type="text/css">
/* CSS Document */
html, body, #container {height: 100%;}
body
{
margin: 0px;
padding: 0px;
background-color: #A5ADDE;
}
#container
{
margin-left: 100px;
background: #E7EFFF url(http://www.islandnet.com/~luka/Troyka/test3/pictures/3HorsesBySusanKerr.jpg) bottom right fixed no-repeat;
}
#header
{
background-color: #55759C;
border-top-width: 5px;
border-bottom-width: 5px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #A5ADDE;
border-bottom-color: #A5ADDE;
position: absolute;
width: 100%;
margin-left: -100px;
}
h1
{
color: #E7EFFF;
margin-left: 50px;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
}
#content {padding-top: 90px; /* play around with this - makes content to move down since it would be hidden behind #header */}
</style>

rluka

05-08-2006, 02:15 AM

That seemed to work!! Thanks .. I tried putting the code onto a separate style sheet but it didnt work the same. Wonder why?
This has the code on a separate style sheet
http://www.islandnet.com/~luka/Troyka/test4/home.html
This one has the code in the <header></header>
http://www.islandnet.com/~luka/Troyka/test4/index.html

In Firefox the border goes all the way on both pages.
Its strange..in IE when I open the page with the separate style sheet (home.html)the upper border doesn't go all the way to the right end. I'm finding that CSS isnt that easy..lots of stuff to learn....For Example: How would you use the
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
tag on this page..I just cant get it to work!!!!!
How do you figure all this stuff out..just by experimenting?

Thank you very much..Ron L

rluka

05-08-2006, 04:55 PM

I got the border problem solved. I just pasted this code:
 Into the <header></header> of the page and the rest of the code onto a separate style sheet. Lots to learn....Thanks again for the code. Now I just have to figure out how to use the absolute position tag!!!
Or, is there a better way?
Ron L

rluka

05-08-2006, 11:08 PM

I think Im getting it...Not really sure though..A little light bulb just came on and I figured that I could make a container using any name that suited me.
Is that correct?
Anyway, here is what I did so far:http://www.islandnet.com/~luka/Troyka/test5/index.html

And here is the code:

/* CSS Document */
html, body, #container {height: 100%;}
body
{
margin: 0px;
padding: 0px;
background-color: #CCCCCC;
}
#container
{
margin-left: 100px;
background: #E7EFFF url(http://www.troyka.ca/pictures/3HorsesBySusanKerr.jpg) bottom right no-repeat;
}
#header
{
background-color: #9DACBF;
border-top-width: 5px;
border-bottom-width: 5px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #CCCCCC;
border-bottom-color: #CCCCCC;
position: absolute;
width: 100%;
margin-left: -100px;
}
h1
{
color: #FFFFFF;
margin-left: 50px;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
}
#content {
padding-top: 90px;
padding-left: 90px;
}

}
#footer {
position: relative;
text-align: center;
background-color: #D2C6B6;
}
.copyright {
font-size: .7em;
color: #990000;
font-family: Arial;
}
/* A CSS hack that only applies to IE -- specifies a different height for the footer */
* html #footer {
background-color: #9DACBF;
}
p {
font-family: "Comic Sans MS";
font-size: 1em;
color: #000000;
margin-top: 4px;
margin-left: 60px;
}

#album
{
position: absolute;
top: 130px;
left: 200px;
}
#mp3player
{
position: absolute;
top: 240px;
left: 100px;
}

Both are positioned differently from the left but line up in a browser...Wonder why?
It doesnt matter if the bottom-right logo isnt 'fixed'.
Ron L