Results 1 to 4 of 4

Thread: css coding issue

  1. #1
    Join Date
    Jan 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy css coding issue

    I have a problem that needs some help,please.

    Code:
    <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN" 
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <style type="text/css" />
    body{background-image:url('wood.jpg');
    }
    img
    {
    position:absolute;
    left:100px;
    top:100px;
    height:450px;
    width:1000px;
    }
    </style>
    <meta http-equiv="Content-Type" 
            content="text/html; charset=UTF-8" />
    <meta name="Author" content="Armando" />
    <title>MainPage</title>
    </head>
    
    <body>
    <div class="wood" />
    <img src="wood.jpg" alt ="wooden background" width="10" height="10" />
    </div>
    <div class="ed" />
    <img src="ed.jpg" alt ="chalkboard" width="10" height="10" />
    
    </div>
    </body
    </html>
    here's the code that i have written so far. My problem is how can i put text written in chalk on the "chalkboard . Another thing is how can i place the word "enter" on the bottom center????
    Any help would be greatly appreciated!!!
    Last edited by jscheuer1; 01-18-2012 at 04:04 AM. Reason: Format

  2. #2
    Join Date
    Sep 2010
    Location
    Hi Stalker.
    Posts
    148
    Thanks
    16
    Thanked 3 Times in 3 Posts

    Default

    If that is your full page code, you have a big problem already.
    Code:
    <div class="wood" />
    <img src="wood.jpg" alt ="wooden background" width="10" height="10" />
    </div>
    <div class="ed" />
    <img src="ed.jpg" alt ="chalkboard" width="10" height="10" />
    For one, on the alt ="chalkboard" it should be alt="chalkboard" ...
    For two, you don't have a class for Wood nor ED... Here is an example of a class:
    In the head:
    Code:
    <style>
    .class1{
    height:20px;
    width:20px;
    position:absolute;
    }
    </style>
    You don't have a .wood{ or .ed{ o_o
    Daba! The Fantage-like website
    Virtual World in progress.
    Out of pure HTML, Javascript, and CSS. Oh, and poorly done Paint images.

  3. #3
    Join Date
    Jan 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    You might also want to slice your design again, and use those images as background-image in CSS on your containing divs.

    If they are wood texture and chalkboard texture, they should be able to be tiled. If they aren't tile-able then I'd suggest finding some new textures. This will make your design more efficient and more flexible.

    If you're using a set image for the background, what happens if it needs to scale?

    Whenever I'm coding CSS/HTML for a page I always ask myself: "What happens if I need to change that next week?"

    For text written in chalk, you're probably going to want to look at some web fonts. I'm not sure I've ever seen one that looks like chalk, but you may have some luck.

    Google WebFonts is a good (free) place to start, and they're pretty easy to use too!

  4. #4
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    0
    Thanked 5 Times in 5 Posts

    Default

    Hmm,
    First of all I think you should learn the selectors in css.

    If you want to associate a certain style to an element you can and should use classes.
    So doing a style like
    Code:
    .myclass {
    position: absolute;
    etc:etc;
    }
    you can then associate it with an html element like this
    Code:
    <div class="myclass"></div>
    There are a lot of selectors like:
    Code:
    * - all elements
    div - all divs
    img - all imgs
    div span - a span within a div
    div, span - <div> and a <span>
    div + span - <span> preceded by a <div>
    .class - this you already know, is for an element with class="class"
    div.class - and <div> with class="class"
    #id - an element with the id="id"

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •