Jump to content

Having a CSS coding problem and Im stumped on Img and center?


Guest Boo Rody

Recommended Posts

Guest Boo Rody

I am totally new to this stufff, I hardly ever ask for assistance but I think it's time. I have two questions:

 

1. Does this code work in firefox or am I missing something, it seems to work well in IE, but when I go to Firefox the graphics won't display, the html code is:

 

bg_top.jpg

 

bg_btm.jpg

 

Te CSS code that I am trying to write for this is:

img.x

{

position: absolute;

inherited: no;

left:0%;

top:0%;

z-index:-1;

}

img.y

{

position: absolute;

inherited: no;

left: 0px;

bottom:-900px;

z-index:-1;

}

************************************

Problem 2

 

If and when I get this to work in both browsers, I want the page to collapse from each side to match the monitor of the visitor or resolution?

 

There is mention of this in this sites examples but they don''t tell me how this is accomplished, I think that everything needs to be centered like we used to do in html, but I can't find out how to center the page so it will adjust form both sides leaving the center material visible, instead of laying off to one side. Any ideas on this would be appreciated or if you could just give me a location where I might find this information.

Please advise on either question ... please!

 

and I thank you all in advance

Boo

 

The address to see what I'm talking about is

http://www.amerikabbs.com/experimental/index.html

Link to comment
Share on other sites

For your first problem...

 

-- " inherited: no;" isn't valid CSS, so it may be causing issues.

 

Second problem:

 

You'll need to do two things:

 

-- set "text-align:center" on your body element

-- wrap your site in a wrapper div (if you haven't already) and add "margin: 0 auto;" to the CSS

 

text-align:center centers in IE, and margin:0 auto centers the div in firefox.

Link to comment
Share on other sites

Your images are 1599px wide - it's going to force a horizontal scroll bar on anyone with a lower resolution.

 

And I'm not even going to ask why Obama and Hitler are on the same photo......

 

But I will mention that your doctype is incomplete - go with

Link to comment
Share on other sites

I reread your comments about problem #2... I'm not sure if you are meaning you are having trouble centering your site or if you are taking about a liquid layout, that scales based on the browser size. My comments above only referred to centering a fixed width site.

 

If you are talking about a layout that scales, that is usually done with widths set in %, rather than px. Google "liquid layout" and you should find some tutorials. Overall, though, I have found that liquid layouts are tricky, since they really need a minimum and maximum width -- you don't want the site expanding or contracting too far. Others may have useful links on that subject, but I don't usually work with that sort of layout myself.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...