Html programming help

PlasmaSnake's Avatar, Join Date: Dec 2008
Newbie Member
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)

Last edited by shabbir; 3Dec2008 at 19:22.. Reason: Attachment removed.
shabbir's Avatar, Join Date: Jul 2004
Go4Expert Founder
Attachment removed. Please try posting the code in the post and use the needed BBCODE to format it
PlasmaSnake's Avatar, Join Date: Dec 2008
Newbie Member
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;
PlasmaSnake's Avatar, Join Date: Dec 2008
Newbie Member
I also forgot to mention, it works fine in Firefox and IE 7 but not in IE 6 (Or whatever version high schools use)
shabbir's Avatar, Join Date: Jul 2004
Go4Expert Founder
Quote:
Originally Posted by PlasmaSnake View Post
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,
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.