Hello,

I looked through the CSS tutorials and didn't see what I was looking for but then again, it may not be there because I may be doing it wrong!

I have the style sheet I want to use with the background colors, text/font size, link colors and things done.

What I don't know how to do is add the banner to it since I will be using the same one for every page. Or do I not add the banner in the style sheet?

I also would like to make a pre-set text area with a border that I can just paste stuff in between. Do I do that in the style sheet or in each page?

Thanks.

Um, about your banner, it depends. Is it an image? If so, yes, you'd have to call it on each page. Like this:

<img src="blah.jpg">

For the text box you would probably want to make a div layer and just call it on every page.
So, your codes would be:
#bubbles {
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
border: 1px solid #ff6699;}

on your style sheet.

And then:

<div id="bubbles">ALL THAT STUFF IN HERE.</div>

on each page. (Change the bold stuff, obviously, and make sure the italic parts match!)

actual images cannot be entered through css, you must use an ordinary html IMG tag for that. you may use an image as a background for an area through css if that will do the trick you are looking for.

Sorry...but that is absolutely incorrect. Image can be called in thru CSS...and often are to dazzling effect. For proof, check out:

CSS Zen Garden (http://www.csszengarden.com/)

You will find that all the designs use the exact same HTML & only differ in their CSS. And, you will also find that there is not a single image tag in the HTML. All images are contained in the stylesheet.

Always separate style from content, HTML is for content...& CSS for style.


Hugs,
Erica

but where would u put the code for the image in the stylesheet?

Sorry...but that is absolutely incorrect. Image can be called in thru CSS...and often are to dazzling effect. For proof, check out:

CSS Zen Garden (http://www.csszengarden.com/)

You will find that all the designs use the exact same HTML & only differ in their CSS. And, you will also find that there is not a single image tag in the HTML. All images are contained in the stylesheet.

Always separate style from content, HTML is for content...& CSS for style.


Hugs,
Erica
i will re-itterate from my post...
you may use an image as a background for an area through css.

if you look at the coding for Zen Garden, all of the images being seen are being displayed through CSS via BACKGROUND. exactly as I had posted. please be sure you do some research and read the posts.

Take a look at the style sheets at the CSS ZEN GARDEN. Here is a an example:

I tried to bold all the images in the stylesheet...but I may have missed a few :)

The code below, is the stylesheet for this CSS ZEN GARDEN Design:

Coastal Breeze (http://www.csszengarden.com/?cssfile=013%2F013%2Ecss)



/* css Zen Garden submission 013 - 'Coastal Breeze' by Dave Shea, http://www.mezzoblue.com/ */
/* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */
/* All associated graphics copyright 2003, Dave Shea*/


/* IMPORTANT */
/* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */
/* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */
/* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */


/* These illustrations were done by hand in Photoshop. No photos harmed in the
making of this design. They were put together about two years ago for a former
portfolio site, and luckily I still had the .PSD on hand. It felt like a good
idea to convert this into a Zen Garden design.

It has been said that this particular combination of objects has a west-coast
British Columbia feel to it. I'm inclined to agree.
*/

/* basic elements */
body {
font: 8pt/16pt georgia, serif;
text-align: center;
color: #464128;
background: #fff url(coastal2.jpg) bottom center no-repeat;
margin: 0px;
}
p {
font: 8pt/16pt georgia, serif;
color: #464128;
background-color: transparent;
margin-top: 0px;
text-align: right;
}
h3 {
font: bold 8pt/16pt georgia, serif;
text-align: right;
margin-bottom: 0px;
background: transparent url(futz.gif) center right no-repeat;
padding-right: 14px;
}
a {
color: #464128;
background-color: transparent;
}
a:visited {
color: #000;
background-color: transparent;
}
a:hover {
color: #A29D66;
background-color: transparent;
}
acronym {
border-bottom: none;
}


/* specific elements */
#intro {
background: transparent url(coastal.jpg) top left no-repeat;
width: 700px;
margin-left: auto;
margin-right: auto;
}
#pageHeader {
text-align: right;
padding: 70px 60px 0px 0px;
}
#pageHeader h1 {
background: transparent url(papier.jpg) top left no-repeat;
width: 192px;
height: 70px;
margin: 0px 0px 0px 448px;;
}
#pageHeader h1 span {
display: none;
}
#pageHeader h2 {
background: transparent url(beauty.gif) top left no-repeat;
width: 83px;
height: 14px;
margin: 0px 90px 0px 477px;
position: relative;
top: -17px;
}
#pageHeader h2 span {
display: none;
}

#preamble {
position: relative;
top: -80px;
padding-right: 250px;
padding-left: 140px;

}
#quickSummary {
float: right;
text-align: left;
padding-right: 70px;
width: 230px;
voice-family: "\"}\"";
voice-family: inherit;
width: 160px;
}
/* over-clarified to fix IE5/Win */
#quickSummary p, #quickSummary .p1, #quickSummary .p2 {
font: italic 13pt/18pt garamond, serif;
text-align: left;
color: #A29D66;
background-color: transparent;
}
#supportingText {
margin-left: auto;
margin-right: auto;
padding-right: 250px;
padding-left: 140px;
position: relative;
top: -70px;
width: 700px;
voice-family: "\"}\"";
voice-family: inherit;
width: 310px;
}



#linkList {
font: italic 9pt/14pt garamond, georgia, serif;
text-transform: lowercase;
text-align: left;
color: #A29D66;
background-color: transparent;
position: absolute;
top: 33em; /*380px;*/
left: 0px;
width: 100%;
}
#linkList2 {
padding-left: 470px;
padding-right: 70px;
margin-left: auto;
margin-right: auto;
width: 700px;
voice-family: "\"}\"";
voice-family: inherit;
width: 160px;
}
#linkList h3 {
font: italic 12pt/15pt garamond, georgia, serif;
text-transform: capitalize;
color: #464128;
background-color: transparent;
text-align: left;
background-image: none;
}
#linkList a {
font: italic 11pt/14pt garamond, georgia, serif;
color: #A29D66;
background-color: transparent;
text-decoration: none;
}
#linkList a:hover {
color: #464128;
background-color: transparent;
text-decoration: underline;
}

#linkList a.c {
font: italic 9pt/14pt garamond, georgia, serif;
}
#linkList ul {
margin: 0px;
padding: 0px;
}
#linkList li {
text-align: left;
list-style-type: none;
}

#linkList h3 {
margin-right: auto;
margin-left: 0px;
margin-top: 25px;
}
#linkList h3 span {
display: none;
}
#linkList h3.select {
width: 113px;
height: 19px;
background: transparent url(h-select.gif) top left no-repeat;
}
#linkList h3.archives {
width: 134px;
height: 17px;
background: transparent url(h-archives.gif) top left no-repeat;
}
#linkList h3.favorites {
width: 76px;
height: 23px;
background: transparent url(h-favorites.gif) top left no-repeat;
position: relative;
left: -10px;
}
#linkList h3.resources {
width: 125px;
height: 13px;
background: transparent url(h-resources.gif) top left no-repeat;
position: relative;
left: -10px;
}

#footer a {
font: italic 11pt/14pt garamond, georgia, serif;
color: #A29D66;
background-color: transparent;
text-decoration: none;
padding-left: 15px;
}
#footer a:hover {
color: #464128;
background: transparent url(fleurdelis.gif) center left no-repeat;
text-decoration: none;
border-bottom: dotted 1px #464128;
}

.accesskey {
font-weight: bold;
text-decoration: underline;
}


/* extra bits on the last paragraph in each text block */
#preamble .p3, #explanation .p2, #participation .p3, #benefits .p1, #requirements .p4 {
background: transparent url(filler.gif) bottom center no-repeat;
padding-bottom: 25px;
}

#extraDiv1 {
text-align: center;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
}
#extraDiv1 span {
display: block;
width: 600px;
height: 82px;
margin-left: auto;
margin-right: auto;
background: transparent url(fleur.gif) top right no-repeat;
}


Again...if you view the page source...you will not find a single image in the HTML. Everything is called in via the Stylesheet.

Also, I do not use the image tag on most of my sites (as using CSS to separate Style from Content is becoming the common practice among web designers) :)

Hugs,
Erica

Ahh...but you said actual images cannot be entered through CSS...and they can (though of course you are right in that they are background images)...but whether they are being set as backgrounds or not was not the relevant part. The idea is that sliced images can be placed in separate DIV's in a CSS file and called in...and even put back together. That complex layouts...not just one background can be achieved with the use of CSS. That was my point. I was not debating your correct statement that images can be set using background in CSS...only elaborating on the point that CSS can do more than simply set just one background for the site. All images can be called in through CSS. On a recent client site, I developed 4 Templates (each available in 7 colors), and all images were called in with a single stylesheet. This enabled the client to set the site color with a single click.

Sorry, I am a huge proponent of web standards, CSS, & website usability, so I tend to become very vocal regarding the amazing benefits of CSS for Style over HTML.

Hugs,
Erica

i know what pbj meant to say because it's been asked many times when people ask if they can put links and images on their html pages through the css.

So let's not get picky ok? I know what he meant, it may not have been what you understood but he did mean that you cannot make an image like <img src=" "> come up in css.