| 🙂
|
Use the black navigation bar to log in or create your account. |
Jump to Page: 1 2
Pastor Rick
Citizen
Registered: 07-2005
Province: Texas
Posts: 619
Karma: 11 (+12/-1)
|
|
ReplyQuote
|
|
Multiple graphics for background?
Hi Lesigner Girl (and Merry Christmas ),
Is it possible to have two graphic images for a tiled background via CSS?
|
|
12/21/2006, 12:38 pm
|
Link to this post
PM Pastor Rick
Read Blog
|
Lesigner Girl
Minerva
Head of Runboard staff
Registered: 11-2005
Posts: 9607
Karma: 132 (+147/-15)
|
|
ReplyQuote
|
|
Re: Multiple graphics for background?
Hi Pastor Rick. I don't observe the holiday, but thank you, and Merry Christmas to you too.
If you mean interchanging images like this, then no, you cannot do it with CSS alone.
XOXOXOXO
OXOXOXOX
XOXOXOXO
OXOXOXOX
If you mean having one image going down one side (or across the top) and another image going down the other side (or across the bottom), then yes.
X O
X O
X O
X O
That doesn't mean you can't get the first effect by other means, though. If you want, you can combine those images into one image, like so:
OX
XO
And then tile that image.
For the 2nd effect, you can create a container div for the 2nd background image.
If you want the images to go down the left and right sides of the entire page, you could set your body margins to 0 in your CSS, put <div id="container"> at the very beginning of your HTML header, and </div> at the very end of your HTML footer. This will put the container div around your entire page. Then in your CSS, you would define:
body {
background-image: url(left_image.jpg);
background-position: left;
background-repeat: repeat-y;
}
#container {
background-image: url(right_image.jpg);
background-position: right;
background-repeat: repeat-y;
}
Or the shorthand version:
body {
background: url(left_image.jpg) left repeat-y;
}
#container {
background-image: url(right_image.jpg) right repeat-y;
}
If you don't want to do this for the entire page, but rather an element inside it, you could create two nested divs.
<div class="outer">
<div class="inner">
Content
</div>
</div>
And define one image to tile down one side of the outer div, and the other to tile down the other side of the inner div.
If you want to define a width, you would define the width in the outer div only, and do NOT define a width for the inner div, because the inner div will fill the width of the outer div by default.
If you want to keep your content from overlapping your background, you can add padding to your inner div.
I hope this helps, and that one of these things is what you had in mind.
Last revised by Lesigner Girl, 12/23/2006, 5:30 pm
|
|
12/23/2006, 5:28 pm
|
Link to this post
PM Lesigner Girl
Read Blog
|
Pastor Rick
Citizen
Registered: 07-2005
Province: Texas
Posts: 619
Karma: 11 (+12/-1)
|
|
ReplyQuote
|
|
Re: Multiple graphics for background?
Thanks for the start ... From what you show then I guess the best way would be via a table to create the checkerboard affect (I don't want to create new graphics if I can help it for this )...
Say I create a table like so:
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" HEIGHT="20">
<TR>
<TD WIDTH="20" HEIGHT="20" BGCOLOR="#00CC00">
<IMG SRC="images/blank.gif" width="20" height="20"></TD>
<TD WIDTH="20" HEIGHT="20" BGCOLOR="#3366CC">
<IMG SRC="images/blank.gif" width="20" height="20"></TD>
</TR>
<TR>
<TD WIDTH="20" HEIGHT="20" BGCOLOR="#3366CC">
<IMG SRC="images/blank.gif" width="20" height="20"></TD>
<TD WIDTH="20" HEIGHT="20" BGCOLOR="#00CC00">
</TR>
</TABLE>
Can I make this a "class" and then tile it via CSS?
Last revised by Pastor Rick, 12/24/2006, 1:48 am
|
|
12/24/2006, 1:43 am
|
Link to this post
PM Pastor Rick
Read Blog
|
Lesigner Girl
Minerva
Head of Runboard staff
Registered: 11-2005
Posts: 9607
Karma: 132 (+147/-15)
|
|
ReplyQuote
|
|
Re: Multiple graphics for background?
Are you wanting them in the foreground or in the background? Putting them in the background is the only way you can put content in front of it, which means you'll have to create a new graphic. But it's easy enough to paste images into an image editing program and save it as a new file.
If you're going to put the images into the foreground, why use a table at all?
 
I'm not sure what you mean by making a table into a class and then tiling it. There is no way to insert a table via CSS, if that's what you mean.
|
|
12/24/2006, 2:17 am
|
Link to this post
PM Lesigner Girl
Read Blog
|
Pastor Rick
Citizen
Registered: 07-2005
Province: Texas
Posts: 619
Karma: 11 (+12/-1)
|
|
ReplyQuote
|
|
Re: Multiple graphics for background?
Borrowing a tip from our friend James Long here ...
This is a link to the Trial and Error site where I am working on learning stuff like this.
The table is a "browser generated graphic" and I want to figure out how to tile it as a background. The reason I don't want to create a new graphic in a paint program is fairly simple really. I want to do this using ONLY the graphics that are being hosted by RunBoard ... Nice challenge yes?
|
|
12/24/2006, 11:47 pm
|
Link to this post
PM Pastor Rick
Read Blog
|
Lesigner Girl
Minerva
Head of Runboard staff
Registered: 11-2005
Posts: 9607
Karma: 132 (+147/-15)
|
|
ReplyQuote
|
|
Re: Multiple graphics for background?
Now I see why you're not wanting to create a new graphic, but...
1) <style=".backgrnd"> is not valid code.
2) You cannot tile a <table> via CSS.
3) Multiple background image support will not be available until CSS3, which they've been developing since 2001, but there's still no word on when it will come out.
|
|
12/25/2006, 6:12 am
|
Link to this post
PM Lesigner Girl
Read Blog
|
Pastor Rick
Citizen
Registered: 07-2005
Province: Texas
Posts: 619
Karma: 11 (+12/-1)
|
|
ReplyQuote
|
|
Re: Multiple graphics for background?
OK, I gave up on the "checkerboard" for now and did something a little different. You can see the results of my first (almost solo) attempt to make a new theme for RunBoard users by going to the Purple Squares. I know the code may not be the best but I'm a-learning ...
|
|
12/26/2006, 4:43 am
|
Link to this post
PM Pastor Rick
Read Blog
|
Lesigner Girl
Minerva
Head of Runboard staff
Registered: 11-2005
Posts: 9607
Karma: 132 (+147/-15)
|
|
ReplyQuote
|
|
Re: Multiple graphics for background?
That's a pretty nifty effect, Pastor Rick! 
I'm usually not too keen on using tables, but since you're not surrounding the entire board with them, it doesn't cause any noticeable difference in loading time. Plus, it's a lot easier than using a bunch of floated <div>s, so I won't raise a fuss about using a table in this case. 
I'm glad to see you doing so well at learning code and doing your own thing with it. But you're right that the code can use a little tweaking, and I think the following feedback can help set you on the path to being a more efficient coder.
The three corrections are the most important ones to fix right away, and the rest you can work on in your own time.
Corrections:
1) <TABLE BORDER="2px"...
should be <table border="2"...
Your current code is causing the table border to be 1 pixel wide (at least in FF and IE), not 2 as you intended. Although it is required in CSS to specify px, %, em, or whatever (unless the value is 0, then it's just 0)... the px is implied in HTML (unless you put % after the number, in which case it will be in % instead of px). Even though CSS requires px to be specified, it is not a part of the HTML language.
2) The image, http://com3.runboard.com/images/blank.gif, doesn't exist.
Try http://img.runboard.com/img/space.gif
3) <img> tags should always have alternate text specified, even if the alt is blank.
<img alt="" src="http://img.runboard.com/img/space.gif" />
<img alt="New Topic" src="path_to_image/newtopic.gif" />
However, see suggestion #1 below about putting the separator image in the background and nixing the transparent gif all together...
Additional suggestions:
1) Instead of putting the images in the foreground (takes longer to load), you can put them in the background (loads quicker, uses less code, plus other benefits). See code after suggestion #2.
2) If you define the height of the <table> itself or one of the <td>s, the rest of the <td>s will automatically be that height. Or better yet, you can put it in the CSS. Likewise, you can define background color in the CSS and save yourself a lot of space in the HTML. I like to define as much as possible in the CSS and keep it out of the HTML, especially if it helps get rid of repetitive code.
3) In general, it's a good coding practice to put all your attributes in lower-case instead of ALL CAPS, ie <table border...>, not <TABLE BORDER...>
CSS:
.td1, .td2 {
padding: 0; height: 20px;
font-size: 1px;
.td1 {
background: #707dbc;
}
.td2 {
background: #36c url(http://img.runboard.com/img/layouts/impaqt_1/separator.gif) top repeat-x;
}
HTML:
<table border="2" cellspacing="0">
<tr>
<td width="15" class="td1"><br /></td>
<td width="16" class="td2"><br /></td>
<td width="17" class="td1"><br /></td>
<td width="18" class="td2"><br /></td>
etc...
Notes:
You can use any class names you want, but td1 and td2 were the first names to pop into my head.
When I build a web page, I would generally use &nbsp; instead of <br /> as something to stick inside the element (usually a <div> instead of a table cell). But since the custom HTML section will change those non-breaking spaces into regular spaces, I used <br /> here instead. If you don't stick something inside a <td>, the border around it will not show up.
I defined a tiny font size, just to make sure the line break doesn't make the table taller than intended. I also do this when I use &nbsp; on a web page, if the area is small enough to have to worry about it.
You can further customize the table by taking the border out of the HTML and putting it in the CSS. To do this, you would give the <table> itself a class name. Let's call it deco for this example...
HTML:
<table class="deco" cellspacing="0">
CSS:
.deco {
border: 2px solid;
border-color: #e6e5e4 #c3c2c1 #c3c2c1 #e6e5e4;
}
.td1, .td2 {
border: 1px solid;
border-color: #c3c2c1 #e6e5e4 #e6e5e4 #c3c2c1;
padding: 0; height: 20px;
font-size: 1px;
}
The above uses CSS shorthand for the borders. The colors go clockwise, starting at 12 o'clock (top right bottom left).
A long way to write the above border definitions for .deco would be:
border-top: 1px solid #e6e5d4;
border-right: 1px solid #c3c2c1;
border-bottom: 1px solid #c3c2c1;
border-left: 1px solid #e6e5d4;
Or you could get really carried away and write:
border-top-width: 1px;
border-top-style: solid;
border-top-color: #e6e5d4;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #c3c2c1;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #c3c2c1;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #e6e5d4;
As you can see, shorthand is better. 
If you want all 4 borders to be the same width (border-width), style (border-style), and color, (border-color), you could define it as:
border: 1px solid #e6e5e4;
I bet you didn't know you'd get a whole tutorial out of this.  But the way you're applying yourself and picking up on it so well, I think you can do some good things with this knowledge. 
|
|
12/28/2006, 12:26 am
|
Link to this post
PM Lesigner Girl
Read Blog
|
Pastor Rick
Citizen
Registered: 07-2005
Province: Texas
Posts: 619
Karma: 11 (+12/-1)
|
|
ReplyQuote
|
|
Re: Multiple graphics for background?
Wowsers!
I took both your suggestions and Mooseman's and have made some (what I consider major) changes to the coding for the skin. I have not implemented the "deco" idea yet because I am attempting to figure out just how Joshin Josh's .container css works. My thinking is that the .container just might be a way to guarantee all the elements are aligned properly with each other.
I have put all the coding on my Design Elements board along with every graphic that RunBoard has made available for general use.
Hopefully I can learn enough so that the Purple Squares board skin will just be the first of many
BTW: Thank you for your patience with me while I am learning, it really means alot
|
|
12/30/2006, 6:26 pm
|
Link to this post
PM Pastor Rick
Read Blog
|
Lesigner Girl
Minerva
Head of Runboard staff
Registered: 11-2005
Posts: 9607
Karma: 132 (+147/-15)
|
|
ReplyQuote
|
|
Re: Multiple graphics for background?
You're very welcome, Pastor Rick!
The decorative tables at the top and bottom of your Purple Squares board look nice, but I see that you closed off the last <td> three times, plus you have the last few tags in all caps...
<td width="12" class="td1"><br /></td>
</TD>
</TD>
</TR>
</TABLE>
Another thing you can do instead of using <center></center> is to center the tables via CSS.
<center> is a deprecated tag (meaning it's going by way of the dinosaur), plus you should always try to separate content (which uses HTML) from style (using CSS) whenever possible.
<table class="deco"....
.deco {
margin: 0 auto;
}
The first part, 0, means no margin on top and bottom. The auto refers to left and right, and this is the part that centers it. If you want a top and bottom margin, you can change the 0 to 1em, 0.5em, 5px, 8px, or anything along those lines. If you want the top and bottom margins to be different (say, 3px at the top and 8px at the bottom), you can do it like this:
margin: 3px auto 8px auto;
In this case, the dimensions go clockwise, starting at 12:00 (top right bottom left).
Also, I recommend taking the <b></b> tags out of your header, for a few reasons:
1) <b> is deprecated. <strong> is its substitution and means "strong emphasis," but aural screen readers for the blind will say anything within those tags with strong emphasis.
2) Design should always be done with CSS whenever possible, while HTML should always be restricted to content whenever possible.
3) Since you are using that for the name of the board, you should use <h1></h1> (level 1 heading) tags instead, and you can define the styling of that <h1> tag in your CSS.
h1 {
font: bold 20px georgia,'times new roman',serif;
text-align: center;
color: #fff;
margin: 0;
padding-left: 150px;
}
...or however you want to style it.
Just a couple of things to consider while you're learning this stuff. I wouldn't be this nit picky with most people, but you seem to be genuinely interested in learning good design.
Keep up the great work!
|
|
12/30/2006, 10:11 pm
|
Link to this post
PM Lesigner Girl
Read Blog
|
Add to this discussion
Jump to Page: 1 2
You are not logged in ( login)
|
