I'm new to programming and I need help (Its for a website I'm making for my class) I was wondering how can I make an image (I'm using a college rule paper image) have editable text on it and it is viewable on all resolutions. (The paper stays in the same spot (the center) and the text doesn't move around) I set the image as the background of the content div, but I get the feeling if on different resolutions, the paper would move around, and the text would not be correctly aligned. Also, the background image doesn't work in IE 6 (Because high schools are stupid and don't update their browsers to the new ones) I hope this isn't too confusing but I'm on a tight schedule and I need any help I can get >< Thanks in advance I've also attached the coding I've done (I ripped off most of it from templates on expression)
Sorry about that. (I'd also like to put my html code, but it says that there are too many links/images when there are none. Only image filenames, <a hrefs>, etc.) Code: CSS @import url(layout.css); body { color: #000; font-family: Arial, Helvetica, sans-serif; font-size: small; font-style: normal; background-color: #fff; } #container { width: 100%; margin: 0; background-color: #fff; position: relative; } #masthead { text-align: right; width: 100%; background: WHITE; background-repeat: no-repeat; } #navigation { background-color: orange; overflow: hidden; } #page_content { position: relative; width: 100%; border-top-width: 1px; border-top-style: solid; border-top-color: #CCAA77; } #column_l { position: relative; margin: 0 350px 0 0; padding: 0 2%; background-image: URL('../../website background copy.png'); float: none; } #column_r { float: none; width: 330px; margin: 0; padding: 10px; background-color: #cdf; position: absolute; right: 0px; top: 0px; } #footer { background-color: #dfcfbf; padding-bottom: 5px; } /* Styles for Masthead */ #masthead img { float: left; margin: 0; padding: 0; } #masthead p { font-size: small; text-align: right; color: #000; margin: 10px 10px 10px 0; padding: 0; } /* Styles for Navigation */ #navigation ul { list-style-type: none; width: 100%; margin: 0; padding: 0; } #navigation li { float: left; } #navigation a { color: #000; text-decoration: none; display: block; padding: 5px; border: 1px solid red; background-color: #FFCC00; } #navigation a:hover { color: #000; text-decoration: none; border: 1px solid #ed9; background-color: #ed9; } /* Styles for Content */ h1 { font-size: 2em; color: #393939; } h2 { font-size: 1.75em; color: #469; } h3 { font-size: 1.5em; color: #469; } h4 { font-size: 1.25em; color: #469; } h5 { font-size: 0.75em; color: #469; } h6 { font-size: 0.5em; color: #469; } /* Styles for Footer */ #footer p { font-size: x-small; text-align: center; color: #393939; margin: 10px; padding: 1px; } #footer a { color: #393939; text-decoration: underline; } #footer a:hover { color: #000; text-decoration: none; } /* Styles for Links */ a { color: #469; text-decoration: underline; } a:hover { color: #000; text-decoration: underline; } .style_bold { font-weight: bold; } .style_italic { font-style: italic;
I also forgot to mention, it works fine in Firefox and IE 7 but not in IE 6 (Or whatever version high schools use)
Its fine and that you would not see when you get into double digit post count and we had to do that for reason you probably also know it. :lipsrseal