Click to See Complete Forum and Search --> : Help?
luciangel
12-26-2004, 12:30 AM
Okay, I have a design in my mind, but I can't figure out how to make it work. I want to use a texture background tiled, but I also want a watermark image centered both horizonally and vertically. I's prefer to use the whole page vs. the common little square in the middle of the page design. Help?
P.S. Whatever I use should be compatible with most browsers, including Mozilla Firefox.
PeOfEo
12-26-2004, 12:50 AM
What is that including mozilla firefox? It should always no matter what be compadable with firefox because that is what I use!!! :p
Well here is the way I see it: If you want to have a background cover your whole page it needs to be a small image that gets tiled. If you try to use one big image it is going to eat up your bandwidth like crazy. So water making this will leave every little square with a water mark on it, that is if you are using the water mark to prevent people from stealing. If you just want the watermark to have your website name on it however you have some other options. You can do the tile background image and then you can have the watermark image be the background image of an otherwise transparent div under your content so it appears as if you have the tile with that text on it, or you can use the z-index css attribute to put that image under everything else, but this way the watermark would be inserted using the <img> tag, but everything would just slide over it. I can explain more clearly I guess about both of the two possibilities I am thinking of.
luciangel
12-26-2004, 02:55 AM
Okay how abouts would I do the second one?
PeOfEo
12-26-2004, 12:36 PM
Well, basically you would say
<img src="watermark.gif" style="z-index:0;" alt=""/> and then everything with a zindex higher then 0 is going to over lap it. So if you have everything else set to have it as 1 (you can apply this to a containing div since the other objects will be children of the containing div) it will be over the image.
luciangel
12-27-2004, 01:20 AM
Excellent, thanks. Now how do I keep the image from moving when the page is scrolled as if it was a "watermark?" ;)
PeOfEo
12-27-2004, 01:40 AM
That is the only real problem. You are going to have to sacrifice it being fixed. For mozilla you can allow it to be fixed, but internet explorer is not going to accept it.
position: fixed; will do it in all good browsers, unfortunatly ie is not a good browser.
The only way to get it so that the text is fixed is to maybe high the water mark be set as the background and be fixed that way and settle for the rest of your page being a solid color. I have done something like this here http://quasi-ke.servebeer.com/design/index.aspx you can also see the effect at http://quasi-ke.servebeer.com
luciangel
12-27-2004, 02:08 AM
Damn, I found some javascripts, but none of them seem to work for my purpose (image centered). Also, what is with these forums that come up in google search then tell you to sign up...grr. Let's outlaw IE...
PeOfEo
12-27-2004, 07:28 PM
The problem with using java script to keep an image fixed is that when the user scrolls the image will generally shift a little before its position is resent, giving it a jumpy appearance.
luciangel
12-27-2004, 07:53 PM
Yeah, and that would be really bad because there's going to about a lot of text on these pages. Now I'm having issues with firefox not taking the position command right. If I tell it left: 5px it goes to the center of the screen. If I tell it nothing in that area it goes beside the image. >.< And now it's war!
PeOfEo
12-27-2004, 07:56 PM
It is more likely that firefox is doing it correctly and internet explorer is doing it incorrectly.
luciangel
12-27-2004, 08:09 PM
It does that when I load it in Firefox; it doesn't do that inside the html editor...which I think has IE 5 built in.
PeOfEo
12-27-2004, 08:15 PM
Well lets see some code. I strongly dislike the ie5 and the ie6 (quirks mode) box models. They are not compliant at all with the standards.
luciangel
12-27-2004, 09:23 PM
<body background="grey042.jpg" style="background-attachment: fixed;">
<br><br><br><br><center><img src="gray.gif" style="z-index:0; position: fixed;" alt="">
<DIV style="position: absolute; z-index:1; top:10px; left:10px;">testjdfghidhgisdfhgiudf<br>
gray.gif being the image i want to be in the background and fixed, the text that starts text is just there for testing purposes...
and I hope this doesn't read all that
PeOfEo
12-28-2004, 01:00 AM
well gray.gif cant be fixed. The problem is ie will not accept position:fixed. It will only fix a background.
luciangel
12-28-2004, 01:08 AM
That's not the problem...okay in foxfire..the center should be centered but it's actually pretty far over to the right and I can't figure out why.
PeOfEo
12-28-2004, 01:13 AM
Well you are using a deprecated tag to do the centering. Here is a more up to date way of doing things
width:100px;
margin:0px auto;
drop that in your style tag and you are off.
luciangel
12-28-2004, 01:28 AM
That did nothing, in IE and Firefox.
PeOfEo
12-28-2004, 02:48 AM
Try taking out the position:fixed; that is probably what is foiling it. Also position:fixed; is going to fail anyway.
http://bluerobot.com/web/css/center1.html is an example of the centering method I am talking about.
I also forgot
text-align:center;
put that in the style tag of the containing element... that corrects this for ie.
luciangel
12-28-2004, 02:59 AM
*frowns* And now I'm reminded of why I try to stick to good old HTML...no it's not as accurate, but at least it's supported cross-browser. I think I will go to tell a "professional" who told me to figure this out on my own and stop being lazy, that he's obviously not too great either! *Ponders making an annoying little pop screen X px by X px >.<
PeOfEo
12-28-2004, 03:04 AM
css goes cross platform better. Hacking is needed sometimes, but css separates the structural markup from the presentational markup. That means when someone comes along with an audio barille browser or something he can get to your content because when a browser does not support css, the layout melts away and your site goes into an accessible text only mode. The content is more important then the appearance, always. People often do not visit sites for looks unless they are things like csszengarden.com or cssvault.com, the visit the site for its content.
Also, that popup idea would not work for something like 10% of the internet... that is the % of the internet without javascript enabled.
luciangel
12-28-2004, 03:20 AM
I know it, and I really hate to do it, because I generally scream when I click a homepage and get a small window. Still, the images look so nice together, I really hate to give up on the idea. I'm currently working on putting the image into the background itself and *hoping* I can compress it down small enough w/o distortion but...probably won't happen.