AppleInsider › Forums › General › Genius Bar › CSS Repeating Question
New Posts  All Forums:Forum Nav:

CSS Repeating Question

post #1 of 21
5/2/04 at 7:21pm
Thread Starter 
I have a database to keep track of DVD's I own and of movies I plan on renting with Netflix. No connection between the two

As you can see in this pictures:


I'd like my orange thing to stay there no matter how wide they expand the page. So how would I do that? I figure that I'd have to create a section of the image on the left side that I would just repeat as the page expands. So is there any way to do this?

On a different note...see my table at the bottom? I colored it like the iTunes blue and white alternating, but I was wondering if there was a day to make them slightly transparent. It's not a big deal, but my orang thing runs down into that and rather then making my orange thing fade faster I'd like to see how it looks if it goes behind the table.
0 People Found This Reply Helpful
Reply
0 People Found This Reply Helpful
Reply
post #2 of 21
5/2/04 at 9:21pm
I think it's something like:

body
{
background-image: URL(blah);
background-repeat: no-repeat;
}

Also, what DB software are you using? I've wanted to get into web databasing, but keep getting scared off.
Reply
Reply
post #3 of 21
5/2/04 at 9:23pm
Quote:
Originally posted by ast3r3x
I'd like my orange thing to stay there no matter how wide they expand the page. So how would I do that? I figure that I'd have to create a section of the image on the left side that I would just repeat as the page expands. So is there any way to do this?

If I understand what you're describing, this should be easy.

Simply create the image you want and set it to display in the top-left corner and not repeat.

Code:

{
     background-color: white;
     background-image: url("/images/orangething.jpg");
     background-repeat: no-repeat;
     background-position: top left;
}
Reply
Reply
post #4 of 21
5/3/04 at 3:26am
Thread Starter 
Sorry I wasn't very clear. I'd like those ripples to stay where they are.

I don't want this to happen:
0 People Found This Reply Helpful
Reply
0 People Found This Reply Helpful
Reply
post #5 of 21
5/3/04 at 3:44am
Quote:
Originally posted by ast3r3x
Sorry I wasn't very clear. I'd like those ripples to stay where they are.

I don't want this to happen:

you mean, stay centered in the middle of the page?
Bill Bradley to comedian Bill Cosby: "Bill, you are a comic, tell us a joke!"
- "Senator, you are a politician, first tell us a lie!"
Reply
Bill Bradley to comedian Bill Cosby: "Bill, you are a comic, tell us a joke!"
- "Senator, you are a politician, first tell us a lie!"
Reply
post #6 of 21
5/3/04 at 3:55am
Quote:
Originally posted by ast3r3x
I'd like those ripples to stay where they are.

And he's contradicting himself!

You don't want the ripples to stay where they are; that's what they're already doing. You want then to be centered so they *will* move as you resize the window.

Try this:

background-position: top center;
Reply
Reply
post #7 of 21
5/3/04 at 4:05am
Quote:
Originally posted by Brad
And he's contradicting himself!

You don't want the ripples to stay where they are; that's what they're already doing. You want then to be centered so they *will* move as you resize the window.

Try this:

background-position: top center;

but then there will be a white gap to the left, when the window is resized.

the only whay to fix this is to use separate cells with different backround images.
Bill Bradley to comedian Bill Cosby: "Bill, you are a comic, tell us a joke!"
- "Senator, you are a politician, first tell us a lie!"
Reply
Bill Bradley to comedian Bill Cosby: "Bill, you are a comic, tell us a joke!"
- "Senator, you are a politician, first tell us a lie!"
Reply
post #8 of 21
5/3/04 at 6:34am
Thread Starter 
Quote:
Originally posted by Brad
And he's contradicting himself!

Ok I suck at life, but we knew that didn't we?

Quote:
Originally posted by New
but then there will be a white gap to the left, when the window is resized.

the only whay to fix this is to use separate cells with different backround images.

So how would I go about doing that? The real reason I have that orange thing is to split the page in half because I think it's good to visually have a seperation between the que and movie features.
0 People Found This Reply Helpful
Reply
0 People Found This Reply Helpful
Reply
post #9 of 21
5/3/04 at 6:38am
body
{
...
background-attachment: fixed;
...
}

And this is a great site for learning CSS.
Reply
Reply
post #10 of 21
5/3/04 at 6:46am
Quote:
Originally posted by Noleli2
body
{
...
background-attachment: fixed;
...
}

And this is a great site for learning CSS.

how would this help?
Bill Bradley to comedian Bill Cosby: "Bill, you are a comic, tell us a joke!"
- "Senator, you are a politician, first tell us a lie!"
Reply
Bill Bradley to comedian Bill Cosby: "Bill, you are a comic, tell us a joke!"
- "Senator, you are a politician, first tell us a lie!"
Reply
post #11 of 21
5/3/04 at 7:09am
Thread Starter 
Quote:
Originally posted by Noleli2

And this is a great site for learning CSS.

Thanks, I know of that site and checked it out, and didn't find what I was looking for. I dont' see how that will do what I want, but I can't test it yet, I will when I get home. Thanks
0 People Found This Reply Helpful
Reply
0 People Found This Reply Helpful
Reply
post #12 of 21
5/3/04 at 7:49am
Quote:
Originally posted by New
the only whay to fix this is to use separate cells with different backround images.

Try what i wrote above. split the background image into separate parts. Put each into separate cells. I this is to hard why not just fade the image into white?
Bill Bradley to comedian Bill Cosby: "Bill, you are a comic, tell us a joke!"
- "Senator, you are a politician, first tell us a lie!"
Reply
Bill Bradley to comedian Bill Cosby: "Bill, you are a comic, tell us a joke!"
- "Senator, you are a politician, first tell us a lie!"
Reply
post #13 of 21
5/3/04 at 12:05pm
Thread Starter 
I don't think that will work because the left side of my form never moves.

I need a way to have an image repeating along the upper left corner and have the right side of my orange thing stay at 50% of the page.
0 People Found This Reply Helpful
Reply
0 People Found This Reply Helpful
Reply
post #14 of 21
5/3/04 at 12:19pm
Quote:
Originally posted by ast3r3x
I don't think that will work because the left side of my form never moves.

I need a way to have an image repeating along the upper left corner and have the right side of my orange thing stay at 50% of the page.

I think you are creating problems for yourself here. Just fix the width and everything will be fine. Or you'll have to slice the graphic and then repeat it in some of the cells.
Bill Bradley to comedian Bill Cosby: "Bill, you are a comic, tell us a joke!"
- "Senator, you are a politician, first tell us a lie!"
Reply
Bill Bradley to comedian Bill Cosby: "Bill, you are a comic, tell us a joke!"
- "Senator, you are a politician, first tell us a lie!"
Reply
post #15 of 21
5/3/04 at 1:51pm
Thread Starter 
Quote:
Originally posted by New
I think you are creating problems for yourself here. Just fix the width and everything will be fine. Or you'll have to slice the graphic and then repeat it in some of the cells.

Oh yeah good idea. I was thinking of repeating images in cells which wouldn't work
0 People Found This Reply Helpful
Reply
0 People Found This Reply Helpful
Reply
post #16 of 21
5/3/04 at 1:58pm
Quote:
Originally posted by ast3r3x
Oh yeah good idea. I was thinking of repeating images in cells which wouldn't work

Hey, it's not like I'm gonna write the code for you.
Bill Bradley to comedian Bill Cosby: "Bill, you are a comic, tell us a joke!"
- "Senator, you are a politician, first tell us a lie!"
Reply
Bill Bradley to comedian Bill Cosby: "Bill, you are a comic, tell us a joke!"
- "Senator, you are a politician, first tell us a lie!"
Reply
post #17 of 21
5/3/04 at 2:42pm
You can use translucent PNGs for the iTunes stripe colors. Or do a 4-pixel checkerboard in GIF in case you want it to work on Windows (PNG transparency support is missing from Win IE)

Update:

Quick example:

http://www.nullface.com/ai/itunesBG/itunes.html

That's just to show the 2 transparency effects -not- as an example of code. The code is pure quickie GoLive crap.

Just showing the 2 options for image transparency in background pattern for divs or tables. In your case you'll want a white and a blue image. Mine has both in one graphic.
"The Roots of Violence: wealth without work, pleasure without conscience, knowledge without character, commerce without morality, science without humanity, worship without sacrifice, politics...

Reply
"The Roots of Violence: wealth without work, pleasure without conscience, knowledge without character, commerce without morality, science without humanity, worship without sacrifice, politics...

Reply
post #18 of 21
5/3/04 at 3:51pm
Thread Starter 
Yeah, I wanted to use transparent PNG's but I want this thing to be able to be used from windows so I have to work with keeping in mind transparent PNG parts are grey on windows. PNG's are my favorite format though. Small and the only format I know that works with transparency that well for the internet.

Edit: Like your choice of images
0 People Found This Reply Helpful
Reply
0 People Found This Reply Helpful
Reply
post #19 of 21
5/3/04 at 4:09pm
Quote:
Originally posted by ast3r3x
Yeah, I wanted to use transparent PNG's but I want this thing to be able to be used from windows so I have to work with keeping in mind transparent PNG parts are grey on windows. PNG's are my favorite format though. Small and the only format I know that works with transparency that well for the internet.

Edit: Like your choice of images

thanks

So what about the checkerboard GIF version? My only real complaint is that 1. it's somewhat of a hack and 2. it strobes on LCDs when scrolling.
"The Roots of Violence: wealth without work, pleasure without conscience, knowledge without character, commerce without morality, science without humanity, worship without sacrifice, politics...

Reply
"The Roots of Violence: wealth without work, pleasure without conscience, knowledge without character, commerce without morality, science without humanity, worship without sacrifice, politics...

Reply
post #20 of 21
5/3/04 at 5:52pm
Thread Starter 
I have a problem with all of the above

How do you do that though...is there a filter in photoshop?
0 People Found This Reply Helpful
Reply
0 People Found This Reply Helpful
Reply
post #21 of 21
5/3/04 at 6:00pm
Quote:
Originally posted by ast3r3x
I have a problem with all of the above

How do you do that though...is there a filter in photoshop?

No, I just make a 2px x 2px image and make top left and bottom right pixels be a color and the other 2 are left transparent.

Ideally, I will then make this a pattern, expand the canvas to like 128x128px and fill it. (If your gif is too small it takes longer to render as a pattern in browsers, that's why not to leave it at 2px).

Save as GIF and it can give a moderately acceptable transparency effect in certain situations.

Of course once you've made one of these, you can merely recolor it, no need to recreate it from scratch.

Another problem is that it washes out the color you want to use, so you need to use a darker blue than iTunes actually uses, for example.
"The Roots of Violence: wealth without work, pleasure without conscience, knowledge without character, commerce without morality, science without humanity, worship without sacrifice, politics...

Reply
"The Roots of Violence: wealth without work, pleasure without conscience, knowledge without character, commerce without morality, science without humanity, worship without sacrifice, politics...

Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Genius Bar
AppleInsider › Forums › General › Genius Bar › CSS Repeating Question