SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: Div and CSS

  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div and CSS

    I'm just starting out and trying to figure out CSS. From google I couldn't really find much good basic information, so here I am.

    What I'm trying to do is set up background images using CSS and the div tag. I want 1 image to be my header, 1 image to the left for nav, 1 in the middle, 1 on the right and 1 as a footer.

    What I did for CSS was just this

    .headerdiv
    {
    background-image:
    url (header image)

    the header coding looks like this.

    <div class="header"><h1>This is my Header</h1></div>

    Any help would be much appreciated.

  2. #2
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You named the class as 'header' but in your css you called it .headerdiv. Just remove the div part. You don't need the div.

    Some people like to put div.header but that's not necessary either.

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't need anything else under the url right? Like positioning, width and height? I've sen that stuff on everything when I googled but i'm not sure if you need if when you have an image.

  4. #4
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,266
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yes you will need to give it at least a width value, and possibly a height as well depending on the size of the image.

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If the image is a specifc height, you will have to give it one, otherwise the container it's in will take on the height of whatever is in between its opening and closing tag.

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm still not getting anything to appear, their has to be something I'm doing wrong but not seeing. Here is the coding...

    <body>
    <div class="header"><h1>This is my Header</h1></div>

    <div class="menu">
    <h1>Menu</h1>
    </div>

    <div class="main"><h1>main</h1>
    </div>

    <div class="rightbar"><h1>right</h1></div>
    </body>

    the style sheet:

    .header
    {
    width:640;
    height:148;
    background-image:
    http://111.111.111.111/joe/xhtml/4/images ('header.gif');

  7. #7
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First, you need units for the width and height, such as px. Second, the location goes inside the parentheses. It's background-image: url('header.gif'); YOu do not replace url with the actual url.

  8. #8
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok well the header is shaped to 640x148 but I still don't get an image.

    .header
    {
    width:640px;
    height:148px;
    background-image:url('header.gif');
    }

  9. #9
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh my bad, I missread what howard said. I'll try again.

  10. #10
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alright that works, I can get the pictures in but now how do you put things in order? I have my header in place, the menu on the left...and next to that menu I want to put another picture in the back but instead of going next to it, it goes under the menu.


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
  •