Html programming help

Discussion in 'Web Design, HTML And CSS' started by PlasmaSnake, Dec 3, 2008.

  1. PlasmaSnake

    PlasmaSnake New Member

    Joined:
    Dec 3, 2008
    Messages:
    3
    Likes Received:
    0
    Trophy Points:
    0
    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 a moderator: Dec 3, 2008
  2. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
    Attachment removed. Please try posting the code in the post and use the needed BBCODE to format it
     
  3. PlasmaSnake

    PlasmaSnake New Member

    Joined:
    Dec 3, 2008
    Messages:
    3
    Likes Received:
    0
    Trophy Points:
    0
    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;
     
  4. PlasmaSnake

    PlasmaSnake New Member

    Joined:
    Dec 3, 2008
    Messages:
    3
    Likes Received:
    0
    Trophy Points:
    0
    I also forgot to mention, it works fine in Firefox and IE 7 but not in IE 6 (Or whatever version high schools use)
     
  5. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
    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
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice