Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Absolute Beginner Needing Help!

    Hi!

    I tried setting up my website with dreamweaver and came pretty far without knowing anything at all about html or css. But after having come across many problems in the design I was adviced to learn these and better understand how it all works...I was a little negative at first, but now it is seems pretty cool

    I checked out some tutorials on line, reading w3school etc, and they have been great! But...

    I already have a problem:

    I created a css style sheet with different div id ( as in one of the tutorials)
    for the body it looks like this:

    #body {
    width: 620px;

    }

    and in html the same part looks like this:

    <div id="body"></div>

    Now, the thing I wanted to do was to add a background image which only appears in this body field. Shall I add it in the css or html document?
    I tried like this in the css one:

    #body {
    width: 620px;
    background-image: url("collagebackgroundsmall3.jpg");

    }

    But it doesnt work, nothing happens on the html document...

    Do you know what I am doing wrong??

    This is probably a really silly question, but I really am a beginner:-)

    Thank you for readin!

    Lia

  • #2
    Regular Coder Samhain13's Avatar
    Join Date
    Aug 2008
    Location
    Pilipinas
    Posts
    169
    Thanks
    4
    Thanked 18 Times in 18 Posts
    You might want to try putting something inside the div first, make it like:

    Code:
    <div id="body">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Mauris volutpat. Aliquam ultrices, lacus consectetur dapibus
    lacinia, urna nulla adipiscing massa, ac pretium quam augue
    ut arcu. Phasellus tincidunt, nulla eu adipiscing pharetra,
    augue urna pharetra eros, eu gravida erat purus non
    lorem.</p>
    
    <p>Nulla porttitor, metus at vehicula elementum, ante justo
    facilisis felis, ut tempus dolor dui facilisis felis. Duis in nunc
    vel massa accumsan scelerisque. Fusce velit metus, dapibus
    vitae, congue ut, lacinia in, justo. In sed orci. Fusce est tellus,
    ultricies nec, congue nec, bibendum vitae, eros. Pellentesque
    sem. Praesent erat. Proin sed magna.</p>
    </div>
    Basically, putting something inside your div expands it vertically, giving the div an implicit height value. If the div doesn't have contents, its height is automatically set to zero pixels (depending on the browser, of course). Alternatively, you can supply an explicit height to your div, like:

    Code:
    #body {
    height: 480px;
    width: 620px;
    }
    This method though might cause some problems when it comes to cross-browser compatibility. IE6 auto-expands the div vertically if the content exceeds the height that you provided; other browsers like FF and Opera don't do this. So, using this method involves a bit more work in order to get things just right.

    Problems that you may encounter...
    1. the div is still no 620px wide: check to see if you've properly linked the CSS file to your HTML file.

    2. still no background image: check if you got PATH to the background image right. Unless your using an absolute PATH, like "http://mysite.com/myimage.jpg", the PATH should be relative to the CSS file, not the HTML file.
    Last edited by Samhain13; 04-30-2009 at 07:50 AM.
    I am a Man of Truth. I am a Free Human Person. I am a Peacemaker.
    ** Independent Multimedia Artist in Pasig **


  •  

    Posting Permissions

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